<template>
  <!-- 设备设施 -->
  <div id="equipment">
    <!-- 顶部八个子系统导航 -->
    <div class="eq-top">
      <span
        class="eq-system"
        v-for="(item, index) in system"
        :class="item.id == systemId ? 'isActive' : ''"
        :key="index"
        @click="tabSyatem(item)"
      >
        <img :src="item.id == systemId ? item.icon1 : item.icon" />
        {{ item.name }}
      </span>
    </div>
    <div class="eq-bottom">
      <!-- 左侧选择,系统原理图等,点击进入弹窗 -->
      <div class="eq-left">
        <ul v-for="(eve, index) in everySystem" :key="'o' + index">
          <li
            class="li-style"
            :class="{ 'is-active': eve.id }"
            @click="dialogVisible(eve)"
          >
            <span class="circle"></span>
            <el-button
              type="text"
              disabled
              class="hanzi2"
              title="数字化移交系统上线后可用"
              v-if="eve.label == '查看图纸' && !showLookPic"
              style="text-align: left"
              >{{ eve.label }}</el-button
            >
            <span class="hanzi" v-else>{{ eve.label }}</span>
          </li>
        </ul>
      </div>
      <!-- 右侧楼层图主体 -->
      <div class="eq-right">
        <div class="eq-right-bottom">
          <div class="title-box">
            <div class="eq-title">
              <span class="span1">{{ floorInfo.code }}</span>
            </div>
          </div>
          <div class="eq-content">
            <floorMap
              ref="floorMap"
              :id="'equip'"
              :loadName="loadName"
              :type="'system'"
            ></floorMap>
            <div class="legend-boxs">
              <Legend
                :key="keyLd"
                :systemName="systemName"
                :floors="floorsArr"
                type="1"
                :editTips="`编辑${floorInfo.code}层${systemName}平面图`"
              ></Legend>
              <!-- 楼层切换组件 -->
              <floor-list
                :key="keyFL"
                v-if="floorsArr.length > 0"
                :floorsArr="floorsArr"
                @emitFloor="emitFloor"
                id="system"
              ></floor-list>

              <div
                class="additional-box"
                ref="additionalBox"
                v-if="fqPic.length > 0 && (smsxt == '1003' || smsxt == '1004')"
              >

                  <el-badge :is-dot="visibleTooltip" class="item" >
                    <a-tooltip  v-if="showView === 3" placement="bottomRight" :defaultVisible="visibleTooltip" overlayClassName="additional-box-tooltip" :visible="visibleTooltip">
                      <template slot="title">
                        <span>数据填写不完整，请检查并完善</span>
                      </template>
                    <div
                            class="additional2"
                            @click="additionalColl"
                            >
                      <img src="../../assets/imgs/bg2.png" alt />
                    </div>
                </a-tooltip>
                    <div class="additional" @click="additionalColl" v-else>
                      <img src="../../assets/imgs/bg.png" alt />
                    </div>
                  </el-badge>



                <el-collapse-transition>
                  <div
                    v-show="showView === 3"
                    class="add-img-container"
                    ref="addImgContainer"
                    :style="`bottom: ${bottomOffset}px;`"
                  >
                    <!-- <div class="add-img" ref="addImg">
                      <img :src="fqPic[0].url" alt />
                    </div> -->
                    <!--  -->
                    <div class="add-data-box">
<!--                       该div内为谢贝贝开发区域-->
                      <div class="add-data-table" style="max-height: 500px">
<!--                        <addDataTable :system-name="systemName" :tableData2="tableData" :tableData="tableData" :totalCount="totalCount" :examplesBoo="false"></addDataTable>-->
                        <addDataTable :system-name="systemName" :tableData="tableData" :totalCount="totalCount" :examplesBoo="false"></addDataTable>
                      </div>
                      <el-button type="primary" class="add-data-editbtn" @click="addDataVisible=!addDataVisible">编辑</el-button>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 使用 v-if解决弹窗未展示时,会调用接口的问题 -->
    <eq-dialog
      v-if="ShowDialog"
      ref="dialog"
      :systemName="systemName"
      :smsxt="smsxt"
      @emitCount="emitCount"
      @closeModal="closeModal"
    ></eq-dialog>
