sprinboot+vue集成neo4j图数据库

王大锤43912024-04-20 12:04

一 、java后台

1.1

复制代码 
package com.admin.domain;

/**
 * 功能描述：
 *
 * @author wangwei
 * @date 2024-01-15 22:13
 */
public class ConnectWeb {

    private String connectWebId;

    private String connectWebName;

    private String connectWebInfo;

    private String personWebIdAlpha;

    private String personWebIdBeta;

    private String personWebIdAlphaName;

    private String personWebIdBetaName;

    public String getPersonWebIdAlphaName() {
        return personWebIdAlphaName;
    }

    public void setPersonWebIdAlphaName(String personWebIdAlphaName) {
        this.personWebIdAlphaName = personWebIdAlphaName;
    }

    public String getPersonWebIdBetaName() {
        return personWebIdBetaName;
    }

    public void setPersonWebIdBetaName(String personWebIdBetaName) {
        this.personWebIdBetaName = personWebIdBetaName;
    }

    public String getConnectWebId() {
        return connectWebId;
    }

    public void setConnectWebId(String connectWebId) {
        this.connectWebId = connectWebId;
    }

    public String getConnectWebName() {
        return connectWebName;
    }

    public void setConnectWebName(String connectWebName) {
        this.connectWebName = connectWebName;
    }

    public String getConnectWebInfo() {
        return connectWebInfo;
    }

    public void setConnectWebInfo(String connectWebInfo) {
        this.connectWebInfo = connectWebInfo;
    }

    public String getPersonWebIdAlpha() {
        return personWebIdAlpha;
    }

    public void setPersonWebIdAlpha(String personWebIdAlpha) {
        this.personWebIdAlpha = personWebIdAlpha;
    }

    public String getPersonWebIdBeta() {
        return personWebIdBeta;
    }

    public void setPersonWebIdBeta(String personWebIdBeta) {
        this.personWebIdBeta = personWebIdBeta;
    }

    @Override
    public String toString() {
        return "ConnectWeb{" +
                "connectWebId='" + connectWebId + '\'' +
                ", connectWebName='" + connectWebName + '\'' +
                ", connectWebInfo='" + connectWebInfo + '\'' +
                ", personWebIdAlpha='" + personWebIdAlpha + '\'' +
                ", personWebIdBeta='" + personWebIdBeta + '\'' +
                ", personWebIdAlphaName='" + personWebIdAlphaName + '\'' +
                ", personWebIdBetaName='" + personWebIdBetaName + '\'' +
                '}';
    }
}

1.2

复制代码 
package com.admin.domain;

/**
 * 功能描述：
 *人物属性实体描述
 *
 * @author wangwei
 * @date 2024-01-15 22:12
 */
public class PersonWeb {

    private String personWebId;


    private String personWebName;

    private String personWebPic;

    private String personWebShow;

    private String personWebLink;

    private String personWebPlatform;

    private String personWebField;

    private String personWebInfo;

    private String personWebKey;

    public String getPersonWebId() {
        return personWebId;
    }

    public void setPersonWebId(String personWebId) {
        this.personWebId = personWebId;
    }

    public String getPersonWebName() {
        return personWebName;
    }

    public void setPersonWebName(String personWebName) {
        this.personWebName = personWebName;
    }

    public String getPersonWebPlatform() {
        return personWebPlatform;
    }

    public void setPersonWebPlatform(String personWebPlatform) {
        this.personWebPlatform = personWebPlatform;
    }

    public String getPersonWebField() {
        return personWebField;
    }

    public void setPersonWebField(String personWebField) {
        this.personWebField = personWebField;
    }

    public String getPersonWebInfo() {
        return personWebInfo;
    }

    public void setPersonWebInfo(String personWebInfo) {
        this.personWebInfo = personWebInfo;
    }

    public String getPersonWebKey() {
        return personWebKey;
    }

    public void setPersonWebKey(String personWebKey) {
        this.personWebKey = personWebKey;
    }

    public String getPersonWebPic() {
        return personWebPic;
    }

    public void setPersonWebPic(String personWebPic) {
        this.personWebPic = personWebPic;
    }

    public String getPersonWebShow() {
        return personWebShow;
    }

    public void setPersonWebShow(String personWebShow) {
        this.personWebShow = personWebShow;
    }

    public String getPersonWebLink() {
        return personWebLink;
    }

    public void setPersonWebLink(String personWebLink) {
        this.personWebLink = personWebLink;
    }

    @Override
    public String toString() {
        return "PersonWeb{" +
                "personWebId='" + personWebId + '\'' +
                ", personWebName='" + personWebName + '\'' +
                ", personWebPic='" + personWebPic + '\'' +
                ", personWebShow='" + personWebShow + '\'' +
                ", personWebLink='" + personWebLink + '\'' +
                ", personWebPlatform='" + personWebPlatform + '\'' +
                ", personWebField='" + personWebField + '\'' +
                ", personWebInfo='" + personWebInfo + '\'' +
                ", personWebKey='" + personWebKey + '\'' +
                '}';
    }
}

1.3

复制代码 
package com.admin.controller;

import com.admin.common.core.controller.BaseController;
import com.admin.common.core.domain.AjaxResult;
import com.admin.common.core.page.TableDataInfo;
import com.admin.domain.ConnectWeb;
import com.admin.domain.PersonWeb;
import com.admin.service.WebService;
import com.admin.utils.transport.Result;
import org.neo4j.driver.Record;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * 功能描述：
 *
 * @author wangwei
 * @date 2024-01-16 11:09
 */
@RestController
@RequestMapping("/people/web")
public class WebController extends BaseController {

    @Autowired
    private WebService webService;

