<template>
  <div id="zstp">
    <div class="top-serch">
      <el-input
        placeholder="请输入内容 回车搜索"
        prefix-icon="el-icon-search"
        v-model="input"
        autofocus="true"
        @keyup.enter.native="onSubmit"
      >
        <!-- v-on:input="onSubmit()" -->
      </el-input>
    </div>

    <div class="center-zstp">
      <div class="select-div">
        <el-select v-model="input4" clearable placeholder="请选择关系类型">
          <el-option
            v-for="item in options_gx"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :popper-append-to-body="false"
            popper-class="select-popper"
          >
          </el-option>
        </el-select>
        <el-select v-model="input1" clearable placeholder="请选择层数关系">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :popper-append-to-body="false"
            popper-class="select-popper"
          >
          </el-option>
        </el-select>
        <el-select v-model="input2" clearable placeholder="请选择数量控制">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :popper-append-to-body="false"
            popper-class="select-popper"
          >
          </el-option>
        </el-select>
        <el-select v-model="input3" clearable placeholder="请选择类别">
          <el-option
            v-for="item in options_lb"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :popper-append-to-body="false"
            popper-class="select-popper"
          >
          </el-option>
        </el-select>
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" size="small" v-model="scTime" type="daterange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions">
        <div slot="node" slot-scope="{ node }">
          <div
            class="coil-container"
            @click="storageCount(node)"
            @dblclick="storageDetail(node)"
          >
            <div class="coil coil-1"></div>
            <div class="coil coil-2"></div>
            <div class="coil coil-3"></div>
            <div class="coil coil-4"></div>
          </div>
          <img id="aa2" :src="node.data.img" :onerror="errimg">
          <div class="node-div">
            {{ node.data.names }}
          </div>
        </div>
        <div
          slot="bottomPanel"
          style="height: 100%; background-color: rgb(255 255 255 / 0%)"
        >
          <transition name="el-zoom-in-center">
            <div class="sxoryq-div" v-show="show_tck">
              <el-tabs
                v-model="activeName"
                type="card"
                @tab-click="handleClick"
              >
                <el-tab-pane label="实体属性" name="first">
                  <table>
                    <thead class="shuxi-tr" style="color: #ffff" v-show="model_attribute.type=='people'">
                      <tr>
                        <td>中文名</td>
                        <td>{{model_attribute.data.chineseName}}</td>
                      </tr>
                      <tr>
                        <td>外文名</td>
                        <td>{{model_attribute.data.foreignName}}</td>
                      </tr>
                      <tr>
                        <td>性别</td>
                        <td>{{model_attribute.data.sex}}</td>
                      </tr>
                      <tr>
                        <td>年龄</td>
                        <td>{{model_attribute.data.age}}</td>
                      </tr>
                      <tr>
                        <td>出生地</td>
                        <td>{{model_attribute.data.csd}}</td>
                      </tr>
                      <tr>
                        <td>出生日期</td>
                        <td>{{model_attribute.data.birth}}</td>
                      </tr>
                      <tr>
                        <td>国籍</td>
                        <td>{{model_attribute.data.nationality}}</td>
                      </tr>
                      <tr>
                        <td>联系方式</td>
                        <td>{{model_attribute.data.concat_info}}</td>
                      </tr>
                      <tr>
                        <td>职业</td>
                        <td>{{model_attribute.data.militaryRank}}</td>
                      </tr>
                    </thead>
                    <thead class="shuxi-tr1" style="color: #ffff" v-show="model_attribute.type!='people'">
                      <tr>
                        <td>中文名</td>
                        <td>{{model_attribute.data.chineseName}}</td>
                      </tr>
                      <tr>
                        <td>外文名</td>
                        <td>{{model_attribute.data.foreignName}}</td>
                      </tr>
                      <tr>
                        <td>机构类型</td>
                        <td>{{model_attribute.data.organizationType}}</td>
                      </tr>
                      <tr>
                        <td>所在国家/地区</td>
                        <td>{{model_attribute.data.area}}</td>
                      </tr>
                      <tr>
                        <td>地址</td>
                        <td>{{model_attribute.data.address}}</td>
                      </tr>
                      <tr>
                        <td>联系方式</td>
                        <td>{{model_attribute.data.concatInfo}}</td>
                      </tr>
                      <tr>
                        <td>官方网站地址</td>
                        <td>{{model_attribute.data.officialWebsiteAddress}}</td>
                      </tr>
                    </thead>
                  </table>
                </el-tab-pane>
                <el-tab-pane label="实体舆情" name="second"></el-tab-pane>
              </el-tabs>
            </div>
          </transition>
          <el-card class="box-card">
            <div
              v-for="(item, index) in data_type"
              :key="index"
              class="text item"
              @mouseover="mouseOver(item.value)"
              @mouseleave="mouseLeave()"
            >
              <el-button
                :style="{
                  'background-color': item.color,
                  'border-color': item.color,
                }"
                size="mini"
                circle
              ></el-button>
              <div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </SeeksRelationGraph>
    </div>
    <transition name="el-zoom-in-top">
      <div class="qt-serch" v-show="show_search">
        <div class="title-serch">
          <span>搜索结果</span>
        </div>
        <div class="serch-jg">
          <div
            v-show="
              serch_arr_people.length == 0 && serch_arr_institution.length == 0
            "
            style="text-align: center; color: #a7a2a2; font-size: 14px"
          >
            <span>暂无匹配数据</span>
          </div>
          <div v-show="serch_arr_people.length != 0" id="people_div">
            <div class="type-div" v-show="serch_arr_people.length != 0">
              <span>人物</span>
            </div>
            <div
              v-for="item in serch_arr_people"
              class="div-span"
              @click="cli_gxt(item.id, 0,'character')"
            >
              <span style="color: #008dd0">外文：</span
              ><span>{{ item.name }}</span
              >
              &nbsp;&nbsp; <span style="color: #008dd0">中文：</span
              ><span>{{ item.chinese_name }}</span>
            </div>
          </div>
          <div v-show="serch_arr_institution.length != 0" id="institution_div">
            <div class="type-div" v-show="serch_arr_institution.length != 0">
              <span>机构</span>
            </div>
            <div
              v-for="item in serch_arr_institution"
              class="div-span"
              @click="cli_gxt(item.id, 0,'organization')"
            >
              <span style="color: #008dd0">外文：</span
              ><span>{{ item.name }}</span
              >&nbsp;&nbsp; <span style="color: #008dd0">中文：</span
              ><span>{{ item.chinese_name }}</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import SeeksRelationGraph from "relation-graph";
