|
@@ -0,0 +1,1190 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="attrModelEditorContainer"
|
|
|
|
+ class="container panel panel-ulli">
|
|
|
|
+ <div class="container-header"
|
|
|
|
+ style="height: 90px;">
|
|
|
|
+ <div>
|
|
|
|
+ <a-col :span="2"
|
|
|
|
+ class="shiti-img">
|
|
|
|
+ <div v-if="entIcon">
|
|
|
|
+ <img :src="entIcon"
|
|
|
|
+ alt="" />
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else><img :src="blankPicture"
|
|
|
|
+ alt="" /></div>
|
|
|
|
+ <!-- ../../../assets/kong-01.png -->
|
|
|
|
+ </a-col>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="panel-header shiti_panel-header"
|
|
|
|
+ style="padding-top: 0px;display: flex; top: 10px;position: relative;">
|
|
|
|
+ <a-icon type="dropbox" />
|
|
|
|
+ <div style="margin-right:40px;"
|
|
|
|
+ :style="{ 'color': !entity ? '#f5222d' : ''}">
|
|
|
|
+ {{ entity ? entity : '无名称' }}
|
|
|
|
+ <h5 style="color: #8c8c8c;">
|
|
|
|
+ <!-- <ellipsis :length="50"
|
|
|
|
+ tooltip>
|
|
|
|
+ {{ entMemo }}
|
|
|
|
+ </ellipsis> -->
|
|
|
|
+ </h5>
|
|
|
|
+ </div>
|
|
|
|
+ <a-icon type="slack" />
|
|
|
|
+ <div style="">
|
|
|
|
+ {{ entityClass }}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <a-button @click="edit"
|
|
|
|
+ style="margin-right: 10px;margin-left: 10px">基础信息更新</a-button>
|
|
|
|
+ <a-button v-if="false"
|
|
|
|
+ style="float: right;margin-right: 10px">运行</a-button>
|
|
|
|
+ <!-- <a-button v-if="!isModel" @click="goSta" style="float: right;margin-right: 10px">可视化统计</a-button>-->
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <a-divider /> -->
|
|
|
|
+ <a-row :gutter="10"
|
|
|
|
+ style=" display: flex;height: calc(100% - 90px);">
|
|
|
|
+ <!-- 左侧菜单 -->
|
|
|
|
+ <a-col :span="4"
|
|
|
|
+ class="left-menu"
|
|
|
|
+ style="height:100%;background:#f5f7fa;padding:0px">
|
|
|
|
+ <div @click="tabsChange('ELEM')"
|
|
|
|
+ class="left-menu-item"
|
|
|
|
+ :class="{ active: activePanel === 'ELEM' }">
|
|
|
|
+ 基本属性
|
|
|
|
+ </div>
|
|
|
|
+ <div @click="tabsChange('OTHER')"
|
|
|
|
+ class="left-menu-item"
|
|
|
|
+ :class="{ active: activePanel === 'OTHER' }">
|
|
|
|
+ 其他属性
|
|
|
|
+ </div>
|
|
|
|
+ <a-collapse v-model="activeColl"
|
|
|
|
+ :expandIconPosition="'right'"
|
|
|
|
+ class="left-menu-coll"
|
|
|
|
+ ref="collapse"
|
|
|
|
+ style="height: calc(100% - 90px);">
|
|
|
|
+ <a-collapse-panel key="relation"
|
|
|
|
+ header="关联关系"
|
|
|
|
+ :style="{ border: 'none' }">
|
|
|
|
+ <a-collapse v-model="activerelclsColl"
|
|
|
|
+ :expandIconPosition="'right'"
|
|
|
|
+ class="left-menu-coll"
|
|
|
|
+ ref="collapse">
|
|
|
|
+ <a-collapse-panel v-for="item in relclsLists"
|
|
|
|
+ :key="item.name"
|
|
|
|
+ :header="item.name"
|
|
|
|
+ :style="{ border: 'none' }">
|
|
|
|
+ <div class="menu-panel">
|
|
|
|
+ <p v-for="tab in item.children"
|
|
|
|
+ :key="tab.relClsId"
|
|
|
|
+ class="left-menu-item"
|
|
|
|
+ :class="{ active: activePanel === tab.relClsId }"
|
|
|
|
+ @click="tabsChange(tab.relClsId)">
|
|
|
|
+ <a-icon v-if="tab.direction === 'START'"
|
|
|
|
+ type="left-square" />
|
|
|
|
+ <a-icon v-if="tab.direction !== 'START'"
|
|
|
|
+ type="right-square" />
|
|
|
|
+ <!-- <ellipsis :length="50"
|
|
|
|
+ tooltip>
|
|
|
|
+ {{ tab.otherVName }}
|
|
|
|
+ <span slot="tooltipTitle"
|
|
|
|
+ v-if="tab.direction === 'START'">
|
|
|
|
+ {{ entityClass }}->{{ tab.relClsName }}->{{
|
|
|
|
+ tab.otherVName
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ <span slot="tooltipTitle"
|
|
|
|
+ v-else>
|
|
|
|
+ {{ tab.otherVName }}->{{ tab.relClsName }}->{{
|
|
|
|
+ entityClass
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ </ellipsis> -->
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </a-collapse-panel>
|
|
|
|
+ </a-collapse>
|
|
|
|
+ <div class="menu-panel">
|
|
|
|
+ <p v-for="tab in relclsList"
|
|
|
|
+ :key="tab.relClsId"
|
|
|
|
+ class="left-menu-item"
|
|
|
|
+ :class="{ active: activePanel === tab.relClsId }"
|
|
|
|
+ @click="tabsChange(tab.relClsId)">
|
|
|
|
+ <a-icon v-if="tab.direction === 'START'"
|
|
|
|
+ type="left-square" />
|
|
|
|
+ <a-icon v-if="tab.direction !== 'START'"
|
|
|
|
+ type="right-square" />
|
|
|
|
+ <!-- <ellipsis :length="50"
|
|
|
|
+ tooltip>
|
|
|
|
+ {{ tab.relClsName }}
|
|
|
|
+ <span slot="tooltipTitle"
|
|
|
|
+ v-if="tab.direction === 'START'">
|
|
|
|
+ {{ entityClass }}->{{ tab.relClsName }}->{{
|
|
|
|
+ tab.otherVName
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ <span slot="tooltipTitle"
|
|
|
|
+ v-else>
|
|
|
|
+ {{ tab.otherVName }}->{{ tab.relClsName }}->{{
|
|
|
|
+ entityClass
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ </ellipsis> -->
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </a-collapse-panel>
|
|
|
|
+
|
|
|
|
+ <a-collapse-panel v-if="ATTRCLS_GROUP_TAB"
|
|
|
|
+ key="attrcls"
|
|
|
|
+ header="复合属性"
|
|
|
|
+ :style="{ border: 'none' }">
|
|
|
|
+ <div class="menu-panel">
|
|
|
|
+ <p v-for="tab in attrcls"
|
|
|
|
+ :key="tab.relClsId"
|
|
|
|
+ class="left-menu-item"
|
|
|
|
+ :class="{ active: activePanel === tab.relClsId }"
|
|
|
|
+ @click="tabsChange(tab.relClsId)">
|
|
|
|
+ <a-icon v-if="tab.direction === 'START'"
|
|
|
|
+ type="left-square" />
|
|
|
|
+ <a-icon v-if="tab.direction !== 'START'"
|
|
|
|
+ type="right-square" />
|
|
|
|
+ <!-- <ellipsis :length="50"
|
|
|
|
+ tooltip>
|
|
|
|
+ {{ tab.relClsName }}
|
|
|
|
+ <span slot="tooltipTitle"
|
|
|
|
+ v-if="tab.direction === 'START'">
|
|
|
|
+ {{ entityClass }}->{{ tab.relClsName }}->{{
|
|
|
|
+ tab.otherVName
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ <span slot="tooltipTitle"
|
|
|
|
+ v-else>
|
|
|
|
+ {{ tab.otherVName }}->{{ tab.relClsName }}->{{
|
|
|
|
+ entityClass
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ </ellipsis> -->
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </a-collapse-panel>
|
|
|
|
+ </a-collapse>
|
|
|
|
+ </a-col>
|
|
|
|
+ <!-- 中间内容 -->
|
|
|
|
+ <a-col :span="10"
|
|
|
|
+ class="center-box">
|
|
|
|
+ <div v-if="activePanel === 'ELEM'"
|
|
|
|
+ style="height: 100%; overflow-y: auto;">
|
|
|
|
+ <!-- 基础属性 -->
|
|
|
|
+ <div class="card-content">
|
|
|
|
+ <h3 style="font-weight: 400;color: #1f2f3d; margin: 0px 0 20px;">
|
|
|
|
+ <a-icon type="info-circle"
|
|
|
|
+ class="warnIcons"
|
|
|
|
+ theme="filled" />
|
|
|
|
+ 基础属性
|
|
|
|
+ </h3>
|
|
|
|
+ <div class="card_elem">
|
|
|
|
+ <a-row v-for="item in ELEMAttr"
|
|
|
|
+ :key="item.attrClsId" :gutter="16">
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <span v-if="item.notNull"
|
|
|
|
+ style="color: #f5222d">*</span>
|
|
|
|
+ {{ item.attrClsName }}:
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="16">
|
|
|
|
+ <attr-edit-input :record="item"
|
|
|
|
+ ref="editorRef"
|
|
|
|
+ :pValue="item.attrValue"
|
|
|
|
+ @change="handleChange"></attr-edit-input>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 能力属性 -->
|
|
|
|
+ <div class="card-content">
|
|
|
|
+ <h3 style="font-weight: 400;color: #1f2f3d;margin: 0 0 20px;">
|
|
|
|
+ <a-icon type="info-circle"
|
|
|
|
+ class="warnIcons"
|
|
|
|
+ theme="filled" />
|
|
|
|
+ 能力属性
|
|
|
|
+ </h3>
|
|
|
|
+ <div class="card_elem">
|
|
|
|
+ <a-row v-if="version=='bf'" v-for="item in CIDXAttr"
|
|
|
|
+ :key="item.attrClsId" :gutter="16">
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <span v-if="item.notNull"
|
|
|
|
+ style="color: #f5222d">*</span>
|
|
|
|
+ {{ item.attrClsName }}:
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <attr-edit-input :record="item" ref="editorRef" :pValue="item.attrValue" @change="handleChange"></attr-edit-input>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="4">
|
|
|
|
+ <a-button @click="handlerRunFlow(item)">运行</a-button>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row v-else v-for="item in CIDXAttr"
|
|
|
|
+ :key="item.attrClsId" :gutter="16">
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <span v-if="item.notNull"
|
|
|
|
+ style="color: #f5222d">*</span>
|
|
|
|
+ {{ item.attrClsName }}:
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="16">
|
|
|
|
+ <attr-edit-input :record="item" ref="editorRef" :pValue="item.attrValue" @change="handleChange"></attr-edit-input>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 多媒体属性 -->
|
|
|
|
+ <div class="card-content"
|
|
|
|
+ style="margin-bottom: 40px">
|
|
|
|
+ <h3 style="font-weight: 400;color: #1f2f3d;margin: 0 0 20px;">
|
|
|
|
+ <a-icon type="info-circle"
|
|
|
|
+ class="warnIcons"
|
|
|
|
+ theme="filled" />
|
|
|
|
+ 多媒体属性
|
|
|
|
+ </h3>
|
|
|
|
+ <div class="card_elem">
|
|
|
|
+ <a-row v-for="mime in MIMEAttr"
|
|
|
|
+ :key="mime.attrClsId">
|
|
|
|
+ <a-col :span="10"> {{ mime.attrClsName }}: </a-col>
|
|
|
|
+ <a-col :span="14">
|
|
|
|
+ <p v-if="mime.attrID">
|
|
|
|
+ <a :href="
|
|
|
|
+ `${baseUrl}/attr/media/download/${mime.attrID}`
|
|
|
|
+ ">{{ mime.attrValue }}</a>
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ <a-button size="small"
|
|
|
|
+ type="primary"
|
|
|
|
+ style="margin-right:5px"
|
|
|
|
+ @click="uploadFile(mime)">上传</a-button>
|
|
|
|
+ <a-button v-if="mime.attrID"
|
|
|
|
+ @click="downloadFile(mime)"
|
|
|
|
+ size="small">下载</a-button>
|
|
|
|
+ </p>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="position: absolute; bottom: 10px;right: 10px">
|
|
|
|
+ <a-button @click="goBak"
|
|
|
|
+ style="float: right">完成</a-button>
|
|
|
|
+ <a-button type="primary"
|
|
|
|
+ @click="saveElem"
|
|
|
|
+ style="float: right;margin-right: 10px;">下一步</a-button>
|
|
|
|
+ <a-button @click="goBakNoSubmit"
|
|
|
|
+ style="float: right;margin-right: 10px;">取消</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="activePanel === 'OTHER'"
|
|
|
|
+ style="padding: 15px 20px 0 20px">
|
|
|
|
+ <h3>
|
|
|
|
+ <a-icon type="info-circle"
|
|
|
|
+ class="warnIcons"
|
|
|
|
+ theme="filled" />
|
|
|
|
+ 待审属性
|
|
|
|
+ </h3>
|
|
|
|
+ <div class="card_elem">
|
|
|
|
+ <none-attr-editor :entId="entId"
|
|
|
|
+ :clsId="clsId"
|
|
|
|
+ :tType="'NONE'"
|
|
|
|
+ :isModel="isModel"></none-attr-editor>
|
|
|
|
+ </div>
|
|
|
|
+ <h3>
|
|
|
|
+ <a-icon type="info-circle"
|
|
|
|
+ class="warnIcons"
|
|
|
|
+ theme="filled" />
|
|
|
|
+ 标签属性
|
|
|
|
+ </h3>
|
|
|
|
+ <div class="card_elem">
|
|
|
|
+ <tag-attr-editor :entId="entId"
|
|
|
|
+ :isModel="isModel"></tag-attr-editor>
|
|
|
|
+ </div>
|
|
|
|
+ <a-button @click="goBak"
|
|
|
|
+ style="float: right">完成</a-button>
|
|
|
|
+ <a-button type="primary"
|
|
|
|
+ @click="next"
|
|
|
|
+ style="float: right;margin-right: 10px;">下一步</a-button>
|
|
|
|
+ <a-button type="primary"
|
|
|
|
+ @click="prev"
|
|
|
|
+ style="float: right;margin-right: 10px;">上一步</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-for="(tab, $index) in rlsList"
|
|
|
|
+ :key="tab.relClsId">
|
|
|
|
+ <div v-if="activePanel === tab.relClsId"
|
|
|
|
+ style="padding: 15px 20px 0 20px;">
|
|
|
|
+ <attr-table ref="attrTableRef"
|
|
|
|
+ :entId="entId"
|
|
|
|
+ :clsId="clsId"
|
|
|
|
+ :otherVID="tab.otherVID"
|
|
|
|
+ :relClsId="tab.relClsId"
|
|
|
|
+ :direction="tab.direction"
|
|
|
|
+ :isModel="isModel"></attr-table>
|
|
|
|
+ <a-button type="primary"
|
|
|
|
+ @click="goBak"
|
|
|
|
+ style="float: right">完成</a-button>
|
|
|
|
+ <a-button v-if="$index < rlsList.length - 1"
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="next"
|
|
|
|
+ style="float: right;margin-right: 10px;">下一步
|
|
|
|
+ </a-button>
|
|
|
|
+ <a-button type="primary"
|
|
|
|
+ @click="prev"
|
|
|
|
+ style="float: right;margin-right: 10px;">上一步</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-col>
|
|
|
|
+ <!-- 右侧可视化图谱 -->
|
|
|
|
+ <a-col :span="10"
|
|
|
|
+ style="text-align: right;">
|
|
|
|
+ <a-button @click="openRightMenu"
|
|
|
|
+ style="margin-right: 5px;">筛选</a-button>
|
|
|
|
+ <a-button v-if="isModel === false || isModel === 'false'"
|
|
|
|
+ @click="goSta">可视化统计</a-button>
|
|
|
|
+ <chart-comp ref="chart"
|
|
|
|
+ style="max-height: 730px;"
|
|
|
|
+ @c_click="getInfoTooltip"
|
|
|
|
+ :isShowChart="true"
|
|
|
|
+ :enable="true"
|
|
|
|
+ :nodes="nodes"
|
|
|
|
+ :links="links"
|
|
|
|
+ :isDivisionColor="version=='bf'"
|
|
|
|
+ @reloadChart="reloadChart"></chart-comp>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <entity-details-tooltip class="chart_tooltip"
|
|
|
|
+ ref="entityRef"
|
|
|
|
+ :id="tooltip.entID"
|
|
|
|
+ :key="tooltip.entID"
|
|
|
|
+ v-if="tooltip.entID"
|
|
|
|
+ :throwClickDetail="true"
|
|
|
|
+ @clickDetail="onClickDetail"
|
|
|
|
+ style="position: absolute;z-index: 1;border-radius: 3px"
|
|
|
|
+ :style="{'left': tooltip.x, 'top': tooltip.y}"></entity-details-tooltip>
|
|
|
|
+ <link-details-tooltip class="chart_tooltip"
|
|
|
|
+ :id="tooltip.relID"
|
|
|
|
+ :key="tooltip.relID"
|
|
|
|
+ v-if="tooltip.relID"
|
|
|
|
+ style="position: absolute;z-index: 1;border-radius: 3px"
|
|
|
|
+ :style="{'left': tooltip.x, 'top': tooltip.y}">
|
|
|
|
+ </link-details-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import entityDetailsTooltip from '@/views/knowledge/common/entityDetails'
|
|
|
|
+ import linkDetailsTooltip from '@/views/knowledge/common/linkDetails'
|
|
|
|
+ import attrTable from "@/views/knowledge/graphEntity/relationClsAttrEditor";
|
|
|
|
+ import tagAttrEditor from "@/views/knowledge/common/tagEditor";
|
|
|
|
+ import noneAttrEditor from "@/views/knowledge/graphEntity/attrEditor";
|
|
|
|
+ // import Ellipsis from "@/components/Ellipsis";
|
|
|
|
+ import attrEditInput from "@/views/knowledge/common/attrEditInput";
|
|
|
|
+ import chartComp from "@/views/knowledge/common/chart";
|
|
|
|
+
|
|
|
|
+ import { getEntityListByEntityId } from '@/api/graph/statisticalMap'
|
|
|
|
+ import { getRelationClsByEntCls, getEntityDetailById, saveEntAttr, getRelationEnt, getChart } from '@/api/graph/entity'
|
|
|
|
+ import { getEntityAttrById, runFlow } from '@/api/graph/entityAttrEditor'
|
|
|
|
+
|
|
|
|
+ const version = 'base' // 版本控制
|
|
|
|
+ const directionsList = [
|
|
|
|
+ { label: "出度", value: "OUT", checked: true },
|
|
|
|
+ { label: "入度", value: "IN", checked: true },
|
|
|
|
+ ];
|
|
|
|
+ import eventBus from "@/plugins/knowledge/eventBus";
|
|
|
|
+ export default {
|
|
|
|
+ name: "attrModelEditor",
|
|
|
|
+ components: {
|
|
|
|
+ attrTable,
|
|
|
|
+ tagAttrEditor,
|
|
|
|
+ noneAttrEditor,
|
|
|
|
+ attrEditInput,
|
|
|
|
+ chartComp,
|
|
|
|
+ entityDetailsTooltip,
|
|
|
|
+ linkDetailsTooltip
|
|
|
|
+ },
|
|
|
|
+ events: {
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ version: version,
|
|
|
|
+ // 权限控制
|
|
|
|
+ ATTRCLS_GROUP_TAB: false,
|
|
|
|
+ baseUrl: window.global.baseUrl(),
|
|
|
|
+ entity: "",
|
|
|
|
+ entityClass: "",
|
|
|
|
+ clsId: "",
|
|
|
|
+ entId: "",
|
|
|
|
+ entIcon: "",
|
|
|
|
+ entMemo: "",
|
|
|
|
+ isModel: false, // 是否是模板,默认为实体
|
|
|
|
+ rlsList: [],
|
|
|
|
+ attrcls: [], // 复合属性列表
|
|
|
|
+ relclsList: [], // 含有多个关系类的关系列表
|
|
|
|
+ activerelclsColl: "",
|
|
|
|
+ relclsLists: [], // 含有单个关系类的关系列表
|
|
|
|
+ ELEMAttr: [],
|
|
|
|
+ CIDXAttr: [],
|
|
|
|
+ MIMEAttr: [],
|
|
|
|
+ tabs: ["ELEM", "OTHER"],
|
|
|
|
+ tabCount: 0,
|
|
|
|
+ activePanel: "ELEM",
|
|
|
|
+ activeColl: "",
|
|
|
|
+ searchLeftMenu: "",
|
|
|
|
+ // 以下是画可视化图需要的变量
|
|
|
|
+ nodes: [],
|
|
|
|
+ links: [],
|
|
|
|
+ entityClassList: [],
|
|
|
|
+ linkClassList: [],
|
|
|
|
+ degreeCache: 1,
|
|
|
|
+ entityClassCache: undefined,
|
|
|
|
+ linkClassCache: undefined,
|
|
|
|
+ directionCache: undefined,
|
|
|
|
+ directionsList,
|
|
|
|
+ tooltip: { entID: false, relID: false },// 点击的实体或关系的悬浮层
|
|
|
|
+
|
|
|
|
+ entName: '',
|
|
|
|
+ ruleList: {},
|
|
|
|
+ blankPicture: require('@/assets/knowledge/kong-01.png')
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ leftMenuList: function () {
|
|
|
|
+ return this.rlsList.filter((item) => {
|
|
|
|
+ return item.relClsName.indexOf(this.searchLeftMenu) > -1;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ mounted () {
|
|
|
|
+
|
|
|
|
+ this.clsId = this.$route.params.classId;
|
|
|
|
+ this.entId = this.$route.params.entityId;
|
|
|
|
+ this.isModel = this.$route.query.isModel;
|
|
|
|
+ this.getRelList(); // 获取关系类列表(复合属性)
|
|
|
|
+ this.getEntityInfo(); // 获取实体信息
|
|
|
|
+ this.getELEMAttr(); // 获取基础属性
|
|
|
|
+ this.getCIDXAttr(); // 获取能力属性
|
|
|
|
+ this.getMIMEAttr(); // 获取多媒体属性
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.drawChart();
|
|
|
|
+ });
|
|
|
|
+ const vm = this
|
|
|
|
+ eventBus.eventBus.$on('graph:exportData', function () {
|
|
|
|
+ vm.$refs.chart.exportChartData()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ destroyed () {
|
|
|
|
+ eventBus.eventBus.$off('graph:exportData')
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 根据ID获取实力列表和关系列表
|
|
|
|
+ * @params id: 实体ID _string,
|
|
|
|
+ * @params degree: 度数(跳) _string,
|
|
|
|
+ * entityClassList: 实体类ID列表 _string,linkClassList:关系类ID列表 _string
|
|
|
|
+ * */
|
|
|
|
+ getEntityList (id, degree, entityClassList, linkClassList, direction) {
|
|
|
|
+ // 根据搜索记录获取实力列表,以及实体类、关系类列表
|
|
|
|
+ return getEntityListByEntityId(
|
|
|
|
+ id,
|
|
|
|
+ degree,
|
|
|
|
+ entityClassList,
|
|
|
|
+ linkClassList,
|
|
|
|
+ direction
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ getRelList () {
|
|
|
|
+ const vm = this;
|
|
|
|
+ const relclsCache = {};
|
|
|
|
+ getRelationClsByEntCls(this.clsId).then((res) => {
|
|
|
|
+ res.data.forEach((item) => {
|
|
|
|
+ if (vm.ATTRCLS_GROUP_TAB) {
|
|
|
|
+ // 如果有权限控制
|
|
|
|
+ if (item.relClsName.slice(item.relClsName.length - 2) !== "关系" && item.relClsName.slice(item.relClsName.length - 2) !== "GX") {
|
|
|
|
+ //从关系类中拆分复合属性
|
|
|
|
+ // 这个是复合属性
|
|
|
|
+ this.attrcls.push(item);
|
|
|
|
+ } else {
|
|
|
|
+ // 这些是关系类
|
|
|
|
+ if (typeof relclsCache[item.relClsName] === "undefined") {
|
|
|
|
+ relclsCache[item.relClsName] = [];
|
|
|
|
+ }
|
|
|
|
+ relclsCache[item.relClsName].push(item);
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ // 如果没有权限控制或者没有权限(默认的就是没有权限,因为咱们自己用不上这个复合属性)
|
|
|
|
+ if (typeof relclsCache[item.relClsName] === "undefined") {
|
|
|
|
+ relclsCache[item.relClsName] = [];
|
|
|
|
+ }
|
|
|
|
+ relclsCache[item.relClsName].push(item);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ for (const key in relclsCache) {
|
|
|
|
+ // 拆分关系类里的中只有一个关系类和有多个关系类的情况
|
|
|
|
+ const value = relclsCache[key];
|
|
|
|
+ if (value.length > 1) {
|
|
|
|
+ this.relclsLists.push({
|
|
|
|
+ name: key,
|
|
|
|
+ children: value,
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.relclsList.push(value[0]);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.relclsLists.forEach((item) => {
|
|
|
|
+ item.children.forEach((_item) => {
|
|
|
|
+ vm.tabs.push(_item.relClsId);
|
|
|
|
+ vm.rlsList.push(_item);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ this.relclsList.forEach((item) => {
|
|
|
|
+ vm.tabs.push(item.relClsId);
|
|
|
|
+ });
|
|
|
|
+ this.attrcls.forEach((item) => {
|
|
|
|
+ vm.tabs.push(item.relClsId);
|
|
|
|
+ });
|
|
|
|
+ vm.rlsList = this.rlsList.concat(this.relclsList.concat(this.attrcls));
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ edit () {
|
|
|
|
+ this.$open(
|
|
|
|
+ "addEntityModal",
|
|
|
|
+ {
|
|
|
|
+ title: this.isModel ? "编辑模板" : "编辑实体",
|
|
|
|
+ isLink: true, // 添加路由后改变路由
|
|
|
|
+ isModel: this.isModel,
|
|
|
|
+ entityName: this.entity, // 实体名字
|
|
|
|
+ entityMemo: this.entMemo,
|
|
|
|
+ entClsIcon: this.entIcon,
|
|
|
|
+ entityId: this.entId, // 实体id
|
|
|
|
+ },
|
|
|
|
+ function (data) {
|
|
|
|
+ if (data) {
|
|
|
|
+ this.getEntityInfo();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ // 悬浮框内点击详情
|
|
|
|
+ onClickDetail (info) {
|
|
|
|
+ const baseUrl = this.$getBaseUrl()
|
|
|
|
+ if (info) window.open(baseUrl + '/model/quota/entity_model/' + info.entID + '?page=1&clsName=' + info.entClsName + '&isModel=false')
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 获取实体或关系的悬浮框
|
|
|
|
+ * @params event:zoomchart返回的event,args:zoomchart返回的变量,包含了当前点击的实体或关系的数据
|
|
|
|
+ * */
|
|
|
|
+ getInfoTooltip (event, args) {
|
|
|
|
+ const vm = this
|
|
|
|
+ this.$set(this.tooltip, 'x', event.pageX + 'px')
|
|
|
|
+ this.$set(this.tooltip, 'y', event.pageY + 'px')
|
|
|
|
+ if (args.clickNode) {
|
|
|
|
+ vm.tooltip.entID = args.clickNode.data.entID
|
|
|
|
+ vm.tooltip.relID = false
|
|
|
|
+ } else if (args.clickLink) {
|
|
|
|
+ vm.tooltip.entID = false
|
|
|
|
+ vm.tooltip.relID = args.clickLink.data.relID
|
|
|
|
+ } else {
|
|
|
|
+ vm.tooltip.entID = false
|
|
|
|
+ vm.tooltip.relID = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ goSta () {
|
|
|
|
+ window.location.href = `#/sta?entId=${this.entId}&entName=${this.entity}`;
|
|
|
|
+ },
|
|
|
|
+ async goBak () {
|
|
|
|
+ let saveStatus = true;
|
|
|
|
+ if (this.activePanel === "ELEM") {
|
|
|
|
+ saveStatus = await this.saveElem(true);
|
|
|
|
+ }
|
|
|
|
+ if (saveStatus) {
|
|
|
|
+ this.goBakNoSubmit();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ goBakNoSubmit () {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ name: "class_entity_v2",
|
|
|
|
+ params: { classId: this.clsId },
|
|
|
|
+ query: {
|
|
|
|
+ ...this.$route.query,
|
|
|
|
+ clsName: this.entityClass,
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getEntityInfo () {
|
|
|
|
+ const vm = this;
|
|
|
|
+ getEntityDetailById(this.entId, this.isModel).then((res) => {
|
|
|
|
+ vm.entity = res.data.entName;
|
|
|
|
+ vm.entityClass = res.data.entClsName;
|
|
|
|
+ vm.entMemo = res.data.entMemo;
|
|
|
|
+ vm.entIcon = res.data.entIcon || res.data.entClsIcon;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 获取基础和高级的属性
|
|
|
|
+ getELEMAttr () {
|
|
|
|
+ getEntityAttrById(this.entId, { attrType: "ELEM" }, this.isModel)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ res.data.forEach((item) => {
|
|
|
|
+ const rule = item.domain;
|
|
|
|
+ if (rule) {
|
|
|
|
+ const jsonRule = JSON.parse(rule);
|
|
|
|
+ item.required =
|
|
|
|
+ jsonRule.domainKey !== null ||
|
|
|
|
+ (jsonRule.minValue !== null && jsonRule.maxValue !== null);
|
|
|
|
+ } else {
|
|
|
|
+ item.required = false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.ELEMAttr = res.data;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 获取基础和高级的属性
|
|
|
|
+ getCIDXAttr () {
|
|
|
|
+ getEntityAttrById(this.entId, { attrType: "CIDX" }, this.isModel)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.CIDXAttr = res.data;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getMIMEAttr () {
|
|
|
|
+ getEntityAttrById(this.entId, { attrType: "MIME" }, this.isModel)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.MIMEAttr = res.data;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 属性中切换下一项
|
|
|
|
+ next () {
|
|
|
|
+ this.tabCount++;
|
|
|
|
+ this.activePanel = this.tabs[this.tabCount];
|
|
|
|
+ const count = this.tabCount;
|
|
|
|
+ const varLength = 2; // 基础属性+能力属性的长度
|
|
|
|
+ const relclsLength2 = this.relclsList.length; // 单个关系类的长度
|
|
|
|
+ const attrclsLength = this.attrcls.length; // 复合属性的长度
|
|
|
|
+ let relclsLength = 0; // 多个关系类的长度
|
|
|
|
+ this.relclsLists.forEach((item) => {
|
|
|
|
+ relclsLength += item.children.length;
|
|
|
|
+ });
|
|
|
|
+ // 如果当前在关系类中
|
|
|
|
+ if (
|
|
|
|
+ count >= varLength &&
|
|
|
|
+ this.tabCount <= relclsLength + relclsLength2 + varLength
|
|
|
|
+ ) {
|
|
|
|
+ this.activeColl = "relation";
|
|
|
|
+ // 当前在多个关系类中
|
|
|
|
+ if (count >= varLength && count < relclsLength + varLength) {
|
|
|
|
+ let childLength = 0;
|
|
|
|
+ let relclsIndex = 0;
|
|
|
|
+ this.relclsLists.forEach((relcls, index) => { });
|
|
|
|
+ for (let i = 0; i < this.relclsLists.length; i++) {
|
|
|
|
+ const relcls = this.relclsLists[i];
|
|
|
|
+ childLength += relcls.children.length;
|
|
|
|
+ if (count > childLength + varLength - 1) {
|
|
|
|
+ relclsIndex = i + 1;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.activerelclsColl = this.relclsLists[relclsIndex].name;
|
|
|
|
+ } else if (count >= relclsLength + varLength) {
|
|
|
|
+ // 当前在单个关系类中
|
|
|
|
+ this.activerelclsColl = "";
|
|
|
|
+ }
|
|
|
|
+ } else if (count >= relclsLength + relclsLength2 + varLength) {
|
|
|
|
+ // 当前在复合属性中
|
|
|
|
+ this.activeColl = "attrcls";
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 属性中切换上一项
|
|
|
|
+ prev () {
|
|
|
|
+ this.tabCount--;
|
|
|
|
+ this.activePanel = this.tabs[this.tabCount];
|
|
|
|
+ const count = this.tabCount;
|
|
|
|
+ const varLength = 2; // 基础属性+能力属性的长度
|
|
|
|
+ const relclsLength2 = this.relclsList.length; // 单个关系类的长度
|
|
|
|
+ const attrclsLength = this.attrcls.length; // 复合属性的长度
|
|
|
|
+ let relclsLength = 0; // 多个关系类的长度
|
|
|
|
+ this.relclsLists.forEach((item) => {
|
|
|
|
+ relclsLength += item.children.length;
|
|
|
|
+ });
|
|
|
|
+ if (count < varLength) {
|
|
|
|
+ this.activeColl = "";
|
|
|
|
+ } else if (
|
|
|
|
+ count >= varLength &&
|
|
|
|
+ count < relclsLength + varLength + relclsLength2
|
|
|
|
+ ) {
|
|
|
|
+ this.activeColl = "relation";
|
|
|
|
+ // 当前在多个关系类中
|
|
|
|
+ if (count >= varLength && count < relclsLength + varLength) {
|
|
|
|
+ let childLength = 0;
|
|
|
|
+ let relclsIndex = 0;
|
|
|
|
+ this.relclsLists.forEach((relcls, index) => { });
|
|
|
|
+ for (let i = 0; i < this.relclsLists.length; i++) {
|
|
|
|
+ const relcls = this.relclsLists[i];
|
|
|
|
+ childLength += relcls.children.length;
|
|
|
|
+ if (count > childLength + varLength - 1) {
|
|
|
|
+ relclsIndex = i + 1;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.activerelclsColl = this.relclsLists[relclsIndex].name;
|
|
|
|
+ } else if (count >= relclsLength + varLength) {
|
|
|
|
+ // 当前在单个关系类中
|
|
|
|
+ this.activerelclsColl = "";
|
|
|
|
+ }
|
|
|
|
+ } else if (count >= relclsLength + relclsLength2 + varLength) {
|
|
|
|
+ // 当前在复合属性中
|
|
|
|
+ this.activeColl = "attrcls";
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // tab标签切换时的回调
|
|
|
|
+ tabsChange (key) {
|
|
|
|
+ this.tabCount = this.tabs.indexOf(key);
|
|
|
|
+ this.activePanel = key;
|
|
|
|
+ if (key === "ELEM") {
|
|
|
|
+ this.getELEMAttr();
|
|
|
|
+ this.getCIDXAttr();
|
|
|
|
+ } else if (key === "OTHER") {
|
|
|
|
+ } else {
|
|
|
|
+ if (
|
|
|
|
+ this.$refs.attrTableRef &&
|
|
|
|
+ this.$refs.attrTableRef[this.tabs.indexOf(key) - 2]
|
|
|
|
+ ) {
|
|
|
|
+ this.$refs.attrTableRef[this.tabs.indexOf(key) - 2].getAttr();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ uploadFile (mime) {
|
|
|
|
+ this.$open(
|
|
|
|
+ "uploadMIMEFileModal",
|
|
|
|
+ {
|
|
|
|
+ entId: this.entId,
|
|
|
|
+ attrClsId: mime.attrClsId,
|
|
|
|
+ },
|
|
|
|
+ function (data) {
|
|
|
|
+ if (data) {
|
|
|
|
+ this.getMIMEAttr();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ downloadFile (mime) {
|
|
|
|
+ window.location = `${window.global.baseUrl()}/attr/media/download/${mime.attrID
|
|
|
|
+ }`;
|
|
|
|
+ },
|
|
|
|
+ // 保存能力属性/基础属性
|
|
|
|
+ async saveElem (back) {
|
|
|
|
+ let check = true;
|
|
|
|
+ const editorRefs = this.$refs.editorRef;
|
|
|
|
+ if (editorRefs) {
|
|
|
|
+ editorRefs.forEach((ref) => {
|
|
|
|
+ const checkResult = ref.check();
|
|
|
|
+ if (!checkResult) {
|
|
|
|
+ check = checkResult;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ if (!check) {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ let count = 0;
|
|
|
|
+ // const content = {
|
|
|
|
+ // entId: this.entId,
|
|
|
|
+ // isModel: this.isModel,
|
|
|
|
+ // };
|
|
|
|
+ // this.CIDXAttr.forEach((item) => {
|
|
|
|
+ // if (item.attrValue_z) {
|
|
|
|
+ // content["list[" + count + "].attrClsId"] = item.attrClsId;
|
|
|
|
+ // content["list[" + count + "].attrId"] = item.attrID;
|
|
|
|
+ // content["list[" + count + "].attrValue"] = item.attrValue_z;
|
|
|
|
+ // content["list[" + count + "].entAndAttrType"] = "CIDX";
|
|
|
|
+ // count++;
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // this.ELEMAttr.forEach((item) => {
|
|
|
|
+ // if (item.attrValue_z) {
|
|
|
|
+ // content["list[" + count + "].attrClsId"] = item.attrClsId;
|
|
|
|
+ // content["list[" + count + "].attrId"] = item.attrID;
|
|
|
|
+ // content["list[" + count + "].attrValue"] = item.attrValue_z;
|
|
|
|
+ // content["list[" + count + "].entAndAttrType"] = "ELEM";
|
|
|
|
+ // count++;
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ let attrs = [];
|
|
|
|
+ this.CIDXAttr.forEach((item) => {
|
|
|
|
+ if (item.attrValue_z) {
|
|
|
|
+ let attr = {
|
|
|
|
+ attrID: item.attrID,
|
|
|
|
+ attrValue: item.attrValue_z,
|
|
|
|
+ entId: this.entId,
|
|
|
|
+ attrClsId: item.attrClsId,
|
|
|
|
+ entAndAttrType: "CIDX"
|
|
|
|
+ }
|
|
|
|
+ attrs.push(attr)
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.ELEMAttr.forEach((item) => {
|
|
|
|
+ if (item.attrValue_z) {
|
|
|
|
+ let attr = {
|
|
|
|
+ attrID: item.attrID,
|
|
|
|
+ attrValue: item.attrValue_z,
|
|
|
|
+ entId: this.entId,
|
|
|
|
+ attrClsId: item.attrClsId,
|
|
|
|
+ entAndAttrType: "ELEM"
|
|
|
|
+ }
|
|
|
|
+ attrs.push(attr)
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if (attrs.length > 0) {
|
|
|
|
+ return saveEntAttr(attrs).then((res) => {
|
|
|
|
+ if (res) {
|
|
|
|
+ this.$notification["success"]({
|
|
|
|
+ message: "属性保存成功",
|
|
|
|
+ });
|
|
|
|
+ if (back === true) {
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+ this.next();
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ if (back === true) {
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+ this.next();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 表单输入框改变的方法
|
|
|
|
+ handleChange (item, value) {
|
|
|
|
+ item.attrValue_z = value;
|
|
|
|
+ },
|
|
|
|
+ reloadChart (nodes, links) {
|
|
|
|
+ this.$refs.chart.drawChart(this.entId, nodes, links);
|
|
|
|
+ },
|
|
|
|
+ drawChart () {
|
|
|
|
+ if (this.isModel === "false" || this.isModel === false) {
|
|
|
|
+ this.getEntityList(this.entId, 1).then((resp) => {
|
|
|
|
+ this.$refs.chart.drawChart(
|
|
|
|
+ this.entId,
|
|
|
|
+ resp.data.entListVO,
|
|
|
|
+ resp.data.relListVO
|
|
|
|
+ );
|
|
|
|
+ this.nodes = data.entListVO;
|
|
|
|
+ this.links = data.relListVO;
|
|
|
|
+ this.entityClassList = resp.data.entClsListVO;
|
|
|
|
+ this.linkClassList = resp.data.relClsListVO;
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.showChart = true;
|
|
|
|
+ getRelationEnt(this.entId, 1, "", "BOTH", true).then((res) => {
|
|
|
|
+ this.$refs.chart.drawChart(this.entId, res.entListVO, res.relListVO);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 调用右侧菜单,传入实体类列表_entityClassList、关系类列表_relationClassList
|
|
|
|
+ * */
|
|
|
|
+ // openRightMenu () {
|
|
|
|
+ // if (this.entityClassCache !== undefined) {
|
|
|
|
+ // this.entityClassList.forEach((v) => {
|
|
|
|
+ // if (this.entityClassCache.indexOf(v.entClsID) > -1) {
|
|
|
|
+ // v.checked = true;
|
|
|
|
+ // } else {
|
|
|
|
+ // v.checked = false;
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+ // if (this.linkClassCache !== undefined) {
|
|
|
|
+ // this.linkClassList.forEach((v) => {
|
|
|
|
+ // if (this.linkClassCache.indexOf(v.relClsID) > -1) {
|
|
|
|
+ // v.checked = true;
|
|
|
|
+ // } else {
|
|
|
|
+ // v.checked = false;
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+ // if (this.directionCache !== undefined) {
|
|
|
|
+ // this.directionsList.forEach((v) => {
|
|
|
|
+ // if (this.directionCache.indexOf(v.value) > -1) {
|
|
|
|
+ // v.checked = true;
|
|
|
|
+ // } else {
|
|
|
|
+ // v.checked = false;
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+ // this.$open(
|
|
|
|
+ // "rightMenuDrawer",
|
|
|
|
+ // {
|
|
|
|
+ // entityClassList: this.entityClassList,
|
|
|
|
+ // linkClassList: this.linkClassList,
|
|
|
|
+ // degreeCache: this.degreeCache,
|
|
|
|
+ // directionList: this.directionsList,
|
|
|
|
+ // },
|
|
|
|
+ // function (response) {
|
|
|
|
+ // if (response !== false) {
|
|
|
|
+ // let _data = response.data ? response.data : {};
|
|
|
|
+ // this.entityClassCache = _data.entityIds;
|
|
|
|
+ // this.linkClassCache = _data.linkIds;
|
|
|
|
+ // this.degreeCache = _data.degree;
|
|
|
|
+ // this.directionCache = _data.direction;
|
|
|
|
+ // this.getEntityList(
|
|
|
|
+ // this.entId,
|
|
|
|
+ // _data.degree,
|
|
|
|
+ // _data.entityIds,
|
|
|
|
+ // _data.linkIds,
|
|
|
|
+ // _data.direction
|
|
|
|
+ // ).then((__data) => {
|
|
|
|
+ // this.entityClassList = __data.entClsListVO;
|
|
|
|
+ // this.linkClassList = __data.relClsListVO;
|
|
|
|
+ // this.nodes = __data.entListVO;
|
|
|
|
+ // this.links = __data.relListVO;
|
|
|
|
+ // this.directionsList.forEach((v) => {
|
|
|
|
+ // v.checked = true;
|
|
|
|
+ // });
|
|
|
|
+ // this.$refs.chart.reDraw(
|
|
|
|
+ // this.entId,
|
|
|
|
+ // __data.entListVO,
|
|
|
|
+ // __data.relListVO
|
|
|
|
+ // );
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // );
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ openRightMenu() {
|
|
|
|
+ if (this.entityClassCache !== undefined) {
|
|
|
|
+ this.entityClassList.forEach((v) => {
|
|
|
|
+ if (this.entityClassCache.indexOf(v.entClsID) > -1) {
|
|
|
|
+ v.checked = true
|
|
|
|
+ } else {
|
|
|
|
+ v.checked = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (this.linkClassCache !== undefined) {
|
|
|
|
+ this.linkClassList.forEach((v) => {
|
|
|
|
+ if (this.linkClassCache.indexOf(v.relClsID) > -1) {
|
|
|
|
+ v.checked = true
|
|
|
|
+ } else {
|
|
|
|
+ v.checked = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (this.directionCache !== undefined) {
|
|
|
|
+ this.directionsList.forEach((v) => {
|
|
|
|
+ if (this.directionCache.indexOf(v.value) > -1) {
|
|
|
|
+ v.checked = true
|
|
|
|
+ } else {
|
|
|
|
+ v.checked = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.$open(
|
|
|
|
+ 'rightMenuDrawer',
|
|
|
|
+ {
|
|
|
|
+ entityClassList: this.entityClassList,
|
|
|
|
+ linkClassList: this.linkClassList,
|
|
|
|
+ degreeCache: this.degreeCache,
|
|
|
|
+ directionList: this.directionsList,
|
|
|
|
+ ruleList: this.ruleList,
|
|
|
|
+ delEntityList: this.delEntIds
|
|
|
|
+ },
|
|
|
|
+ function(response) {
|
|
|
|
+ if (response !== false) {
|
|
|
|
+ this.spinning = true
|
|
|
|
+ let _data = response.data ? response.data : {}
|
|
|
|
+ this.entityClassCache = _data.entityIds //参数
|
|
|
|
+ this.linkClassCache = _data.linkIds //参数
|
|
|
|
+ this.degreeCache = _data.degree //参数
|
|
|
|
+ this.directionCache = _data.direction//方向参数
|
|
|
|
+ this.ruleList = _data.ruleList //高级筛选
|
|
|
|
+ let entConditionQueries = [] //高级筛选-参数
|
|
|
|
+ let delEntIds = _data.delEntityIds //被删除的id-参数
|
|
|
|
+
|
|
|
|
+ this.delEntIds = _data.delEntList
|
|
|
|
+ //高级筛选参数拼接
|
|
|
|
+ if(!!this.ruleList && JSON.stringify(this.ruleList)!='{}'){
|
|
|
|
+ for(let k in this.ruleList){
|
|
|
|
+ let item={}
|
|
|
|
+ item.entClsID = k;
|
|
|
|
+ // item.entName = decodeURI(getQueryVariable('entName'));
|
|
|
|
+ let arr = this.ruleList[k]
|
|
|
|
+ let attrFilters = []
|
|
|
|
+ arr.forEach((v,i) => {
|
|
|
|
+ let innerItem = {
|
|
|
|
+ attrClsId: v.attrClsId,
|
|
|
|
+ attrValue: v.attrValue,
|
|
|
|
+ conditionType: v.conditionType,
|
|
|
|
+ operatorType: v.operatorType,
|
|
|
|
+ valueType: v.valueType
|
|
|
|
+ }
|
|
|
|
+ attrFilters.push(innerItem)
|
|
|
|
+ })
|
|
|
|
+ item['attrFilters']=attrFilters
|
|
|
|
+ entConditionQueries.push(item)
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ if(!this.entityClassCache){
|
|
|
|
+ entConditionQueries=[]
|
|
|
|
+ }else{
|
|
|
|
+ this.entityClassCache.split(',').forEach(item => {
|
|
|
|
+ let innerItem = {
|
|
|
|
+ entClsID: item,
|
|
|
|
+ attrFilters: []
|
|
|
|
+ }
|
|
|
|
+ entConditionQueries.push(innerItem)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //方向参数拼接,如果为 in,out,则为both
|
|
|
|
+ let direction = ''
|
|
|
|
+ if(!!this.directionCache && this.directionCache.split(',').length==2){
|
|
|
|
+ direction = 'BOTH'
|
|
|
|
+ }else{
|
|
|
|
+ direction = this.directionCache;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //高级搜索-----所有参数拼接
|
|
|
|
+ let data = {
|
|
|
|
+ degree: this.degreeCache,
|
|
|
|
+ delEntIds: delEntIds,
|
|
|
|
+ direction: direction,
|
|
|
|
+ entId: this.entId,
|
|
|
|
+ entName: this.entName,
|
|
|
|
+ relClsIDs: this.linkClassCache,
|
|
|
|
+ limitNum: 3,
|
|
|
|
+ isModel: false,
|
|
|
|
+ entConditionQueries: entConditionQueries
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ getChart(data).then(__data => {
|
|
|
|
+ this.entityClassList = __data.entClsListVO
|
|
|
|
+ this.linkClassList = __data.relClsListVO
|
|
|
|
+ this.nodes = __data.entListVO
|
|
|
|
+ this.links = __data.relListVO
|
|
|
|
+ this.directionsList.forEach((v) => {
|
|
|
|
+ v.checked = true
|
|
|
|
+ })
|
|
|
|
+ this.$refs.chart.reDraw(
|
|
|
|
+ this.entId,
|
|
|
|
+ __data.entListVO,
|
|
|
|
+ __data.relListVO
|
|
|
|
+ )
|
|
|
|
+ this.spinning = false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ // 运行测试按钮
|
|
|
|
+ handlerRunFlow(data) {
|
|
|
|
+ const vm = this
|
|
|
|
+ let attrClsId = data.attrClsId
|
|
|
|
+ runFlow(this.entId, attrClsId, this.isModel).then((data) => {
|
|
|
|
+ vm.$message.success('计算流程启动成功');
|
|
|
|
+ this.getCIDXAttr(); // 获取能力属性
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ };
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+ .ant-collapse-content > .ant-collapse-content-box {
|
|
|
|
+ padding: 0px !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-collapse-content > .ant-collapse-content-box > .menu-panel {
|
|
|
|
+ max-height: 300px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .shu-xing {
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ #attrModelEditorContainer {
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ #attrModelEditorContainer .left-menu {
|
|
|
|
+ padding-right: 0;
|
|
|
|
+ /* border-right: 1px solid #ddd; */
|
|
|
|
+ /* background: #f5f7fa; */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-menu-item {
|
|
|
|
+ padding: 12px 16px;
|
|
|
|
+ /* margin: 0 0 16px 0; */
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-collapse-header:hover {
|
|
|
|
+ background: #0aa67985;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-menu-item:hover {
|
|
|
|
+ color: #fff;
|
|
|
|
+ background: #0aa67985;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-menu-item {
|
|
|
|
+ margin-bottom: 0px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-menu-item.active {
|
|
|
|
+ background: #0aa679;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-menu .left-menu-coll {
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .left-menu .left-menu-coll .ant-collapse-content {
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #attrModelEditorContainer .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
|
|
|
|
+ text-align: left;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-content {
|
|
|
|
+ margin: 15px 20px 0 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card_elem {
|
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ max-height: 255px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .let_elem {
|
|
|
|
+ text-align: right;
|
|
|
|
+ color: #999;
|
|
|
|
+ height: 32px;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .warnIcons {
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ color: #0aa679 !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .panel-ulli .ant-tabs-nav .ant-tabs-tab-active {
|
|
|
|
+ background: #0aa679;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .panel-ulli .ant-tabs-tab {
|
|
|
|
+ transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .center-box {
|
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
|
+ padding: 0 !important;
|
|
|
|
+ }
|
|
|
|
+</style>
|