    @GetMapping("/map")
    public TableDataInfo getPersonWebMap() {
        List<Record> list = webService.selectPersonWebMap();
        return getDataTable(list);
    }

    @GetMapping("/list")
    public TableDataInfo getPersonWebList() {
        List<PersonWeb> list = webService.selectPersonWebList();
        return getDataTable(list);
    }

    @GetMapping("/search/{personWebName}")
    public AjaxResult getPersonWebSearchList(@PathVariable("personWebName") String personWebName) {
        List<PersonWeb> list = webService.selectPersonWebSearchList(personWebName);
        return AjaxResult.success(list);
    }

    @GetMapping("/search/{personWebId}/{personWebName}")
    public AjaxResult getPersonWebSearchListOther(@PathVariable("personWebName") String personWebName, @PathVariable("personWebId") String personWebId) {
        List<PersonWeb> list = webService.selectPersonWebSearchListOther(personWebName, personWebId);
        return AjaxResult.success(list);
    }

    @GetMapping(value = "/person/{personWebId}")
    public AjaxResult getPersonWebInfo(@PathVariable("personWebId") String personWebId) {
        return AjaxResult.success(webService.selectPersonWebById(personWebId));
    }

    @PostMapping("/person")
    public AjaxResult addPersonWeb(@RequestBody PersonWeb personWeb) {
        return toAjax(webService.insertPersonWeb(personWeb));
    }

    @PutMapping("/person")
    public AjaxResult editPersonWeb(@RequestBody PersonWeb personWeb) {
        return toAjax(webService.updatePersonWeb(personWeb));
    }

    @DeleteMapping("/person/{personWebId}")
    public AjaxResult removePersonWeb(@PathVariable String personWebId) {
        try{
            int rsg = webService.deletePersonWeb(personWebId);
            return toAjax(rsg);
        } catch (Exception e){
            return AjaxResult.error(500, "此节点仍与其他节点有关联关系！");
        }
    }

    @GetMapping(value = "/connect/{connectWebId}")
    public AjaxResult getInfoConnectWeb(@PathVariable("connectWebId") String connectWebId) {
        return AjaxResult.success(webService.selectConnectWebById(connectWebId));
    }

    @PostMapping("/connect")
    public AjaxResult addConnectWeb(@RequestBody ConnectWeb connectWeb) {
        return toAjax(webService.insertConnectWeb(connectWeb));
    }

    @PutMapping("/connect")
    public AjaxResult editConnectWeb(@RequestBody ConnectWeb connectWeb) {
        return toAjax(webService.updateConnectWeb(connectWeb));
    }

    @DeleteMapping("/connect/{connectWebId}")
    public AjaxResult removeConnectWeb(@PathVariable String connectWebId) {
        return toAjax(webService.deleteConnectWeb(connectWebId));
    }
}

1.4

复制代码 
package com.admin.service;

import com.admin.domain.ConnectWeb;
import com.admin.domain.PersonWeb;
import org.neo4j.driver.Record;

import java.util.List;

public interface WebService {
    List<Record> selectPersonWebMap();

    public List<PersonWeb> selectPersonWebList() ;

    public List<PersonWeb> selectPersonWebSearchList(String personWebName) ;

    public List<PersonWeb> selectPersonWebSearchListOther(String personWebName, String personWebId) ;

    public PersonWeb selectPersonWebById(String personWebId) ;

    public int insertPersonWeb(PersonWeb personWeb) ;

    public int updatePersonWeb(PersonWeb personWeb) ;

    public int deletePersonWeb(String personWebId) ;

    public ConnectWeb selectConnectWebById(String connectWebId) ;

    public int insertConnectWeb(ConnectWeb connectWeb) ;

    public int updateConnectWeb(ConnectWeb connectWeb) ;

    public int deleteConnectWeb(String connectWebId) ;


}

1.5

复制代码 
package com.admin.service.impl;

