devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

sprinboot+vue集成neo4j图数据库_springboot neo4j vue d3.js

作者：IT小白 | 2024-07-30 15:04:34

赞

踩

springboot neo4j vue d3.js

一 、java后台

1.1

  1. package com.admin.domain;
  2.  
  3. /**
  4.  * 功能描述：
  5.  *
  6.  * @author wangwei
  7.  * @date 2024-01-15 22:13
  8.  */
  9. public class ConnectWeb {
  10.  
  11.     private String connectWebId;
  12.  
  13.     private String connectWebName;
  14.  
  15.     private String connectWebInfo;
  16.  
  17.     private String personWebIdAlpha;
  18.  
  19.     private String personWebIdBeta;
  20.  
  21.     private String personWebIdAlphaName;
  22.  
  23.     private String personWebIdBetaName;
  24.  
  25.     public String getPersonWebIdAlphaName() {
  26.         return personWebIdAlphaName;
  27.     }
  28.  
  29.     public void setPersonWebIdAlphaName(String personWebIdAlphaName) {
  30.         this.personWebIdAlphaName = personWebIdAlphaName;
  31.     }
  32.  
  33.     public String getPersonWebIdBetaName() {
  34.         return personWebIdBetaName;
  35.     }
  36.  
  37.     public void setPersonWebIdBetaName(String personWebIdBetaName) {
  38.         this.personWebIdBetaName = personWebIdBetaName;
  39.     }
  40.  
  41.     public String getConnectWebId() {
  42.         return connectWebId;
  43.     }
  44.  
  45.     public void setConnectWebId(String connectWebId) {
  46.         this.connectWebId = connectWebId;
  47.     }
  48.  
  49.     public String getConnectWebName() {
  50.         return connectWebName;
  51.     }
  52.  
  53.     public void setConnectWebName(String connectWebName) {
  54.         this.connectWebName = connectWebName;
  55.     }
  56.  
  57.     public String getConnectWebInfo() {
  58.         return connectWebInfo;
  59.     }
  60.  
  61.     public void setConnectWebInfo(String connectWebInfo) {
  62.         this.connectWebInfo = connectWebInfo;
  63.     }
  64.  
  65.     public String getPersonWebIdAlpha() {
  66.         return personWebIdAlpha;
  67.     }
  68.  
  69.     public void setPersonWebIdAlpha(String personWebIdAlpha) {
  70.         this.personWebIdAlpha = personWebIdAlpha;
  71.     }
  72.  
  73.     public String getPersonWebIdBeta() {
  74.         return personWebIdBeta;
  75.     }
  76.  
  77.     public void setPersonWebIdBeta(String personWebIdBeta) {
  78.         this.personWebIdBeta = personWebIdBeta;
  79.     }
  80.  
  81.     @Override
  82.     public String toString() {
  83.         return "ConnectWeb{" +
  84.                 "connectWebId='" + connectWebId + '\'' +
  85.                 ", connectWebName='" + connectWebName + '\'' +
  86.                 ", connectWebInfo='" + connectWebInfo + '\'' +
  87.                 ", personWebIdAlpha='" + personWebIdAlpha + '\'' +
  88.                 ", personWebIdBeta='" + personWebIdBeta + '\'' +
  89.                 ", personWebIdAlphaName='" + personWebIdAlphaName + '\'' +
  90.                 ", personWebIdBetaName='" + personWebIdBetaName + '\'' +
  91.                 '}';
  92.     }
  93. }

1.2

  1. package com.admin.domain;
  2.  
  3. /**
  4.  * 功能描述：
  5.  *人物属性实体描述
  6.  *
  7.  * @author wangwei
  8.  * @date 2024-01-15 22:12
  9.  */
  10. public class PersonWeb {
  11.  
  12.     private String personWebId;
  13.  
  14.  
  15.     private String personWebName;
  16.  
  17.     private String personWebPic;
  18.  
  19.     private String personWebShow;
  20.  
  21.     private String personWebLink;
  22.  
  23.     private String personWebPlatform;
  24.  
  25.     private String personWebField;
  26.  
  27.     private String personWebInfo;
  28.  
  29.     private String personWebKey;
  30.  
  31.     public String getPersonWebId() {
  32.         return personWebId;
  33.     }
  34.  
  35.     public void setPersonWebId(String personWebId) {
  36.         this.personWebId = personWebId;
  37.     }
  38.  
  39.     public String getPersonWebName() {
  40.         return personWebName;
  41.     }
  42.  
  43.     public void setPersonWebName(String personWebName) {
  44.         this.personWebName = personWebName;
  45.     }
  46.  
  47.     public String getPersonWebPlatform() {
  48.         return personWebPlatform;
  49.     }
  50.  
  51.     public void setPersonWebPlatform(String personWebPlatform) {
  52.         this.personWebPlatform = personWebPlatform;
  53.     }
  54.  
  55.     public String getPersonWebField() {
  56.         return personWebField;
  57.     }
  58.  
  59.     public void setPersonWebField(String personWebField) {
  60.         this.personWebField = personWebField;
  61.     }
  62.  
  63.     public String getPersonWebInfo() {
  64.         return personWebInfo;
  65.     }
  66.  
  67.     public void setPersonWebInfo(String personWebInfo) {
  68.         this.personWebInfo = personWebInfo;
  69.     }
  70.  
  71.     public String getPersonWebKey() {
  72.         return personWebKey;
  73.     }
  74.  
  75.     public void setPersonWebKey(String personWebKey) {
  76.         this.personWebKey = personWebKey;
  77.     }
  78.  
  79.     public String getPersonWebPic() {
  80.         return personWebPic;
  81.     }
  82.  
  83.     public void setPersonWebPic(String personWebPic) {
  84.         this.personWebPic = personWebPic;
  85.     }
  86.  
  87.     public String getPersonWebShow() {
  88.         return personWebShow;
  89.     }
  90.  
  91.     public void setPersonWebShow(String personWebShow) {
  92.         this.personWebShow = personWebShow;
  93.     }
  94.  
  95.     public String getPersonWebLink() {
  96.         return personWebLink;
  97.     }
  98.  
  99.     public void setPersonWebLink(String personWebLink) {
  100.         this.personWebLink = personWebLink;
  101.     }
  102.  
  103.     @Override
  104.     public String toString() {
  105.         return "PersonWeb{" +
  106.                 "personWebId='" + personWebId + '\'' +
  107.                 ", personWebName='" + personWebName + '\'' +
  108.                 ", personWebPic='" + personWebPic + '\'' +
  109.                 ", personWebShow='" + personWebShow + '\'' +
  110.                 ", personWebLink='" + personWebLink + '\'' +
  111.                 ", personWebPlatform='" + personWebPlatform + '\'' +
  112.                 ", personWebField='" + personWebField + '\'' +
  113.                 ", personWebInfo='" + personWebInfo + '\'' +
  114.                 ", personWebKey='" + personWebKey + '\'' +
  115.                 '}';
  116.     }
  117. }

1.3

  1. package com.admin.controller;
  2.  
  3. import com.admin.common.core.controller.BaseController;
  4. import com.admin.common.core.domain.AjaxResult;
  5. import com.admin.common.core.page.TableDataInfo;
  6. import com.admin.domain.ConnectWeb;
  7. import com.admin.domain.PersonWeb;
  8. import com.admin.service.WebService;
  9. import com.admin.utils.transport.Result;
  10. import org.neo4j.driver.Record;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.web.bind.annotation.*;
  13.  
  14. import java.util.List;
  15.  
  16. /**
  17.  * 功能描述：
  18.  *
  19.  * @author wangwei
  20.  * @date 2024-01-16 11:09
  21.  */
  22. @RestController
  23. @RequestMapping("/people/web")
  24. public class WebController extends BaseController {
  25.  
  26.     @Autowired
  27.     private WebService webService;
  28.  
  29.     @GetMapping("/map")
  30.     public TableDataInfo getPersonWebMap() {
  31.         List<Record> list = webService.selectPersonWebMap();
  32.         return getDataTable(list);
  33.     }
  34.  
  35.     @GetMapping("/list")
  36.     public TableDataInfo getPersonWebList() {
  37.         List<PersonWeb> list = webService.selectPersonWebList();
  38.         return getDataTable(list);
  39.     }
  40.  
  41.     @GetMapping("/search/{personWebName}")
  42.     public AjaxResult getPersonWebSearchList(@PathVariable("personWebName") String personWebName) {
  43.         List<PersonWeb> list = webService.selectPersonWebSearchList(personWebName);
  44.         return AjaxResult.success(list);
  45.     }
  46.  
  47.     @GetMapping("/search/{personWebId}/{personWebName}")
  48.     public AjaxResult getPersonWebSearchListOther(@PathVariable("personWebName") String personWebName, @PathVariable("personWebId") String personWebId) {
  49.         List<PersonWeb> list = webService.selectPersonWebSearchListOther(personWebName, personWebId);
  50.         return AjaxResult.success(list);
  51.     }
  52.  
  53.     @GetMapping(value = "/person/{personWebId}")
  54.     public AjaxResult getPersonWebInfo(@PathVariable("personWebId") String personWebId) {
  55.         return AjaxResult.success(webService.selectPersonWebById(personWebId));
  56.     }
  57.  
  58.     @PostMapping("/person")
  59.     public AjaxResult addPersonWeb(@RequestBody PersonWeb personWeb) {
  60.         return toAjax(webService.insertPersonWeb(personWeb));
  61.     }
  62.  
  63.     @PutMapping("/person")
  64.     public AjaxResult editPersonWeb(@RequestBody PersonWeb personWeb) {
  65.         return toAjax(webService.updatePersonWeb(personWeb));
  66.     }
  67.  
  68.     @DeleteMapping("/person/{personWebId}")
  69.     public AjaxResult removePersonWeb(@PathVariable String personWebId) {
  70.         try{
  71.             int rsg = webService.deletePersonWeb(personWebId);
  72.             return toAjax(rsg);
  73.         } catch (Exception e){
  74.             return AjaxResult.error(500, "此节点仍与其他节点有关联关系！");
  75.         }
  76.     }
  77.  
  78.     @GetMapping(value = "/connect/{connectWebId}")
  79.     public AjaxResult getInfoConnectWeb(@PathVariable("connectWebId") String connectWebId) {
  80.         return AjaxResult.success(webService.selectConnectWebById(connectWebId));
  81.     }
  82.  
  83.     @PostMapping("/connect")
  84.     public AjaxResult addConnectWeb(@RequestBody ConnectWeb connectWeb) {
  85.         return toAjax(webService.insertConnectWeb(connectWeb));
  86.     }
  87.  
  88.     @PutMapping("/connect")
  89.     public AjaxResult editConnectWeb(@RequestBody ConnectWeb connectWeb) {
  90.         return toAjax(webService.updateConnectWeb(connectWeb));
  91.     }
  92.  
  93.     @DeleteMapping("/connect/{connectWebId}")
  94.     public AjaxResult removeConnectWeb(@PathVariable String connectWebId) {
  95.         return toAjax(webService.deleteConnectWeb(connectWebId));
  96.     }
  97. }

