Skip to content

T
ty_patentSys
Commit 2a3ab40a by liudx
Options

联调筛选专利接口

parent 88fd0d86
Showing with 1182 additions and 199 deletions
src/App.vue
......@@ -18,7 +18,8 @@
background-color: #F2F3F5;
}
html,body,#app{
height: 100%;
// height: 100%;
// height:920px;
}
::-webkit-scrollbar
{
......
src/components/HeaderCon.vue
......@@ -4,6 +4,26 @@
<img src="../static/login/logo-tylgd.png" alt="" />
<span>专利成果转化智能推荐系统</span>
</div>
<!-- <div
class="header_con"
v-if="$store.state.current == '企业' || $store.state.current == '专利'"
>
<a-input v-model:value="keyword" :bordered="false">
<template #addonBefore>
<a-select v-model:value="type" class="type">
<a-select-option value="企业">查企业</a-select-option>
<a-select-option value="专利">查专利</a-select-option>
</a-select>
</template>
<template #addonAfter>
<img
style="padding-right: 5px"
src="@/static/home/index/icon-search.png"
alt=""
/>搜索
</template>
</a-input>
</div> -->
<div class="header_right">
<!-- <img src="" alt=""> -->
<span class="portrait"></span>
......@@ -45,18 +65,22 @@
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "HeaderCon",
props: {
props: {},
created() {
this.username = this.$store.state.username;
},
created(){
this.username = this.$store.state.username
computed: {
...mapState(["username"]),
},
data() {
return {
hover_num: 0,
username:''
username: "",
type: "专利",
keyword: "",
};
},
methods: {
......@@ -74,12 +98,11 @@ export default {
window.open(routeUrl.href, "_blank");
},
exit() {
this.$router.push({
path: "/login",
});
localStorage.removeItem('login_name');
localStorage.removeItem('password')
localStorage.removeItem("login_name");
localStorage.removeItem("password");
},
},
};
......@@ -99,6 +122,43 @@ export default {
padding: 0 15px;
}
}
.header_con {
// padding: 0 10px 30px;
width: 700px;
height: 50px;
margin: 10px;
// padding: 10px;
border: 2px solid #4079ff;
border-radius: 8px;
.type {
width: 90px;
height: 40px;
// margin-top: 10px;
// line-height: 50px;
padding: 0px 0;
background-color: #fff;
border-color: transparent;
}
:deep(.ant-input-group .ant-input) {
// height: 54px;
font-size: 18px;
}
:deep(.ant-input) {
border-color: transparent;
padding-top: 10px;
}
:deep(.ant-input-group-addon:first-child) {
border-color: transparent;
padding-top: 5px;
}
:deep(.ant-input-group-addon:last-child) {
height: 48px;
width: 120px;
background-color: #4079ff !important;
color: #fff;
font-size: 18px;
}
}
.header_right {
padding: 0 50px 30px;
// display: inline-block;
......
src/store/index.js
......@@ -4,7 +4,8 @@ export default createStore({
state: {
username:'',
token:'',
current:'首页'
current:'首页',
},
mutations: {
setTOKEN(state,payload){
......@@ -18,6 +19,10 @@ export default createStore({
// console.log(state,payload)
this.state.current = payload
},
setkeyword(state,payload){
console.log(state,payload)
this.state.keyword = payload
},
},
actions: {
},
......
src/utils/indexApi.js
import { get, post,put } from './request'
export const patents = p => get('/api/patent/patents?keyword='+p.keyword+'&page='+p.page+'&size='+p.size);
export const patentselect = p => post('/api/patent/patents',p);
export const patentDetail = p => get('/api/patent/patentDetail/'+p.id);
src/utils/map.js 0 → 100644
const arealist = [
{
label: '太原市',
value: '太原市',
children: [{
label: "小店区",
value: "小店区"
}, {
label: "迎泽区",
value: "迎泽区"
}, {
label: "杏花岭区",
value: "杏花岭区"
}, {
label: "尖草坪区",
value: "尖草坪区"
}, {
label: "万柏林区",
value: "万柏林区"
}, {
label: "晋源区",
value: "晋源区"
}, {
label: "清徐县",
value: "清徐县"
}, {
label: "阳曲县",
value: "阳曲县"
}, {
label: "娄烦县",
value: "娄烦县"
}, {
label: "古交市",
value: "古交市"
}]
},
{
label: "大同市",
value: "大同市",
children: [{
label: "新荣区",
value: "新荣区"
}, {
label: "平城区",
value: "平城区"
}, {
label: "云冈区",
value: "云冈区"
}, {
label: "云州区",
value: "云州区"
}, {
label: "阳高县",
value: "阳高县"
}, {
label: "天镇县",
value: "天镇县"
}, {
label: "广灵县",
value: "广灵县"
}, {
label: "灵丘县",
value: "灵丘县"
}, {
label: "浑源县",
value: "浑源县"
}, {
label: "左云县",
value: "左云县"
}]
},
{
label: "阳泉市",
value: "阳泉市",
children: [{
label: "城区",
value: "城区"
}, {
label: "矿区",
value: "矿区"
}, {
label: "郊区",
value: "郊区"
}, {
label: "平定县",
value: "平定县"
}, {
label: "盂县",
value: "盂县"
}]
},
{
label: "长治市",
value: "长治市",
children: [{
label: "潞州区",
value: "潞州区"
}, {
label: "上党区",
value: "上党区"
}, {
label: "屯留区",
value: "屯留区"
}, {
label: "潞城区",
value: "潞城区"
}, {
label: "襄垣县",
value: "襄垣县"
}, {
label: "平顺县",
value: "平顺县"
}, {
label: "黎城县",
value: "黎城县"
}, {
label: "壶关县",
value: "壶关县"
}, {
label: "长子县",
value: "长子县"
}, {
label: "武乡县",
value: "武乡县"
}, {
label: "沁县",
value: "沁县"
}, {
label: "沁源县",
value: "沁源县"
}]
},
{
label: "晋城市",
value: "晋城市",
children: [{
label: "城区",
value: "城区"
}, {
label: "沁水县",
value: "沁水县"
}, {
label: "阳城县",
value: "阳城县"
}, {
label: "陵川县",
value: "陵川县"
}, {
label: "泽州县",
value: "泽州县"
}, {
label: "高平市",
value: "高平市"
}]
},
{
label: "朔州市",
value: "朔州市",
children: [{
label: "朔城区",
value: "朔城区"
}, {
label: "平鲁区",
value: "平鲁区"
}, {
label: "山阴县",
value: "山阴县"
}, {
label: "应县",
value: "应县"
}, {
label: "右玉县",
value: "右玉县"
}, {
label: "怀仁市",
value: "怀仁市"
}]
},
{
label: "晋中市",
value: "晋中市",
children: [{
label: "榆次区",
value: "榆次区"
}, {
label: "太谷区",
value: "太谷区"
}, {
label: "榆社县",
value: "榆社县"
}, {
label: "左权县",
value: "左权县"
}, {
label: "和顺县",
value: "和顺县"
}, {
label: "昔阳县",
value: "昔阳县"
}, {
label: "寿阳县",
value: "寿阳县"
}, {
label: "祁县",
value: "祁县"
}, {
label: "平遥县",
value: "平遥县"
}, {
label: "灵石县",
value: "灵石县"
}, {
label: "介休市",
value: "介休市"
}]
},
{
label: "运城市",
value: "运城市",
children: [{
label: "盐湖区",
value: "盐湖区"
}, {
label: "临猗县",
value: "临猗县"
}, {
label: "万荣县",
value: "万荣县"
}, {
label: "闻喜县",
value: "闻喜县"
}, {
label: "稷山县",
value: "稷山县"
}, {
label: "新绛县",
value: "新绛县"
}, {
label: "140826",
value: "绛县"
}, {
label: "垣曲县",
value: "垣曲县"
}, {
label: "夏县",
value: "夏县"
}, {
label: "平陆县",
value: "平陆县"
}, {
label: "芮城县",
value: "芮城县"
}, {
label: "永济市",
value: "永济市"
}, {
label: "河津市",
value: "河津市"
}]
},
{
label: "忻州市",
value: "忻州市",
children: [{
label: "忻府区",
value: "忻府区"
}, {
label: "定襄县",
value: "定襄县"
}, {
label: "五台县",
value: "五台县"
}, {
label: "代县",
value: "代县"
}, {
label: "繁峙县",
value: "繁峙县"
}, {
label: "宁武县",
value: "宁武县"
}, {
label: "静乐县",
value: "静乐县"
}, {
label: "神池县",
value: "神池县"
}, {
label: "五寨县",
value: "五寨县"
}, {
label: "岢岚县",
value: "岢岚县"
}, {
label: "河曲县",
value: "河曲县"
}, {
label: "保德县",
value: "保德县"
}, {
label: "偏关县",
value: "偏关县"
}, {
label: "原平市",
value: "原平市"
}]
},
{
label: "临汾市",
value: "临汾市",
children: [{
label: "尧都区",
value: "尧都区"
}, {
label: "曲沃县",
value: "曲沃县"
}, {
label: "翼城县",
value: "翼城县"
}, {
label: "襄汾县",
value: "襄汾县"
}, {
label: "洪洞县",
value: "洪洞县"
}, {
label: "古县",
value: "古县"
}, {
label: "安泽县",
value: "安泽县"
}, {
label: "浮山县",
value: "浮山县"
}, {
label: "吉县",
value: "吉县"
}, {
label: "乡宁县",
value: "乡宁县"
}, {
label: "大宁县",
value: "大宁县"
}, {
label: "隰县",
value: "隰县"
}, {
label: "永和县",
value: "永和县"
}, {
label: "蒲县",
value: "蒲县"
}, {
label: "汾西县",
value: "汾西县"
}, {
label: "侯马市",
value: "侯马市"
}, {
label: "霍州市",
value: "霍州市"
}]
},
{
label: "吕梁市",
value: "吕梁市",
children: [{
label: "离石区",
value: "离石区"
}, {
label: "文水县",
value: "文水县"
}, {
label: "交城县",
value: "交城县"
}, {
label: "兴县",
value: "兴县"
}, {
label: "141124",
value: "临县"
}, {
label: "141125",
value: "柳林县"
}, {
label: "141126",
value: "石楼县"
}, {
label: "141127",
value: "岚县"
}, {
label: "141128",
value: "方山县"
}, {
label: "141129",
value: "中阳县"
}, {
label: "141130",
value: "交口县"
}, {
label: "141181",
value: "孝义市"
}, {
label: "141182",
value: "汾阳市"
}]
}
]
export default arealist
\ No newline at end of file
src/views/company/companyDetails.vue
......@@ -28,7 +28,7 @@
><img src="@/static/patent/icon-gz-select.png" alt="" />关注</span
>
</div>
<a-tabs v-model:activeKey="activeKey" style="background: #fff">
<a-tabs v-model:activeKey="activeKey" style="background: #fff;">
<a-tab-pane key="企业概况" tab="企业概况">
<companyProfile></companyProfile>
</a-tab-pane>
......@@ -205,6 +205,9 @@ export default {
}
}
}
:deep(.ant-tabs > .ant-tabs-nav){
padding-left: 30px;
}
}
</style>
src/views/company/companyProfile.vue
......@@ -115,9 +115,12 @@
<div id="components-back-top-demo-custom">
<a-back-top>
<div class="ant-back-top-inner">回到顶部</div>
<div class="ant-back-top-inner">
<img src="@/static/common/icon-top.png" alt="">
回到顶部
</div>
</a-back-top>
<div class="back">回到顶部</div>
<!-- <div class="back">回到顶部</div> -->
</div>
</div>
</div>
......@@ -412,28 +415,33 @@ export default {
}
.company_con_anchor {
margin-top: 15px;
// width: 150px;
// height: 350px;
font-weight: bold;
color: #666666;
color: #1C1C28;
:deep(.ant-anchor-link-title) {
color: #666666;
color: #1C1C28;
margin-bottom: 15px;
}
:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff;
}
:deep(.ant-anchor-ink::before){
width: 8px;
background-color: #F5F5F5;
}
:deep(.ant-anchor-wrapper) {
background-color: #fff;
padding-left: 10px;
color: #666666;
color: #1C1C28;
height: 350px;
margin-left: 10px;
padding: 30px 15px 0;
}
#components-back-top-demo-custom .ant-back-top {
bottom: 55%;
right: 20%;
// bottom: 50%;
// right: 18.5%;
right: 370px;
top: 350px;
}
#components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px;
......@@ -442,6 +450,7 @@ export default {
background-color: #fff;
text-align: center;
line-height: 60px;
border-radius: 8px;
}
}
.back {
......
src/views/company/cooperation.vue
......@@ -19,6 +19,26 @@
<EchartsCon :option="option2" :id="'echarts2'"></EchartsCon>
</div>
</div>
<div class="company_con_anchor">
<a-anchor>
<a-anchor-link
style="font-size: 20px; color: #1C1C28; font-weight: bold"
title="技术合作"
/>
<a-anchor-link href="#businessInfo" title="联合申请" />
<a-anchor-link href="#shareholder" title="专利购买" />
</a-anchor>
<div id="components-back-top-demo-custom">
<a-back-top>
<div class="ant-back-top-inner">
<img src="@/static/common/icon-top.png" alt="">
回到顶部
</div>
</a-back-top>
<!-- <div class="back">回到顶部</div> -->
</div>
</div>
</div>
</div>
</template>
......@@ -246,28 +266,33 @@ this.option2 = {
}
.company_con_anchor {
margin-top: 15px;
// width: 150px;
// height: 350px;
font-weight: bold;
color: #666666;
color: #1C1C28;
:deep(.ant-anchor-link-title) {
color: #666666;
color: #1C1C28;
margin-bottom: 15px;
}
:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff;
}
:deep(.ant-anchor-ink::before){
width: 8px;
background-color: #F5F5F5;
}
:deep(.ant-anchor-wrapper) {
background-color: #fff;
padding-left: 10px;
color: #666666;
color: #1C1C28;
height: 350px;
margin-left: 10px;
padding: 30px 15px 0;
}
#components-back-top-demo-custom .ant-back-top {
bottom: 55%;
right: 20%;
// bottom: 50%;
// right: 18.5%;
right: 370px;
top: 350px;
}
#components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px;
......@@ -276,6 +301,7 @@ this.option2 = {
background-color: #fff;
text-align: center;
line-height: 60px;
border-radius: 8px;
}
}
.back {
......
src/views/company/index.vue
<template>
<!-- 头部搜索关键词字段 -->
<div class="header_con">
<a-input v-model:value="keyword" :bordered="false">
<template #addonBefore>
<a-select v-model:value="type" class="type">
<a-select-option value="企业">查企业</a-select-option>
<a-select-option value="专利">查专利</a-select-option>
</a-select>
</template>
<template #addonAfter>
<img
style="padding-right: 5px"
src="@/static/home/index/icon-search.png"
alt=""
/>搜索
</template>
</a-input>
</div>
<div class="company">
<a-breadcrumb class="nav_bread">
<a-breadcrumb-item>首页</a-breadcrumb-item>
......@@ -8,15 +26,9 @@
<div class="company_con_left">
<h3>筛选器</h3>
<a-form :layout="'vertical'" :model="formState">
<a-form-item label="关键词">
<a-input
v-model:value="formState.fieldA"
placeholder="请输入关键词"
/>
</a-form-item>
<a-form-item label="区域">
<a-cascader
v-model:value="value"
v-model:value="valueArea"
multiple
:options="optionsArea"
placeholder="请选择"
......@@ -31,31 +43,31 @@
></a-cascader>
</a-form-item>
<a-form-item label="科技型企业">
<a-cascader
v-model:value="value"
multiple
:options="optionsArea"
<a-select
v-model:value="valueType"
:options="optionsType"
mode="multiple"
placeholder="请选择"
></a-cascader>
></a-select>
</a-form-item>
<a-form-item
name="range-picker"
label="注册时间"
v-bind="rangeConfig"
>
<a-config-provider :locale="zh_CN">
<a-range-picker
v-model:value="formState['range-picker']"
value-format="YYYY-MM-DD"
/>
</a-config-provider>
<a-config-provider :locale="zh_CN">
<a-range-picker
v-model:value="formState['range-picker']"
value-format="YYYY-MM-DD"
/>
</a-config-provider>
</a-form-item>
<a-form-item label="企业创新">
<a-select
v-model:value="value2"
v-model:value="valueInnovation"
mode="multiple"
placeholder="请选择"
:options="optionsStatus"
:options="optionsInnovation"
></a-select>
</a-form-item>
<a-form-item label="注册资本">
......@@ -87,13 +99,84 @@
>筛选</a-button
>
</div>
<!-- 公司列表结果 -->
<div class="company_con_right">
<h2>
推荐<span class="result_count">{{ total }}</span
>条相关结果
<!-- 筛选的标签展示 -->
<div class="filter">
<a-tag color="blue" v-for="item in filter">
{{ item }}
</a-tag>
</div>
</h2>
<div
style="display: flex; justify-content: flex-start; flex-wrap: wrap"
>
<div
class="card"
v-for="item in companylist"
:key="item"
@click="openCompany(item.name)"
>
<div class="card_title">{{ item.name }}</div>
<!-- 关注 -->
<div class="follow" @click="follow" v-if="item.follow">
<img
src="@/static/company/icon-guanzhu.png"
alt=""
class="follow_img"
/>
<span class="follow_str">关注</span>
</div>
<div class="follow" @click="follow" v-else>
<img
src="@/static/company/icon-yiguanzhu.png"
alt=""
class="follow_img"
/>
<span class="follow_str">已关注</span>
</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.code
}}</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>
</div>
</div>
</div>
<br />
<a-pagination
@change="onChange"
:total="total"
:showSizeChanger="false"
/>
<br />
</div>
</div>
</div>
<router-link to="/companyDetails">企业详情</router-link>
<router-view></router-view>
</template>
<script>
import dayjs from "dayjs";
import arealist from "../../utils/map.js";
import "dayjs/locale/zh-cn";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
dayjs.locale("zh-cn");
......@@ -102,55 +185,159 @@ export default {
data() {
return {
zh_CN,
value: [],
total: "1255",
valueArea: [],
value2: [],
optionsArea: [
{
label: "Light",
value: "light",
children: [
{
label: "Little",
value: "little",
},
],
},
{
label: "Bamboo",
value: "bamboo",
children: [
{
label: "Toy Fish",
value: "fish",
},
{
label: "Toy Cards",
value: "cards",
},
{
label: "Toy Bird",
value: "bird",
},
],
},
optionsArea: [],
valueInnovation: [],
optionsInnovation: [
{ label: "企业科创能力", value: "企业科创能力" },
{ label: "企业技术合作", value: "企业技术合作" },
],
optionsStatus: [
{ label: "有效", value: "有效" },
{ label: "审查中", value: "审查中" },
optionsType: [
{ label: "高新技术企业", value: "高新技术企业" },
{ label: "专精特新中小企业", value: "专精特新中小企业" },
{ label: "专精特新小巨人", value: "专精特新小巨人" },
{ label: "上市挂牌企业", value: "上市挂牌企业" },
],
valueType: [],
formState: {
layout: "horizontal",
fieldA: "",
fieldB: "",
},
filter: [],
companylist: [
{
name: "山西科达自控股份有限公司",
status: "存续（在营、开业、在册）",
type: "高新技术企业",
legalRepresentative: "郭晓明",
registrationTime: "2023-6-1",
money: "222941.42万人民币",
code: "91140000110014569B",
industry: "批发和零售业>批发业",
address: "北京市海淀区西二旗产业园百度大厦28号",
follow: 1,
},
{
name: "山西科达自控股份有限公司",
status: "存续（在营、开业、在册）",
type: "高新技术企业",
legalRepresentative: "郭晓明",
registrationTime: "2023-6-1",
money: "222941.42万人民币",
code: "91140000110014569B",
industry: "批发和零售业>批发业",
address: "北京市海淀区西二旗产业园百度大厦28号",
follow: 0,
},
{
name: "山西科达自控股份有限公司",
status: "存续（在营、开业、在册）",
type: "高新技术企业",
legalRepresentative: "郭晓明",
registrationTime: "2023-6-1",
money: "222941.42万人民币",
code: "91140000110014569B",
industry: "批发和零售业>批发业",
address: "北京市海淀区西二旗产业园百度大厦28号",
follow: 1,
},
],
};
},
components: {},
methods: {},
created() {},
methods: {
//重置筛选
clearvalue() {
this.valueArea = [];
this.valueInnovation = [];
this.valueType = [];
},
//点击筛选
Filter() {
this.filter = [];
// //将筛选条件渲染到页面上
// for (var key in parma) {
// if (key == "keyword") {
// parma.keyword ? this.filter.push(parma.keyword) : "";
// } else if (key == "zl_type") {
// if (this.value1.length != 0) {
// this.value1.forEach((item) => {
// this.filter.push(item);
// });
// }
// } else if (key == "zl_status") {
// if (this.value2.length != 0) {
// this.value2.forEach((item) => {
// this.filter.push(item);
// });
// }
// }
// }
},
//打开企业详情
openCompany(name) {
this.$store.commit('setcurrent','企业')
this.$router.push({
path:'/companyDetails',
query:{
name:'111'
}
})
},
},
created() {
this.optionsArea = arealist;
this.keyword = this.$route.query.keyword;
this.type = "企业";
},
};
</script>
<style lang="less" scoped>
.header_con {
position: absolute;
top: 0;
left: 30%;
// padding: 0 10px 30px;
width: 700px;
height: 50px;
margin: 10px;
// padding: 10px;
border: 2px solid #4079ff;
border-radius: 8px;
.type {
width: 90px;
height: 40px;
// margin-top: 10px;
// line-height: 50px;
padding: 0px 0;
background-color: #fff;
border-color: transparent;
}
:deep(.ant-input-group .ant-input) {
// height: 54px;
font-size: 18px;
}
:deep(.ant-input) {
border-color: transparent;
padding-top: 10px;
}
:deep(.ant-input-group-addon:first-child) {
border-color: transparent;
padding-top: 5px;
}
:deep(.ant-input-group-addon:last-child) {
height: 48px;
width: 120px;
background-color: #4079ff !important;
color: #fff;
font-size: 18px;
cursor: pointer;
}
}
.company {
padding: 0 30px;
width: calc(100%);
......@@ -164,14 +351,91 @@ export default {
.company_con {
background-color: #f3f3f6;
width: 100%;
height: 100%;
// height: 95%;
display: flex;
.company_con_left {
width: 20%;
height: 90%;
// height: 90%;
padding: 25px 20px;
background-color: #fff;
}
.company_con_right {
background-color: #fff;
width: 78%;
// height: 90%;
padding: 25px 20px;
.result_count {
font-size: 20px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #4079ff;
}
.filter {
font-size: 15px;
display: inline-block;
span {
font-size: 15px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
}
}
.card {
background: #f6f7fb;
border-radius: 10px 10px 10px 10px;
opacity: 0.8;
padding: 24px;
width: 48%;
margin-bottom: 15px;
position: relative;
margin-right: 1%;
:deep(.ant-tag-has-color) {
padding: 5px;
border-radius: 6px;
}
.follow {
position: absolute;
right: 30px;
top: 30px;
width: 112px;
height: 32px;
background: #bcbfc7;
border-radius: 8px 8px 8px 8px;
opacity: 1;
text-align: center;
line-height: 32px;
cursor: pointer;
.follow_img {
width: 20px;
margin-top: -5px;
}
.follow_str {
padding-left: 8px;
color: #fff;
}
}
.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>
src/views/company/overview.vue
......@@ -55,9 +55,21 @@
专利结构可从专利类型以及专利基本法律状态两个方面进行分析。从专利类型来看，一般在评估专利技术质量时，普遍认为发明>实用新型>外观。因此，关注发明专利的占比高低，可以帮助了解企业历史研发的技术质量水平。从专利基本法律状态来看，关注失效专利的占比，可以帮助了解企业当前持有技术的质量水平。该企业的专利数量为7件，其中发明专利4件，占比57.14%；失效专利4件，占比57.14%。
</p>
<div class="ecahrsThree">
<EchartsCon :style="'width:33%;'" :id="'echartsone'" :option="option3"></EchartsCon>
<EchartsCon :style="'width:33%;'" :id="'echartstwo'" :option="option4"></EchartsCon>
<EchartsCon :style="'width:33%;'" :id="'echartsthree'" :option="option5"></EchartsCon>
<EchartsCon
:style="'width:33%;'"
:id="'echartsone'"
:option="option3"
></EchartsCon>
<EchartsCon
:style="'width:33%;'"
:id="'echartstwo'"
:option="option4"
></EchartsCon>
<EchartsCon
:style="'width:33%;'"
:id="'echartsthree'"
:option="option5"
></EchartsCon>
</div>
</div>
<!-- 技术领域布局 -->
......@@ -72,6 +84,29 @@
></EchartsCloud>
</div>
</div>
<div class="company_con_anchor">
<a-anchor>
<a-anchor-link
style="font-size: 20px; color: #1c1c28; font-weight: bold"
title="研发概要"
/>
<a-anchor-link href="#businessInfo" title="研发规模" />
<a-anchor-link href="#shareholder" title="研发可持续性" />
<!-- <a-anchor-link href="#appAera" title="应用领域" /> -->
<a-anchor-link href="#keyPerson" title="专利结构分析" />
<a-anchor-link href="#investment" title="技术领域布局" />
</a-anchor>
<div id="components-back-top-demo-custom">
<a-back-top>
<div class="ant-back-top-inner">
<img src="@/static/common/icon-top.png" alt="" />
回到顶部
</div>
</a-back-top>
<!-- <div class="back">回到顶部</div> -->
</div>
</div>
</div>
</div>
</template>
......@@ -386,7 +421,6 @@ export default {
text: "专利状态分布图",
left: "25%",
bottom: "5%",
},
//color: colors,
tooltip: {
......@@ -422,7 +456,6 @@ export default {
text: "有效专利分布图",
left: "25%",
bottom: "5%",
},
//color: colors,
tooltip: {
......@@ -509,7 +542,7 @@ export default {
color: #1c1c28;
line-height: 28px;
}
.ecahrsThree{
.ecahrsThree {
display: flex;
width: 100%;
justify-content: space-between;
......@@ -521,28 +554,33 @@ export default {
}
.company_con_anchor {
margin-top: 15px;
// width: 150px;
// height: 350px;
font-weight: bold;
color: #666666;
color: #1C1C28;
:deep(.ant-anchor-link-title) {
color: #666666;
color: #1C1C28;
margin-bottom: 15px;
}
:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff;
}
:deep(.ant-anchor-ink::before){
width: 8px;
background-color: #F5F5F5;
}
:deep(.ant-anchor-wrapper) {
background-color: #fff;
padding-left: 10px;
color: #666666;
color: #1C1C28;
height: 350px;
margin-left: 10px;
padding: 30px 15px 0;
}
#components-back-top-demo-custom .ant-back-top {
bottom: 55%;
right: 20%;
// bottom: 50%;
// right: 18.5%;
right: 370px;
top: 350px;
}
#components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px;
......@@ -551,6 +589,7 @@ export default {
background-color: #fff;
text-align: center;
line-height: 60px;
border-radius: 8px;
}
}
.back {
......
src/views/company/technology.vue
......@@ -11,7 +11,7 @@
:id="'echarts1'"
class="echarts"
></EchartsCon>
<div class="hover">111</div>
<!-- <div class="hover">111</div> -->
<EchartsCon :option="option2" :id="'echarts2'"></EchartsCon>
</div>
......@@ -85,6 +85,7 @@ export default {
{
type: "radar",
radarIndex: 0,
tooltip: {
trigger: "item",
},
......
src/views/home/home.vue
<template>
<div class="home_con">
<!-- 面包屑导航 -->
<a-breadcrumb class="nav_bread">
......@@ -152,11 +153,12 @@ export default {
if (this.tab_id == "1") {
this.$router.push({
path: "/patent",
params:{
query:{
keyword:this.searchValue
}
});
this.$store.commit('setcurrent','专利')
} else {
}
},
......
src/views/home/index.vue
......@@ -2,17 +2,46 @@
<div class="home">
<!-- 标题栏 -->
<HeaderCon></HeaderCon>
<!-- <div
class="header_con"
v-if="$store.state.current == '企业' || $store.state.current == '专利'"
>
<a-input v-model:value="searchValue" :bordered="false">
<template #addonBefore>
<a-select v-model:value="type" class="type">
<a-select-option value="企业">查企业</a-select-option>
<a-select-option value="专利">查专利</a-select-option>
</a-select>
</template>
<template #addonAfter>
<img
style="padding-right: 5px"
src="@/static/home/index/icon-search.png"
alt=""
/>搜索
</template>
</a-input>
</div> -->
<div class="home_main">
<div class="sider">{{ this.$store.state.current }}
<div class="sider">
{{ this.$store.state.current }}
<div
:class="[this.$store.state.current == item.name ? 'sider_item active' : 'sider_item ']"
:class="[
this.$store.state.current == item.name
? 'sider_item active'
: 'sider_item ',
]"
v-for="item in siderArr"
:key="item.name"
@click="changepage(item.name)"
>
<img
:src="this.$store.state.current == item.name ? item.img_select : item.img"
:src="
this.$store.state.current == item.name
? item.img_select
: item.img
"
alt=""
class="sider_item_img"
/>
......@@ -41,6 +70,7 @@ export default {
return {
current: "首页",
searchValue: "",
type:'企业',
siderArr: [
{
name: "首页",
......@@ -130,6 +160,8 @@ export default {
.home {
height: calc(100%);
width: calc(100%);
position: relative;
.home_main {
height: calc(100% - 80px);
width: 100%;
......
src/views/patent/index.vue
<template>
<!-- 头部搜索关键词字段 -->
<div class="header_con">
<a-input v-model:value="keyword" :bordered="false">
<template #addonBefore>
<a-select v-model:value="type" class="type">
<a-select-option value="企业">查企业</a-select-option>
<a-select-option value="专利">查专利</a-select-option>
</a-select>
</template>
<template #addonAfter>
<img
style="padding-right: 5px"
src="@/static/home/index/icon-search.png"
alt=""
/>搜索
</template>
</a-input>
</div>
<div class="patent">
<a-breadcrumb class="nav_bread">
<a-breadcrumb-item>首页</a-breadcrumb-item>
......@@ -8,12 +26,6 @@
<div class="patent_con_left">
<h3>筛选器</h3>
<a-form style="height: 90%" :layout="'vertical'" :model="formState">
<a-form-item label="关键词">
<a-input
v-model:value="formState.keyword"
placeholder="请输入关键词"
/>
</a-form-item>
<a-form-item label="专利类型">
<a-select
v-model:value="value1"
......@@ -70,18 +82,18 @@
推荐<span>{{ total }}</span
>条相关结果
<!-- 筛选的标签展示 -->
<div class="filter">
<a-tag color="blue" v-for="item in filter">
{{ item }}
</a-tag>
</div>
<div class="filter">
<a-tag color="blue" v-for="item in filter">
{{ item }}
</a-tag>
</div>
</h2>
<a-table
:columns="columns"
:data-source="patentdata"
:pagination="false"
:customRow="rowClick"
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
......@@ -99,7 +111,7 @@
</div>
</div>
</div>
<router-link to="/patentDetails">专利</router-link>
<router-view></router-view>
</template>
<script>
......@@ -116,6 +128,7 @@ export default {
zh_CN,
value1: [],
value2: [],
keyword: "",
optionsType: [
{ label: "发明授权", value: "发明授权" },
{ label: "发明申请", value: "发明申请" },
......@@ -129,7 +142,7 @@ export default {
],
formState: {
// layout: "horizontal",
keyword: "",
// keyword: "",
rangetime1: "",
rangetime2: "",
},
......@@ -185,12 +198,27 @@ export default {
},
//改变页码
onChange(page) {
this.patentdata = [];
let params = {
keyword: this.$route.params.keyword || "",
page: page,
size: 10,
keyword: this.keyword ? this.keyword : null,
zl_type: this.value1,
sqrq_start: this.formState.rangetime1
? this.formState.rangetime1[0]
: null,
sqrq_end: this.formState.rangetime1
? this.formState.rangetime1[1]
: null,
gkrq_start: this.formState.rangetime2
? this.formState.rangetime2[0]
: null,
gkrq_end: this.formState.rangetime2
? this.formState.rangetime2[1]
: null,
zl_status: this.value2,
};
patents({ ...params }).then((res) => {
patentselect({ ...params }).then((res) => {
console.log(res);
if (res.code == 0) {
this.patentdata = res.data.list;
......@@ -203,7 +231,7 @@ export default {
this.value1 = [];
this.value2 = [];
this.formState = {
keyword: "",
// keyword: "",
rangetime1: "",
rangetime2: "",
};
......@@ -211,58 +239,125 @@ export default {
//点击筛选
Filter() {
this.filter = [];
this.patentdata = [];
let parma = {
page: 1,
size: 10,
keyword: this.formState.keyword ? this.formState.keyword : "",
keyword: this.keyword ? this.keyword : null,
zl_type: this.value1,
sqrq_start: this.formState.rangetime1[0]
sqrq_start: this.formState.rangetime1
? this.formState.rangetime1[0]
: "",
sqrq_end: this.formState.rangetime1[1]
: null,
sqrq_end: this.formState.rangetime1
? this.formState.rangetime1[1]
: "",
gkrq_start: this.formState.rangetime2[0]
: null,
gkrq_start: this.formState.rangetime2
? this.formState.rangetime2[0]
: "",
gkrq_start: this.formState.rangetime2[1]
: null,
gkrq_end: this.formState.rangetime2
? this.formState.rangetime2[1]
: "",
: null,
zl_status: this.value2,
};
patentselect({ parma }).then((res) => {
//将筛选条件渲染到页面上
for (var key in parma) {
if (key == "keyword") {
parma.keyword? this.filter.push(parma.keyword):'';
} else if (key == "zl_type") {
if (this.value1.length != 0) {
this.value1.forEach((item) => {
this.filter.push(item);
});
}
} else if (key == "zl_status") {
if (this.value2.length != 0) {
this.value2.forEach((item) => {
this.filter.push(item);
});
patentselect({ ...parma }).then((res) => {
if (res.code == 0) {
this.patentdata = res.data.list;
this.total = res.data.total;
//将筛选条件渲染到页面上
for (var key in parma) {
if (key == "keyword") {
parma.keyword ? this.filter.push(parma.keyword) : "";
} else if (key == "zl_type") {
if (this.value1.length != 0) {
this.value1.forEach((item) => {
this.filter.push(item);
});
}
} else if (key == "zl_status") {
if (this.value2.length != 0) {
this.value2.forEach((item) => {
this.filter.push(item);
});
}
}
}
}
else{
this.$message(res.msg)
}
});
},
//跳转到专利详情页面
rowClick(record, index) {
return {
onClick: (event) => {
console.log(record);
this.$store.commit("setcurrent", "专利");
this.$router.push({
path: "/patentDetails",
query: {
id: record.mysql_id,
},
});
},
};
},
},
created() {
this.getList();
// console.log(this.$route)
this.keyword = this.$route.query.keyword;
this.type = "专利";
},
computed: {},
};
</script>
<style lang="less" scoped>
.header_con {
position: absolute;
top: 0;
left: 30%;
// padding: 0 10px 30px;
width: 700px;
height: 50px;
margin: 10px;
// padding: 10px;
border: 2px solid #4079ff;
border-radius: 8px;
.type {
width: 90px;
height: 40px;
// margin-top: 10px;
// line-height: 50px;
padding: 0px 0;
background-color: #fff;
border-color: transparent;
}
:deep(.ant-input-group .ant-input) {
// height: 54px;
font-size: 18px;
}
:deep(.ant-input) {
border-color: transparent;
padding-top: 10px;
}
:deep(.ant-input-group-addon:first-child) {
border-color: transparent;
padding-top: 5px;
}
:deep(.ant-input-group-addon:last-child) {
height: 48px;
width: 120px;
background-color: #4079ff !important;
color: #fff;
font-size: 18px;
cursor: pointer;
}
}
.patent {
padding: 0 30px;
width: calc(100%);
// height: calc(100% - 65px);
background-color: #ebebeb;
position: relative;
.nav_bread {
......@@ -273,18 +368,19 @@ export default {
.patent_con {
background-color: #f3f3f6;
width: 100%;
height: 100%;
height: calc(90%);
display: flex;
justify-content: space-evenly;
.patent_con_left {
width: 20%;
height: 90%;
// height: 90%;
padding: 25px 20px;
background-color: #fff;
}
.patent_con_right {
background-color: #fff;
width: 78%;
// height: 90%;
padding: 25px 20px;
span {
font-size: 20px;
......
src/views/patent/patentDetails.vue
......@@ -32,7 +32,7 @@
<div class="patent_con1" id="summary">
<h2 class="title">摘要</h2>
<p class="desc">
本发明公开了一种大直径单桩单钩水下翻桩方法，采用一艘具有一个主钩的起重船并包括以下步骤：先根据单桩起吊后平衡状态时与水平面的夹角为α计算主钩至主吊耳之间的距离以及主钩至单桩底部的距离，然后根据α确定主吊钢丝绳的直径和辅吊钢丝绳的直径；将两根主吊钢丝绳的上端均挂在主钩上，下端各自挂在单桩的两个主吊耳上，再将辅吊钢丝绳的上端挂在主钩上，下端通过U形扣钳制在单桩的底部；主钩起吊单桩，使单桩落入水中，并下放至单桩的底部桩尖触到海底泥面；继续下放起重船的主钩使辅吊钢丝绳逐渐呈松弛状态，将辅吊钢丝绳与主钩脱钩，同时U形扣自动脱离单桩的底部，然后起升主钩将单桩竖立。本发明的翻桩方法可有效降低船舶设备的投入。
{{ details.zy }}
</p>
</div>
<!-- 技术领域 -->
......@@ -56,20 +56,36 @@
: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-item label="申请号">{{
details.sqh
}}</a-descriptions-item>
<a-descriptions-item label="优先权号">{{
details.yxqh
}}</a-descriptions-item>
<a-descriptions-item label="申请日">{{
details.sqrq
}}</a-descriptions-item>
<a-descriptions-item label="优先权日">{{
details.zlyxqr
}}</a-descriptions-item>
<a-descriptions-item label="公开号">{{
details.gkh
}}</a-descriptions-item>
<a-descriptions-item label="授权日">{{
details.sqr
}}</a-descriptions-item>
<a-descriptions-item label="公开日">{{
details.gkrq
}}</a-descriptions-item>
<a-descriptions-item label="失效日">{{
details.sxr
}}</a-descriptions-item>
<a-descriptions-item label="专利类型">{{
details.zl_type
}}</a-descriptions-item>
<a-descriptions-item label="专利维持期">{{
details.zlwqq
}}</a-descriptions-item>
</a-descriptions>
</div>
<!-- 相关人 -->
......@@ -81,33 +97,29 @@
:labelStyle="{ background: '#F2F9FC' }"
>
<a-descriptions-item label="申请人(原始)"
>Cloud Database</a-descriptions-item
>{{ details.sqrys }}</a-descriptions-item
>
<a-descriptions-item label="专利权人(当前)"
>中交第三航务工程局有限公司；<br />
中交三航(厦门)工程有限公司；<br />
中交第三航务工程局有限公司厦门分公司</a-descriptions-item
>{{details.zlqrjgs}}</a-descriptions-item
>
<a-descriptions-item label="申请人"
>中交第三航务工程局有限公司； 中交三航(厦门)工程有限公司；
中交第三航务工程局有限公司厦门分公司</a-descriptions-item
>{{ details.zlr }}</a-descriptions-item
>
<a-descriptions-item label="专利权人"
>中交第三航务工程局有限公司； 中交三航(厦门)工程有限公司；
中交第三航务工程局有限公司厦门分公司</a-descriptions-item
>{{ details.zlqr }}</a-descriptions-item
>
<a-descriptions-item label="申请人(工商)"
>$80.00</a-descriptions-item
>{{ details.sqrgs }}</a-descriptions-item
>
<a-descriptions-item label="专利权人(机构树)"
>授权日</a-descriptions-item
>{{ details.zlqrjgs }}</a-descriptions-item
>
<a-descriptions-item label="申请人(机构树)"
>授权日</a-descriptions-item
>{{ details.sqrjgs }}</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="代理人">{{ details.dlr }}</a-descriptions-item>
<a-descriptions-item label="发明人">{{ details.fmr }}</a-descriptions-item>
<a-descriptions-item label="代理机构">{{ details.dljg }}</a-descriptions-item>
</a-descriptions>
</div>
<!-- 地址 -->
......@@ -118,11 +130,11 @@
: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="申请人国">{{ details.sqrg }}</a-descriptions-item>
<a-descriptions-item label="公开国">{{ details.gkg }}</a-descriptions-item>
<a-descriptions-item label="申请人地址">{{ details.sqr_address }}</a-descriptions-item>
<a-descriptions-item label="专利权人地址"
>授权日</a-descriptions-item
>{{ details.zlqr_address }}</a-descriptions-item
>
</a-descriptions>
</div>
......@@ -134,10 +146,10 @@
: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-item label="引用数量">{{ details.yy_num }}</a-descriptions-item>
<a-descriptions-item label="权利要求数">{{ details.qlyq_num }}</a-descriptions-item>
<a-descriptions-item label="被引用数量">{{ details.byy_num }}</a-descriptions-item>
<a-descriptions-item label="同族数量">{{ details.tzzl_num }}</a-descriptions-item>
</a-descriptions>
</div>
<!-- 分类号 -->
......@@ -148,15 +160,15 @@
:column="2"
:labelStyle="{ background: '#F2F9FC' }"
>
<a-descriptions-item label="IPC分类号">授权日</a-descriptions-item>
<a-descriptions-item label="IPC分类号">{{ details.ipcflh }}</a-descriptions-item>
<a-descriptions-item label="战略新兴产业分类号"
>授权日</a-descriptions-item
>{{ details.zlxxxcy }}</a-descriptions-item
>
<a-descriptions-item label="国民经济分类号"
>授权日</a-descriptions-item
>{{ details.gmjjfl }}</a-descriptions-item
>
<a-descriptions-item label="双十产业集群分类号"
>授权日</a-descriptions-item
>{{ details.sscyjqfl }}</a-descriptions-item
>
</a-descriptions>
</div>
......@@ -185,15 +197,12 @@
<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>
v-model:value="value1"
:options="optionsType"
mode="multiple"
placeholder="请选择"
style="width: 300px"
></a-select>
<div class="result">
推荐
<span style="color: #4079ff; font-weight: bold">{{ count }}</span
......@@ -237,6 +246,7 @@
</template>
<script>
import { DownOutlined } from "@ant-design/icons-vue";
import { patentDetail } from "../../utils/indexApi";
import EchartsCloud from "../../components/EchartsCloud.vue";
export default {
name: "patentDetails",
......@@ -245,6 +255,14 @@ export default {
value: undefined,
count: 161,
follow: true,
value1: [],
details: {},
optionsType: [
{ label: "高新技术企业", value: "高新技术企业" },
{ label: "专精特新中小企业", value: "专精特新中小企业" },
{ label: "专精特新小巨人", value: "专精特新小巨人" },
{ label: "上市挂牌企业", value: "上市挂牌企业" },
],
techArr: [
{
name: "支架搬运车",
......@@ -301,8 +319,21 @@ export default {
getCurrentAnchor() {
return "#technicalSummary";
},
init(id) {
patentDetail({ id: id }).then((res) => {
console.log(res);
if (res.code == 0) {
this.details = res.data;
}
});
},
},
created() {
this.$store.commit("setcurrent", "专利");
let id = this.$route.query.id;
//初始化专利详情
this.init(id);
},
created() {},
};
</script>
<style lang="less" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment