<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="input1" clearable placeholder="请选择--3度关系">
          <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="请选择--top">
          <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>
      </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">
          <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>
                        <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>
                        <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, item.type, 0)"
            >
              <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, item.type, 0)"
            >
              <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";
export default {
  components: { SeeksRelationGraph },
  data() {
    return {
      activeName: "first",
      options: [
        {
          value: "1",
          label: "3层关系",
        },
        {
          value: "2",
          label: "4层关系",
        },
        {
          value: "3",
          label: "5层关系",
        },
      ],
      options_stlx: [
        {
          value: "1",
          label: "人物",
        },
        {
          value: "2",
          label: "机构",
        },
      ],
      options2: [
        {
          value: "14",
          label: "父亲",
        },
        {
          value: "25",
          label: "母亲",
        },
        {
          value: "37",
          label: "历任部门",
        },
        {
          value: "47",
          label: "毕业院校",
        },
      ],
      options3: [
        {
          value: "111",
          label: "10",
        },
        {
          value: "222",
          label: "20",
        },
        {
          value: "333",
          label: "30",
        },
      ],
      input1: "",
      input2: "",
      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:''},
    };
  },
  methods: {
    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,
                  type: "institution",
                });
              });
            }
            if (data.people.length > 0) {
              data.people.forEach((item) => {
                _this.serch_arr_people.push({
                  name: item.name,
                  id: item.meaningTag,
                  chinese_name: item.chineseName,
                  types: "people",
                });
              });
            }
            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 = [];
      }
    },
    //点击搜索出来的人物或者机构数据，加载关系图
    //types判断此节点是人物还是机构
    //_type判断是点击搜索的还是点击节点的
    cli_gxt(id, types, _type) {
      let _this = this;
      _this.show_search = false;
      let paramDatas = {
        meaningTag: id + "",
        type: "",
        identification: types,
      };
      post("api/Comm/peoplOrInstitution", paramDatas)
        .then((data) => {
          let datas;
          if (types == "people") {
            datas = data.people;
          } else {
            datas = data.institution;
          }
          _this.query_rwk(datas,_type);
        })
        .catch((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, nodeObject.data.distinguishType, 1);
    },
    //单击线
    onLineClick(lineObject) {
      console.log("onLineClick:", lineObject);
    },
    //过滤数据，绑定不同的图像和颜色
    arr_push(
      arr_z,//当前节点下面的子节点分类
      arr_nodes,//当前需要存的数组节点
      color_border,//边框色
      type_gxlx,//节点与节点的线的关系字体
      type,//判断是初次加载关系图，还是点击节点加载关系图
    ) {
      let _this = this;
      let rootIds;
      if (type == 0) {
        //初次加载关系图
        rootIds = arr_nodes.rootId;
      } else {
        //点击节点展示次级节点
        rootIds = _this.db_zt_id;
      }
      arr_z.forEach((item) => {
        let img_url="";
        if(item.distinguishType=='people'){
          img_url = item.opponent.photos==null?'':item.opponent.photos;
        }else{
          if(item.opponent.photos==null){
            img_url="";
          }else{
            img_url = "file_download/photos_org/"+item.opponent.photos;
          }
        }
        arr_nodes.nodes.push({
          id: parseInt(item.meaningTag),
          // 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: item.name,
            types: type_gxlx,
            distinguishType: item.distinguishType,
            img: img_url == "" ? this.url_ : img_url,
            ids: parseInt(item.meaningTag),
            datas: item.opponent,
          },
        });
        if(item.distinguishType=="people"){
          let type = false;
          _this.data_type.forEach(item=>{
            if(item.value=='people'){
              type = true;
            }
          })
          if(!type)
          _this.data_type.push({name:'人物',color:'#f52b2b',value:'people'}) 
        }else{
          let type = false;
          _this.data_type.forEach(item=>{
            if(item.value=='institution'){
              type = true;
            }
          })
          if(!type)
          _this.data_type.push({name:'机构',color:'#00da25',value:'institution'}) 
        }
        let form_id = "";
        let to_id = "";
        //判断是主体指向外体还是外体指向主体
        if (item.direction != null && item.direction != "") {
          form_id = parseInt(item.meaningTag) + "";
          to_id = rootIds + "";
        } else {
          form_id = rootIds + "";
          to_id = parseInt(item.meaningTag) + "";
        }
        arr_nodes.links.push({
          from: form_id, //线的开始点
          to: to_id, //线的结束点
          text: type_gxlx, //线上显示的字
          color: "rgb(210 210 210)", //线的颜色
          fontColor: "rgb(226 226 226)", //线上显示的字的颜色
        });
      });
      return arr_nodes;
    },
    //将当前搜索人物的为核心提出来
    query_rwk(data,type) {
      if (data != null) {
        let arr_nodes = {};
        let img_url="";
        if(data.distinguishType=='people'){
          img_url = data.opponent.photos;
        }else{
          if(data.opponent.photos==null){
          img_url = data.opponent.photos==null?'':data.opponent.photos;
          }else{
            img_url = "file_download/photos_org/"+data.opponent.photos;
          }
        }
        let arr_nodes_ccjz = {
          rootId: parseInt(data.meaningTag),
          nodes: [
            {
              id: parseInt(data.meaningTag),
              color: "rgb(195 195 195)",
              borderColor: "#6cc0ff",
              fontColor: "#ffffff",
              borderWidth: 2,
              nodeShape: 0,
              width: this.width,
              height: this.height,
              data: {
                names: data.name,
                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.meaningTag);
          this.data_type = [];
          //初次加载关系图
          arr_nodes = arr_nodes_ccjz;
        }else{
          //点击节点展示次级节点
          arr_nodes = arr_nodes_dbcli;
        }
        //判断是否有学校
        if (data.schools != null && data.schools.length != 0) {
          arr_nodes = this.arr_push(
            data.schools,
            arr_nodes,
            "rgb(135 236 163)",
            "毕业院校",
            type
          );
        }
        //判断是否有部门
        if (data.departments != null && data.departments.length != 0) {
          arr_nodes = this.arr_push(
            data.departments,
            arr_nodes,
            "#90EE90",
            "历任部门",
            type
          );
        }
        //判断是否有同事
        if (data.workmates != null && data.workmates.length != 0) {
          arr_nodes = this.arr_push(
            data.workmates,
            arr_nodes,
            "rgb(255 182 182)",
            "同事",
            type
          );
        }
        //判断是否有伴侣
        if (data.lawmates != null && data.lawmates.length != 0) {
          arr_nodes = this.arr_push(
            data.lawmates,
            arr_nodes,
            "rgb(140 246 251)",
            "伴侣",
            type
          );
        }
        //判断是否有孩子
        if (data.children != null && data.children.length != 0) {
          arr_nodes = this.arr_push(
            data.children,
            arr_nodes,
            "rgb(140 205 255)",
            "子女",
            type
          );
        }
        //判断是否有父亲
        if (data.fathers != null && data.fathers.length != 0) {
          arr_nodes = this.arr_push(
            data.fathers,
            arr_nodes,
            "rgb(108 208 255)",
            "父亲",
            type
          );
        }
        //判断是否有母亲
        if (data.mothers != null && data.mothers.length != 0) {
          arr_nodes = this.arr_push(
            data.mothers,
            arr_nodes,
            "rgb(197 232 89)",
            "母亲",
            type
          );
        }
        //判断是否有亲属
        if (data.belongings != null && data.belongings.length != 0) {
          arr_nodes = this.arr_push(
            data.belongings,
            arr_nodes,
            "rgb(241 178 249)",
            "亲属",
            type
          );
        }
        //判断是否有同级
        if (data.samelevels != null && data.samelevels.length != 0) {
          arr_nodes = this.arr_push(
            data.samelevels,
            arr_nodes,
            "rgb(140 205 255)",
            "同级",
            type
          );
        }
        //判断是否有上级
        if (data.superiors != null && data.superiors.length != 0) {
          arr_nodes = this.arr_push(
            data.superiors,
            arr_nodes,
            "rgb(140 246 251)",
            "上级",
            type
          );
        }
        //判断是否有下级
        if (data.juniors != null && data.juniors.length != 0) {
          arr_nodes = this.arr_push(
            data.juniors,
            arr_nodes,
            "rgb(140 205 255)",
            "下级",
            type
          );
        }
        //判断是否有成员
        if (
          data.departmentPeople != null &&
          data.departmentPeople.length != 0
        ) {
          arr_nodes = this.arr_push(
            data.departmentPeople,
            arr_nodes,
            "rgb(135 236 163)",
            "部门成员",
            type
          );
        }
        //判断是否有学校学生
        if (data.schoolPeople != null && data.schoolPeople.length != 0) {
          arr_nodes = this.arr_push(
            data.schoolPeople,
            arr_nodes,
            "#90EE90",
            "学校学生",
            type
          );
        }
        let arr_ls = arr_nodes.links.sort(() => Math.random() - 0.6);
        arr_nodes.links = arr_ls;
        if(type==0){
          //初次加载关系图
          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) => {
            }
          );
        }
      }
    },
    //左侧类型鼠标移入事件
    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;
  }
  .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>