1.4

  1. package com.admin.service;
  2.  
  3. import com.admin.domain.ConnectWeb;
  4. import com.admin.domain.PersonWeb;
  5. import org.neo4j.driver.Record;
  6.  
  7. import java.util.List;
  8.  
  9. public interface WebService {
  10.     List<Record> selectPersonWebMap();
  11.  
  12.     public List<PersonWeb> selectPersonWebList() ;
  13.  
  14.     public List<PersonWeb> selectPersonWebSearchList(String personWebName) ;
  15.  
  16.     public List<PersonWeb> selectPersonWebSearchListOther(String personWebName, String personWebId) ;
  17.  
  18.     public PersonWeb selectPersonWebById(String personWebId) ;
  19.  
  20.     public int insertPersonWeb(PersonWeb personWeb) ;
  21.  
  22.     public int updatePersonWeb(PersonWeb personWeb) ;
  23.  
  24.     public int deletePersonWeb(String personWebId) ;
  25.  
  26.     public ConnectWeb selectConnectWebById(String connectWebId) ;
  27.  
  28.     public int insertConnectWeb(ConnectWeb connectWeb) ;
  29.  
  30.     public int updateConnectWeb(ConnectWeb connectWeb) ;
  31.  
  32.     public int deleteConnectWeb(String connectWebId) ;
  33.  
  34.  
  35. }

1.5 

  1. package com.admin.service.impl;
  2.  
  3. import com.admin.common.annotation.DataSource;
  4. import com.admin.common.enums.DataSourceType;
  5. import com.admin.domain.ConnectWeb;
  6. import com.admin.domain.PersonWeb;
  7. import com.admin.mapper.ConnectWebMapper;
  8. import com.admin.mapper.PersonWebMapper;
  9. import com.admin.service.WebService;
  10. import com.admin.utils.SnowflakeIdWorker;
  11. import org.neo4j.driver.Record;
  12. import org.springframework.beans.factory.annotation.Autowired;
  13. import org.springframework.stereotype.Service;
  14.  
  15. import java.util.List;
  16.  
  17. @Service
  18. public class WebServiceImpl implements WebService {
  19.  
  20.  
  21.     @Autowired
  22.     private PersonWebMapper personWebMapper;
  23.  
  24.     @Autowired
  25.     private ConnectWebMapper connectWebMapper;
  26.  
  27.     @Autowired
  28.     private SnowflakeIdWorker snowflakeIdWorker;
  29.  
  30.  
  31.  
  32.     @DataSource(value = DataSourceType.SLAVE)
  33.     public List<Record> selectPersonWebMap() {
  34.         return personWebMapper.selectPersonWebMap();
  35.     }
  36.  
  37.     @DataSource(value = DataSourceType.SLAVE)
  38.     public List<PersonWeb> selectPersonWebList() {
  39.         List<PersonWeb> personWebs = personWebMapper.selectPersonWebList();
  40.         return  personWebs;
  41.     }
  42.  
  43.     @DataSource(value = DataSourceType.SLAVE)
  44.     public List<PersonWeb> selectPersonWebSearchList(String personWebName) {
  45. //        System.out.println(personWebName);
  46.         return personWebMapper.selectPersonWebSearchList(personWebName);
  47.     }
  48.  
  49.     @DataSource(value = DataSourceType.SLAVE)
  50.     public List<PersonWeb> selectPersonWebSearchListOther(String personWebName, String personWebId) {
  51. //        System.out.println(personWebName);
  52.         return personWebMapper.selectPersonWebSearchListOther(personWebName, personWebId);
  53.     }
  54.  
  55.     @DataSource(value = DataSourceType.SLAVE)
  56.     public PersonWeb selectPersonWebById(String personWebId) {
  57.         return personWebMapper.selectPersonWebById(personWebId);
  58.     }
  59.  
  60.     @DataSource(value = DataSourceType.SLAVE)
  61.     public int insertPersonWeb(PersonWeb personWeb) {
  62.         personWeb.setPersonWebId(snowflakeIdWorker.nextId());
  63.         return personWebMapper.insertPersonWeb(personWeb);
  64.     }
  65.  
  66.     @DataSource(value = DataSourceType.SLAVE)
  67.     public int updatePersonWeb(PersonWeb personWeb) {
  68.         return personWebMapper.updatePersonWeb(personWeb);
  69.     }
  70.  
  71.     @DataSource(value = DataSourceType.SLAVE)
  72.     public int deletePersonWeb(String personWebId) {
  73.         return personWebMapper.deletePersonWeb(personWebId);
  74.     }
  75.  
  76.     @DataSource(value = DataSourceType.SLAVE)
  77.     public ConnectWeb selectConnectWebById(String connectWebId) {
  78.         return connectWebMapper.selectConnectWebById(connectWebId);
  79.     }
  80.  
  81.     @DataSource(value = DataSourceType.SLAVE)
  82.     public int insertConnectWeb(ConnectWeb connectWeb) {
  83.         connectWeb.setConnectWebId(snowflakeIdWorker.nextId());
  84.         return connectWebMapper.insertConnectWeb(connectWeb);
  85.     }
  86.  
  87.     @DataSource(value = DataSourceType.SLAVE)
  88.     public int updateConnectWeb(ConnectWeb connectWeb) {
  89.         return connectWebMapper.updateConnectWeb(connectWeb);
  90.     }
  91.  
  92.     @DataSource(value = DataSourceType.SLAVE)
  93.     public int deleteConnectWeb(String connectWebId) {
  94.         return connectWebMapper.deleteConnectWeb(connectWebId);
  95.     }
  96. }

1.6

  1. package com.admin.mapper;
  2.  
  3. import com.admin.domain.ConnectWeb;
  4. import org.springframework.stereotype.Repository;
  5.  
  6. /**
  7.  * @author wangwei
  8.  */
  9. @Repository
  10. public interface ConnectWebMapper {
  11.  
  12.     /**
  13.      * 查询单个连接信息
  14.      *
  15.      * @param connectWebId 连接id
  16.      * @return ConnectWeb实体信息
  17.      */
  18.     ConnectWeb selectConnectWebById(String connectWebId);
  19.  
  20.     /**
  21.      * 插入单个连接信息
  22.      *
  23.      * @param connectWeb 连接实体
  24.      * @return 插入个数
  25.      */
  26.     int insertConnectWeb(ConnectWeb connectWeb);
  27.  
  28.     /**
  29.      * 修改单个连接信息
  30.      *
  31.      * @param connectWeb 修改实体
  32.      * @return 插入个数
  33.      */
  34.     int updateConnectWeb(ConnectWeb connectWeb);
  35.  
  36.     /**
  37.      * 删除单个连接
  38.      *
  39.      * @param connectWebId 连接实体
  40.      * @return 删除个数
  41.      */
  42.     int deleteConnectWeb(String connectWebId);
  43. }