<!--编辑点击弹窗-->
      <addDataDialog v-if="addDataVisible" :systemName="systemName" @handelCancel="handelCancel" :tableData="tableData"></addDataDialog>
  </div>
</template>

<script>
import floorList from "@/components/floorList.vue";
import floorMap from "@/components/floorMap/index.vue";
import eqDialog from "./eqDialog";
import addDataDialog from "./addDataDialog";
import addDataTable from "./addDataTable";
import { system } from "@/utils/plugins/components.js";
import { queryPic, getPvUv } from "@/api/public.js";
import {
  uploadExcel,
  downloadExcel,
  previewExecl,
  uploadExcelTemplate,
    addDataCheckComplete,
    addDataPreviewFireControl,
    addDataPreviewWeakCurrent,
} from "@/api/equipmentList.js";
import { mapGetters } from "vuex";
import store from "../../store";
import XLSX from "xlsx";
import { Alert } from "ant-design-vue";
export default {
  data() {
      return {
          system,
          everySystem: [],
          systemId: 1,
          categoryId: "GDXT",
          systemName: "供电系统",
          floorInfo: {},
          smsxt: "1001",
          dialogInfo: {},
          brand: [], //品牌
          manufacturer: [],
          fqPic: [],
          loadName: "",
          type: "",
          objCount: [],
          bottomOffset: 0,
          keyFL: "keyFL" + new Date().getTime(),
          keyLd: "keyLd_" + new Date().getTime(),
          ShowDialog: false, //是否显示弹窗
          showLookPic: false,
          showExeclTooltip: false, // 是否展示execl提示信息,
          showXFXTToltip: false, //是否展示消防系统tooltip

          addDataVisible: false,//附加数据弹窗
          visibleTooltip:false, //是否展示附加数据有无数据提示信息
          tableData:[],
          totalCount:{},
      };
  },
  components: { floorList, eqDialog, floorMap,addDataDialog ,addDataTable},
  watch: {
    // 监听currentFloor变化,重新渲染楼层组件,解决 数据与视图不照应的问题
    /* '$store.state.currentFloor': {
            handler(newV, oldV) {
                if (newV.seq !== oldV.seq) {
                    // TODO: keyFL更新
                    this.keyFL = 'keyFL' + new Date().getTime()
                }
            }
        } */
  },
  methods: {
      //附加数据弹窗取消
      handelCancel(data){
          this.addDataVisible = data;
      },
    showToolTip() {
      this.showExeclTooltip = true;
      if (this.smsxt == 1003) {
        //    是否是消防系统
        this.showXFXTToltip = true;
      } else {
        this.showXFXTToltip = false;
      }
    },
    hideToolTip() {
      this.showExeclTooltip = false;
    },
    /**
     * excel文件上传
     */
    uploadExl(resData) {
      const { file } = resData;
      // 创建FormData对象
      const isLt30M = file.size / 1024 / 1024 < 30;
      if (!["xls", "xlsx"].includes(file.name.split(".")[1])) {
        this.$message.warning("上传文件只能是 xls、xlsx格式!");
        return;
      }
      if (!isLt30M) {
        this.$message.warning("上传excel模板大小不能超过 30MB!");
        return;
      }
      const formData = new FormData();
      // 将得到的文件流添加到FormData对象
      formData.append("file", file, file.name);
      const getParams = {
        plazaId: this.plazaId,
        smsxt: this.smsxt,
        floor: this.floorInfo.gname, //楼层 必填
      };
      const data = formData;
      uploadExcel({ getParams, data }).then((res) => {
        if (res?.result === "success") {
          this.$message({
            message: "上传成功",
            type: "success",
          });
          //   刷新预览界面
          this.previewExl();
        } else {
          this.$message({
            message: "上传失败",
            type: "error",
          });
        }
      });
    },
    /**
     * 下载excel
     */
    downloadExl() {
      const getParams = {
        plazaId: this.plazaId,
        smsxt: this.smsxt,
        floor: this.floorInfo.gname,
      };
      downloadExcel({ getParams }).then((res) => {
        // 文件不存在,下载失败提示
        res.msg && this.$message({ type: "warning", message: res.msg });
      });
    },
    // execl预览
    previewExl() {
      const getParams = {
        plazaId: this.plazaId,
        smsxt: this.smsxt,
        floor: this.floorInfo.gname,
      };
      previewExecl({ getParams }).then((res) => {
        // 文件不存在,下载失败提示
        var data = new Uint8Array(res);
        var workbook = XLSX.read(data, { type: "array" });
        this.readWorkbook(workbook);
      });
    },
    // 上传模板execl
    uploadTemplateExl(resData) {
      const { file } = resData;
      // 创建FormData对象
      const isLt30M = file.size / 1024 / 1024 < 30;
      if (!["xls", "xlsx"].includes(file.name.split(".")[1])) {
        this.$message.warning("上传文件只能是 xls、xlsx格式!");
        return;
      }
      if (!isLt30M) {
        this.$message.warning("上传excel模板大小不能超过 30MB!");
        return;
      }
      const formData = new FormData();
      // 将得到的文件流添加到FormData对象
      formData.append("file", file, file.name);
      const getParams = {
        plazaId: this.plazaId,
        smsxt: this.smsxt,
      };
      const data = formData;
      uploadExcelTemplate({ getParams, data }).then((res) => {
        if (res?.result === "success") {
          this.$message({
            message: "上传成功",
            type: "success",
          });
          //   刷新预览界面
          this.previewExl();
        } else {
          this.$message({
            message: "上传失败",
            type: "error",
          });
        }
      });
    },
    // 将表格追加到页面节点展示
    readWorkbook(workbook) {
      var sheetNames = workbook.SheetNames; // 工作表名称集合
      var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
      const xlsxHtml = XLSX.write(workbook, {
        sheet: sheetNames[0],
        type: "string",
        bookType: "html",
      });
      document.getElementById("result").innerHTML = xlsxHtml;
    },
    // 查询tab页
    tabSyatem(item) {
      this.systemId = item.id;
      this.everySystem = item.children;
      this.systemName = item.name;
      this.smsxt = item.smsxt;
      this.$cookie.set("categoryId", item.categoryId, 3);
      store.commit("SETCATEGORYID", item.categoryId);
      this.$refs.floorMap.init(this.floorInfo.gname);
      this.querySmsxt();
      this.viewLengend();
      // 发送pvUv
      const data = {
        plazaId: this.plazaId,
      };
      let postParams = {
        type: "equipmentRouter",
        target: item.name,
        parameter: item.categoryId,
      };
      getPvUv(data, postParams)
        .then((res) => {
          console.log("pvuv", res);
        })
        .catch((res) => {
          console.log("error", res);
        });
    },
    querySmsxt() {
      // 目前消防和弱电下面有特殊的数据表格
      if (this.smsxt == "1003" || this.smsxt == "1004") {
        this.queryTable(this.smsxt);
          //检测消防和弱电下是否表格有数据
          this.addDataCheckCompleteFun();
      }
    },
    //判断有没有原理图，如果没有则不出现系统原理图列表li
    emitCount(objCount) {
      this.objCount = objCount;
    },
    emitFloor(item) {
      this.floorInfo = item;
      this.$refs.floorMap.init(this.floorInfo.gname);
      this.init();
      this.querySmsxt();
    },
    dialogVisible(eve) {
      // console.log('dialogVisible')
      // 点击后显示弹窗组件
      // if (eve.label != '查看图纸') {
      this.ShowDialog = true;
      this.$nextTick(() => {
        this.$refs.dialog.showModal(eve);
      });
      // pvuv接口记录
      // 发送pvUv
      const data = {
        plazaId: this.plazaId,
      };

      let postParams = {
        type: "modal",
        target: eve.id,
        parameter: eve.label,
      };
      getPvUv(data, postParams)
        .then((res) => {
          console.log("pvuv", res);
        })
        .catch((res) => {
          console.log("error", res);
        });
      // }
    },
    /**
     * 关闭弹窗后,重新渲染 楼层组件
     * 在父组件(本组件)内将 ShowDialog 置为false
     * @param {Boolean} flag 弹窗组件传回的标志: 一直传回 true
     */
    closeModal(flag) {
      this.ShowDialog = false;
      // this.keyFL = 'keyFL' + new Date().getTime()
      this.keyLd = "keyLd" + new Date().getTime();
    },
    //附加数据图片查看 showView为3展示状态
    additionalColl() {
        console.log('this.floorInfo',this.floorInfo);
        // // 走预览接口
      // this.previewExl();
      // 调整样式
      if (this.showView != 3) {
        this.$store.commit("SETSHOWVIEW", 3);
        this.$nextTick(() => {
          let p = this.$refs.additionalBox.offsetTop;
          let d = this.$refs.addImgContainer.offsetHeight;
          let bottomOffset = p + 44 - d;
          if (bottomOffset >= 0) {
            this.bottomOffset = this.visibleTooltip?0:-100;
          } else {
            this.bottomOffset = bottomOffset;
          }
        });
      } else {
        this.$store.commit("SETSHOWVIEW", 0);
      }
        if(this.systemName =='消防系统'){
            this.addDataPreviewFireControlFun();
        }
        if(this.systemName =='弱电系统'){
            this.addDataPreviewWeakCurrentFun();
        }


    },
    // 查询附加数据图片
    queryTable(system) {
      this.fqPic = [];
      let picFloor = this.$cookie.get("floorMapId");
      let getParams = {
        module: "1003",
        floor: picFloor,
        system: system,
        plazaId: this.plazaId,
      };
      queryPic({ getParams }).then((res) => {
        // console.log('附加数据', res)
        this.fqPic = res.data ? res.data : [];
      });
    },
    init() {
      this.loadName = `设备设施-${this.systemName}-${this.floorInfo.code}`;
      if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
        this.floorInfo = this.floorsArr.find((item) => {
          return this.$cookie.get("currentFloorId") == item.seq;
        });
      }
    },
    // 从设备设施进入的机房
    queryType(val) {
      this.type = val;
    },
    viewLengend() {
      if (this.legendTable.length > 0) {
        this.$store.commit("SETSHOWVIEW", 1);
      } else {
        this.$store.commit("SETSHOWVIEW", 0);
      }
    },
    smsxtQuery() {
      if (this.smsxt == "1001") {
        this.$cookie.set("categoryId", "GDXT");
      } else if (this.smsxt == "1002") {
        this.$cookie.set("categoryId", "NTXT");
      } else if (this.smsxt == "1003") {
        this.$cookie.set("categoryId", "XFXT");
      } else if (this.smsxt == "1004") {
        this.$cookie.set("categoryId", "RDXT");
      } else if (this.smsxt == "1005") {
        this.$cookie.set("categoryId", "JPSXT");
      } else if (this.smsxt == "1006") {
        this.$cookie.set("categoryId", "DTXT");
      } else if (this.smsxt == "1007") {
        this.$cookie.set("categoryId", "RQYL");
      } else {
        this.$cookie.set("categoryId", "SCPZ");
      }
    },
    //  查看数据是否填写完整
      addDataCheckCompleteFun() {
          let params = {
              projectId: this.plazaId,
              systemCode: this.smsxt,
              floor: this.floorInfo.gname,
          }
          addDataCheckComplete({params}).then(res=>{
          // let res = {
          //     "result": "success",                       //状态信息 success:调用成功  fail:调用失败
          //     "data": {
          //         "isComplate": false,                       //是否完整， true: 完整  false ：不完整
          //         "desc": "数据填写不完整，请检查并完善"         // 描述信息
          //     }
          // }
          if (res.result == 'success') {
              if (!res.data.isComplate) {
                  this.visibleTooltip = false;
              } else {
                  this.visibleTooltip = true;
              }
          }else{
              this.$message({
                  message: res.message,
                  type: 'error'
              })
          }
          console.log(res);
          })
    },
      // 消防系统数据预览/数据回显
    addDataPreviewFireControlFun(){
        let params = {
            projectId: this.plazaId,
            systemCode: this.smsxt,
            floor: this.floorInfo.gname,
            getTotal:'0'
        }
        // addDataPreviewFireControl({params}).then(res=>{
        let res = {
            "result": "success",                       //状态信息 success:调用成功  fail:调用失败
            "data":{
                "infoList":[{
                    "fireZone":"C1-C1-C1-C1-9",      //防火分区
                    "isFm": "1",            //是否属于工程物业管理范围，0：否，1：是
                    "hostNum":"2",          //主机编号
                       //烟感数量
                    "warmCount":"999999",       //温感数量
                    "handNewCount":"13",    //手报数量

                    "moduleCount":"999999"       //模块数量
                },{
                    "fireZone":"C1-10",      //防火分区
                    "isFm": "0",            //是否属于工程物业管理范围，0：否，1：是
                    "manageScope":"合作方管理范围"   //管理范围
                } ],
                "totalCount":{          //总数量,当传入的参数getTotal的值为1时有该数据
                    "smokeTotalCount":"20",      //烟感总数量
                    "warmTotalCount":"12",       //温感总数量
                    "handNewTotalCount":"13",    //手报总数量
                    "fireHydrantTotalCount":"15",  //消火栓总数量
                    "moduleTotalCount":"33"       //模块总数量
                }
            }
        };
          if(res.result=='success'){
              this.tableData = res.data.infoList;
          }else{
              this.$message({
                  message: res.message,
                  type: 'error'
              })
          }

        // })
      },
      //弱电系统数据预览/回显
      addDataPreviewWeakCurrentFun(){
          let params = {
              projectId: this.plazaId,
              systemCode: this.smsxt,
              floor: this.floorInfo.gname,
              getTotal:'1'
          }
          // addDataPreviewWeakCurrent({params}).then(res=>{
         let res =  {
              "result": "success",                       //状态信息 success:调用成功  fail:调用失败
              "data":{
              "infoList":[{
                  "fireZone":"C区",      //分区
                  "monitorCount":"2",   //监控系统数量
                  "baCount":"3",        //BA系统数量
                  "ddcCount":"4",       //DDC数量
                  "accessCount":"20"    //门禁系统数量
              },{
                  "fireZone":"C区",      //分区
                  "monitorCount":"2",   //监控系统数量
                  "baCount":"5",        //BA系统数量
                  "ddcCount":"4",       //DDC数量
                  "accessCount":"20"    //门禁系统数量
              } ],
                  "totalCount":{            //总数量,当传入的参数getTotal的值为1时有该数据
                  "monitorTotalCount":"2",   //监控系统总数量
                      "baTotalCount":"3",        //BA系统总数量
                      "ddcTotalCount":"4",       //DDC总数量
                      "accessTotalCount":"20"    //门禁系统总数量
              }
          }
          }
          this.tableData =[];
          if(res.result=='success'){

              res.data.infoList.length && res.data.infoList.map(item=>{
                  let arr =   [
                      {
                          fireZone: '',
                          system: '监控系统',
                          monitorCount: '',
                      },
                      {
                          fireZone: '',
                          system: 'BA系统',
                          baCount: '',
                      },
                      {
                          fireZone: '',
                          system: 'DDC',
                          ddcCount: '',
                      },
                      {
                          fireZone: '',
                          system: '门禁系统',
                          accessCount: '',
                      },
                  ];
                   arr[0].fireZone = item.fireZone;
                   arr[0].monitorCount = item.monitorCount;
                   arr[1].baCount = item.baCount;
                   arr[2].ddcCount = item.ddcCount;
                   arr[3].accessCount = item.accessCount;
                  this.tableData.push(...arr);
              })
              console.log(this.tableData);
              this.totalCount = res.data.totalCount

          }else{
              this.$message({
                  message: res.message,
                  type: 'error'
              })
          }

          // })
      },
  },
  created() {
    /**
     * 是否显示,可以点击的查看图纸
     * 根据配置文件中,配置的广场ID显示查看图纸
     */
    if (
      window.__systemConf.conf.showLookPic_projectData.includes(this.plazaId)
    ) {
      this.showLookPic = true;
    }
  },
  mounted() {
    // if (Object.keys(this.floorObj).length > 0) {
    //     this.floorInfo = this.floorObj
    // }
    /**
     * 解决切换到设备设施地图数据加载两次问题
     */
    // this.$refs.floorMap.init(this.floorInfo.gname)
    if (this.$route.query.smsxt) {
      console.log(this.$route.query.smsxt);
      this.smsxt = this.$route.query.smsxt;
      this.smsxtQuery();
      this.system.forEach((el) => {
        if (el.smsxt == this.smsxt) {
          this.everySystem = el.children;
          this.systemName = el.name;
          this.systemId = el.id;
        }
      });
    }
    this.everySystem = this.system[0].children;
    // 刷新时,store中有categoryId时,选中子系统状态
    if (this.$store.state.categoryId) {
      let item = this.system.filter(
        (item) => item.categoryId === this.$store.state.categoryId
      )[0];
      this.systemId = item.id;
      this.everySystem = item.children;
      this.systemName = item.name;
      this.smsxt = item.smsxt;
      this.querySmsxt();
      this.viewLengend();
    }
    this.init();
  },
  computed: {
    ...mapGetters([
      "floorsArr",
      "plazaId",
      "showView",
      "legendTable",
      "floorObj",
    ]),
  },
};
</script>
<style lang="less" scoped>
#equipment {
  background: rgba(242, 245, 247, 1);
  display: flex;
  flex: 1;
  overflow: hidden;
  color: #1f2429;
  .eq-top {
    // margin-left: 260px;
    width: 100%;
    padding-top: 24px;
    position: fixed;
    z-index: 3;
    display: flex;
    justify-content: center;
    .eq-system {
      padding: 12px 20px;
      background: #fff;
      font-size: 16px;
      cursor: pointer;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        margin-bottom: 3px;
      }
    }
    .isActive {
      color: #025baa;
      font-weight: bolder;
      background: linear-gradient(
        360deg,
        rgba(2, 91, 170, 0.1) 0%,
        rgba(2, 91, 170, 0) 100%
      );
    }
  }
  .eq-bottom {
    display: flex;
    flex: 1;
    .eq-left {
      position: fixed;
      z-index: 2;
      width: 260px;
      padding-top: 100px;
      color: #646c73;
      font-size: 14px;
      height: 100%;
      background: rgba(242, 245, 247, 1);
    }
    .li-style {
      margin-left: 28px;
      cursor: pointer;
      .circle {
        width: 6px;
        height: 6px;
        background: linear-gradient(
          180deg,
          rgba(54, 156, 247, 0.6) 0%,
          rgba(2, 91, 170, 0.6) 100%
        );
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
      }
      .hanzi {
        padding: 10px 0 10px 6px;
        width: 200px;
        display: inline-block;
        &:hover {
          color: rgba(2, 91, 170, 1);
          background: linear-gradient(
            270deg,
            rgba(199, 217, 234, 0) 0%,
            rgba(199, 217, 234, 1) 100%
          );
        }
      }
      .hanzi2 {
        padding: 10px 0 10px 6px;
        width: 200px;
        display: inline-block;
      }
    }

    .eq-right {
      flex: 1;
      .eq-right-bottom {
        display: flex;
        flex: 1;
        height: 100%;
        .title-box {
          position: fixed;
          z-index: 2;
          top: 156px;
          left: 260px;
          display: flex;
          img {
            margin-top: -5px;
          }
          .eq-title {
            width: 140px;
            height: 32px;
            background: linear-gradient(
              270deg,
              rgba(199, 217, 234, 0) 0%,
              rgba(199, 217, 234, 1) 100%
            );
            box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
            color: #025baa;
            font-size: 16px;
            &::before {
              width: 2px;
              height: 16px;
              background: rgba(2, 91, 170, 1);
              display: inline-block;
              content: "";
              margin-right: 10px;
              margin-top: 8px;
            }
            .span1 {
              position: absolute;
              top: 3px;
            }
          }
        }
        .eq-content {
          flex: 1;
          .legend-boxs {
            position: fixed;
            z-index: 9;
            right: 32px;
            top: 142px;
            /deep/ .el-badge__content.is-dot{
              width: 12px;
              height: 12px;
              background: #F54E45;
            }
          }
          .additional-box {
            position: relative;
            margin-top: 8px;
            .additional,
            .additional2 {
              width: 44px;
              height: 44px;
              border-radius: 2px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              img {
                width: 20px;
                height: 20px;
              }
            }
            .additional {
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
            }
            .additional2 {
              background: linear-gradient(
                180deg,
                rgba(54, 156, 247, 1) 0%,
                rgba(2, 91, 170, 1) 100%
              );
              box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
            }
            .add-img-container {
              /*width: 450px;*/
              max-height: 674px;
              overflow-y: auto;
              background: #ffffff;
              -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
              box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
              border-radius: 2px;
              border: 1px solid #e4e5e7;
              position: absolute;
              right: 48px;
              bottom: 0;
              padding: 24px 20px;
              &::-webkit-scrollbar {
                display: none;
              }
              .add-img {
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
                .btn-list {
                  display: flex;
                  width: 100%;
                  justify-content: center;
                }
                img {
                  width: 100%;
                  display: block;
                  margin: 0 auto;
                }
                .tooltip-msg {
                   position: relative;
                   z-index: 999;
                   width: 100%;
                  img {
                    width: 20px;
                    height: 20px;
                    float: right;
                    margin: 0 auto 12px;
                  }
                  .tool-tip {
                    position: absolute;
                    top: 20px;
                    border-radius: 4px;
                    padding: 0.8rem 1.6rem 1.6rem;
                    font-size: 1.4rem;
                    line-height: 2.2rem;
                    background: white;
                    border: 1px solid rgba(151, 151, 151, 0.2);
                    filter: drop-shadow(0 2px 4px rgba(31, 35, 41, 0.1));
                  }
                }
              }
            }

          }
        }
      }
    }
  }

   .add-data-box {
      display: flex;
     flex-direction: column;
     .add-data-table{
         flex: 1;
     }
     .add-data-editbtn{
       width: 65px;
      margin-left: auto;
       margin-top: 20px;
     }
   }
}
@media screen and (max-width: 1600px) {
  /*当屏幕尺寸小于1366px时，应用下面的CSS样式*/
  .eq-top {
    margin-left: 0 !important;
  }
  #equipment
    .eq-bottom
    .eq-right
    .eq-right-bottom
    .eq-content
    .additional-box
    .add-img-container {
    /*width: 360px;*/
    /*max-height: 480px;*/
  }
}
</style>
<style lang="less">
  .additional-box-tooltip{
    /deep/ .ant-tooltip-inner{
      background: linear-gradient(180deg, #369CF7 0%, #025BAA 100%)!important;
    }
    .ant-tooltip-arrow::before{
      background: #3398F2!important;
    }
  }
.el-table {
  th {
    background: rgba(248, 249, 250, 1);
    font-size: 12px;
    padding: 8px 0;
    color: #646a73;
  }
  td {
    font-size: 14px;
    color: #1f2429;
    padding: 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen and (max-width: 1600px) {
  .el-table td {
    padding: 4px 0;
  }
}
#result {
  width: 408px;
  position: relative;
  height: 408px;
  overflow-y: auto;
  overflow-x: auto;
  table {
    border-collapse: collapse;
    min-width: 100%;
  }
  th,
  td {
    border: solid 1px #6d6d6d;
    padding: 5px 10px;
    white-space:nowrap; 
  }
  .mt-sm {
    margin-top: 8px;
  }
}
@keyframes selectDownUpExtendTop {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.selectDownUpExtendTop-enter-active {
  animation: selectDownUpExtendTop 0.3s;
}
.selectDownUpExtendTop-leave-active {
  animation: selectDownUpExtendTop 0.3s reverse;
}
</style>
