<template>

  <div class="container product_list">

    <div

      v-show="editMaps"

      :class="

        editMaps == true ? 'containerLeftTree' : 'containerAnotherLeftTree'

      "

    >

      <!-- 侧边栏 -->

      <el-biz-aside-menu @click-collapse="clickCollapse">

        <el-menu

          default-active

          :collapse="menuCollapse"

          :collapse-transition="false"

          class="el-menu-vertical-demo"

          unfold-width="200"

          fold-width="80"

          :default-openeds="openeds"

        >

          <el-submenu v-for="(k, i) in data" :key="i" :index="k.id">

            <template slot="title">

              <img

                :src="require('@/assets/images/productProcess/icon-allly.png')"

                alt

              />

              <div

                id="firstNav"

                :ref="'refall' + i"

                class="refAll"

                @click.stop="handleNodeClick(k, $event, 1)"

              >

                {{ k.label }}

              </div>

            </template>

            <el-menu-item-group v-for="(v, ind) in k.children" :key="ind">

              <el-submenu v-if="v.children && v.children.length" :index="v.id">

                <span

                  slot="title"

                  @click.stop="handleNodeClick(v, $event, 1)"

                  >{{ v.label }}</span

                >

                <template v-for="(t, index) in v.children">

                  <el-menu-item

                    v-show="t.label"

                    :key="index"

                    :index="t.id"

                    @click="handleNodeClick(t, $event)"

                  >

                    {{ t.label }}

                  </el-menu-item>

                </template>

              </el-submenu>

              <el-menu-item :index="v.id" @click="handleNodeClick(v, $event)">

                {{ v.label }}

              </el-menu-item>

            </el-menu-item-group>

          </el-submenu>

        </el-menu>

      </el-biz-aside-menu>

    </div>

    <div

      ref="containerRight"

      :class="editMaps == true ? 'containerRight' : 'containerAnotherRight'"

    >

      <!--  下拉框操作 -->

      <div v-if="editMaps" class="top" style="marginBottom:10px">

        <div>

          规划年度:

          <el-date-picker

            v-model="yearvalue"

            value-format="yyyy"

            type="year"

            placeholder="请选择年份"

            style="width:200px;"

            @change="changeYear"

          />

          <span v-if="updateTime">(更新时间{{ updateTime }})</span>

        </div>

        <div class="topCont">

          <el-input

            v-model="keyWords"

            size="mini"

            placeholder="请输入要查询的内容"

            clearable

            @keyup.enter.native="getPageAllData"

            @clear="clearData"

          >

            <template slot="append">

              <span style="padding:5px;cursor: pointer" @click="getPageAllData">查找</span>

            </template>

          </el-input>

          <el-button

            v-if="this.searchForm.domain == null"

            size="mini"

            class="preview"

            style="margin-left:20px"

            @click="openDialog"

          >

            预 览

          </el-button>

        </div>

      </div>

      <div v-if="editMaps" class="bottom">

        <div

          v-if="this.searchForm.domain == null"

          id="myDiv"

          style="width:100%;height:100%;"

        >

          <div

            v-for="(item, index) in dataList"

            :key="index"

            :class="item.light == true ? 'a' : 'allbgc'"

          >

            <el-tooltip

              class="firstTitle"

              effect="light"

              placement="top"

              disabled

            >

              <span

                slot="content"

                style="display:inline-block;max-width:235px;"

                >{{ item.describe }}</span

              >

              <span style="paddingBottom:10px;">{{ item.name }}</span>

            </el-tooltip>

            <div

              v-for="(v, ind) in item.children"

              :key="ind"

              :class="v.light == true ? 'b' : 'allbg'"

            >

              <el-tooltip class="secondTitle" effect="light" placement="top">

                <span

                  slot="content"

                  style="display:inline-block;max-width:235px;"

                  >{{ v.describe }}</span

                >

                <span>{{ v.name }}</span>

              </el-tooltip>

              <div

                v-for="(k, num) in v.children"

                :key="num"

                :class="k.light == true ? 'c' : 'bg'"

              >

                <el-tooltip class="thirdTitle" effect="light" placement="top">

                  <span

                    slot="content"

                    style="display:inline-block;max-width:235px;"

                    >{{ k.describe }}</span

                  >

                  <span>{{ k.name }}</span>

                </el-tooltip>

                <div v-for="(j, ide) in k.children" :key="ide">

                  <el-tooltip

                    effect="light"

                    placement="top"

                    :class="j.light == true ? 'content1' : 'content'"

                  >

                    <span

                      slot="content"

                      style="display:inline-block;max-width:235px;"

                      >{{ j.describe }}</span

                    >

                    <span>{{ j.name }}</span>

                  </el-tooltip>

                </div>

              </div>

            </div>

          </div>

          <div style="margin-top:10px;"></div>

        </div>

        <template v-else>

          <div v-for="(i, d) in dataList" :key="d">

            <div v-if="i.children == null">

              <div class="img" />

              <div class="product">

                还没有生成数据哦

              </div>

              <div

                class="add"

                @click="addMap"

                v-if="flagData.creatable && yearvalue >= new Date().getFullYear()"

                v-permission="['appMap:add', 'appMap:all']"

              >

                <div style="font-size: 16px;color: #999999;">

                  <i class="el-icon-plus" />创建应用架构视图

                </div>

              </div>

            </div>

            <div v-else>

              <div

                v-for="(item, index) in i.children"

                :key="index"

                :class="item.light == true ? 'allbg2' : 'allbg1'"

                :style="

                  item.height

                    ? {

                        position: 'absolute',

                        height: item.height + 'px',

                        width: item.width + 'px',

                        top: `${window.parseInt(item.top) + 65}px`,

                        left: item.left + 'px'

                      }

                    : null

                "

              >

                <el-tooltip

                  class="secondTitle1"

                  effect="light"

                  placement="top"

                  disabled

                >

                  <span

                    slot="content"

                    style="display:inline-block;max-width:235px;"

                    >{{ item.describe }}</span

                  >

                  <span style="padding:8px 0;fontSize:18px">{{

                    item.name

                  }}</span>

                </el-tooltip>

                <div

                  v-for="(v, ind) in item.children"

                  :key="ind"

                  :class="v.light == true ? 'c1' : 'bg1'"

                  :style="

                    v.height

                      ? {

                          position: 'absolute',

                          height: v.height + 'px',

                          width: v.width + 'px',

                          top: v.top + 'px',

                          left: v.left + 'px'

                        }

                      : null

                  "

                >

                  <el-popover

                    :key="ind"

                    placement="bottom"

                    :disabled="

                      getPermission(['appGap:add', 'appGap:all']) ||

                        !flagData.updatable

                    "

                    width="150"

                    trigger="click"

                  >

                    <div class="btns">

                      <el-button

                        v-permission="['appGap:add', 'appGap:all']"

                        @click.stop="openShowNew(v)"

                      >

                        新建应用差距

                      </el-button>

                    </div>

                    <div class="bg2" slot="reference" @click.self="">

                      <el-tooltip

                        class="thirdTitle1"

                        effect="light"

                        placement="top"

                      >

                        <span

                          slot="content"

                          style="display:inline-block;max-width:235px;"

                          >{{ v.describe }}</span

                        >

                        <span style="fontSize:15px">{{ v.name }}</span>

                      </el-tooltip>

                      <span class="bg2gapstyles" style="fontSize:14px">

                        <span

                          v-if="v.existGap === true"

                          v-permission="['appGap:query', 'appGap:all']"

                          @click.stop="openLookShow(v)"

                          ><i class="el-icon-connection"

                        /></span>

                      </span>

                      <template v-for="(k, num) in v.children">

                        <el-tooltip

                          effect="light"

                          placement="top"

                          :class="k.light == true ? 'cont1' : 'cont'"

                        >

                          <span

                            slot="content"

                            style="display:inline-block;max-width:235px;"

                            >{{ k.describe }}</span

                          >

                          <!-- 通过计算属性返回值进行权限控制 -->

                          <el-popover

                            :key="num"

                            placement="bottom"

                            :disabled="

                              getPermission(['appGap:add', 'appGap:all']) ||

                                !flagData.updatable

                            "

                            width="150"

                            trigger="click"

                          >

                            <div class="btns">

                              <el-button

                                v-permission="['appGap:add', 'appGap:all']"

                                @click.stop="openShowNew(k)"

                              >

                                新建应用差距

                              </el-button>

                            </div>

                            <span

                              slot="reference"

                              @click.stop=""

                              style="fontSize:14px"

                            >

                              <span>{{ k.name }}</span>

                              <span

                                v-if="k.existGap === true"

                                v-permission="['appGap:query', 'appGap:all']"

                                class="gapstyle"

                                @click.stop="openLookShow(k)"

                                ><i class="el-icon-connection"

                              /></span>

                            </span>

                          </el-popover>

                        </el-tooltip>

                      </template>

                    </div>

                  </el-popover>

                </div>

              </div>

            </div>

          </div>

        </template>

      </div>

      <el-dialog

        id="divImg"

        title="预览图片"

        :visible.sync="dialogFormVisible"

        :fullscreen="true"

      >

        <img id="imagesrc" src="" alt="" class="divimg" />

      </el-dialog>

      <new-capability-dialog

        v-if="showNew"

        :relate-id="relateId"

        :relate-name="relateName"

        :do-main-id="searchForm.domain"

        @upData="upData"

        :doMainId="searchForm.domain"

      />

      <look-capability-dialog

        v-if="lookShow"

        :relate-id="relateId"

        @upData="showLook"

      />

      <div class="editMaps">

        <asset-map-editing

          v-if="!editMaps"

          :domain-id="searchForm.domain"

          :key-words="keyWords"

          :yearvalue="yearvalue"

          @upData="upDataMap"

        />

      </div>

      <div

        v-if="

          editMaps &&

            this.searchForm.domain !== null &&

            this.parentsData !== null &&

            flagData.updatable

        "

        v-permission="['appMap:edit', 'appMap:all']"

        class="edit"

        @click="editMap"

      >

        <i class="iconfont iconbianji" />

      </div>

    </div>

  </div>