1.7

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  3. <mapper namespace="com.admin.mapper.ConnectWebMapper">
  4.  
  5.     <select id="selectConnectWebById" parameterType="String" resultType="com.admin.domain.ConnectWeb">
  6.         MATCH (m)-[c:ConnectWeb{
  7.         connectWebId: #{connectWebId}
  8.         }]->(n)
  9.         RETURN
  10.         c.connectWebId as connectWebId,
  11.         c.connectWebName as connectWebName,
  12.         c.connectWebInfo as connectWebInfo,
  13.         m.personWebId as personWebIdAlpha,
  14.         m.personWebName as personWebIdAlphaName,
  15.         n.personWebId as personWebIdBeta,
  16.         n.personWebName as personWebIdBetaName
  17.     </select>
  18.  
  19.     <insert id="insertConnectWeb" parameterType="com.admin.domain.ConnectWeb">
  20.         match(pa:PersonWeb{
  21.         personWebId: #{personWebIdAlpha}
  22.         }),(pb:PersonWeb{
  23.         personWebId: #{personWebIdBeta}
  24.         })
  25.         merge (pa)-[c:ConnectWeb{
  26.         connectWebId: #{connectWebId},
  27.         connectWebName: #{connectWebName},
  28.         connectWebInfo: #{connectWebInfo}
  29.         }]->(pb)
  30.     </insert>
  31.  
  32.     <update id="updateConnectWeb" parameterType="com.admin.domain.ConnectWeb">
  33.         MATCH (m)-[c:ConnectWeb{
  34.         connectWebId: #{connectWebId}
  35.         }]->(n)
  36.         <trim prefix="SET" suffixOverrides=",">
  37.             <if test="connectWebName != null">c.connectWebName = #{connectWebName},</if>
  38.             <if test="connectWebInfo != null">c.connectWebInfo = #{connectWebInfo},</if>
  39.             <if test="personWebIdAlpha != null">m.personWebId = #{personWebIdAlpha},</if>
  40.             <if test="personWebIdBeta != null">n.personWebId = #{personWebIdBeta},</if>
  41.         </trim>
  42.     </update>
  43.  
  44.     <delete id="deleteConnectWeb" parameterType="String">
  45.         MATCH ()-[c:ConnectWeb{
  46.         connectWebId: #{connectWebId}
  47.         }]-()
  48.         DELETE c
  49.     </delete>
  50.  
  51. </mapper>

1.8 maven 

  1.  
  2.         <!--手动添加-->
  3.         <!--neo4j-jdbc-driver-->
  4.         <dependency>
  5.             <groupId>org.neo4j</groupId>
  6.             <artifactId>neo4j-jdbc-driver</artifactId>
  7.             <version>4.0.1</version>
  8.         </dependency>

1.9 数据库配置

  1.       #TODO 从库数据源 neo4j
  2.             slave:
  3.                 # 从数据源开关/默认关闭
  4.                 enabled: true
  5.                 url: jdbc:neo4j:bolt://127.0.0.1:1273
  6.                 username: neo4j
  7.                 password: neo4j
  8.                 driverClassName: org.neo4j.jdbc.bolt.BoltDriver
  9.  
  10.  
  11.                          #TODO NEO4J 配置检测连接是否有效
  12.             validationQuery: match (n) return id(n) limit 2

二、vue前台

