<template>
  <div>
    <div class="box"></div>
    <el-popover placement="bottom" width="524" trigger="hover">
      <p class="p-1">用于实现专利培育与专利布局的相关解决方案，主要基于产品/技术、市场、行业等多维关联因素制定专利挖掘、专利申请及专利保护的综合策略方案，以协助企业在市场竞争中取得最大化的商业利益，处于商战优势地位。</p>
      <p class="p-1">在技术研发之初和研发过程中，高度重视运用文献信息特别是专利信息，从而找准研发的重点、起点和研发方向，避免低水平研究或者是重复研究。</p>
      <p class="p-1">在专利申请阶段通过专利挖掘制定合理的专利布局、合理的构建专利组合或者专利池，对某一技术或者产品相关的技术方案进行详细的、全方位的、系统性的并且强有力的保护，打造最强的保护范围，提升专利组合的整体稳定性；其次，对产业链的上下游进行合理的专利布局，提升在该行业的商业价值；再次，根据商业需求进行合理的地域布局，拓展专利的保护空间，增加其商业价值。</p>
      <div class="t-4 b-0 c-1 c-p" slot="reference"><span class="no-star" v-if="!questionName && $permission('/workspace/event')"></span><span>专利培育布局<span v-if="questionName" class="q-1">({{ questionName }})</span></span>
        <el-popover placement="right" width="524" trigger="click" v-if="!questionName && $permission('/workspace/event')">
          <Question v-on="$listeners" :type="getQuestionId('专利培育布局')"></Question>
          <div class="o1 n-1" slot="reference">
            <el-tooltip class="item" effect="dark" content="相关事件数量" placement="top">
              <span>{{ getQuestionTotal('专利培育布局') }}</span>
            </el-tooltip>
            </div>
        </el-popover>
      </div>
    </el-popover>
    <div class="c-3"></div>
    <div class="d-1 c-4"></div>
    <div class="c-5"></div>
    <div class="c-7"></div>
    <div class="d-1 c-8"></div>
    <div class="c-9"></div>
    <div class="d-1 c-10"></div>
    <div class="t-2 b-1 c-11">了解目标国家/地区对该技术相关产业发展态度、机遇及风险</div>
    <div class="t-2 b-1 c-12">了解该技术的产业发展概况、产品情况、企业合作情况</div>
    <div class="t-2 b-1 c-13">了解专利技术的现有发展情况</div>
    <popover type="10" width="370">
      <div class="t-1 b-2 c-14 c-p" @click="handleClick('政策与市场环境分析')">
        <span class="no-star"></span>
        <span>政策与市场环境分析</span>
        <span class="o n-1">{{ getTotal('政策与市场环境分析') }}</span>
      </div>
    </popover>
    <popover type="9" width="410">
      <div class="t-1 b-2 c-15 c-p" @click="handleClick('产业/行业调查')">
        <span class="no-star"></span>
        <span>产业/行业调查</span>
        <span class="o n-1">{{ getTotal('产业/行业调查') }}</span>
      </div>
    </popover>
    <div class="t-1 b-2 c-16 c-p" @click="handleClick('产业/行业专利调查')">
      <span class="no-star"></span>
      <span>产业/行业专利调查</span>
      <span class="o n-1">{{ getTotal('产业/行业专利调查') }}</span>
    </div>
    <div class="c-17"></div>
    <div class="c-18"></div>
    <div class="c-20"></div>
    <div class="c-21"></div>
    <div class="d-2 c-22"></div>
    <div class="d-2 c-23"></div>
    <div class="t-2 b-3 c-24">了解重点关注企业/潜在竞争企业的专利布局</div>
    <div class="t-2 b-3 c-25">了解重点关注技术方向的专利布局情况</div>
    <popover type="1" width="320">
      <div class="t-1 b-4 c-26 c-p" @click="handleClick('公司调查')">
        <span class="star"></span>
        <span>公司调查</span>
        <div class="o n-2">{{ getTotal('公司调查') }}</div>
      </div>
    </popover>
    <popover type="3" width="320">
      <div class="t-1 b-4 c-27 c-p" @click="handleClick('重点技术专利调查')">
        <span class="star"></span>
        <span>重点技术专利调查</span>
        <span class="o n-2">{{ getTotal('重点技术专利调查') }}</span>
      </div>
    </popover>
    <div class="t-2 b-3 c-28">做专利挖掘，找可布局专利的技术方向</div>
    <div class="c-29"></div>
    <div class="c-30"></div>
    <popover type="12" width="320">
      <div class="t-1 b-4 c-33 c-p" @click="handleClick('专利挖掘/技术交底')">
        <span class="star"></span>
        <span>专利挖掘<br>技术交底书</span>
        <span class="o n-2">{{ getTotal('专利挖掘') }}</span>
      </div>
    </popover>
    <div class="t-2 b-1 c-34">定期了解关注企业/技术的发展情况</div>
    <div class="t-1 b-2 c-35 c-p" @click="handleClick('定期专利监控公报')">
      <span class="no-star"></span>
      <span>定期专利监控公报</span>
      <div class="o n-1">{{ getTotal('定期专利监控公报') }}</div>
    </div>
    <div class="t-1 b-4 c-801 c-p" @click="handleClick('专利布局/专利申请')">
      <span class="star"></span>
      <span>专利布局/专利申请</span>
      <span class="o n-2">{{ getTotal('专利布局/专利申请') }}</span>
    </div>
    <div class="t-2 b-3 c-36">对技术方向做出新颖性判别</div>
    <div class="t-1 b-4 c-37 c-p" @click="handleClick('技术查新')">
      <span class="star"></span>
      <span>技术查新</span>
      <span class="o n-2">{{ getTotal('技术查新') }}</span>
    </div>
    <div class="c-38"></div>
    <div class="d-4 c-39"></div>
    <div class="t-1 b-2 c-40 c-p" @click="handleClick('布局优化策略')">
      <span class="star"></span>
      <span>布局优化策略</span>
      <span class="o n-1">{{ getTotal('布局优化策略') }}</span>
    </div>
    <div class="d-2 c-888"></div>
    <div class="d-2 c-889"></div>
    <div class="c-900"></div>
    <div class="c-901"></div>
    <div class="c-902"></div>
    <div class="c-903"></div>
    <div class="d-2 c-904"></div>
    <div class="d-2 c-905"></div>
    <div class="c-906"></div>
    <div class="c-907"></div>
    <div class="c-908"></div>
    <div class="c-909"></div>
    <div class="d-2 c-910"></div>
    <div class="c-911"></div>
    <div class="d-9 c-912"></div>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
  mixins: [mixins]
}
</script>