</template>

<script>

import { getLeftTree, getLeftProdcutTree } from "@/api/common";

import newCapabilityDialog from "./components/newCapabilityDialog";

import lookCapabilityDialog from "./components/lookCapabilityDialog";

import { selfLeftTree } from "@/api/architectureEvolution";

import { getAllAssetsLists, getMapSaveAll } from "@/api/architectureAssetMap";

import { point } from "../../utils/index";

import assetMapEditing from "./components/assetMapEditing";

import html2canvas from "html2canvas";

import Canvas2Image from "@/utils/canvas2Image.js";

import store from "@/store";

import { getPermissions } from "@/api/businessDomains";

export default {

  components: {

    assetMapEditing,

    newCapabilityDialog,

    lookCapabilityDialog

  },

  data() {

    return {

      window: window,

      dialogFormVisible: false,

      img: "",

      editMaps: true,

      menuCollapse: false, // 关闭左侧边栏

      openeds: [],

      data: [], // 左侧边栏数据 数组

      visible: false,

      yearvalue: new Date().getFullYear().toString(),

      updateTime: "",

      keyWords: "",

      searchForm: {

        domain: "" // 领域id

      },

      doId: "",

      dataList: [],

      parentsData: [],

      // 所属领域

      fieldList: [],

      lookShow: false,

      showNew: false,

      relateId: "",

      relateName: "",

      flagData: {}

    };

  },

  computed: {

    // 权限控制拥有权限返回true否则false

    getPermission() {

      return value => {

        const roles = store.getters && store.getters.systemButton;

        if (value && value instanceof Array && value.length > 0) {

          const permissionRoles = value;

          const hasPermission = roles.some(role => {

            return permissionRoles.includes(role);

          });

          return hasPermission ? false : true;

        }

      };

    },

  },

  created() {

    this.init();

  },

  mounted() {

    this.$nextTick(() => {

      const that = this;

      setTimeout(() => {

        that.$refs.refall0[0].parentElement.classList.add("product_actived");

        const nav = document.getElementById("firstNav");

        nav.click();

      }, 200);

    });

  },

  methods: {

    // 初始化

    init() {

      this.getLeftProdcutTreeFunc();

      this.selfLeftTreeFunc();

      this.leftTree()

      // this.getPageAllData();

    },

    // 预览

    openDialog() {

      // 埋点

      point("click", true, "预览", "应用架构资产地图页面", "onclick");

      this.dialogFormVisible = true;

      var myDiv = document.getElementById("myDiv");

      var imgHeight = myDiv.scrollHeight; // 获取DOM高度

      var imgWidth = myDiv.offsetWidth; // 获取DOM宽度

      var canvas = document.createElement("canvas");

      var scale = 1;

      canvas.width = imgWidth * scale;

      canvas.height = imgHeight * scale;

      canvas.getContext("2d").scale(scale, scale);

      var opts = {

        scale: scale, //不管上面的scale是多少倍，这里只能取1，否则会显示不完全

        canvas: canvas,

        logging: true,

        width: imgWidth,

        height: imgHeight

      };

      window.pageYOffset = 0;

      document.documentElement.scrollTop = 0;

      document.body.scrollTop = 0;

      var divImg = document.getElementById("divImg");

      setTimeout(() => {

        html2canvas(myDiv, opts).then(function(canvas) {

          document.getElementById("imagesrc").src = Canvas2Image.convertToPNG(

            canvas,

            canvas.width,

            canvas.height,

            "PNG"

          ).src;

        });

      }, 500);

    },

    // 获取数据

    getPageAllData() {

      const params = {

        year: this.yearvalue,

        keyWords: this.keyWords,

        domainId: this.searchForm.domain ? this.searchForm.domain : ""

      };

      getAllAssetsLists(params).then(res => {

        if (res.code === 200) {

          this.flagData = res.data;

          this.dataList = res.data.maps;

          for (var i in this.dataList) {

            this.parentsData = this.dataList[i].children;

          }

          this.updateTime = res.data.updateTime;

        }

      });

    },

    // 清除弹出框的内容

    clearData() {

      this.getPageAllData();

    },

    // 改变年份

    changeYear() {

      this.getPageAllData();

    },

    // 查看差距

    openLookShow(val) {

      // 埋点

      point("click", true, "查看差距", "应用架构资产地图页面", "onclick");

      this.relateId = val.id;

      this.lookShow = true;

    },

    // 新建差距

    async openShowNew(val) {

       try {

        const { data } = await getPermissions({

          domainId: this.searchForm.domain,

          type: "APP_DOMAIN"

        });

        if (!data) {

          return this.$message.error("没有访问该数据的权限");

        }

        // 埋点

      point("click", true, "新建差距", "应用架构资产地图页面", "onclick");

      this.searchForm.domain = this.doId;

      this.relateId = val.id;

      this.relateName = val.name;

      this.showNew = true;

      } catch (err) {

        console.log(err);

      }

 

    },

    upData() {

      this.showNew = false;

      this.getPageAllData();

    },

    showLook() {

      this.lookShow = false;

    },

    // 新建

    async addMap() {

      try {

        const { data } = await getPermissions({

          domainId: this.searchForm.domain,

          type: "APP_DOMAIN"

        });

        if (!data) {

          return this.$message.error("没有访问该数据的权限");

        }

        const res = await getMapSaveAll({

          domainId: this.searchForm.domain,

          year: this.yearvalue

        })

        if (res.code === 200) {

          this.editMaps = false;

          this.$message.success("创建成功");

          this.getPageAllData();

        }

      }catch(err){

        console.log(err);

      }

    },

    // 编辑

    async editMap() {

      try {

        const { data } = await getPermissions({

          domainId: this.searchForm.domain,

          type: "APP_DOMAIN"

        });

        if (!data) {

          return this.$message.error("没有访问该数据的权限");

        }

        // 埋点

        point("click", true, "编辑", "应用架构资产地图页面", "onclick");

        this.editMaps = false;

      } catch (err) {

        console.log(err);

      }

    },

    upDataMap(val) {

      this.editMaps = val;

    },

    //侧边栏

    clickCollapse() {

      if (this.widthX["margin-left"] === "208px") {

        this.$set(this.widthX, "margin-left", "72px");

      } else {

        this.$set(this.widthX, "margin-left", "208px");

      }

      this.menuCollapse = !this.menuCollapse;

    },

    // 侧边栏 加载树 数据

    leftTree() {

      getLeftTree({ floor: "0" }).then(res => {

        if (res.code === 200) {

          this.data = [res.data];

          this.openeds = [this.data[0].id];

          this.searchForm.domain = this.data[0].id;

          this.getPageAllData();

        }

      });

    },

    // 加载自己名下所属应用域 侧边栏相关

    selfLeftTreeFunc() {

      selfLeftTree().then(res => {

        if (res.code === 200) {

          this.fieldList = res.data.children;

        }

      });

    },

    getLeftProdcutTreeFunc() {

      getLeftProdcutTree({ floor: "1", treeify: true }).then(res => {

        if (res.code === 200) {

          this.allRelatedProductList = [res.data];

        }

      });

    },

    // 侧边栏 点击树节点

    handleNodeClick(data, event, type) {

      // 埋点

      point("click", true, "点击树节点", "应用架构资产地图页面", "onclick");

      this.keyWords = "";

      this.doId = data.value;

      this.searchForm.domain = this.doId;

      this.pageNo = 1;

      this.yearvalue = new Date().getFullYear().toString()

      this.dataList = [];

      this.getPageAllData();

      this.$refs.refall0[0].parentElement.classList.remove("product_actived");

      // 点击父节点

      if (type === 1) {

        // 目标数据

        if (this.targetData) {

          // 点击之前就存在的父节点数据再去除样式

          this.targetData.target.parentElement.classList.remove(

            "product_actived"

          );

        }

        // 子数据

        if (this.childrenData) {

          // 点击父节点之后, 判断之前的子节点数据存在的话， 就去除样式

          this.childrenData.$el.classList.remove("is-active");

        }

        this.targetData = event;

        event.currentTarget.parentElement.classList.add("product_actived");

      } else {

        // 点击子节点

        if (this.targetData) {

          // 点击子节点， 去除父节点数据 样式

          this.targetData.target.parentElement.classList.remove(

            "product_actived"

          );

        }

        // 子数据

        if (this.childrenData) {

          // 点击父节点之后, 判断之前的子节点数据存在的话， 就去除样式

          this.childrenData.$el.classList.remove("is-active");

        }

        this.childrenData = event;

        event.$el.classList.add("is-active");

      }

    }

  }

};

</script>

<style lang="scss" scoped>

@import "~@/styles/changeui.scss";

// 页面没有数据的样式

.product {

  margin-bottom: 25px;

  text-align: center;

  font-size: 18px;

  color: #999999;

}

.img {

  background-image: url(../../../src/assets/images/noProduct.png);

  margin: auto;

  width: 221px;

  height: 146px;

  display: block !important;

  margin-top: 18%;

}

// 头部

.topCont {

  display: flex;

  justify-content: space-between;

}

// 放大缩小

.app_content_box {

  .top-button {

    text-align: right;

    padding: 0 48px;

    ::v-deep.el-input {

      width: 150px;

      height: 28px;

      .el-input-group__prepend {

        padding: 0 5px;

        color: #dedede;

        font-size: 20px;

        background-color: #fff;

        border-right: none !important;

        .lowerLimit {

          color: #f7f7f7;

        }

      }

      .el-input-group__append {

        padding: 0 5px;

        color: #dedede;

        font-size: 20px;

        background-color: #fff;

        border-left: none !important;

        .upperLimit {

          color: #f7f7f7;

        }

      }

      .el-input__inner {

        text-align: center;

        border-left: none !important;

        border-right: none !important;

        // height: 28px !important;

        &:hover {

          border-color: #cccccc;

        }

      }

    }

  }

}