2.1

  1. <template>
  2.   <div class="app-container">
  3.     <div class="echarts">
  4.       <div class="bin" id="main"></div>
  5.     </div>
  6.  
  7.     <el-row :gutter="10" class="mb8">
  8.       <el-col :span="1.5">
  9.         <el-button
  10.           type="primary"
  11.           icon="el-icon-plus"
  12.           size="mini"
  13.           @click="handleAdd"
  14.         >新增成员
  15.         </el-button>
  16.       </el-col>
  17.       <el-col :span="1.5">
  18.         <el-button
  19.           type="success"
  20.           icon="el-icon-edit"
  21.           size="mini"
  22.           :disabled="single"
  23.           @click="handleUpdate"
  24.         >修改成员
  25.         </el-button>
  26.       </el-col>
  27.       <el-col :span="1.5">
  28.         <el-button
  29.           type="danger"
  30.           icon="el-icon-plus"
  31.           size="mini"
  32.           @click="handleAddConnect"
  33.         >新增关系
  34.         </el-button>
  35.       </el-col>
  36.       <right-toolbar :showSearch.sync="showSearch" @queryTable="refresh"></right-toolbar>
  37.     </el-row>
  38.     <el-table v-loading="loading" :data="personList" @selection-change="handleSelectionChange">
  39.       <el-table-column type="selection" width="55" align="center"/>
  40.       <el-table-column label="成员昵称" align="center" prop="personWebName" :show-overflow-tooltip="true">
  41.         <template slot-scope="scope">
  42.           <a v-if="scope.row.personWebLink" target="_blank" :href="scope.row.personWebLink" class="link-type"
  43.              style="margin-right: 10px;">
  44.             <span>{{ scope.row.personWebName }}</span>
  45.           </a>
  46.           <span v-else>{{ scope.row.personWebName }}</span>
  47.         </template>
  48.       </el-table-column>
  49.       <el-table-column label="成员简介" align="center" prop="personWebInfo" :show-overflow-tooltip="true"/>
  50.       <el-table-column label="成员头像" align="center">
  51.         <template slot-scope="scope">
  52.           <img :src="person_pic_url + scope.row.personWebPic" alt="" class="pic-in-list">
  53.         </template>
  54.       </el-table-column>
  55.       <el-table-column label="活跃平台" align="center" prop="personWebPlatform" :formatter="personPlatformFormat">
  56.       </el-table-column>
  57.       <el-table-column label="常驻领域" align="center" prop="personWebField">
  58.         <template slot-scope="scope">
  59.           <el-tag v-for="ikey in scope.row.personWebField" :key="ikey" type="success" style="margin: 10px;">
  60.             {{ikey}}
  61.           </el-tag>
  62.         </template>
  63.       </el-table-column>
  64.       <el-table-column label="沟通要旨" align="center" prop="personWebKey" :show-overflow-tooltip="true"/>
  65.       <el-table-column label="是否展示" align="center" width="100" prop="personWebShow" :formatter="personShowFormat">
  66.         <template slot-scope="scope">
  67.           <el-tag :type="scope.row.personWebShow | statusFilter">
  68.             {{ scope.row.personWebShow | statusShowFilter}}
  69.           </el-tag>
  70.         </template>
  71.       </el-table-column>
  72.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  73.         <template slot-scope="scope">
  74.           <el-button
  75.             size="mini"
  76.             type="text"
  77.             icon="el-icon-edit"
  78.             @click="handleUpdate(scope.row)"
  79.           >修改
  80.           </el-button>
  81.           <el-button
  82.             size="mini"
  83.             type="text"
  84.             icon="el-icon-delete"
  85.             @click="handleDelete(scope.row)"
  86.           >删除
  87.           </el-button>
  88.         </template>
  89.       </el-table-column>
  90.     </el-table>
  91.  
  92.     <el-dialog :visible.sync="openConnect" width="600px" append-to-body :title="titleConnect">
  93.       <el-form ref="formConnect" :model="formConnect" :rules="rulesConnect" size="medium" label-width="100px">
  94.         <el-row type="flex" justify="start" align="top">
  95.           <el-col :span="12">
  96.             <el-form-item
  97.               label="关联上级"
  98.               prop="personWebIdAlpha"
  99.               :rules="requireFlag ? rulesConnect.personWebIdAlpha:[{
  100.                 required: false
  101.                }]"
  102.             >
  103.               <el-select
  104.                 :disabled="!requireFlag"
  105.                 v-model="formConnect.personWebIdAlpha"
  106.                 class="filter-item"
  107.                 filterable
  108.                 remote
  109.                 reserve-keyword
  110.                 clearable
  111.                 :placeholder="formConnect.personWebIdAlphaName"
  112.                 :remote-method="remoteMethodStart"
  113.                 :loading="selectLoading" value="">
  114.                 <el-option
  115.                   v-for="item in optionsStart"
  116.                   :key="item.personWebId"
  117.                   :label="item.personWebName"
  118.                   :value="item.personWebId">
  119.                 </el-option>
  120.               </el-select>
  121.             </el-form-item>
  122.           </el-col>
  123.           <el-col :span="12">
  124.             <el-form-item
  125.               label="关联下属"
  126.               prop="personWebIdBeta"
  127.               :rules="requireFlag ? rulesConnect.personWebIdBeta:[{
  128.                 required: false
  129.               }]"
  130.             >
  131.               <el-select
  132.                 :disabled="!requireFlag"
  133.                 v-model="formConnect.personWebIdBeta"
  134.                 class="filter-item"
  135.                 filterable
  136.                 remote
  137.                 reserve-keyword
  138.                 clearable
  139.                 :placeholder="formConnect.personWebIdBetaName"
  140.                 :remote-method="remoteMethodEnd"
  141.                 :loading="selectLoading" value="">
  142.                 <el-option
  143.                   v-for="item in optionsEnd"
  144.                   :key="item.personWebId"
  145.                   :label="item.personWebName"
  146.                   :value="item.personWebId">
  147.                 </el-option>
  148.               </el-select>
  149.             </el-form-item>
  150.           </el-col>
  151.         </el-row>
  152.         <el-form-item label="关联关系" prop="connectWebName">
  153.           <el-input v-model="formConnect.connectWebName" placeholder="请输入关联关系" clearable :style="{width: '100%'}">
  154.           </el-input>
  155.         </el-form-item>
  156.         <el-form-item label="关联信息" prop="connectWebInfo">
  157.           <el-input v-model="formConnect.connectWebInfo" type="textarea" placeholder="请输入关联信息"
  158.                     :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
  159.         </el-form-item>
  160.       </el-form>
  161.       <div slot="footer">
  162.         <el-button v-if="!requireFlag" type="danger" @click="deleteConnect">删除</el-button>
  163.         <el-button @click="cancelConnect">取消</el-button>
  164.         <el-button type="primary" @click="handelConfirm">确定</el-button>
  165.       </div>
  166.     </el-dialog>
  167.  
  168.     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
  169.       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  170.         <el-form-item label="成员昵称" prop="personWebName">
  171.           <el-input v-model="form.personWebName" placeholder="请输入成员昵称"/>
  172.         </el-form-item>
  173.         <el-form-item label="成员简介" prop="personWebInfo">
  174.           <el-input v-model="form.personWebInfo" type="textarea" placeholder="请输入成员简介"/>
  175.         </el-form-item>
  176.         <el-form-item label="跳转链接" prop="personWebLink">
  177.           <el-input v-model="form.personWebLink" placeholder="请输入跳转链接"/>
  178.         </el-form-item>
  179.         <el-form-item label="成员头像" prop="personWebPic">
  180.           <el-button v-show="!form.personWebPic" type="primary" size="mini" @click="imageCropperShow()">
  181.             上传图片
  182.           </el-button>
  183.           <el-button v-show="form.personWebPic" type="primary" size="mini" @click="imageCropperShow()">
  184.             更新图片
  185.           </el-button>
  186.           <el-button v-show="form.personWebPic" type="primary" size="mini" @click="picShow(form.personWebPic)">
  187.             预览
  188.           </el-button>
  189.         </el-form-item>
  190.  
  191.         <el-form-item label="活跃平台">
  192.           <el-checkbox-group v-model="form.personWebPlatform">
  193.             <el-checkbox
  194.               v-for="dict in personWebPlatformOptions"
  195.               :key="dict.dictValue"
  196.               :label="dict.dictValue">
  197.               {{dict.dictLabel}}
  198.             </el-checkbox>
  199.           </el-checkbox-group>
  200.         </el-form-item>
  201.  
  202.         <el-form-item label="常驻领域" prop="personWebField">
  203.           <el-tag
  204.             :key="index"
  205.             v-for="(tag, index) in form.personWebField"
  206.             closable
  207.             :disable-transitions="false"
  208.             @close="handleClose(tag)">
  209.             {{tag}}
  210.           </el-tag>
  211.           <el-input
  212.             class="input-new-tag"
  213.             v-if="inputVisible"
  214.             v-model="inputValue"
  215.             ref="saveTagInput"
  216.             size="small"
  217.             @keyup.enter.native="handleInputConfirm"
  218.             @blur="handleInputConfirm"
  219.           >
  220.           </el-input>
  221.           <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
  222.         </el-form-item>
  223.  
  224.         <el-form-item label="沟通要旨" prop="personWebInfo">
  225.           <el-input v-model="form.personWebKey" type="textarea" placeholder="请输入沟通要旨"/>
  226.         </el-form-item>
  227.  
  228.         <el-form-item label="是否展示">
  229.           <el-radio-group v-model="form.personWebShow">
  230.             <el-radio
  231.               v-for="dict in personWebShowOptions"
  232.               :key="dict.dictValue"
  233.               :label="dict.dictValue"
  234.             >{{dict.dictLabel}}
  235.             </el-radio>
  236.           </el-radio-group>
  237.         </el-form-item>
  238.  
  239.       </el-form>
  240.       <div slot="footer" class="dialog-footer">
  241.         <el-button type="primary" @click="submitForm">确 定</el-button>
  242.         <el-button @click="cancel">取 消</el-button>
  243.       </div>
  244.     </el-dialog>
  245.  
  246.     <my-upload
  247.       method="POST"
  248.       field="file"
  249.       v-model="upload.cropperShow"
  250.       :headers="upload.headers"
  251.       :width=300
  252.       :height=300
  253.       :url="this.upload.logo_url"
  254.       lang-type='zh'
  255.       img-format='jpg'
  256.       img-bgc='#FFF'
  257.       :no-circle=true
  258.       @crop-upload-success="cropUploadSuccess">
  259.     </my-upload>
  260.  
  261.     <el-dialog title="图片预览" :visible.sync="picVisible" width="500px" center>
  262.       <div style="text-align: center">
  263.         <img :src="answerPicImageUrl" alt="" class="pic-in-dialog">
  264.       </div>
  265.       <span slot="footer" class="dialog-footer">
  266.         <el-button @click="picVisible = false">确定</el-button>
  267.       </span>
  268.     </el-dialog>
  269.  
  270.   </div>
  271.  
  272. </template>
  273.  
  274. <script>
  275.   // import graph from '@/assets/binray/les-miserables';
  276.   import {
  277.     getPersonWebMap,
  278.     getPersonWebList,
  279.     getPersonWebSearch,
  280.     getPersonWebInfo,
  281.     addPersonWeb,
  282.     editPersonWeb,
  283.     removePersonWeb,
  284.     getInfoConnectWeb,
  285.     addConnectWeb,
  286.     editConnectWeb,
  287.     removeConnectWeb,
  288.     getPersonWebSearchOther
  289.   } from '@/api/person';
  290.   import 'babel-polyfill'; // es6 shim
  291.   import myUpload from 'vue-image-crop-upload/upload-2';
  292.  
  293.   export default {
  294.     name: 'Echarts',
  295.      components: {myUpload},
  296.     filters: {
  297.       statusShowFilter(status) {
  298.         const statusMap = {
  299.           0: '正常',
  300.           1: '已下线',
  301.         }
  302.         return statusMap[status]
  303.       },
  304.       statusFilter(status) {
  305.         const statusMap = {
  306.           0: 'success',
  307.           1: 'warning',
  308.         }
  309.         return statusMap[status]
  310.       }
  311.     },
  312.     data() {
  313.       return {
  314.         // 新增or更新，新增为true，更新为false
  315.         requireFlag: false,
  316.         myChart: undefined,
  317.         // 表单参数
  318.         form: {},
  319.         formConnect: {},
  320.         // 表单校验
  321.         rules: {
  322.           personWebName: [{
  323.             required: true,
  324.             message: '成员名称为必填项',
  325.             trigger: 'blur'
  326.           }],
  327.          /* personWebPic: [{
  328.             required: true,
  329.             message: '成员头图为必填项',
  330.             trigger: 'change'
  331.           }],*/
  332.           personWebShow: [{
  333.             required: true,
  334.             message: '是否展示为必填项',
  335.             trigger: 'change'
  336.           }],
  337.         },
  338.         rulesConnect: {
  339.           personWebIdAlpha: [{
  340.             required: true,
  341.             message: '',
  342.             trigger: 'blur'
  343.           }],
  344.           personWebIdBeta: [{
  345.             required: true,
  346.             message: '',
  347.             trigger: 'blur'
  348.           }],
  349.           connectWebName: [{
  350.             required: true,
  351.             message: '请输入关联关系',
  352.             trigger: 'blur'
  353.           }],
  354.           connectWebInfo: [{
  355.             required: true,
  356.             message: '请输入关联信息',
  357.             trigger: 'blur'
  358.           }],
  359.         },
  360.         selectLoading: false,
  361.         optionsStart: [],
  362.         optionsEnd: [],
  363.         personList: [],
  364.         personMap: [],
  365.         // 临时标签列表
  366.         personWebPlatformTemp: undefined,
  367.         personWebFieldTemp: undefined,
  368.         // 路径
  369.         person_pic_url: process.env.VUE_APP_BASE_API + "/File/upload/nosql/",
  370.         //D:\File\upload\nosql
  371.         // 图片预览框
  372.         picVisible: false,
  373.         // 拼接
  374.         answerPicImageUrl: "",
  375.         // 路径
  376.         // 遮罩层
  377.         loading: true,
  378.         // 选中数组
  379.         ids: [],
  380.         // 非单个禁用
  381.         single: true,
  382.         // 非多个禁用
  383.         multiple: true,
  384.         // 显示搜索条件
  385.         showSearch: true,
  386.         // 总条数
  387.         total: 0,
  388.         upload: {
  389.           // 显示上传图片的弹出框
  390.           cropperShow: false,
  391.           // 图标路径
  392.           logo_url: process.env.VUE_APP_BASE_API + "/common/upload",
  393.         },
  394.         // 弹出层标题
  395.         title: "",
  396.         titleConnect: "",
  397.         // 是否显示弹出层
  398.         open: false,
  399.         openConnect: false,
  400.         inputVisible: false,
  401.         // 具体内容
  402.         inputValue: '',
  403.         personWebShowOptions: [],
  404.         personWebPlatformOptions: [],
  405.         searchQueryParams: {
  406.           // 这个一定得有
  407.           personWebIdStart: null,
  408.           // 这个可有可无
  409.           personWebIdEnd: null,
  410.         },
  411.         graph: {
  412.           nodes: [],
  413.           links: []
  414.         },
  415.         mapCheckList: []
  416.       }
  417.     },
  418.     created() {
  419.       this.getList();
  420.       this.personWebShowOptions = [{
  421.         "searchValue": null,
  422.         "createBy": "admin",
  423.         "createTime": "2021-02-21 19:29:04",
  424.         "updateBy": null,
  425.         "updateTime": null,
  426.         "remark": null,
  427.         "params": {},
  428.         "dictCode": 124,
  429.         "dictSort": 0,
  430.         "dictLabel": "已上架",
  431.         "dictValue": "0",
  432.         "dictType": "material_public",
  433.         "cssClass": null,
  434.         "listClass": null,
  435.         "isDefault": "N",
  436.         "status": "0",
  437.         "default": false
  438.       }, {
  439.         "searchValue": null,
  440.         "createBy": "admin",
  441.         "createTime": "2021-02-21 19:29:39",
  442.         "updateBy": null,
  443.         "updateTime": null,
  444.         "remark": null,
  445.         "params": {},
  446.         "dictCode": 125,
  447.         "dictSort": 1,
  448.         "dictLabel": "未发布",
  449.         "dictValue": "1",
  450.         "dictType": "material_public",
  451.         "cssClass": null,
  452.         "listClass": null,
  453.         "isDefault": "N",
  454.         "status": "0",
  455.         "default": false
  456.       }];
  457.       this.personWebPlatformOptions = [{
  458.         "searchValue": null,
  459.         "createBy": "admin",
  460.         "createTime": "2021-03-26 02:20:51",
  461.         "updateBy": null,
  462.         "updateTime": null,
  463.         "remark": null,
  464.         "params": {},
  465.         "dictCode": 135,
  466.         "dictSort": 0,
  467.         "dictLabel": "哔哩哔哩",
  468.         "dictValue": "0",
  469.         "dictType": "media_platform",
  470.         "cssClass": null,
  471.         "listClass": null,
  472.         "isDefault": "N",
  473.         "status": "0",
  474.         "default": false
  475.       }, {
  476.         "searchValue": null,
  477.         "createBy": "admin",
  478.         "createTime": "2021-03-26 02:21:03",
  479.         "updateBy": null,
  480.         "updateTime": null,
  481.         "remark": null,
  482.         "params": {},
  483.         "dictCode": 136,
  484.         "dictSort": 1,
  485.         "dictLabel": "今日头条",
  486.         "dictValue": "1",
  487.         "dictType": "media_platform",
  488.         "cssClass": null,
  489.         "listClass": null,
  490.         "isDefault": "N",
  491.         "status": "0",
  492.         "default": false
  493.       }, {
  494.         "searchValue": null,
  495.         "createBy": "admin",
  496.         "createTime": "2021-03-26 02:21:12",
  497.         "updateBy": null,
  498.         "updateTime": null,
  499.         "remark": null,
  500.         "params": {},
  501.         "dictCode": 137,
  502.         "dictSort": 2,
  503.         "dictLabel": "抖音",
  504.         "dictValue": "2",
  505.         "dictType": "media_platform",
  506.         "cssClass": null,
  507.         "listClass": null,
  508.         "isDefault": "N",
  509.         "status": "0",
  510.         "default": false
  511.       }, {
  512.         "searchValue": null,
  513.         "createBy": "admin",
  514.         "createTime": "2021-03-26 02:21:21",
  515.         "updateBy": null,
  516.         "updateTime": null,
  517.         "remark": null,
  518.         "params": {},
  519.         "dictCode": 138,
  520.         "dictSort": 3,
  521.         "dictLabel": "西瓜视频",
  522.         "dictValue": "3",
  523.         "dictType": "media_platform",
  524.         "cssClass": null,
  525.         "listClass": null,
  526.         "isDefault": "N",
  527.         "status": "0",
  528.         "default": false
  529.       }, {
  530.         "searchValue": null,
  531.         "createBy": "admin",
  532.         "createTime": "2021-03-26 02:21:29",
  533.         "updateBy": null,
  534.         "updateTime": null,
  535.         "remark": null,
  536.         "params": {},
  537.         "dictCode": 139,
  538.         "dictSort": 4,
  539.         "dictLabel": "YouTube",
  540.         "dictValue": "4",
  541.         "dictType": "media_platform",
  542.         "cssClass": null,
  543.         "listClass": null,
  544.         "isDefault": "N",
  545.         "status": "0",
  546.         "default": false
  547.       }, {
  548.         "searchValue": null,
  549.         "createBy": "admin",
  550.         "createTime": "2021-03-26 02:22:06",
  551.         "updateBy": null,
  552.         "updateTime": null,
  553.         "remark": null,
  554.         "params": {},
  555.         "dictCode": 140,
  556.         "dictSort": 5,
  557.         "dictLabel": "知乎",
  558.         "dictValue": "5",
  559.         "dictType": "media_platform",
  560.         "cssClass": null,
  561.         "listClass": null,
  562.         "isDefault": "N",
  563.         "status": "0",
  564.         "default": false
  565.       }, {
  566.         "searchValue": null,
  567.         "createBy": "admin",
  568.         "createTime": "2021-03-26 02:22:17",
  569.         "updateBy": null,
  570.         "updateTime": null,
  571.         "remark": null,
  572.         "params": {},
  573.         "dictCode": 141,
  574.         "dictSort": 6,
  575.         "dictLabel": "小红书",
  576.         "dictValue": "6",
  577.         "dictType": "media_platform",
  578.         "cssClass": null,
  579.         "listClass": null,
  580.         "isDefault": "N",
  581.         "status": "0",
  582.         "default": false
  583.       }, {
  584.         "searchValue": null,
  585.         "createBy": "admin",
  586.         "createTime": "2021-03-26 02:22:27",
  587.         "updateBy": null,
  588.         "updateTime": null,
  589.         "remark": null,
  590.         "params": {},
  591.         "dictCode": 142,
  592.         "dictSort": 7,
  593.         "dictLabel": "快手",
  594.         "dictValue": "7",
  595.         "dictType": "media_platform",
  596.         "cssClass": null,
  597.         "listClass": null,
  598.         "isDefault": "N",
  599.         "status": "0",
  600.         "default": false
  601.       }, {
  602.         "searchValue": null,
  603.         "createBy": "admin",
  604.         "createTime": "2021-03-26 02:22:49",
  605.         "updateBy": null,
  606.         "updateTime": null,
  607.         "remark": null,
  608.         "params": {},
  609.         "dictCode": 143,
  610.         "dictSort": 8,
  611.         "dictLabel": "Acfun",
  612.         "dictValue": "8",
  613.         "dictType": "media_platform",
  614.         "cssClass": null,
  615.         "listClass": null,
  616.         "isDefault": "N",
  617.         "status": "0",
  618.         "default": false
  619.       }, {
  620.         "searchValue": null,
  621.         "createBy": "admin",
  622.         "createTime": "2021-03-26 02:23:05",
  623.         "updateBy": null,
  624.         "updateTime": null,
  625.         "remark": null,
  626.         "params": {},
  627.         "dictCode": 144,
  628.         "dictSort": 9,
  629.         "dictLabel": "网易云音乐",
  630.         "dictValue": "9",
  631.         "dictType": "media_platform",
  632.         "cssClass": null,
  633.         "listClass": null,
  634.         "isDefault": "N",
  635.         "status": "0",
  636.         "default": false
  637.       }, {
  638.         "searchValue": null,
  639.         "createBy": "admin",
  640.         "createTime": "2021-03-26 02:23:34",
  641.         "updateBy": null,
  642.         "updateTime": null,
  643.         "remark": null,
  644.         "params": {},
  645.         "dictCode": 145,
  646.         "dictSort": 10,
  647.         "dictLabel": "豆瓣",
  648.         "dictValue": "10",
  649.         "dictType": "media_platform",
  650.         "cssClass": null,
  651.         "listClass": null,
  652.         "isDefault": "N",
  653.         "status": "0",
  654.         "default": false
  655.       }, {
  656.         "searchValue": null,
  657.         "createBy": "admin",
  658.         "createTime": "2021-03-26 02:23:52",
  659.         "updateBy": null,
  660.         "updateTime": null,
  661.         "remark": null,
  662.         "params": {},
  663.         "dictCode": 146,
  664.         "dictSort": 11,
  665.         "dictLabel": "微博",
  666.         "dictValue": "11",
  667.         "dictType": "media_platform",
  668.         "cssClass": null,
  669.         "listClass": null,
  670.         "isDefault": "N",
  671.         "status": "0",
  672.         "default": false
  673.       }, {
  674.         "searchValue": null,
  675.         "createBy": "admin",
  676.         "createTime": "2021-03-26 02:24:34",
  677.         "updateBy": null,
  678.         "updateTime": null,
  679.         "remark": null,
  680.         "params": {},
  681.         "dictCode": 147,
  682.         "dictSort": 12,
  683.         "dictLabel": "新片场",
  684.         "dictValue": "12",
  685.         "dictType": "media_platform",
  686.         "cssClass": null,
  687.         "listClass": null,
  688.         "isDefault": "N",
  689.         "status": "0",
  690.         "default": false
  691.       }, {
  692.         "searchValue": null,
  693.         "createBy": "admin",
  694.         "createTime": "2021-03-26 02:24:50",
  695.         "updateBy": null,
  696.         "updateTime": null,
  697.         "remark": null,
  698.         "params": {},
  699.         "dictCode": 148,
  700.         "dictSort": 13,
  701.         "dictLabel": "图虫",
  702.         "dictValue": "13",
  703.         "dictType": "media_platform",
  704.         "cssClass": null,
  705.         "listClass": null,
  706.         "isDefault": "N",
  707.         "status": "0",
  708.         "default": false
  709.       }]
  710.     },
  711.     methods: {
  712.       myEcharts() {
  713.         const that = this;
  714.         this.myChart.showLoading();
  715.  
  716.         this.graph.nodes.forEach(function (node) {
  717.           node.label = {
  718.             show: true
  719.           };
  720.         });
  721.         const option = {
  722.           title: {
  723.             text: '',
  724.             subtext: '',
  725.             top: 'bottom',
  726.             left: 'right'
  727.           },
  728.           tooltip: {
  729.             trigger: "item",
  730.             // textStyle: {
  731.             //   width: 10,
  732.             //   fontWeight: "bold",
  733.             //   overflow: "truncate"
  734.             // },
  735.             confine: 'true',
  736.             formatter: function (param) {
  737.               if (param.dataType === 'edge') {
  738.                 // 连接
  739.                 return [
  740.                   '关系：' + param.data["connectWebName"] + '<br/>',
  741.                   '详情：' + param.data["connectWebInfo"] + '<br/>'
  742.                 ].join('');
  743.               } else if (param.dataType === 'node') {
  744.                 // 处理标签
  745.                 let graphTag = '';
  746.                 const arr1 = JSON.parse(param.data["personWebField"]);
  747.                 for (let i = 0; i < arr1.length; i++) {
  748.                   if (i === 0) {
  749.                     graphTag = `<span style="
  750.                       display: inline-block;
  751.                       border-radius: 4px;
  752.                       min-width: min-content;
  753.                       padding: 0 10px;
  754.                       margin: 5px;
  755.                       background-color: #e7faf0;
  756.                       border-color: #d0f5e0;
  757.                       color: #13ce66;
  758.                       border-width: 1px;
  759.                       border-style: solid;
  760.                     ">${arr1[i]}</span>`
  761.                   } else {
  762.                     graphTag = graphTag + `<span style="
  763.                       display: inline-block;
  764.                       border-radius: 4px;
  765.                       min-width: min-content;
  766.                       padding: 0 10px;
  767.                       margin: 5px;
  768.                       background-color: #e7faf0;
  769.                       border-color: #d0f5e0;
  770.                       color: #13ce66;
  771.                       border-width: 1px;
  772.                       border-style: solid;
  773.                     ">${arr1[i]}</span>`;
  774.                   }
  775.                 }
  776.                 // 处理字典
  777.                 let graphDict = '';
  778.                 const arrTemp = that.selectDictLabel(that.personWebPlatformOptions, JSON.parse(param.data["personWebPlatform"]));
  779.                 const arr2 = arrTemp.split(', ')
  780.                 for (let i = 0; i < arr2.length; i++) {
  781.                   if (i === 0) {
  782.                     graphDict = `<span style="
  783.                       display: inline-block;
  784.                       border-radius: 4px;
  785.                       min-width: min-content;
  786.                       padding: 0 10px;
  787.                       margin: 5px;
  788.                       background-color: #faece7;
  789.                       border-color: #f5dad0;
  790.                       color: #ff7d27;
  791.                       border-width: 1px;
  792.                       border-style: solid;
  793.                     ">${arr2[i]}</span>`
  794.                   } else {
  795.                     graphDict = graphDict + `<span style="
  796.                       display: inline-block;
  797.                       border-radius: 4px;
  798.                       min-width: min-content;
  799.                       padding: 0 10px;
  800.                       margin: 5px;
  801.                       background-color: #faece7;
  802.                       border-color: #f5dad0;
  803.                       color: #ff7d27;
  804.                       border-width: 1px;
  805.                       border-style: solid;
  806.                     ">${arr2[i]}</span>`;
  807.                   }
  808.                 }
  809.                 // 节点
  810.                 return [
  811.                   '<div style="text-align:left;max-width:1000px;">昵称：' + param.data["name"] + '<br/>',
  812.                   '<div style="display:block;word-break: break-all;word-wrap: break-word;white-space: pre-line;">简介：' + param.data["personWebInfo"] + '</div>',
  813.                   '常驻领域：' + graphTag + '<br/>',
  814.                   '活跃平台：' + graphDict + '</div><br/>',
  815.                 ].join('');
  816.               }
  817.  
  818.             }
  819.           },
  820.           legend: [],
  821.           animationDuration: 150,
  822.           animationEasingUpdate: 'quinticInOut',
  823.           series: [
  824.             {
  825.               name: '',
  826.               type: 'graph',
  827.               layout: "force",
  828.               force: {
  829.                 repulsion: 200,
  830.                 edgeLength: 100,
  831.                 gravity: 0.2
  832.               },
  833.               symbolSize: 50,
  834.               data: this.graph.nodes,
  835.               links: this.graph.links,
  836.               // data: graph.nodes,
  837.               // links: graph.links,
  838.               roam: true,
  839.               label: {
  840.                 show: true,
  841.               },
  842.               draggable: true,
  843.  
  844.               labelLayout: {
  845.                 hideOverlap: false
  846.               },
  847.               lineStyle: {
  848.                 color: 'source',
  849.                 curveness: 0.3
  850.               },
  851.               emphasis: {
  852.                 focus: 'adjacency',
  853.                 lineStyle: {
  854.                   width: 10
  855.                 }
  856.               }
  857.             }
  858.           ]
  859.         };
  860.         this.myChart.clear();
  861.         option && this.myChart.setOption(option, true);
  862.         // console.log(option)
  863.         this.myChart.hideLoading();
  864.         this.myChart.on("click", function (e) {
  865.           if (e.dataType === 'edge') {
  866.             that.handleUpdateConnect(e.data)
  867.           } else if (e.dataType === 'node') {
  868.             console.log(e)
  869.             e.data.personWebId = e.data.id
  870.             that.handleUpdate(e.data)
  871.           }
  872.         })
  873.       },
  874.       getList() {
  875.         this.loading = true;
  876.         getPersonWebList().then(response => {
  877.           this.personList = response.rows;
  878.           Object.keys(this.personList).forEach(key => {
  879.             this.personList[key].personWebPlatform = JSON.parse(this.personList[key].personWebPlatform)
  880.             this.personList[key].personWebField = JSON.parse(this.personList[key].personWebField)
  881.           });
  882.           this.loading = false;
  883.         });
  884.       },
  885.       async getMap() {
  886.  
  887.         this.loading = true;
  888.         await getPersonWebMap().then(response => {
  889.           this.graph = {
  890.             nodes: [],
  891.             links: []
  892.           };
  893.           this.mapCheckList = [];
  894.           this.personMap = response.rows;
  895.           Object.keys(this.personMap).forEach(key => {
  896.             // 导入节点，列表为空表示首次加入元素，反之亦然
  897.             if (this.graph.nodes !== []) {
  898.               // 如果导入过就不用重复导入了
  899.               if (!this.mapCheckList.includes(this.personMap[key].PersonAlpha.personWebId)) {
  900.                 this.pushAlpha(key);
  901.               }
  902.               if (!this.mapCheckList.includes(this.personMap[key].PersonBeta.personWebId)) {
  903.                 this.pushBeta(key);
  904.               }
  905.             } else {
  906.               this.pushAlpha(key);
  907.               this.pushBeta(key);
  908.             }
  909.             // 把导入过的节点id存进checkList
  910.             this.mapCheckList.push(this.personMap[key].PersonAlpha.personWebId)
  911.             this.mapCheckList.push(this.personMap[key].PersonBeta.personWebId)
  912.             // 导入关系
  913.             this.pushConnect(key);
  914.           });
  915.         });
  916.         // console.log(this.graph)
  917.         this.loading = false;
  918.       },
  919.       pushAlpha(key) {
  920.  
  921.         this.graph.nodes.push({
  922.           id: this.personMap[key].PersonAlpha.personWebId,
  923.           name: this.personMap[key].PersonAlpha.personWebName,
  924.           personWebPic: this.personMap[key].PersonAlpha.personWebPic,
  925.           personWebShow: this.personMap[key].PersonAlpha.personWebShow,
  926.           personWebLink: this.personMap[key].PersonAlpha.personWebLink,
  927.           personWebPlatform: this.personMap[key].PersonAlpha.personWebPlatform,
  928.           personWebField: this.personMap[key].PersonAlpha.personWebField,
  929.           personWebInfo: this.personMap[key].PersonAlpha.personWebInfo,
  930.           personWebKey: this.personMap[key].PersonAlpha.personWebKey,
  931.         })
  932.       },
  933.       pushBeta(key) {
  934.         this.graph.nodes.push({
  935.           id: this.personMap[key].PersonBeta.personWebId,
  936.           name: this.personMap[key].PersonBeta.personWebName,
  937.           personWebPic: this.personMap[key].PersonBeta.personWebPic,
  938.           personWebShow: this.personMap[key].PersonBeta.personWebShow,
  939.           personWebLink: this.personMap[key].PersonBeta.personWebLink,
  940.           personWebPlatform: this.personMap[key].PersonBeta.personWebPlatform,
  941.           personWebField: this.personMap[key].PersonBeta.personWebField,
  942.           personWebInfo: this.personMap[key].PersonBeta.personWebInfo,
  943.           personWebKey: this.personMap[key].PersonBeta.personWebKey,
  944.         })
  945.       },
  946.       pushConnect(key) {
  947.         this.graph.links.push({
  948.           source: this.personMap[key].PersonAlpha.personWebId,
  949.           target: this.personMap[key].PersonBeta.personWebId,
  950.           connectWebId: this.personMap[key].Connect.connectWebId,
  951.           connectWebName: this.personMap[key].Connect.connectWebName,
  952.           connectWebInfo: this.personMap[key].Connect.connectWebInfo,
  953.         })
  954.       },
  955.  
  956.       // 字典翻译
  957.       personShowFormat(row, column) {
  958.         return this.selectDictLabel(this.personWebShowOptions, row.personWebShow);
  959.       },
  960.       personPlatformFormat(row, column) {
  961.         return this.selectDictLabel(this.personWebPlatformOptions, row.personWebPlatform);
  962.       },
  963.       // 取消按钮
  964.       cancel() {
  965.         this.open = false;
  966.         this.reset();
  967.       },
  968.       // 取消按钮
  969.       cancelConnect() {
  970.         this.openConnect = false;
  971.         this.resetConnect();
  972.       },
  973.       // 表单重置
  974.       reset() {
  975.         this.form = {
  976.           personWebId: null,
  977.           personWebName: null,
  978.           personWebPic: null,
  979.           personWebShow: "0",
  980.           personWebLink: "",
  981.           personWebPlatform: [],
  982.           personWebField: [],
  983.           personWebInfo: "",
  984.           personWebKey: ""
  985.         };
  986.         this.answerPicImageUrl = null;
  987.         this.resetForm("form");
  988.       },
  989.  
  990.       resetConnect() {
  991.         this.formConnect = {
  992.           personWebIdAlpha: null,
  993.           personWebIdBeta: null,
  994.           personWebIdAlphaName: null,
  995.           personWebIdBetaName: null,
  996.           connectWebId: null,
  997.           connectWebName: null,
  998.           connectWebInfo: null,
  999.         };
  1000.         this.resetForm("formConnect");
  1001.       },
  1002.  
  1003.       handleAddConnect() {
  1004.         this.optionsStart = []
  1005.         this.optionsEnd = []
  1006.         this.requireFlag = true;
  1007.         this.resetConnect();
  1008.         this.openConnect = true;
  1009.         this.titleConnect = "添加成员关系";
  1010.       },
  1011.  
  1012.       /** 修改按钮操作 */
  1013.       handleUpdateConnect(row) {
  1014.         this.optionsStart = []
  1015.         this.optionsEnd = []
  1016.         this.requireFlag = false;
  1017.         this.reset();
  1018.         const connectWeb = row.connectWebId;
  1019.         getInfoConnectWeb(connectWeb).then(response => {
  1020.           this.formConnect = response.data;
  1021.           // console.log(this.formConnect)
  1022.           this.formConnect.personWebIdAlpha = null;
  1023.           this.formConnect.personWebIdBeta = null;
  1024.           this.openConnect = true;
  1025.           this.titleConnect = "修改成员关系";
  1026.         });
  1027.       },
  1028.  
  1029.       // 多选框选中数据
  1030.       handleSelectionChange(selection) {
  1031.         this.ids = selection.map(item => item.personWebId)
  1032.         this.single = selection.length !== 1
  1033.         this.multiple = !selection.length
  1034.       },
  1035.  
  1036.       remoteMethodStart(keyword) {
  1037.         if (keyword.trim() === '') {
  1038.           this.optionsStart = []
  1039.           return
  1040.         }
  1041.         // 当后一个对象不为空的情况
  1042.         if (this.formConnect.personWebIdBeta) {
  1043.           let others = [];
  1044.           this.selectLoading = true;
  1045.           getPersonWebSearch(keyword).then(data => {
  1046.             getPersonWebSearchOther(this.formConnect.personWebIdBeta, keyword).then(dataOther => {
  1047.               others = dataOther.rows;
  1048.               this.optionsStart = [];
  1049.               data.rows.forEach(ma => {
  1050.                 let exist = others.some(sa => {
  1051.                   return ma.personWebId === sa.personWebId
  1052.                 });
  1053.                 if (!exist) {
  1054.                   this.optionsStart.push(ma);
  1055.                 }
  1056.               });
  1057.               this.optionsStart = this.optionsStart.filter(item => item.personWebId !== this.formConnect.personWebIdBeta)
  1058.             })
  1059.             this.selectLoading = false;
  1060.           })
  1061.         }
  1062.         // 后一个对象为空时
  1063.         else {
  1064.           this.selectLoading = true;
  1065.           getPersonWebSearch(keyword).then(data => {
  1066.             this.selectLoading = false;
  1067.             this.optionsStart = data.rows;
  1068.           })
  1069.         }
  1070.       },
  1071.       remoteMethodEnd(keyword) {
  1072.         if (keyword.trim() === '') {
  1073.           this.optionsEnd = []
  1074.           return
  1075.         }
  1076.         // 当前一个对象不为空的情况
  1077.         if (this.formConnect.personWebIdAlpha) {
  1078.           let others = [];
  1079.           this.selectLoading = true;
  1080.           getPersonWebSearch(keyword).then(data => {
  1081.             getPersonWebSearchOther(this.formConnect.personWebIdAlpha, keyword).then(dataOther => {
  1082.               others = dataOther.rows;
  1083.               this.optionsEnd = [];
  1084.               data.rows.forEach(ma => {
  1085.                 let exist = others.some(sa => {
  1086.                   return ma.personWebId === sa.personWebId
  1087.                 });
  1088.                 if (!exist) {
  1089.                   this.optionsEnd.push(ma);
  1090.                 }
  1091.               });
  1092.               this.optionsEnd = this.optionsEnd.filter(item => item.personWebId !== this.formConnect.personWebIdAlpha)
  1093.             })
  1094.             this.selectLoading = false;
  1095.           })
  1096.         }
  1097.         // 前一个对象为空时
  1098.         else {
  1099.           this.selectLoading = true;
  1100.           getPersonWebSearch(keyword).then(data => {
  1101.             this.selectLoading = false;
  1102.             this.optionsEnd = data.rows;
  1103.           })
  1104.         }
  1105.       },
  1106.       /** 新增按钮操作 */
  1107.       handleAdd() {
  1108.         this.reset();
  1109.         this.open = true;
  1110.         this.title = "添加成员管理";
  1111.       },
  1112.       /** 修改按钮操作 */
  1113.       handleUpdate(row) {
  1114.         this.reset();
  1115.         const personWeb = row.personWebId || this.ids;
  1116.         getPersonWebInfo(personWeb).then(response => {
  1117.           this.form = response.data;
  1118.           this.personWebPlatformTemp = this.form.personWebPlatform;
  1119.           this.form.personWebPlatform = JSON.parse(this.personWebPlatformTemp);
  1120.           this.personWebFieldTemp = this.form.personWebField;
  1121.           this.form.personWebField = JSON.parse(this.personWebFieldTemp);
  1122.           this.open = true;
  1123.           this.title = "修改成員管理";
  1124.         });
  1125.       },
  1126.       submitForm() {
  1127.         this.$refs["form"].validate(valid => {
  1128.           if (valid) {
  1129.             this.open = false;
  1130.             this.personWebPlatformTemp = this.form.personWebPlatform;
  1131.             this.form.personWebPlatform = JSON.stringify(this.personWebPlatformTemp);
  1132.             this.personWebFieldTemp = this.form.personWebField;
  1133.             this.form.personWebField = JSON.stringify(this.personWebFieldTemp);
  1134.             if (this.form.personWebId != null) {
  1135.               editPersonWeb(this.form).then(response => {
  1136.                 if (response.code === 200) {
  1137.                   this.msgSuccess("修改成功");
  1138.                   this.refresh();
  1139.                 }
  1140.               });
  1141.             } else {
  1142.               addPersonWeb(this.form).then(response => {
  1143.                 if (response.code === 200) {
  1144.                   this.msgSuccess("新增成功");
  1145.                   this.refresh();
  1146.                 }
  1147.               });
  1148.             }
  1149.           }
  1150.         });
  1151.       },
  1152.  
  1153.       handelConfirm() {
  1154.         this.$refs["formConnect"].validate(valid => {
  1155.           if (valid) {
  1156.             this.openConnect = false;
  1157.             if (this.formConnect.connectWebId != null) {
  1158.               editConnectWeb(this.formConnect).then(response => {
  1159.                 if (response.code === 200) {
  1160.                   this.msgSuccess("修改成功");
  1161.                   this.refresh();
  1162.                 }
  1163.               });
  1164.             } else {
  1165.               addConnectWeb(this.formConnect).then(response => {
  1166.                 if (response.code === 200) {
  1167.                   this.msgSuccess("新增成功");
  1168.                   this.refresh();
  1169.                 }
  1170.               });
  1171.             }
  1172.           }
  1173.         });
  1174.       },
  1175.       deleteConnect() {
  1176.         const connectWebId = this.formConnect.connectWebId
  1177.         this.$confirm('是否确认删除「' + this.formConnect.personWebIdAlphaName + '」和「' + this.formConnect.personWebIdBetaName + '」的关系？', "警告", {
  1178.           confirmButtonText: "确定",
  1179.           cancelButtonText: "取消",
  1180.           type: "warning"
  1181.         }).then(function () {
  1182.           return removeConnectWeb(connectWebId);
  1183.         }).then(() => {
  1184.           this.openConnect = false;
  1185.           this.refresh();
  1186.           this.msgSuccess("删除成功");
  1187.         }).catch(function (e) {
  1188.           console.log(e)
  1189.         });
  1190.       },
  1191.       /** 删除按钮操作 */
  1192.       handleDelete(row) {
  1193.         const personWebIds = row.personWebId || this.ids;
  1194.         this.$confirm('是否确认删除成员编号为"' + personWebIds + '"的数据项?', "警告", {
  1195.           confirmButtonText: "确定",
  1196.           cancelButtonText: "取消",
  1197.           type: "warning"
  1198.         }).then(function () {
  1199.           return removePersonWeb(personWebIds);
  1200.         }).then(() => {
  1201.           this.refresh();
  1202.           this.msgSuccess("删除成功");
  1203.         }).catch(function () {
  1204.         });
  1205.       },
  1206.       // 显示图片上传模块
  1207.       imageCropperShow() {
  1208.         this.upload.cropperShow = !this.upload.cropperShow
  1209.       },
  1210.       // 图片上传成功后执行
  1211.       cropUploadSuccess(jsonData, field) {
  1212.         this.form.personWebPic = jsonData.fileName
  1213.         // console.log(jsonData)
  1214.       },
  1215.       picShow(pic) {
  1216.         this.picVisible = !this.picVisible;
  1217.         this.answerPicImageUrl = this.person_pic_url + pic
  1218.       },
  1219.       handleClose(tag) {
  1220.         this.form.personWebField.splice(this.form.personWebField.indexOf(tag), 1);
  1221.       },
  1222.       showInput() {
  1223.         this.inputVisible = true;
  1224.         this.$nextTick(_ => {
  1225.           this.$refs.saveTagInput.$refs.input.focus();
  1226.         });
  1227.       },
  1228.       handleInputConfirm() {
  1229.         let inputValue = this.inputValue;
  1230.         if (inputValue) {
  1231.           this.form.personWebField.push(inputValue);
  1232.         }
  1233.         this.inputVisible = false;
  1234.         this.inputValue = '';
  1235.       },
  1236.       async refresh() {
  1237.         await this.getMap();
  1238.         this.myEcharts();
  1239.         this.getList()
  1240.       },
  1241.     },
  1242.  
  1243.     async mounted() {
  1244.       await this.getMap();
  1245.       // 基于准备好的dom，初始化echarts实例
  1246.       let echarts = require('echarts')
  1247.       this.myChart = echarts.init(document.getElementById('main'));
  1248.       this.myEcharts();
  1249.     }
  1250.   }
  1251. </script>
  1252.  
  1253.  
  1254. <style lang="scss" scoped>
  1255.  
  1256.   .avatar-uploader .el-upload {
  1257.     border: 1px dashed #d9d9d9;
  1258.     border-radius: 6px;
  1259.     cursor: pointer;
  1260.     position: relative;
  1261.     overflow: hidden;
  1262.     width: 178px;
  1263.     height: 178px;
  1264.   }
  1265.  
  1266.   .avatar-uploader .el-upload:hover {
  1267.     border-color: #409EFF;
  1268.   }
  1269.  
  1270.   .avatar-uploader-icon {
  1271.     line-height: 140px;
  1272.   }
  1273.  
  1274.   .avatar {
  1275.     height: 144px;
  1276.   }
  1277.  
  1278.   .image-preview {
  1279.     width: 178px;
  1280.     height: 178px;
  1281.     position: relative;
  1282.     border: 1px dashed #d9d9d9;
  1283.     border-radius: 6px;
  1284.     float: left;
  1285.   }
  1286.  
  1287.   .image-preview .image-preview-wrapper {
  1288.     position: relative;
  1289.     width: 100%;
  1290.     height: 100%;
  1291.   }
  1292.  
  1293.   .image-preview .image-preview-wrapper img {
  1294.     width: 100%;
  1295.     height: 100%;
  1296.   }
  1297.  
  1298.   .image-preview .image-preview-action {
  1299.     position: absolute;
  1300.     width: 100%;
  1301.     height: 100%;
  1302.     left: 0;
  1303.     top: 0;
  1304.     text-align: center;
  1305.     color: #fff;
  1306.     opacity: 0;
  1307.     font-size: 20px;
  1308.     background-color: rgba(0, 0, 0, .5);
  1309.     transition: opacity .3s;
  1310.     cursor: pointer;
  1311.     line-height: 200px;
  1312.   }
  1313.  
  1314.   .image-preview .image-preview-action .el-icon-delete {
  1315.     font-size: 32px;
  1316.   }
  1317.  
  1318.   .image-preview:hover .image-preview-action {
  1319.     opacity: 1;
  1320.   }
  1321.  
  1322.   .el-upload--picture-card {
  1323.     display: block;
  1324.     width: 258px;
  1325.     height: 146px;
  1326.     overflow: hidden;
  1327.   }
  1328.  
  1329.   .input-new-tag {
  1330.     width: 90px;
  1331.     margin-left: 10px;
  1332.     vertical-align: bottom;
  1333.   }
  1334.  
  1335.   .el-tag + .el-tag {
  1336.     margin-left: 10px;
  1337.   }
  1338.  
  1339.   .button-new-tag {
  1340.     margin-left: 10px;
  1341.     height: 32px;
  1342.     line-height: 30px;
  1343.     padding-top: 0;
  1344.     padding-bottom: 0;
  1345.   }
  1346.  
  1347.   .echarts {
  1348.     width: 100%;
  1349.     text-align: center;
  1350.     height: 800px;
  1351.   }
  1352.  
  1353.   .bin {
  1354.     /*text-align: center;*/
  1355.     /*padding: 50px;*/
  1356.     width: 100%;
  1357.     height: 800px
  1358.   }
  1359.  
  1360.   .dashboard-editor-container {
  1361.     padding: 32px;
  1362.     background-color: rgb(240, 242, 245);
  1363.     position: relative;
  1364.  
  1365.     .chart-wrapper {
  1366.       background: #fff;
  1367.       padding: 16px 16px 0;
  1368.       margin-bottom: 32px;
  1369.     }
  1370.   }
  1371.  
  1372.   .graph-tag {
  1373.     display: inline-block;
  1374.     border-radius: 4px;
  1375.     min-width: min-content;
  1376.     padding: 5px;
  1377.     background-color: #e7faf0;
  1378.     border-color: #d0f5e0;
  1379.     color: #13ce66;
  1380.   }
  1381.  
  1382.   @media (max-width: 1024px) {
  1383.     .chart-wrapper {
  1384.       padding: 8px;
  1385.     }
  1386.   }
  1387.  
  1388. </style>