<style lang="scss" scoped>
.c-1 {
  padding:0 10px;
  left: 699px;
  top: 75px;
  min-width: 524px;
  height: 100px;
}

.c-2 {
  left: 840px;
  top: 165px;
  width: 524px;
  height: 66px;
}

.c-3 {
  width: 2px;
  height: 85px;
  background: #3084e5;
  left: 960px;
  z-index: 1;
  top: 170px;
}

.c-4 {
  left: 951px;
  top: 250px;
}

.c-5 {
  z-index: 1;
  height: 2px;
  width: 862px;
  background: #3084e5;
  left: 530px;
  top: 200px;
}

.c-7 {
  z-index: 1;
  top: 200px;
  left: 530px;
  width: 2px;
  height: 60px;
  background: #3084e5;
}

.c-8 {
  top: 250px;
  left: 521px;
}

.c-9 {
  z-index: 1;
  width: 2px;
  height: 60px;
  background: #3084e5;
  top: 200px;
  left: 1390px;
}

.c-10 {
  left: 1381px;
  top: 250px;
}

.c-11 {
  width: 250px;
  height: 70px;
  left: 540px;
  top: 195px;
}

.c-12 {
  top: 195px;
  left: 1400px;
  width: 250px;
  height: 70px;
}

.c-13 {
  top: 195px;
  left: 970px;
  width: 250px;
  height: 70px;
}

.c-14 {
  width: 320px;
  height: 80px;
  top: 265px;
  left: 370px;
}

.c-15 {
  width: 320px;
  height: 80px;
  top: 265px;
  left: 1230px;
}

.c-16 {
  width: 320px;
  height: 80px;
  left: 800px;
  top: 265px;
}