.bottom {

  margin-bottom: 10px;

}

// 全部

.allbgc {

  width: calc(100% - 36px);

  float: left;

  padding: 8px 0px;

  margin: 16px;

  border: 1px solid #000;

  padding-bottom: 35px;

}

.a {

  width: calc(100% - 36px);

  float: left;

  padding: 8px 0px;

  margin: 16px;

  border: 1px solid #000;

  box-shadow: 0px 0px 10px #00bfff;

}

.firstTitle {

  width: 100%;

  display: flex;

  justify-content: center;

  font-size: 14px;

  font-weight: 800;

}

.allbg {

  width: 30%;

  float: left;

  background: #fff;

  padding: 10px;

  margin: 12px 12px 12px 18px;

  // box-shadow: 0px 0px 10px #999;

   border: 1px solid #999;

}

.b {

  width: 30%;

  float: left;

  background: #fff;

  padding: 8px 0;

  margin: 8px;

  box-shadow: 0px 0px 10px #00bfff;

}

.secondTitle {

  width: 100%;

  display: flex;

  justify-content: center;

  font-size: 13px;

  font-weight: 600;

}

.bg {

  width: calc(45% - 2px);

  float: left;

  margin: 6px;

  padding: 10px;

  // background: rgb(236, 236, 236);

  background-color: #b5c2dc;

  border-radius: 4px;

}