2.2 

  1. import request from '@/utils/request'
  2.  
  3. export function getPersonWebMap() {
  4.   return request({
  5.     url: '/people/web/map',
  6.     method: 'get'
  7.   })
  8. }
  9.  
  10. export function getPersonWebList() {
  11.   return request({
  12.     url: '/people/web/list',
  13.     method: 'get'
  14.   })
  15. }
  16.  
  17. export function getPersonWebSearch(personName) {
  18.   return request({
  19.     url: '/people/web/search/' + personName,
  20.     method: 'get'
  21.   })
  22. }
  23.  
  24. export function getPersonWebSearchOther(personId, personName) {
  25.   return request({
  26.     url: '/people/web/search/' + personId + '/' + personName,
  27.     method: 'get'
  28.   })
  29. }
  30.  
  31. export function getPersonWebInfo(personId) {
  32.   return request({
  33.     url: '/people/web/person/' + personId,
  34.     method: 'get'
  35.   })
  36. }
  37.  
  38. export function addPersonWeb(data) {
  39.   return request({
  40.     url: '/people/web/person',
  41.     method: 'post',
  42.     data: data
  43.   })
  44. }
  45.  
  46. export function editPersonWeb(data) {
  47.   return request({
  48.     url: '/people/web/person',
  49.     method: 'put',
  50.     data: data
  51.   })
  52. }
  53.  
  54. export function removePersonWeb(personId) {
  55.   return request({
  56.     url: '/people/web/person/' + personId,
  57.     method: 'delete'
  58.   })
  59. }
  60.  
  61. export function getInfoConnectWeb(connectId) {
  62.   return request({
  63.     url: '/people/web/connect/' + connectId,
  64.     method: 'get'
  65.   })
  66. }
  67.  
  68. export function addConnectWeb(data) {
  69.   return request({
  70.     url: '/people/web/connect',
  71.     method: 'post',
  72.     data: data
  73.   })
  74. }
  75.  
  76. export function editConnectWeb(data) {
  77.   return request({
  78.     url: '/people/web/connect',
  79.     method: 'put',
  80.     data: data
  81.   })
  82. }
  83.  
  84. export function removeConnectWeb(connectId) {
  85.   return request({
  86.     url: '/people/web/connect/' + connectId,
  87.     method: 'delete'
  88.   })
  89. }

三、展示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/904222
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号