import com.admin.common.annotation.DataSource;
import com.admin.common.enums.DataSourceType;
import com.admin.domain.ConnectWeb;
import com.admin.domain.PersonWeb;
import com.admin.mapper.ConnectWebMapper;
import com.admin.mapper.PersonWebMapper;
import com.admin.service.WebService;
import com.admin.utils.SnowflakeIdWorker;
import org.neo4j.driver.Record;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class WebServiceImpl implements WebService {


    @Autowired
    private PersonWebMapper personWebMapper;

    @Autowired
    private ConnectWebMapper connectWebMapper;

    @Autowired
    private SnowflakeIdWorker snowflakeIdWorker;



    @DataSource(value = DataSourceType.SLAVE)
    public List<Record> selectPersonWebMap() {
        return personWebMapper.selectPersonWebMap();
    }

    @DataSource(value = DataSourceType.SLAVE)
    public List<PersonWeb> selectPersonWebList() {
        List<PersonWeb> personWebs = personWebMapper.selectPersonWebList();
        return  personWebs;
    }

    @DataSource(value = DataSourceType.SLAVE)
    public List<PersonWeb> selectPersonWebSearchList(String personWebName) {
//        System.out.println(personWebName);
        return personWebMapper.selectPersonWebSearchList(personWebName);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public List<PersonWeb> selectPersonWebSearchListOther(String personWebName, String personWebId) {
//        System.out.println(personWebName);
        return personWebMapper.selectPersonWebSearchListOther(personWebName, personWebId);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public PersonWeb selectPersonWebById(String personWebId) {
        return personWebMapper.selectPersonWebById(personWebId);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public int insertPersonWeb(PersonWeb personWeb) {
        personWeb.setPersonWebId(snowflakeIdWorker.nextId());
        return personWebMapper.insertPersonWeb(personWeb);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public int updatePersonWeb(PersonWeb personWeb) {
        return personWebMapper.updatePersonWeb(personWeb);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public int deletePersonWeb(String personWebId) {
        return personWebMapper.deletePersonWeb(personWebId);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public ConnectWeb selectConnectWebById(String connectWebId) {
        return connectWebMapper.selectConnectWebById(connectWebId);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public int insertConnectWeb(ConnectWeb connectWeb) {
        connectWeb.setConnectWebId(snowflakeIdWorker.nextId());
        return connectWebMapper.insertConnectWeb(connectWeb);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public int updateConnectWeb(ConnectWeb connectWeb) {
        return connectWebMapper.updateConnectWeb(connectWeb);
    }

    @DataSource(value = DataSourceType.SLAVE)
    public int deleteConnectWeb(String connectWebId) {
        return connectWebMapper.deleteConnectWeb(connectWebId);
    }
}

1.6

复制代码 
package com.admin.mapper;

import com.admin.domain.ConnectWeb;
import org.springframework.stereotype.Repository;

/**
 * @author wangwei
 */
@Repository
public interface ConnectWebMapper {

    /**
     * 查询单个连接信息
     *
     * @param connectWebId 连接id
     * @return ConnectWeb实体信息
     */
    ConnectWeb selectConnectWebById(String connectWebId);

    /**
     * 插入单个连接信息
     *
     * @param connectWeb 连接实体
     * @return 插入个数
     */
    int insertConnectWeb(ConnectWeb connectWeb);

    /**
     * 修改单个连接信息
     *
     * @param connectWeb 修改实体
     * @return 插入个数
     */
    int updateConnectWeb(ConnectWeb connectWeb);

    /**
     * 删除单个连接
     *
     * @param connectWebId 连接实体
     * @return 删除个数
     */
    int deleteConnectWeb(String connectWebId);
}

1.7

复制代码 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.admin.mapper.ConnectWebMapper">

    <select id="selectConnectWebById" parameterType="String" resultType="com.admin.domain.ConnectWeb">
        MATCH (m)-[c:ConnectWeb{
        connectWebId: #{connectWebId}
        }]->(n)
        RETURN
        c.connectWebId as connectWebId,
        c.connectWebName as connectWebName,
        c.connectWebInfo as connectWebInfo,
        m.personWebId as personWebIdAlpha,
        m.personWebName as personWebIdAlphaName,
        n.personWebId as personWebIdBeta,
        n.personWebName as personWebIdBetaName
    </select>

    <insert id="insertConnectWeb" parameterType="com.admin.domain.ConnectWeb">
        match(pa:PersonWeb{
        personWebId: #{personWebIdAlpha}
        }),(pb:PersonWeb{
        personWebId: #{personWebIdBeta}
        })
        merge (pa)-[c:ConnectWeb{
        connectWebId: #{connectWebId},
        connectWebName: #{connectWebName},
        connectWebInfo: #{connectWebInfo}
        }]->(pb)
    </insert>

    <update id="updateConnectWeb" parameterType="com.admin.domain.ConnectWeb">
        MATCH (m)-[c:ConnectWeb{
        connectWebId: #{connectWebId}
        }]->(n)
        <trim prefix="SET" suffixOverrides=",">
            <if test="connectWebName != null">c.connectWebName = #{connectWebName},</if>
            <if test="connectWebInfo != null">c.connectWebInfo = #{connectWebInfo},</if>
            <if test="personWebIdAlpha != null">m.personWebId = #{personWebIdAlpha},</if>
            <if test="personWebIdBeta != null">n.personWebId = #{personWebIdBeta},</if>
        </trim>
    </update>

    <delete id="deleteConnectWeb" parameterType="String">
        MATCH ()-[c:ConnectWeb{
        connectWebId: #{connectWebId}
        }]-()
        DELETE c
    </delete>

</mapper>

1.8 maven

复制代码 
        <!--手动添加-->
        <!--neo4j-jdbc-driver-->
        <dependency>
            <groupId>org.neo4j</groupId>
            <artifactId>neo4j-jdbc-driver</artifactId>
            <version>4.0.1</version>
        </dependency>

1.9 数据库配置

复制代码 
      #TODO 从库数据源 neo4j
            slave:
                # 从数据源开关/默认关闭
                enabled: true
                url: jdbc:neo4j:bolt://127.0.0.1:1273
                username: neo4j
                password: neo4j
                driverClassName: org.neo4j.jdbc.bolt.BoltDriver


                         #TODO NEO4J 配置检测连接是否有效
            validationQuery: match (n) return id(n) limit 2

二、vue前台

2.1

复制代码 
<template>
  <div class="app-container">
    <div class="echarts">
      <div class="bin" id="main"></div>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增成员
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改成员
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddConnect"
        >新增关系
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="refresh"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="personList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="成员昵称" align="center" prop="personWebName" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <a v-if="scope.row.personWebLink" target="_blank" :href="scope.row.personWebLink" class="link-type"
             style="margin-right: 10px;">
            <span>{{ scope.row.personWebName }}</span>
          </a>
          <span v-else>{{ scope.row.personWebName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成员简介" align="center" prop="personWebInfo" :show-overflow-tooltip="true"/>
      <el-table-column label="成员头像" align="center">
        <template slot-scope="scope">
          <img :src="person_pic_url + scope.row.personWebPic" alt="" class="pic-in-list">
        </template>
      </el-table-column>
      <el-table-column label="活跃平台" align="center" prop="personWebPlatform" :formatter="personPlatformFormat">
      </el-table-column>
      <el-table-column label="常驻领域" align="center" prop="personWebField">
        <template slot-scope="scope">
          <el-tag v-for="ikey in scope.row.personWebField" :key="ikey" type="success" style="margin: 10px;">
            {{ikey}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="沟通要旨" align="center" prop="personWebKey" :show-overflow-tooltip="true"/>
      <el-table-column label="是否展示" align="center" width="100" prop="personWebShow" :formatter="personShowFormat">
        <template slot-scope="scope">
          <el-tag :type="scope.row.personWebShow | statusFilter">
            {{ scope.row.personWebShow | statusShowFilter}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="openConnect" width="600px" append-to-body :title="titleConnect">
      <el-form ref="formConnect" :model="formConnect" :rules="rulesConnect" size="medium" label-width="100px">
        <el-row type="flex" justify="start" align="top">
          <el-col :span="12">
            <el-form-item
              label="关联上级"
              prop="personWebIdAlpha"
              :rules="requireFlag ? rulesConnect.personWebIdAlpha:[{
                required: false
               }]"
            >
              <el-select
                :disabled="!requireFlag"
                v-model="formConnect.personWebIdAlpha"
                class="filter-item"
                filterable
                remote
                reserve-keyword
                clearable
                :placeholder="formConnect.personWebIdAlphaName"
                :remote-method="remoteMethodStart"
                :loading="selectLoading" value="">
                <el-option
                  v-for="item in optionsStart"
                  :key="item.personWebId"
                  :label="item.personWebName"
                  :value="item.personWebId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="关联下属"
              prop="personWebIdBeta"
              :rules="requireFlag ? rulesConnect.personWebIdBeta:[{
                required: false
              }]"
            >
              <el-select
                :disabled="!requireFlag"
                v-model="formConnect.personWebIdBeta"
                class="filter-item"
                filterable
                remote
                reserve-keyword
                clearable
                :placeholder="formConnect.personWebIdBetaName"
                :remote-method="remoteMethodEnd"
                :loading="selectLoading" value="">
                <el-option
                  v-for="item in optionsEnd"
                  :key="item.personWebId"
                  :label="item.personWebName"
                  :value="item.personWebId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="关联关系" prop="connectWebName">
          <el-input v-model="formConnect.connectWebName" placeholder="请输入关联关系" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="关联信息" prop="connectWebInfo">
          <el-input v-model="formConnect.connectWebInfo" type="textarea" placeholder="请输入关联信息"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button v-if="!requireFlag" type="danger" @click="deleteConnect">删除</el-button>
        <el-button @click="cancelConnect">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="成员昵称" prop="personWebName">
          <el-input v-model="form.personWebName" placeholder="请输入成员昵称"/>
        </el-form-item>
        <el-form-item label="成员简介" prop="personWebInfo">
          <el-input v-model="form.personWebInfo" type="textarea" placeholder="请输入成员简介"/>
        </el-form-item>
        <el-form-item label="跳转链接" prop="personWebLink">
          <el-input v-model="form.personWebLink" placeholder="请输入跳转链接"/>
        </el-form-item>
        <el-form-item label="成员头像" prop="personWebPic">
          <el-button v-show="!form.personWebPic" type="primary" size="mini" @click="imageCropperShow()">
            上传图片
          </el-button>
          <el-button v-show="form.personWebPic" type="primary" size="mini" @click="imageCropperShow()">
            更新图片
          </el-button>
          <el-button v-show="form.personWebPic" type="primary" size="mini" @click="picShow(form.personWebPic)">
            预览
          </el-button>
        </el-form-item>

        <el-form-item label="活跃平台">
          <el-checkbox-group v-model="form.personWebPlatform">
            <el-checkbox
              v-for="dict in personWebPlatformOptions"
              :key="dict.dictValue"
              :label="dict.dictValue">
              {{dict.dictLabel}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="常驻领域" prop="personWebField">
          <el-tag
            :key="index"
            v-for="(tag, index) in form.personWebField"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
        </el-form-item>

        <el-form-item label="沟通要旨" prop="personWebInfo">
          <el-input v-model="form.personWebKey" type="textarea" placeholder="请输入沟通要旨"/>
        </el-form-item>

        <el-form-item label="是否展示">
          <el-radio-group v-model="form.personWebShow">
            <el-radio
              v-for="dict in personWebShowOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}
            </el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <my-upload
      method="POST"
      field="file"
      v-model="upload.cropperShow"
      :headers="upload.headers"
      :width=300
      :height=300
      :url="this.upload.logo_url"
      lang-type='zh'
      img-format='jpg'
      img-bgc='#FFF'
      :no-circle=true
      @crop-upload-success="cropUploadSuccess">
    </my-upload>

    <el-dialog title="图片预览" :visible.sync="picVisible" width="500px" center>
      <div style="text-align: center">
        <img :src="answerPicImageUrl" alt="" class="pic-in-dialog">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="picVisible = false">确定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
  // import graph from '@/assets/binray/les-miserables';
  import {
    getPersonWebMap,
    getPersonWebList,
    getPersonWebSearch,
    getPersonWebInfo,
    addPersonWeb,
    editPersonWeb,
    removePersonWeb,
    getInfoConnectWeb,
    addConnectWeb,
    editConnectWeb,
    removeConnectWeb,
    getPersonWebSearchOther
  } from '@/api/person';
  import 'babel-polyfill'; // es6 shim
  import myUpload from 'vue-image-crop-upload/upload-2';

  export default {
    name: 'Echarts',
     components: {myUpload},
    filters: {
      statusShowFilter(status) {
        const statusMap = {
          0: '正常',
          1: '已下线',
        }
        return statusMap[status]
      },
      statusFilter(status) {
        const statusMap = {
          0: 'success',
          1: 'warning',
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        // 新增or更新，新增为true，更新为false
        requireFlag: false,
        myChart: undefined,
        // 表单参数
        form: {},
        formConnect: {},
        // 表单校验
        rules: {
          personWebName: [{
            required: true,
            message: '成员名称为必填项',
            trigger: 'blur'
          }],
         /* personWebPic: [{
            required: true,
            message: '成员头图为必填项',
            trigger: 'change'
          }],*/
          personWebShow: [{
            required: true,
            message: '是否展示为必填项',
            trigger: 'change'
          }],
        },
        rulesConnect: {
          personWebIdAlpha: [{
            required: true,
            message: '',
            trigger: 'blur'
          }],
          personWebIdBeta: [{
            required: true,
            message: '',
            trigger: 'blur'
          }],
          connectWebName: [{
            required: true,
            message: '请输入关联关系',
            trigger: 'blur'
          }],
          connectWebInfo: [{
            required: true,
            message: '请输入关联信息',
            trigger: 'blur'
          }],
        },
        selectLoading: false,
        optionsStart: [],
        optionsEnd: [],
        personList: [],
        personMap: [],
        // 临时标签列表
        personWebPlatformTemp: undefined,
        personWebFieldTemp: undefined,
        // 路径
        person_pic_url: process.env.VUE_APP_BASE_API + "/File/upload/nosql/",
        //D:\File\upload\nosql
        // 图片预览框
        picVisible: false,
        // 拼接
        answerPicImageUrl: "",
        // 路径
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        upload: {
          // 显示上传图片的弹出框
          cropperShow: false,
          // 图标路径
          logo_url: process.env.VUE_APP_BASE_API + "/common/upload",
        },
        // 弹出层标题
        title: "",
        titleConnect: "",
        // 是否显示弹出层
        open: false,
        openConnect: false,
        inputVisible: false,
        // 具体内容
        inputValue: '',
        personWebShowOptions: [],
        personWebPlatformOptions: [],
        searchQueryParams: {
          // 这个一定得有
          personWebIdStart: null,
          // 这个可有可无
          personWebIdEnd: null,
        },
        graph: {
          nodes: [],
          links: []
        },
        mapCheckList: []
      }
    },
    created() {
      this.getList();
      this.personWebShowOptions = [{
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-02-21 19:29:04",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 124,
        "dictSort": 0,
        "dictLabel": "已上架",
        "dictValue": "0",
        "dictType": "material_public",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-02-21 19:29:39",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 125,
        "dictSort": 1,
        "dictLabel": "未发布",
        "dictValue": "1",
        "dictType": "material_public",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }];
      this.personWebPlatformOptions = [{
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:20:51",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 135,
        "dictSort": 0,
        "dictLabel": "哔哩哔哩",
        "dictValue": "0",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:21:03",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 136,
        "dictSort": 1,
        "dictLabel": "今日头条",
        "dictValue": "1",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:21:12",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 137,
        "dictSort": 2,
        "dictLabel": "抖音",
        "dictValue": "2",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:21:21",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 138,
        "dictSort": 3,
        "dictLabel": "西瓜视频",
        "dictValue": "3",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:21:29",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 139,
        "dictSort": 4,
        "dictLabel": "YouTube",
        "dictValue": "4",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:22:06",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 140,
        "dictSort": 5,
        "dictLabel": "知乎",
        "dictValue": "5",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:22:17",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 141,
        "dictSort": 6,
        "dictLabel": "小红书",
        "dictValue": "6",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:22:27",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 142,
        "dictSort": 7,
        "dictLabel": "快手",
        "dictValue": "7",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:22:49",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 143,
        "dictSort": 8,
        "dictLabel": "Acfun",
        "dictValue": "8",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:23:05",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 144,
        "dictSort": 9,
        "dictLabel": "网易云音乐",
        "dictValue": "9",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:23:34",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 145,
        "dictSort": 10,
        "dictLabel": "豆瓣",
        "dictValue": "10",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:23:52",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 146,
        "dictSort": 11,
        "dictLabel": "微博",
        "dictValue": "11",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:24:34",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 147,
        "dictSort": 12,
        "dictLabel": "新片场",
        "dictValue": "12",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }, {
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2021-03-26 02:24:50",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": {},
        "dictCode": 148,
        "dictSort": 13,
        "dictLabel": "图虫",
        "dictValue": "13",
        "dictType": "media_platform",
        "cssClass": null,
        "listClass": null,
        "isDefault": "N",
        "status": "0",
        "default": false
      }]
    },
    methods: {
      myEcharts() {
        const that = this;
        this.myChart.showLoading();

        this.graph.nodes.forEach(function (node) {
          node.label = {
            show: true
          };
        });
        const option = {
          title: {
            text: '',
            subtext: '',
            top: 'bottom',
            left: 'right'
          },
          tooltip: {
            trigger: "item",
            // textStyle: {
            //   width: 10,
            //   fontWeight: "bold",
            //   overflow: "truncate"
            // },
            confine: 'true',
            formatter: function (param) {
              if (param.dataType === 'edge') {
                // 连接
                return [
                  '关系：' + param.data["connectWebName"] + '<br/>',
                  '详情：' + param.data["connectWebInfo"] + '<br/>'
                ].join('');
              } else if (param.dataType === 'node') {
                // 处理标签
                let graphTag = '';
                const arr1 = JSON.parse(param.data["personWebField"]);
                for (let i = 0; i < arr1.length; i++) {
                  if (i === 0) {
                    graphTag = `<span style="
                      display: inline-block;
                      border-radius: 4px;
                      min-width: min-content;
                      padding: 0 10px;
                      margin: 5px;
                      background-color: #e7faf0;
                      border-color: #d0f5e0;
                      color: #13ce66;
                      border-width: 1px;
                      border-style: solid;
                    ">${arr1[i]}</span>`
                  } else {
                    graphTag = graphTag + `<span style="
                      display: inline-block;
                      border-radius: 4px;
                      min-width: min-content;
                      padding: 0 10px;
                      margin: 5px;
                      background-color: #e7faf0;
                      border-color: #d0f5e0;
                      color: #13ce66;
                      border-width: 1px;
                      border-style: solid;
                    ">${arr1[i]}</span>`;
                  }
                }
                // 处理字典
                let graphDict = '';
                const arrTemp = that.selectDictLabel(that.personWebPlatformOptions, JSON.parse(param.data["personWebPlatform"]));
                const arr2 = arrTemp.split(', ')
                for (let i = 0; i < arr2.length; i++) {
                  if (i === 0) {
                    graphDict = `<span style="
                      display: inline-block;
                      border-radius: 4px;
                      min-width: min-content;
                      padding: 0 10px;
                      margin: 5px;
                      background-color: #faece7;
                      border-color: #f5dad0;
                      color: #ff7d27;
                      border-width: 1px;
                      border-style: solid;
                    ">${arr2[i]}</span>`
                  } else {
                    graphDict = graphDict + `<span style="
                      display: inline-block;
                      border-radius: 4px;
                      min-width: min-content;
                      padding: 0 10px;
                      margin: 5px;
                      background-color: #faece7;
                      border-color: #f5dad0;
                      color: #ff7d27;
                      border-width: 1px;
                      border-style: solid;
                    ">${arr2[i]}</span>`;
                  }
                }
                // 节点
                return [
                  '<div style="text-align:left;max-width:1000px;">昵称：' + param.data["name"] + '<br/>',
                  '<div style="display:block;word-break: break-all;word-wrap: break-word;white-space: pre-line;">简介：' + param.data["personWebInfo"] + '</div>',
                  '常驻领域：' + graphTag + '<br/>',
                  '活跃平台：' + graphDict + '</div><br/>',
                ].join('');
              }

            }
          },
          legend: [],
          animationDuration: 150,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: '',
              type: 'graph',
              layout: "force",
              force: {
                repulsion: 200,
                edgeLength: 100,
                gravity: 0.2
              },
              symbolSize: 50,
              data: this.graph.nodes,
              links: this.graph.links,
              // data: graph.nodes,
              // links: graph.links,
              roam: true,
              label: {
                show: true,
              },
              draggable: true,

              labelLayout: {
                hideOverlap: false
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              },
              emphasis: {
                focus: 'adjacency',
                lineStyle: {
                  width: 10
                }
              }
            }
          ]
        };
        this.myChart.clear();
        option && this.myChart.setOption(option, true);
        // console.log(option)
        this.myChart.hideLoading();
        this.myChart.on("click", function (e) {
          if (e.dataType === 'edge') {
            that.handleUpdateConnect(e.data)
          } else if (e.dataType === 'node') {
            console.log(e)
            e.data.personWebId = e.data.id
            that.handleUpdate(e.data)
          }
        })
      },
      getList() {
        this.loading = true;
        getPersonWebList().then(response => {
          this.personList = response.rows;
          Object.keys(this.personList).forEach(key => {
            this.personList[key].personWebPlatform = JSON.parse(this.personList[key].personWebPlatform)
            this.personList[key].personWebField = JSON.parse(this.personList[key].personWebField)
          });
          this.loading = false;
        });
      },
      async getMap() {

        this.loading = true;
        await getPersonWebMap().then(response => {
          this.graph = {
            nodes: [],
            links: []
          };
          this.mapCheckList = [];
          this.personMap = response.rows;
          Object.keys(this.personMap).forEach(key => {
            // 导入节点，列表为空表示首次加入元素，反之亦然
            if (this.graph.nodes !== []) {
              // 如果导入过就不用重复导入了
              if (!this.mapCheckList.includes(this.personMap[key].PersonAlpha.personWebId)) {
                this.pushAlpha(key);
              }
              if (!this.mapCheckList.includes(this.personMap[key].PersonBeta.personWebId)) {
                this.pushBeta(key);
              }
            } else {
              this.pushAlpha(key);
              this.pushBeta(key);
            }
            // 把导入过的节点id存进checkList
            this.mapCheckList.push(this.personMap[key].PersonAlpha.personWebId)
            this.mapCheckList.push(this.personMap[key].PersonBeta.personWebId)
            // 导入关系
            this.pushConnect(key);
          });
        });
        // console.log(this.graph)
        this.loading = false;
      },
      pushAlpha(key) {

        this.graph.nodes.push({
          id: this.personMap[key].PersonAlpha.personWebId,
          name: this.personMap[key].PersonAlpha.personWebName,
          personWebPic: this.personMap[key].PersonAlpha.personWebPic,
          personWebShow: this.personMap[key].PersonAlpha.personWebShow,
          personWebLink: this.personMap[key].PersonAlpha.personWebLink,
          personWebPlatform: this.personMap[key].PersonAlpha.personWebPlatform,
          personWebField: this.personMap[key].PersonAlpha.personWebField,
          personWebInfo: this.personMap[key].PersonAlpha.personWebInfo,
          personWebKey: this.personMap[key].PersonAlpha.personWebKey,
        })
      },
      pushBeta(key) {
        this.graph.nodes.push({
          id: this.personMap[key].PersonBeta.personWebId,
          name: this.personMap[key].PersonBeta.personWebName,
          personWebPic: this.personMap[key].PersonBeta.personWebPic,
          personWebShow: this.personMap[key].PersonBeta.personWebShow,
          personWebLink: this.personMap[key].PersonBeta.personWebLink,
          personWebPlatform: this.personMap[key].PersonBeta.personWebPlatform,
          personWebField: this.personMap[key].PersonBeta.personWebField,
          personWebInfo: this.personMap[key].PersonBeta.personWebInfo,
          personWebKey: this.personMap[key].PersonBeta.personWebKey,
        })
      },
      pushConnect(key) {
        this.graph.links.push({
          source: this.personMap[key].PersonAlpha.personWebId,
          target: this.personMap[key].PersonBeta.personWebId,
          connectWebId: this.personMap[key].Connect.connectWebId,
          connectWebName: this.personMap[key].Connect.connectWebName,
          connectWebInfo: this.personMap[key].Connect.connectWebInfo,
        })
      },

      // 字典翻译
      personShowFormat(row, column) {
        return this.selectDictLabel(this.personWebShowOptions, row.personWebShow);
      },
      personPlatformFormat(row, column) {
        return this.selectDictLabel(this.personWebPlatformOptions, row.personWebPlatform);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮
      cancelConnect() {
        this.openConnect = false;
        this.resetConnect();
      },
      // 表单重置
      reset() {
        this.form = {
          personWebId: null,
          personWebName: null,
          personWebPic: null,
          personWebShow: "0",
          personWebLink: "",
          personWebPlatform: [],
          personWebField: [],
          personWebInfo: "",
          personWebKey: ""
        };
        this.answerPicImageUrl = null;
        this.resetForm("form");
      },

      resetConnect() {
        this.formConnect = {
          personWebIdAlpha: null,
          personWebIdBeta: null,
          personWebIdAlphaName: null,
          personWebIdBetaName: null,
          connectWebId: null,
          connectWebName: null,
          connectWebInfo: null,
        };
        this.resetForm("formConnect");
      },

      handleAddConnect() {
        this.optionsStart = []
        this.optionsEnd = []
        this.requireFlag = true;
        this.resetConnect();
        this.openConnect = true;
        this.titleConnect = "添加成员关系";
      },

      /** 修改按钮操作 */
      handleUpdateConnect(row) {
        this.optionsStart = []
        this.optionsEnd = []
        this.requireFlag = false;
        this.reset();
        const connectWeb = row.connectWebId;
        getInfoConnectWeb(connectWeb).then(response => {
          this.formConnect = response.data;
          // console.log(this.formConnect)
          this.formConnect.personWebIdAlpha = null;
          this.formConnect.personWebIdBeta = null;
          this.openConnect = true;
          this.titleConnect = "修改成员关系";
        });
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.personWebId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },

      remoteMethodStart(keyword) {
        if (keyword.trim() === '') {
          this.optionsStart = []
          return
        }
        // 当后一个对象不为空的情况
        if (this.formConnect.personWebIdBeta) {
          let others = [];
          this.selectLoading = true;
          getPersonWebSearch(keyword).then(data => {
            getPersonWebSearchOther(this.formConnect.personWebIdBeta, keyword).then(dataOther => {
              others = dataOther.rows;
              this.optionsStart = [];
              data.rows.forEach(ma => {
                let exist = others.some(sa => {
                  return ma.personWebId === sa.personWebId
                });
                if (!exist) {
                  this.optionsStart.push(ma);
                }
              });
              this.optionsStart = this.optionsStart.filter(item => item.personWebId !== this.formConnect.personWebIdBeta)
            })
            this.selectLoading = false;
          })
        }
        // 后一个对象为空时
        else {
          this.selectLoading = true;
          getPersonWebSearch(keyword).then(data => {
            this.selectLoading = false;
            this.optionsStart = data.rows;
          })
        }
      },
      remoteMethodEnd(keyword) {
        if (keyword.trim() === '') {
          this.optionsEnd = []
          return
        }
        // 当前一个对象不为空的情况
        if (this.formConnect.personWebIdAlpha) {
          let others = [];
          this.selectLoading = true;
          getPersonWebSearch(keyword).then(data => {
            getPersonWebSearchOther(this.formConnect.personWebIdAlpha, keyword).then(dataOther => {
              others = dataOther.rows;
              this.optionsEnd = [];
              data.rows.forEach(ma => {
                let exist = others.some(sa => {
                  return ma.personWebId === sa.personWebId
                });
                if (!exist) {
                  this.optionsEnd.push(ma);
                }
              });
              this.optionsEnd = this.optionsEnd.filter(item => item.personWebId !== this.formConnect.personWebIdAlpha)
            })
            this.selectLoading = false;
          })
        }
        // 前一个对象为空时
        else {
          this.selectLoading = true;
          getPersonWebSearch(keyword).then(data => {
            this.selectLoading = false;
            this.optionsEnd = data.rows;
          })
        }
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加成员管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const personWeb = row.personWebId || this.ids;
        getPersonWebInfo(personWeb).then(response => {
          this.form = response.data;
          this.personWebPlatformTemp = this.form.personWebPlatform;
          this.form.personWebPlatform = JSON.parse(this.personWebPlatformTemp);
          this.personWebFieldTemp = this.form.personWebField;
          this.form.personWebField = JSON.parse(this.personWebFieldTemp);
          this.open = true;
          this.title = "修改成員管理";
        });
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.open = false;
            this.personWebPlatformTemp = this.form.personWebPlatform;
            this.form.personWebPlatform = JSON.stringify(this.personWebPlatformTemp);
            this.personWebFieldTemp = this.form.personWebField;
            this.form.personWebField = JSON.stringify(this.personWebFieldTemp);
            if (this.form.personWebId != null) {
              editPersonWeb(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.refresh();
                }
              });
            } else {
              addPersonWeb(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.refresh();
                }
              });
            }
          }
        });
      },

      handelConfirm() {
        this.$refs["formConnect"].validate(valid => {
          if (valid) {
            this.openConnect = false;
            if (this.formConnect.connectWebId != null) {
              editConnectWeb(this.formConnect).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.refresh();
                }
              });
            } else {
              addConnectWeb(this.formConnect).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.refresh();
                }
              });
            }
          }
        });
      },
      deleteConnect() {
        const connectWebId = this.formConnect.connectWebId
        this.$confirm('是否确认删除「' + this.formConnect.personWebIdAlphaName + '」和「' + this.formConnect.personWebIdBetaName + '」的关系？', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return removeConnectWeb(connectWebId);
        }).then(() => {
          this.openConnect = false;
          this.refresh();
          this.msgSuccess("删除成功");
        }).catch(function (e) {
          console.log(e)
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const personWebIds = row.personWebId || this.ids;
        this.$confirm('是否确认删除成员编号为"' + personWebIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return removePersonWeb(personWebIds);
        }).then(() => {
          this.refresh();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      // 显示图片上传模块
      imageCropperShow() {
        this.upload.cropperShow = !this.upload.cropperShow
      },
      // 图片上传成功后执行
      cropUploadSuccess(jsonData, field) {
        this.form.personWebPic = jsonData.fileName
        // console.log(jsonData)
      },
      picShow(pic) {
        this.picVisible = !this.picVisible;
        this.answerPicImageUrl = this.person_pic_url + pic
      },
      handleClose(tag) {
        this.form.personWebField.splice(this.form.personWebField.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.form.personWebField.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      async refresh() {
        await this.getMap();
        this.myEcharts();
        this.getList()
      },
    },

    async mounted() {
      await this.getMap();
      // 基于准备好的dom，初始化echarts实例
      let echarts = require('echarts')
      this.myChart = echarts.init(document.getElementById('main'));
      this.myEcharts();
    }
  }
</script>


<style lang="scss" scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    line-height: 140px;
  }

  .avatar {
    height: 144px;
  }

  .image-preview {
    width: 178px;
    height: 178px;
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    float: left;
  }

  .image-preview .image-preview-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .image-preview .image-preview-wrapper img {
    width: 100%;
    height: 100%;
  }

  .image-preview .image-preview-action {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s;
    cursor: pointer;
    line-height: 200px;
  }

  .image-preview .image-preview-action .el-icon-delete {
    font-size: 32px;
  }

  .image-preview:hover .image-preview-action {
    opacity: 1;
  }

  .el-upload--picture-card {
    display: block;
    width: 258px;
    height: 146px;
    overflow: hidden;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .echarts {
    width: 100%;
    text-align: center;
    height: 800px;
  }

  .bin {
    /*text-align: center;*/
    /*padding: 50px;*/
    width: 100%;
    height: 800px
  }

  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .graph-tag {
    display: inline-block;
    border-radius: 4px;
    min-width: min-content;
    padding: 5px;
    background-color: #e7faf0;
    border-color: #d0f5e0;
    color: #13ce66;
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

</style>

2.2

复制代码 
import request from '@/utils/request'

export function getPersonWebMap() {
  return request({
    url: '/people/web/map',
    method: 'get'
  })
}

export function getPersonWebList() {
  return request({
    url: '/people/web/list',
    method: 'get'
  })
}

export function getPersonWebSearch(personName) {
  return request({
    url: '/people/web/search/' + personName,
    method: 'get'
  })
}

export function getPersonWebSearchOther(personId, personName) {
  return request({
    url: '/people/web/search/' + personId + '/' + personName,
    method: 'get'
  })
}

export function getPersonWebInfo(personId) {
  return request({
    url: '/people/web/person/' + personId,
    method: 'get'
  })
}

export function addPersonWeb(data) {
  return request({
    url: '/people/web/person',
    method: 'post',
    data: data
  })
}

export function editPersonWeb(data) {
  return request({
    url: '/people/web/person',
    method: 'put',
    data: data
  })
}

export function removePersonWeb(personId) {
  return request({
    url: '/people/web/person/' + personId,
    method: 'delete'
  })
}

export function getInfoConnectWeb(connectId) {
  return request({
    url: '/people/web/connect/' + connectId,
    method: 'get'
  })
}

export function addConnectWeb(data) {
  return request({
    url: '/people/web/connect',
    method: 'post',
    data: data
  })
}

export function editConnectWeb(data) {
  return request({
    url: '/people/web/connect',
    method: 'put',
    data: data
  })
}

export function removeConnectWeb(connectId) {
  return request({
    url: '/people/web/connect/' + connectId,
    method: 'delete'
  })
}

三、展示

相关推荐
喜欢打篮球的普通人2 小时前
MLIR快速入门
neo4j·mlir
ELI_He9995 小时前
Neo4j 安装 APOC
neo4j
綮地19 小时前
Neo4j 基本处理
neo4j
lzp07911 天前
Neo4j图数据库学习(二)——SpringBoot整合Neo4j
数据库·学习·neo4j
爱折腾的小码农1 天前
neo4j数据库桌面管理工具
数据库·neo4j
Wenhao.5 天前
Docker 安装 neo4j
docker·容器·neo4j
RDCJM6 天前
Neo4j图数据库学习(二)——SpringBoot整合Neo4j
数据库·学习·neo4j
机器不学习我也不学习8 天前
TensorFlow环境安装
neo4j
码农老李9 天前
vxWorks7.0 Simpc运行tensorflow lite example
人工智能·tensorflow·neo4j
小鸡吃米…24 天前
TensorFlow 实现异或（XOR）运算
人工智能·python·tensorflow·neo4j
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04Labelme从安装到标注：零基础完整指南05AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南06UV安装并设置国内源07小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）08OpenClaw Control UI安全上下文访问配置09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）