import { get, post, startLoading, endLoading } from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import { imgUrl } from "../../api/publicUrl";
export default {
  components: { SeeksRelationGraph },
  data() {
    return {
      activeName: "first",
      options: [
        {
          value: "1",
          label: "1层关系",
        },
        {
          value: "2",
          label: "2层关系",
        },
        {
          value: "3",
          label: "3层关系",
        },
      ],
      options_stlx: [
        {
          value: "1",
          label: "人物",
        },
        {
          value: "2",
          label: "机构",
        },
      ],
      options2: [
        {
          value: "14",
          label: "父亲",
        },
        {
          value: "25",
          label: "母亲",
        },
        {
          value: "37",
          label: "历任部门",
        },
        {
          value: "47",
          label: "毕业院校",
        },
      ],
      options3: [
        {
          value: "10",
          label: "10",
        },
        {
          value: "25",
          label: "25",
        },
        {
          value: "50",
          label: "50",
        },
        {
          value: "100",
          label: "100",
        },
      ],
      options_lb:[
        {
          value: "122",
          label: "政治人物",
        },
        {
          value: "341",
          label: "军事人物",
        },
      ],
      options_gx:[
        {
          value: "共现关系",
          label: "共现关系",
        },
        {
          value: "亲属关系",
          label: "亲属关系",
        },
        {
          value: "社会关系",
          label: "社会关系",
        },
        {
          value: "组织关系",
          label: "组织关系",
        },
        {
          value: "提及关系",
          label: "提及关系",
        },
        {
          value: "同事关系",
          label: "同事关系",
        },
        {
          value: "互动关系",
          label: "互动关系",
        },
      ],
      input1: "2",
      input2: "25",
      input3:"",
      input4:"",
      input: "", //搜索框对应的值
      serch_arr_people: [], //人物搜索列表
      serch_arr_institution: [], //机构搜索列表
      show_search: false, //是否显示搜索列表
      data_type: [], //左侧展示不同关系的列表
      show_tck: false, //节点详情弹出框
      graphOptions: {
        allowSwitchLineShape: false, //工具栏中显示切换线条形状的按钮
        allowSwitchJunctionPoint: false, //工具栏中显示切换连接点位置的按钮
        defaultJunctionPoint: "border",
        allowShowMiniToolBar: true,
        defaultNodeBorderColor: "#fff",
        allowShowZoomMenu: false, //工具栏中的放大缩小按钮
        layouts: [
          {
            label: "中心",
            layoutName: "center",
            layoutClassName: "seeks-layout-center",
            useLayoutStyleOptions: true,
            defaultNodeWidth: "72",
            defaultNodeHeight: "72",
            defaultNodeColor: "rgba(238, 178, 94, 1)",
            defaultLineShape: 1,
            // distance_coefficient:1.2,
          },
          {
            label: "树形下",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            useLayoutStyleOptions: true,
            from: "top",
            defaultJunctionPoint: "tb",
            defaultLineShape: 4,
          },
          {
            label: "树形右",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            useLayoutStyleOptions: true,
            from: "left",
            defaultJunctionPoint: "lr",
            defaultLineShape: 4,
          },
        ],
        // 这里可以参考"Graph 图谱"中的参数进行设置
      },
      type_cs: "", //左侧鼠标移动，显示隐藏节点
      time: null, //用于单双击time存储
      width: 40, //关系图节点的宽度
      height: 40, //关系图节点的高度
      url_: jh_bg, //暂无图片的路径
      zt_id: "", //存储关系图中关系衍生的核心节点ID
      db_zt_id:'',
      model_attribute:{type:'',data:''},
      errimg: "this.src='" + jh_bg + "'",
      scTime:"",
    };
  },
  methods: {
    //数组去重
    arr_unique (arr){
      const res = new Map();
      return arr.filter((a)=> !res.has(a.uuid)&&res.set(a.uuid,1))
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //搜索回车事件
    onSubmit() {
      let _this = this;
      _this.show_search = false;
      let search_nr = _this.input.trim();
      if (search_nr != "") {
        post("api/Comm/vaguePeoplOrInstitution", {
          name: search_nr,
          type: "0",
        })
          .then((data) => {
            _this.serch_arr_people = [];
            _this.serch_arr_institution = [];
            if (data.institution.length > 0) {
              data.institution.forEach((item) => {
                _this.serch_arr_institution.push({
                  name: item.name,
                  id: item.meaningTag,
                  chinese_name: item.multiLangName,
                });
              });
            }
            if (data.people.length > 0) {
              data.people.forEach((item) => {
                _this.serch_arr_people.push({
                  name: item.name,
                  id: item.meaningTag,
                  chinese_name: item.chineseName,
                });
              });
            }
            this.$nextTick(() => {
              document.getElementById("people_div").scrollTop = 0;
              // document.getElementById("institution_div").scrollTop = 0;
            });
            _this.show_search = true;
          })
          .catch((err) => {
            console.log(err);
            _this.show_search = true;
          });
      } else {
        _this.show_search = false;
        _this.serch_arr_people = [];
        _this.serch_arr_institution = [];
      }
    },
    //点击搜索出来的人物或者机构数据，加载关系图
    //type判断是点击搜索的还是点击节点的
    //peopleOrOrganization_type传人物或者机构 character organization
    cli_gxt(id, type,peopleOrOrganization_type) {
      let _this = this;
      _this.show_search = false;
      let paramDatas = {
        meaningTag:  id +"",
        level:_this.input1,
        relationType:_this.input4,
        type:peopleOrOrganization_type,
        limit:_this.input2
      };
      post("api/Comm/peoplOrInstitution", paramDatas)
        .then((data) => {
          if(data.p.length>0)
            _this.query_rwk(data,_this.input1, type,peopleOrOrganization_type);
          else
            this.$message({
              message: "没有关系展示",
              type: "warning",
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //加载关系图
    showSeeksGraph(data) {
      this.$refs.seeksRelationGraph.setJsonData(data, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
        // endLoading();
      });
    },
    //查看此节点下一级节点
    onNodeClick(nodeObject) {
      if (nodeObject.id == this.zt_id) {
        return;
      }
      this.db_zt_id = nodeObject.id;
      // this.cli_gxt(nodeObject.id, 1, 1);
    },
    //单击线
    onLineClick(lineObject) {
      console.log("onLineClick:", lineObject);
    },
    //过滤数据，绑定不同的图像和颜色
    arr_push(
      arr_entity,
      arr_p, //当前主实体数据
      arr_z, //当前节点的线数据
      arr_q,//当前节点实体
      arr_nodes, //当前需要存的数组节点
      color_border, //边框色
      type, //判断是初次加载关系图，还是点击节点加载关系图
      peopleOrOrganization_type
    ) {
      let _this = this;
      let rootIds;
      if (type == 0) {
        //初次加载关系图
        rootIds = arr_nodes.rootId;
      } else {
        //点击节点展示次级节点
        rootIds = _this.db_zt_id;
      }
      arr_z.forEach((item,index) => {
            let idp = arr_entity.filter(e=>e.uuid ==arr_p[index].uuid)[0].meaningTag;
            let idq = arr_entity.filter(e=>e.uuid ==arr_q[index].uuid)[0].meaningTag;
            let img_url = "";
            img_url = imgUrl + arr_q[index].name+".jpg";
            if(peopleOrOrganization_type=='organization'){
                img_url = imgUrl + arr_q[index].name+".png";
            }
            // item.meaningTag==null?item.meaningTag=Math.floor(Math.random()*(1000000-10000+1)+10000):item.meaningTag=item.meaningTag;
            arr_nodes.nodes.push({
              id: parseInt(idq),
              // name: item.name,
              color: "rgb(195 195 195)", //背景色
              borderColor: color_border, //边框色
              fontColor: "#ffffff", //字体颜色
              borderWidth: 2, //边框宽度
              nodeShape: 0, //节点形状
              width: _this.width,
              height: _this.height,
              data: {
                names: arr_q[index].name,
                types: item.relation,
                // distinguishType: item.distinguishType,
                img: img_url == "" ? this.url_ : img_url,
                id: parseInt(idq),
                datas: item,
              },
            });
            arr_nodes.links.push({
              from: idp, //线的开始点
              to: idq, //线的结束点
              text: item.relation, //线上显示的字
              color: "rgb(210 210 210)", //线的颜色
              fontColor: "rgb(226 226 226)", //线上显示的字的颜色
            });
      });
      return arr_nodes;
    },
    query_rwk(data, level,type,peopleOrOrganization_type) {
      let _this = this;
      if (data != null) {
        let arr_nodes = {};//所有节点以及线的集合
        let arr_entity = [];
        if(data.p.length>0){
          let img_url = imgUrl + data.p[0].name+".jpg";
          if(peopleOrOrganization_type=='organization'){
              img_url = imgUrl + data.p[0].name+".png";
          }
          // img_url = data.opponent.photos == null ? "" : data.opponent.photos;
          let arr_nodes_ccjz = {//当前主节点的属性
            rootId: parseInt(data.p[0].meaningTag),
            nodes: [
              {
                id: parseInt(data.p[0].meaningTag),
                color: "rgb(195 195 195)",
                borderColor: "rgb(255, 34, 34)",
                fontColor: "#ffffff",
                borderWidth: 2,
                nodeShape: 0,
                width: this.width,
                height: this.height,
                data: {
                  names: data.p[0].name,
                  id: parseInt(data.p[0].meaningTag),
                  // datas: data.opponent,
                  // distinguishType: data.distinguishType,
                  img: img_url == "" ? this.url_ : img_url,
                },
              },
            ],
            links: [],
          };
          let arr_nodes_dbcli = {
            nodes: [],
            links: [],
          };//设置点击次级节点的属性
          if (type == 0) {
            this.zt_id = parseInt(data.p[0].meaningTag);//存储当前主节点id
            this.data_type = [];
            //初次加载关系图
            arr_nodes = arr_nodes_ccjz;
            if(level=="1"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name,url:data.p[0].url}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//主体数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
            if(level=="2"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name,url:data.p[0].url}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//关系线数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
              if(data.q2.length>0){
                arr_entity = arr_entity.concat(data.q2);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.q,//关系线数据
                  data.r2,//关系线数据
                  data.q2,//实体数据
                  arr_nodes,//主对象
                  "rgb(0, 213, 255)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
            if(level=="3"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name,url:data.p[0].url}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//关系线数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
              if(data.q2.length>0){
                arr_entity = arr_entity.concat(data.q2);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.q,//关系线数据
                  data.r2,//关系线数据
                  data.q2,//实体数据
                  arr_nodes,//主对象
                  "rgb(0, 213, 255)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
              if(data.q3.length>0){
                arr_entity = arr_entity.concat(data.q3);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.q2,//关系线数据
                  data.r3,//关系线数据
                  data.q3,//实体数据
                  arr_nodes,//主对象
                  "rgb(197, 170, 0)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
          } else {
            //点击节点展示次级节点
            arr_nodes = arr_nodes_dbcli;
            if(level=="1"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name,url:data.p[0].url}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//关系线数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
          }
        
          let arr_ls = arr_nodes.links.sort(() => Math.random() - 0.5);
          arr_nodes.links = arr_ls;
          if (type == 0) {
            //初次加载关系图
            arr_nodes.links = arr_nodes.links.filter((item,index) =>{
              return arr_nodes.links.findIndex(item1 =>item1.from == item.from && item1.to == item.to && item1.text == item.text) == index
            })
            _this.showSeeksGraph(arr_nodes);
          } else {
            //点击节点展示次级节点
            let arr = [];
            let _all_links = this.$refs.seeksRelationGraph.getLines();
            arr_nodes.links.forEach((links, index) => {
              _all_links.forEach((link) => {
                if (
                  (links.from == link.fromNode.id &&
                    links.to == link.toNode.id) ||
                  (links.from == link.toNode.id && links.to == link.fromNode.id)
                ) {
                  arr.push(index);
                }
              });
            });
            arr = arr.reverse();
            arr.forEach((item) => {
              arr_nodes.links.splice(item, 1);
            });
            this.$refs.seeksRelationGraph.appendJsonData(
              arr_nodes,
              (seeksRGGraph) => {
                // _this.yc_table_data();
              }
            );
          }
        }
      }
    },
    //左侧类型鼠标移入事件
    mouseOver(item) {
      this.type_cs = item;
    },
    //左侧类型鼠标移出事件
    mouseLeave() {
      this.type_cs = "";
    },
    //节点单击事件
    storageCount(node) {
      this.show_tck = false;
      clearTimeout(this.time);
      // this.time = setTimeout(() => {
      //   this.model_attribute = {type:node.data.distinguishType,data:node.data.datas}
      //   this.show_tck = true;
      // }, 300);
    },
    //节点双击事件
    storageDetail(node) {
      clearTimeout(this.time);
      this.onNodeClick(node);
      // alert('双击')
    },
  },
  mounted() {},
  watch: {
    //监听搜索框为空事，隐藏搜索结果列表
    input: function (e) {
      if (e == "") {
        this.show_search = false;
      }
    },
    type_cs: function (e) {
      let _all_nodes = this.$refs.seeksRelationGraph.getNodes();
      let _all_lines = this.$refs.seeksRelationGraph.getLines();
      let arr_id = [];
      if (_all_nodes.length > 0) {
        _all_nodes.forEach((item) => {
          if (item.data.distinguishType != undefined) {
            if (e == "") {
              item.opacity = 1;
            } else {
              if (item.data.distinguishType != e) {
                if(item.id!=this.zt_id){
                  item.opacity = 0.1;
                  arr_id.push(item.id);
                }
              } else {
                item.opacity = 1;
              }
            }
          }
        });
      }
      _all_lines.forEach((items) => {
        items.relations[0].fontColor = "rgb(226 226 226)";
        items.relations[0].color = "rgb(210 210 210)";
      });
      if (arr_id.length > 0) {
        arr_id.forEach((item) => {
          if (_all_lines.length > 0) {
            _all_lines.forEach((items) => {
              if (item == items.fromNode.id || item == items.toNode.id) {
                items.relations[0].fontColor = "rgb(226 226 226 / 10%)";
                items.relations[0].color = "rgb(210 210 210 / 10%)";
              }
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="scss">
#zstp {
  width: calc(100% - 24px);
  height: calc(100% - 80px);
  margin: 5px;
  position: relative;
  #aa2 {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    border-radius: 19px;
    background-color: white;
    margin-top: -40px;
  }
  .el-date-editor{ 
    width:220px;
    margin-left: 20px;
    margin-top: 5px;
    color: white;
    border: 1px solid #146a80 !important;
    background-color: transparent;
    box-shadow: 0 0 10px #1b6097;
    .el-range-separator{
      color: #dadada;
    }
    .el-range-editor--small .el-range-input{
      background: #1d2d46;
      color: white;
    }
  }
    .el-range-editor--small .el-range-input{
      background: #1d2d46;
      color: white;
    }
  
  .top-serch {
    height: 50px;
    margin-top: 40px;
    width: 100%;
    .el-input {
      margin-left: 29%;
      width: 43%;
      height: 40px;
      .el-input__inner {
        background-color: #131e2f00 !important ;
        border: 1px solid #0dada7b0;
        box-shadow: 0 0 10px #1b6097;
        color: #53e4fb;
      }
    }
  }
  .center-zstp {
    width: 100%;
    height: calc(100% - 70px);
    margin-top: 20px;
    > div {
      position: relative;
    }
    .rel-map[data-v-2964abc9] {
      background-color: #1d2d4600 !important;
    }
    .c-my-node2 {
      border: none;
      background-position: center center;
      background-size: 100%;
      height: 71px;
      // width: 74px;
      border-radius: 40px;
    }
    .c-node-name2 {
      text-align: center;
      margin-top: 85px;
      position: absolute;
      pointer-events: none;
      width: 800px;
      margin-left: -365px;
    }
    .rel-diy-node {
      border: 2px solid rgba(111, 111, 111, 0.56) !important;
      box-shadow: 0px 0px 30px rgba(217, 232, 255, 0.69) !important;
      background-color: rgba(255, 255, 255, 0.66) !important;
      border-radius: 37px;
    }
    .rel-node-peel {
      font-size: 10px !important;
      .node-div {
        color: white;
        font-size: 12px;
        position: absolute;
        width: 500px;
        height: 25px;
        line-height: 25px;
        margin-top: 5px;
        margin-left: -230px;
        text-align: center;
        pointer-events: none;
      }
      .rel-node-shape-0 {
        padding: 2px !important;
        box-shadow: 0px 0px 9px #3fa1ab;
      }
      .rel-node-shape-1 {
        padding: 2px !important;
        box-shadow: 0px 0px 9px #3fa1ab;
      }
      .coil-container {
        position: relative;
        width: 100%;
        height: 100%;
        animation: 6s infinite linear reactor-anim;
        border-radius: 32px;
        cursor: pointer;
        .coil-1 {
          transform: rotate(0deg);
        }
        .coil-2 {
          transform: rotate(90deg);
        }
        .coil-3 {
          transform: rotate(180deg);
        }
        .coil-4 {
          transform: rotate(270deg);
        }
        .coil {
          position: absolute;
          width: 3px;
          height: 3px;
          border-radius: 4px;
          top: calc(50% - 24px);
          left: calc(50% - 16px);
          transform-origin: 16px 24px;
          background-color: #52fefe;
          // box-shadow: 0px 0px 5px #52fefe inset;
        }
      }
      @keyframes reactor-anim {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    }
    //关系图谱工具条样式
    .c-mini-toolbar[data-v-3cfdb1cf] {
      background-color: #1d2d46;
      border: 1px solid #137a7d;
      box-shadow: 0 0 10px #1b6097;
      bottom: 30px;
      margin-left: 20px !important;
      margin-top: unset !important;
    }
    .c-rg-bottom-panel[data-v-161dbae4] {
      top: 0px;
      height: 100% !important;
      margin-top: 0 !important;
      pointer-events: none;
    }
    .c-mb-button[data-v-3cfdb1cf] {
      background-color: #194b61;
      color: #34dcdc;
      border: #158e9254 solid 1px;
    }
    .c-mb-button .c-mb-text[data-v-3cfdb1cf] {
      color: #f2f6fc;
    }
    .c-mb-button .c-mb-child-panel[data-v-3cfdb1cf] {
      margin-top: -21px;
      background-color: #17707c;
      margin-left: 41px !important;
      border: 1px solid #128589;
      box-shadow: 0 0 10px #1b6097;
    }
    .select-div {
      width: 180px;
      height: 95px;
      position: absolute;
      z-index: 30000000000000000;
      .el-select {
        margin: 5px;
        margin-left: 20px;
        width: 160px;
        pointer-events: all;
        .el-input__inner {
          background-color: #131e2f00 !important ;
          border: 1px solid #0dada7b0;
          box-shadow: 0 0 10px #1b6097;
          color: #ffff;
        }
      }
    }
    .sxoryq-div {
      width: 300px;
      height: 400px;
      border: 1px solid #128589;
      box-shadow: 0 0 10px #1b6097;
      position: absolute;
      right: 20px;
      z-index: 1000000000000000000;
      bottom: 55px;
      border-radius: 5px;
      background-color: #1d2d46ab;
      pointer-events: all;
      .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: unset;
        width: 100%;
        .el-tabs__item {
          width: 50%;
          color: #ffff;
          border-left: unset;
          background-color: #425067;
          color: #7d7d7d;
          text-align: center;
          padding: 0px !important;
        }
        > div:first-child {
          border-radius: 3px 0px 0px 0px;
        }
        > div:last-child {
          border-radius: 0px 3px 0px 0px;
        }
      }
      .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-bottom-color: #1d2d46ab !important;
        background-color: #1d2d46ab !important;
        color: #41ade0;
        font-size: 14px;
        font-weight: 700;
      }
      .el-tabs--card > .el-tabs__header {
        border-bottom: unset;
      }
      .shuxi-tr tr td:first-child {
        width: 70px;
        text-align: right;
        font-size: 14px;
      }
      .shuxi-tr tr td:last-child {
        color: #ffffffa8;
        padding-left: 10px;
        font-size: 14px;
      }
      .shuxi-tr1 tr td:first-child {
        width: 90px;
        text-align: right;
        font-size: 14px;
      }
      .shuxi-tr1 tr td:last-child {
        color: #ffffffa8;
        padding-left: 10px;
        font-size: 14px;
      }
    }

    .box-card {
      width: 110px;
      position: absolute;
      bottom: 300px;
      border: none;
      background-color: unset;
      color: white;
      box-shadow: unset;
      font-size: 10px;
      z-index: 10;
      pointer-events: all;
      .el-card__body {
        padding: 15px;
        .text {
          width: 100%;
          float: left;
          height: 14px;
          padding: 5px;
          cursor: pointer;
          // transition: 0.3s;
          transition: opacity 1s ease-in-out;
          .el-button {
            float: left;
            padding: 5px;
          }
          div {
            margin-left: 6px;
            float: left;
            line-height: 10px;
          }
        }
        .text:hover {
          transform: scale(1.2);
          opacity: 1;
        }
      }
      .el-card__body:hover > div {
        opacity: 0.1;
      }
    }
  }
  .qt-serch {
    width: 60%;
    left: 20%;
    border: 1px #128589;
    box-shadow: 0 0 10px #1b68a7;
    background: #1f2e48d1;
    border-style: dashed;
    position: absolute;
    top: 60px;
    border-radius: 7px;
    z-index: 3;
    .title-serch {
      height: 16px;
      color: #848484;
      font-weight: 700;
      margin: 10px;
      font-size: 12px;
    }
    .serch-jg {
      width: 100%;
      margin: 22px;
      margin-top: -3px;
      > div {
        width: calc(100% - 90px);
        float: left;
        background: #f9f9f90a;
        margin-bottom: 10px;
        max-height: 200px;
        overflow-y: auto;
        margin-left: 46px;
      }
      > div .div-span {
        float: left;
        color: #00d2c9;
        margin: 6px;
        border: 1px solid #444f63;
        font-size: 13px;
        padding: 5px 10px 5px 10px;
        cursor: pointer;
        border-radius: 5px;
      }
      > div .type-div {
        padding: 10px;
        font-size: 15px;
        color: #efac44;
        font-weight: 700;
        position: absolute;
        left: 20px;
        background-color: #27364f;
        border-radius: 5px 0px 0px 5px;
      }
    }
  }
}
.el-select-dropdown {
  border: unset !important;
  z-index: 2000000000000000000000000000000 !important;
}
</style>