.c {

  width: 42%;

  float: left;

  margin: 6px;

  padding: 6px;

  background: rgb(236, 236, 236);

  box-shadow: 0px 0px 10px #00bfff;

}

.thirdTitle {

  font-size: 12px;

  font-weight: 800;

  margin: 0 0 10px;

  width: 100%;

  display: flex;

  justify-content: center;

}

.content {

  display: flex;

  justify-content: center;

  width: 100%;

  font-size: 12px;

  min-height: 22px;

  line-height: 22px;

  margin-top: 15px;

  // border: 1px dashed #000;

  // overflow: hidden;

  // white-space: nowrap;

  // text-overflow: ellipsis;

  background: #fff;

  border-radius: 4px;

  padding: 3px;

}

.content1 {

  display: flex;

  justify-content: center;

  font-size: 12px;

  min-height: 22px;

  line-height: 22px;

  margin-top: 15px;

  // border: 1px dashed #000;

  background-color: #fff;

  box-shadow: 0px 0px 10px #00bfff;

}

// 各自领域下的页面样式

.allbg1 {

  width: 31%;

  float: left;

  background: #fff;

  padding: 10px;

  margin: 10px;

  box-shadow: 0px 0px 10px #999;

  // border: 1px solid #999;

}

.allbg2 {

  width: 32%;

  float: left;

  background: #fff;

  padding: 10px;

  margin: 10px;

  box-shadow: 0px 0px 10px #00bfff;

}

