<template>
  <div class="details">
    <a-breadcrumb class="nav_bread">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>专利</a-breadcrumb-item>
      <a-breadcrumb-item>专利详情</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="back_btn">返回</div>
    <div class="details_title">
      <div class="patent_num">{{ "CN109775565B" }}</div>
      <div class="patent_title">{{ "一种大直径单桩单钩水下翻桩方法" }}</div>
    </div>
    <div class="btn_group">
      <span><img src="@/static/patent/icon-dc.png" alt="" />导出</span>
      <span v-if="follow"
        ><img src="@/static/patent/icon-gz.png" alt="" />关注</span
      >
      <span v-else
        ><img src="@/static/patent/icon-gz-select.png" alt="" />关注</span
      >
    </div>
    <div class="patent_con">
      <div class="patent_con_left">
        <!-- 技术摘要 -->
        <!-- <div class="patent_con1" id="technicalSummary">
          <h2 class="title">技术摘要</h2>
          <p class="desc">
            本技术解决的问题：如果是单船起吊，则起重船上一定要具备主吊钩和副吊钩，且钩头方位、各个钩的起重能力需满足要求，否则就只有采用两条起重船才能实现翻身，因此要增加船舶设备的投入，施工成本高。
          </p>
        </div> -->
        <!-- 摘要 -->
        <div class="patent_con1" id="summary">
          <h2 class="title">摘要</h2>
          <p class="desc">
            本发明公开了一种大直径单桩单钩水下翻桩方法，采用一艘具有一个主钩的起重船并包括以下步骤：先根据单桩起吊后平衡状态时与水平面的夹角为α计算主钩至主吊耳之间的距离以及主钩至单桩底部的距离，然后根据α确定主吊钢丝绳的直径和辅吊钢丝绳的直径；将两根主吊钢丝绳的上端均挂在主钩上，下端各自挂在单桩的两个主吊耳上，再将辅吊钢丝绳的上端挂在主钩上，下端通过U形扣钳制在单桩的底部；主钩起吊单桩，使单桩落入水中，并下放至单桩的底部桩尖触到海底泥面；继续下放起重船的主钩使辅吊钢丝绳逐渐呈松弛状态，将辅吊钢丝绳与主钩脱钩，同时U形扣自动脱离单桩的底部，然后起升主钩将单桩竖立。本发明的翻桩方法可有效降低船舶设备的投入。
          </p>
        </div>
        <!-- 技术领域 -->
        <div class="patent_con1" id="techAera">
          <h2 class="title">技术领域</h2>
          <EchartsCloud :id="'tech'" :dataArr="techArr"></EchartsCloud>
        </div>
        <!-- 应用领域 -->
        <!-- <div class="patent_con1" id="appArea">
          <h2 class="title">应用领域</h2>
          <EchartsCloud
            :id="'applicationArea'"
            :dataArr="techArr"
          ></EchartsCloud>
        </div> -->
        <!-- 主要录项 -->
        <div class="patent_con1" id="mainentries">
          <h2 class="title">主著录项</h2>
          <a-descriptions
            bordered
            :column="2"
            :labelStyle="{ background: '#F2F9FC' }"
          >
            <a-descriptions-item label="申请号"
              >Cloud Database</a-descriptions-item
            >
            <a-descriptions-item label="优先权号">Prepaid</a-descriptions-item>
            <a-descriptions-item label="申请日">YES</a-descriptions-item>
            <a-descriptions-item label="优先权日"
              >2018-04-24 18:00:00</a-descriptions-item
            >
            <a-descriptions-item label="公开号">$80.00</a-descriptions-item>
            <a-descriptions-item label="授权日">授权日</a-descriptions-item>
            <a-descriptions-item label="公开日">授权日</a-descriptions-item>
            <a-descriptions-item label="失效日">授权日</a-descriptions-item>
            <a-descriptions-item label="专利类型">授权日</a-descriptions-item>
            <a-descriptions-item label="专利维持期">授权日</a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 相关人 -->
        <div class="patent_con1" id="relatedper">
          <h2 class="title">相关人</h2>
          <a-descriptions
            bordered
            :column="2"
            :labelStyle="{ background: '#F2F9FC' }"
          >
            <a-descriptions-item label="申请人(原始)"
              >Cloud Database</a-descriptions-item
            >
            <a-descriptions-item label="专利权人(当前)"
              >中交第三航务工程局有限公司；<br />
              中交三航(厦门)工程有限公司；<br />
              中交第三航务工程局有限公司厦门分公司</a-descriptions-item
            >
            <a-descriptions-item label="申请人"
              >中交第三航务工程局有限公司； 中交三航(厦门)工程有限公司；
              中交第三航务工程局有限公司厦门分公司</a-descriptions-item
            >
            <a-descriptions-item label="专利权人"
              >中交第三航务工程局有限公司； 中交三航(厦门)工程有限公司；
              中交第三航务工程局有限公司厦门分公司</a-descriptions-item
            >
            <a-descriptions-item label="申请人(工商)"
              >$80.00</a-descriptions-item
            >
            <a-descriptions-item label="专利权人(机构树)"
              >授权日</a-descriptions-item
            >
            <a-descriptions-item label="申请人(机构树)"
              >授权日</a-descriptions-item
            >
            <a-descriptions-item label="代理人">授权日</a-descriptions-item>
            <a-descriptions-item label="发明人">授权日</a-descriptions-item>
            <a-descriptions-item label="代理机构">授权日</a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 地址 -->
        <div class="patent_con1" id="address">
          <h2 class="title">地址</h2>
          <a-descriptions
            bordered
            :column="2"
            :labelStyle="{ background: '#F2F9FC' }"
          >
            <a-descriptions-item label="申请人国">授权日</a-descriptions-item>
            <a-descriptions-item label="公开国">授权日</a-descriptions-item>
            <a-descriptions-item label="申请人地址">授权日</a-descriptions-item>
            <a-descriptions-item label="专利权人地址"
              >授权日</a-descriptions-item
            >
          </a-descriptions>
        </div>
        <!-- 统计信息 -->
        <div class="patent_con1" id="statistic">
          <h2 class="title">统计信息</h2>
          <a-descriptions
            bordered
            :column="2"
            :labelStyle="{ background: '#F2F9FC' }"
          >
            <a-descriptions-item label="引用数量">授权日</a-descriptions-item>
            <a-descriptions-item label="权利要求数">授权日</a-descriptions-item>
            <a-descriptions-item label="被引用数量">授权日</a-descriptions-item>
            <a-descriptions-item label="同族数量">授权日</a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 分类号 -->
        <div class="patent_con1" id="catenum">
          <h2 class="title">分类号</h2>
          <a-descriptions
            bordered
            :column="2"
            :labelStyle="{ background: '#F2F9FC' }"
          >
            <a-descriptions-item label="IPC分类号">授权日</a-descriptions-item>
            <a-descriptions-item label="战略新兴产业分类号"
              >授权日</a-descriptions-item
            >
            <a-descriptions-item label="国民经济分类号"
              >授权日</a-descriptions-item
            >
            <a-descriptions-item label="双十产业集群分类号"
              >授权日</a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div>
      <div class="patent_con_anchor">
        <a-anchor>
          <!-- <a-anchor-link href="#technicalSummary" title="AI技术摘要" /> -->
          <a-anchor-link href="#summary" title="摘要" />
          <a-anchor-link href="#techAera" title="技术领域" />
          <!-- <a-anchor-link href="#appAera" title="应用领域" /> -->
          <a-anchor-link href="#mainentries" title="主著录项" />
          <a-anchor-link href="#relatedper" title="相关人" />
          <a-anchor-link href="#address" title="地址" />
          <a-anchor-link href="#statistic" title="统计信息" />
          <a-anchor-link href="#catenum" title="分类号" />
        </a-anchor>

        <div id="components-back-top-demo-custom">
          <a-back-top>
            <div class="ant-back-top-inner">回到顶部</div>
          </a-back-top>
          <div class="back">回到顶部</div>
        </div>
      </div>
      <div class="patent_con_right">
        <div class="patent_con1">
          <h2 class="title">智能推荐</h2>
          <a-select
            v-model:value="value"
            show-search
            placeholder="请按照企业类型筛选"
            style="width: 200px"
          >
            <a-select-option value="1">企业1</a-select-option>
            <a-select-option value="2">企业2</a-select-option>
            <a-select-option value="3">企业3</a-select-option>
          </a-select>
          <div class="result">
            推荐
            <span style="color: #4079ff; font-weight: bold">{{ count }}</span
            >条相关结果
          </div>
          <div class="card" v-for="item in list" :key="item">
            <div class="card_title">{{ item.name }}</div>
            <a-tag color="#56CA95">{{ item.status }}</a-tag>
            <a-tag color="#6096E6">{{ item.type }}</a-tag>
            <a-divider />
            <div class="card_desc">
              <a-descriptions layout="vertical">
                <a-descriptions-item label="法定代表人">{{
                  item.legalRepresentative
                }}</a-descriptions-item>
                <a-descriptions-item label="注册时间">{{
                  item.registrationTime
                }}</a-descriptions-item>
                <a-descriptions-item label="注册资本">{{
                  item.money
                }}</a-descriptions-item>
                <a-descriptions-item label="国民经济行业">
                  {{ item.industry }}
                </a-descriptions-item>
                <a-descriptions-item :span="2" label="注册地址">{{
                  item.address
                }}</a-descriptions-item>
                <a-descriptions-item :span="3" label="专利信息">{{
                  item.info
                }}</a-descriptions-item>
                <a-descriptions-item :span="2" label="经营范围">{{
                  item.range
                }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { DownOutlined } from "@ant-design/icons-vue";
import EchartsCloud from "../../components/EchartsCloud.vue";
export default {
  name: "patentDetails",
  data() {
    return {
      value: undefined,
      count: 161,
      follow: true,
      techArr: [
        {
          name: "支架搬运车",
          value: 30,
        },
        {
          name: "人工智能领域",
          value: 80,
        },
        {
          name: "广泛应用",
          value: 70,
        },
        {
          name: "驾驶室",
          value: 301,
        },
      ],
      list: [
        {
          name: "山西科达自控股份有限公司",
          status: "存续（在营、开业、在册）",
          type: "高新技术企业",
          legalRepresentative: "郭晓明",
          registrationTime: "2023-6-1",
          money: "222941.42万人民币",
          industry: "批发和零售业>批发业",
          address: "北京市海淀区西二旗产业园百度大厦28号",
          info: "一种基于人工智能的雷达视频数据融合方法",
          range:
            "提供智能化科技服务，智能仓储，装直径单桩人工智能单钩硬件销售；机械设备研发",
        },
        {
          name: "山西科达自控股份有限公司",
          status: "存续（在营、开业、在册）",
          type: "高新技术企业",
          legalRepresentative: "郭晓明",
          registrationTime: "2023-6-1",
          money: "222941.42万人民币",
          industry: "批发和零售业>批发业",
          address: "北京市海淀区西二旗产业园百度大厦28号",
          info: "一种基于人工智能的雷达视频数据融合方法",
          range:
            "提供智能化科技服务，智能仓储，装直径单桩人工智能单钩硬件销售；机械设备研发",
        },
      ],
    };
  },
  components: {
    EchartsCloud,
    DownOutlined,
  },
  methods: {
    getCurrentAnchor() {
      return "#technicalSummary";
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.details {
  padding: 0 30px;
  width: calc(100%);
  background-color: #ebebeb;
  position: relative;

  .back_btn {
    width: 76px;
    height: 32px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    color: #3e7bfa;
    text-align: center;
    line-height: 32px;
    position: absolute;
    right: 80px;
    top: 10px;
  }
  .nav_bread {
    height: 50px;
    padding: 20px 3px;
    background-color: #ebebeb;
  }
  .details_title {
    background-color: #0062c4;
    width: 100%;
    height: 176px;
    .patent_num {
      font-size: 25px;
      padding: 20px 0 15px 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #c7d8ec;
    }
    .patent_title {
      font-size: 25px;
      padding: 0 0 20px 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #fff;
    }
  }
  .btn_group {
    position: absolute;
    top: 80px;
    right: 60px;
    span {
      display: inline-block;
      width: 100px;
      height: 32px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      color: #fff;
      line-height: 32px;
      text-align: center;
      margin-right: 15px;

      img {
        width: 17px;
        vertical-align: text-bottom;
        margin-right: 5px;
      }
    }
  }
  .patent_con {
    clear: both;
    display: flex;
    position: relative;
    justify-content: space-evenly;
    background-color: #f3f3f6;
    .patent_con_left {
      .patent_con1 {
        width: 949px;
        // height: 175px;
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        padding: 40px 30px;
        margin: 15px 0;
        .title {
          color: #1c1c28;
          font-size: 18px;
          font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
          font-weight: bold;

          line-height: 28px;
        }
        .desc {
          font-size: 12px;
          font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
          font-weight: 400;
          color: #1c1c28;
          line-height: 28px;
        }
      }
    }
    .patent_con_anchor {
      margin-top: 15px;
      width: 150px;
      height: 500px;
      font-weight: bold;
      color: #666666;
      // background-color: #fff;
      :deep(.ant-anchor-link-title) {
        color: #666666;
      }
      :deep(.ant-anchor-link-active > .ant-anchor-link-title) {
        color: #1890ff;
      }

      :deep(.ant-anchor-wrapper) {
        background-color: #fff;
        padding-left: 10px;
        color: #666666;
      }
      #components-back-top-demo-custom .ant-back-top {
        bottom: 55%;
        left: 57%;
      }
      #components-back-top-demo-custom .ant-back-top-inner {
        margin-top: 20px;
        width: 150px;
        height: 60px;
        background-color: #fff;
        text-align: center;
        line-height: 60px;
      }
    }
    .back {
      display: none;
      margin-top: 20px;
      width: 150px;
      height: 60px;
      background-color: #fff;
      text-align: center;
      line-height: 60px;
    }

    .patent_con_right {
      margin-top: 15px;
      width: 610px;
      height: 600px;
      background-color: #fff;
      .patent_con1 {
        // width: 949px;
        // height: 175px;
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        padding: 20px 20px;
        margin: 15px 0;
        .title {
          color: #1c1c28;
          font-size: 18px;
          font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
          font-weight: bold;

          line-height: 28px;
        }
        .result {
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
        }
        .card {
          background: #f6f7fb;
          border-radius: 10px 10px 10px 10px;
          opacity: 0.8;
          padding: 24px;
          margin-bottom: 15px;
          :deep(.ant-tag-has-color) {
            padding: 5px;
            border-radius: 6px;
          }
          .card_title {
            font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
            font-weight: 400;
            color: #333333;
            font-size: 20px;
          }
          .card_desc {
            :deep(.ant-descriptions-item-label) {
              color: #999999;
              font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
              font-weight: 400;
            }
            :deep(.ant-descriptions-item-content) {
              font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
              font-weight: bold;
              color: #1c1c28;
            }
            :deep(.ant-descriptions-row > th) {
              padding-bottom: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