.c-17 {
  width: 2px;
  height: 65px;
  background: #d45a6a;
  z-index: 1;
  top: 340px;
  left: 960px;
}

.c-18 {
  height: 2px;
  width: 400px;
  background: #d45a6a;
  z-index: 1;
  top: 405px;
  left: 760px;
}

.c-20 {
  width: 2px;
  height: 30px;
  background: #d45a6a;
  z-index: 1;
  top: 405px;
  left: 760px;
}

.c-21 {
  width: 2px;
  height: 30px;
  background: #d45a6a;
  z-index: 1;
  left: 1160px;
  top: 405px;
}

.c-22 {
  left: 751px;
  top: 430px;
}

.c-23 {
  top: 430px;
  left: 1151px;
}

.c-24 {
  width: 190px;
  height: 70px;
  top: 340px;
  left: 760px;
}

.c-25 {
  width: 170px;
  height: 70px;
  top: 340px;
  left: 980px;
}

.c-26 {
  width: 320px;
  height: 80px;
  top: 445px;
  left: 600px;
}

.c-27 {
  width: 320px;
  height: 80px;
  top: 445px;
  left: 1000px;
}

.c-28 {
  width: 170px;
  height: 70px;
  top: 570px;
  left: 785px;
}

.c-29 {
  height: 2px;
  width: 400px;
  background: #d45a6a;
  z-index: 1;
  top: 600px;
  left: 960px;
}

.c-30 {
  width: 2px;
  height: 35px;
  background: #d45a6a;
  z-index: 1;
  top: 600px;
  left: 1360px;
}

.c-31 {
  height: 2px;
  width: 234px;
  background: #3084e5;
  z-index: 1;
  top: 964px;
  left: 1128px;
}

.c-33 {
  width: 320px;
  height: 80px;
  top: 645px;
  left: 800px;
}

.c-34 {
  width: 280px;
  height: 70px;
  top: 545px;
  left: 980px;
}

.c-35 {
  width: 320px;
  height: 80px;
  top: 645px;
  left: 1200px;
}

.c-801 {
  width: 320px;
  height: 80px;
  top: 795px;
  left: 1200px;
}

.c-36 {
  width: 120px;
  height: 70px;
  top: 720px;
  left: 840px;
}

.c-37 {
  width: 320px;
  height: 80px;
  top: 795px;
  left: 800px;
}

.c-38 {
  height: 2px;
  width: 260px;
  background: #d45a6a;
  z-index: 1;
  top: 975px;
  left: 1100px;
}

.c-39 {
  top: 877px;
  left: 1351px;
}

.c-40 {
  width: 320px;
  height: 80px;
  top: 935px;
  left: 800px;
}

.c-888 {
  top: 630px;
  left: 1351px;
}
.c-889 {
  top: 780px;
  left: 1351px;
}
.c-900 {
  width: 2px;
  height: 35px;
  background: #d45a6a;
  top: 520px;
  left: 760px;
}
.c-901 {
  width: 2px;
  height: 35px;
  background: #d45a6a;
  top: 520px;
  left: 1160px;
}
.c-902 {
  height: 2px;
  width: 402px;
  background: #d45a6a;
  top: 555px;
  left: 760px;
}
.c-903 {
  width: 2px;
  height: 80px;
  background: #d45a6a;
  top: 555px;
  left: 960px;
}
.c-904 {
  top: 630px;
  left: 951px;
}
.c-905 {
  top: 780px;
  left: 951px;
}
.c-906 {
  width: 2px;
  height: 65px;
  background: #d45a6a;
  top: 720px;
  left: 960px;
}
.c-907 {
  width: 2px;
  height: 65px;
  background: #d45a6a;
  top: 720px;
  left: 1360px;
}
.c-908 {
  width: 2px;
  height: 97px;
  background: #d45a6a;
  top: 880px;
  left: 1360px;
}
.c-909 {
  width: 2px;
  height: 65px;
  background: #d45a6a;
  top: 860px;
  left: 960px;
}
.c-910 {
  top: 920px;
  left: 951px;
}
.c-911 {
  height: 2px;
  width: 70px;
  background: #d45a6a;
  z-index: 1;
  top: 485px;
  left: 920px;
}
.c-912 {
  top: 476px;
  left: 985px;
}
</style>