.secondTitle1 {

  width: 100%;

  display: flex;

  justify-content: center;

  font-size: 15px;

  font-weight: 600;

}

.bg1 {

  width: calc(50% - 20px);

  float: left;

  margin: 10px;

  padding: 10px;

  // background: rgb(236, 236, 236);

  background-color: #b5c2dc;

  border-radius: 4px;

}

.bg2 {

  height: auto !important;

  position: relative;

}

.bg2gapstyles {

  position: absolute;

  line-height: 15px;

  top: 0;

  left: 75%;

}

.c1 {

  width: 46%;

  float: left;

  margin: 10px;

  padding: 10px;

  background: rgb(236, 236, 236);

  box-shadow: 0px 0px 10px #00bfff;

}

.thirdTitle1 {

  font-size: 12px;

  line-height: 15px;

  font-weight: 600;

  margin: 0 0 10px;

  width: 100%;

  display: flex;

  justify-content: center;

}

.cont {

  display: flex;

  justify-content: center;

  width: 100%;

  font-size: 12px;

  height: 30px;

  line-height: 30px;

  margin-top: 15px;

  // border: 1px dashed #000;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  background-color: #fff;

  border-radius: 4px;

}

.cont1 {

  display: flex;

  justify-content: center;

  font-size: 12px;

  height: 30px;

  line-height: 30px;

  margin-top: 15px;

  // border: 1px dashed #000;

  background-color: #fff;

  box-shadow: 0px 0px 10px #00bfff;

}

// 按钮

.btns {

  // width: 150px;

  padding: 10px;

}

.viewbtn {

  margin: 0 auto;

}

.gapstyle {

  display: inline-block;

  margin: 4px 0 0 4px;

  width: 20px !important;

  height: 20px !important;

  text-align: center;

  line-height: 20px !important;

  background: rgb(241, 194, 194);

  border-radius: 20px;

  font-size: 12px;

  color: #f00;

  cursor: pointer;

}

.divimg {

  display: block;

  margin: 0 auto;

}

// 编辑

.edit {

  z-index: 9999;

  position: absolute;

  background-color: #ffffff;

  height: 43px;

  width: 42px;

  top: 56px;

  right: 6px;

  padding: 12px;

  border-radius: 50%;

  box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.15);

  cursor: pointer;

  &:hover {

    color: #ca1d22;

  }

}

// 页面布局

.containerRight {

  position: relative;

  padding: 12px 12px 0 12px;

  overflow: auto;

}

.containerRight > .displayFlex {

  position: absolute;

  top: 3px;

  right: 20px;

}

.containerRight .top p span {

  margin-left: 30px;

}

.top {

  margin-top: 10px;

  display: flex;

  justify-content: space-between;

}

.el-submenu__title > span {

  display: inline-block;

  width: 90%;

}

.refAll {

  display: inline-block;

  width: 100%;

}

::v-deep .el-input-group__append {

  padding: 5px;

}

// @media screen and (max-width: 1400px) {

//   .inputMini

//   .serchButton

//   .preview {

//     height: 28px;

//   }

// }

// @media screen and (min-width: 1400px) {

//   .inputMini

//   .serchButton

//   .preview {

//     height: 32px;

//   }

// }

.el-icon-connection {

  width: 20px;

  height: 20px;

  background: #ccc;

  border-radius: 50%;

  text-align: center;

  line-height: 20px;

  font-weight: 400;

  color: #33332c;

}

.el-icon-connection:hover {

  color: #ffffff;

  background: red;

}

.add {

  width: 280px;

  height: 60px;

  line-height: 60px;

  border-radius: 4px;

  border: 1px dashed #999999;

  text-align: center;

  cursor: pointer;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  [class*="el-icon-"] {

    margin-right: 15px;

    font-size: 16px;

    font-weight: 400;

    color: #999999;

  }

}

</style>