Skip to content

T
ty_patentSys
Commit 95dd3cf7 by liudx
Options

修改大屏页面

parent 3d298940
Showing with 607 additions and 32 deletions
src/components/EchartsCloud.vue
...@@ -89,8 +89,8 @@ export default { ...@@ -89,8 +89,8 @@ export default {
top: "center", top: "center",
right: null, right: null,
bottom: null, bottom: null,
width: "200%", width: "100%",
height: "200%", height: "100%",
//数据 //数据
data: this.dataArr data: this.dataArr
}, },
......
src/views/company/companyDetails.vue
...@@ -513,6 +513,9 @@ export default { ...@@ -513,6 +513,9 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
splitLine: {
show: false,
},
}, },
{ {
type: "value", type: "value",
...@@ -524,6 +527,9 @@ export default { ...@@ -524,6 +527,9 @@ export default {
axisLabel: { axisLabel: {
formatter: "{value}%", formatter: "{value}%",
}, },
splitLine: {
show: false,
},
}, },
], ],
......
src/views/company/overview.vue
...@@ -71,10 +71,18 @@ ...@@ -71,10 +71,18 @@
专利结构可从专利类型以及专利基本法律状态两个方面进行分析。从专利类型来看，一般在评估专利技术质量时，普遍认为发明>实用新型>外观。因此，关注发明专利的占比高低，可以帮助了解企业历史研发的技术质量水平。从专利基本法律状态来看，关注失效专利的占比，可以帮助了解企业当前持有技术的质量水平。该企业的专利数量为<span 专利结构可从专利类型以及专利基本法律状态两个方面进行分析。从专利类型来看，一般在评估专利技术质量时，普遍认为发明>实用新型>外观。因此，关注发明专利的占比高低，可以帮助了解企业历史研发的技术质量水平。从专利基本法律状态来看，关注失效专利的占比，可以帮助了解企业当前持有技术的质量水平。该企业的专利数量为<span
class="color" class="color"
>{{ devstructureData.patent_application_num }}</span >{{ devstructureData.patent_application_num }}</span
>件，其中发明专利<span class="color">{{ devstructureData.invent_patent_num }}</span >件，其中发明专利<span class="color">{{
>件，占比<span class="color">{{ devstructureData.invent_patent_percent }}</span devstructureData.invent_patent_num
>；有效专利<span class="color">{{ devstructureData.valid_patent_num }}</span }}</span
>件，占比<span class="color">{{ devstructureData.valid_patent_percent }}</span >件，占比<span class="color">{{
devstructureData.invent_patent_percent
}}</span
>；有效专利<span class="color">{{
devstructureData.valid_patent_num
}}</span
>件，占比<span class="color">{{
devstructureData.valid_patent_percent
}}</span
>。 >。
</p> </p>
<div class="ecahrsThree"> <div class="ecahrsThree">
...@@ -151,7 +159,7 @@ export default { ...@@ -151,7 +159,7 @@ export default {
return { return {
tabchange: "1", tabchange: "1",
deveSustainData: null, deveSustainData: null,
devstructureData:null, devstructureData: null,
}; };
}, },
...@@ -373,6 +381,10 @@ export default { ...@@ -373,6 +381,10 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
splitLine: {
show: false,
},
}, },
{ {
type: "value", type: "value",
...@@ -384,6 +396,9 @@ export default { ...@@ -384,6 +396,9 @@ export default {
axisLabel: { axisLabel: {
formatter: "{value}%", formatter: "{value}%",
}, },
splitLine: {
show: false,
},
}, },
], ],
...@@ -554,12 +569,12 @@ export default { ...@@ -554,12 +569,12 @@ export default {
}, },
]; ];
}, },
handleAnchorClick(e,link){ handleAnchorClick(e, link) {
e.preventDefault(); e.preventDefault();
}, },
}, },
created() { created() {
this.deveSustainData = this.$props.deveSustain; this.deveSustainData = this.$props.deveSustain;
this.devstructureData = this.$props.structureData; this.devstructureData = this.$props.structureData;
// this.deveSustain.patent_authorization_rate = // this.deveSustain.patent_authorization_rate =
......
src/views/company/technology.vue
...@@ -11,19 +11,6 @@ ...@@ -11,19 +11,6 @@
:id="'echartsraodar'" :id="'echartsraodar'"
class="echarts" class="echarts"
></EchartsCon> ></EchartsCon>
<!-- <div
id="echartsraodar"
class="echarts"
style="width: 100%; height: 300px"
></div> -->
<!-- <div
class="hover"
v-if="hover"
ref="hover"
:style="{ left: left, top: top }"
>
{{ con }}
</div> -->
<div style="width: 50%; position: relative"> <div style="width: 50%; position: relative">
<EchartsCon :option="option2" :id="'echartsscatter'"></EchartsCon> <EchartsCon :option="option2" :id="'echartsscatter'"></EchartsCon>
<a-popover title="科创能力分析指标"> <a-popover title="科创能力分析指标">
......
src/views/home/home.vue
...@@ -234,7 +234,7 @@ export default { ...@@ -234,7 +234,7 @@ export default {
} }
.home_search { .home_search {
// width: 1820px; // width: 1820px;
width: calc(100% -80px); width: calc(100%);
height: 308px; height: 308px;
position: relative; position: relative;
background: url("~@/static/home/index/img-index01.png") no-repeat; background: url("~@/static/home/index/img-index01.png") no-repeat;
......
src/views/patent/index.vue
...@@ -194,7 +194,7 @@ export default { ...@@ -194,7 +194,7 @@ export default {
//获取页面的表格 //获取页面的表格
getList(keyword) { getList(keyword) {
let params = { let params = {
keyword: keyword|| this.$route.query.keyword, keyword: keyword|| '',
page: 1, page: 1,
size: 10, size: 10,
}; };
...@@ -333,6 +333,7 @@ export default { ...@@ -333,6 +333,7 @@ export default {
}, },
created() { created() {
this.keyword = this.$route.query.keyword; this.keyword = this.$route.query.keyword;
this.getList(this.keyword); this.getList(this.keyword);
this.type = "专利"; this.type = "专利";
}, },
......
src/views/screen/index.vue
<template> <template>
<div class="screen"> <div class="screen">
<header>太原理工大学专利成果转化智能推荐系统</header> <header>太原理工大学专利成果转化智能推荐系统</header>
<div class="center"></div> <div class="center">
<div class="center_left">
<div class="center_left_echarts">
<div class="center_left_title">
<span>专利类型占比图</span>
<div class="center_left_title_btn">
<span
:class="[activeTrend == 1 ? 'active' : '']"
@click="changetrend('1')"
>申请量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changetrend('2')"
>公布量</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
>授权量</span
>
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@change="handleChange"
>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="disabled" disabled
>Disabled</a-select-option
>
<a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>
</div>
</div>
<EchartsCon :id="''" :option="option5" :height="'200px'"></EchartsCon>
</div>
</div>
</div>
<div class="bottom"> <div class="bottom">
<div class="bottom_echart"> <div class="bottom_echart">
<div class="bottom_title"> <div class="bottom_title">
<span>专利发展趋势图</span> <span>专利发展趋势图</span>
<div class="bottom_title_btn"> <div class="bottom_title_btn">
<span>申请量</span><span>公布量</span><span>授权量</span> <span
:class="[activeTrend == 1 ? 'active' : '']"
@click="changetrend('1')"
>申请量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changetrend('2')"
>公布量</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
>授权量</span
>
<a-select <a-select
ref="select" ref="select"
v-model:value="value1" v-model:value="value1"
...@@ -24,7 +77,109 @@ ...@@ -24,7 +77,109 @@
</a-select> </a-select>
</div> </div>
</div> </div>
<EchartsCon :id="'patent_trend'" :options="option5"></EchartsCon> <EchartsCon
:id="'patent_trend'"
:option="option5"
:height="'200px'"
></EchartsCon>
</div>
<div class="bottom_echart">
<div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span>
</div>
<div class="rank_con">
<div class="rank_con_left">
<div class="rank_progress" v-for="item in rankArr">
<span class="index1 index" v-if="item.index === '1'">{{
item.index
}}</span>
<span class="index2 index" v-else-if="item.index === '2'">{{
item.index
}}</span>
<span class="index3 index" v-else-if="item.index == '3'">{{
item.index
}}</span>
<span class="index4 index" v-else>{{ item.index }}</span>
<span class="name1 name" v-if="item.index === '1'">{{
item.name
}}</span>
<span class="name2 name" v-else-if="item.index === '2'">{{
item.name
}}</span>
<span class="name3 name" v-else-if="item.index == '3'">{{
item.name
}}</span>
<span class="name4 name" v-else>{{ item.name }}</span>
<a-progress
v-if="item.index === '1'"
class="progress"
:percent="'67'"
:stroke-color="gradientColor1"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index === '2'"
class="progress"
:percent="'67'"
:stroke-color="gradientColor2"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index === '3'"
class="progress"
:percent="'67'"
:stroke-color="gradientColor3"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else
class="progress"
:percent="'67'"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num1 num" v-if="item.index === '1'"
>{{ item.num }}个</span
>
<span class="num2 num" v-else-if="item.index === '2'"
>{{ item.num }}个</span
>
<span class="num3 num" v-else-if="item.index == '3'"
>{{ item.num }}个</span
>
<span class="num4 num" v-else>{{ item.num }}个</span>
</div>
</div>
<div class="rank_con_right">
<div class="rank_progress" v-for="item in rankArr">
<span class="index4 index">{{ item.index }}</span>
<span class="name4 name">{{ item.name }}</span>
<a-progress
class="progress"
:percent="'67'"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num4 num">{{ item.num }}个</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -37,16 +192,272 @@ export default { ...@@ -37,16 +192,272 @@ export default {
data() { data() {
return { return {
option5: null, option5: null,
activeTrend: 1,
rankArr: [
{
index: "1",
num: 172,
percent: 72,
name: "特钢材料",
},
{
index: "2",
num: 172,
percent: 72,
name: "特钢材料",
},
{
index: "3",
num: 172,
percent: 72,
name: "特钢材料",
},
{
index: "4",
num: 172,
percent: 72,
name: "特钢材料",
},
{
index: "5",
num: 172,
percent: 72,
name: "特钢材料",
},
],
}; };
}, },
components: {}, computed: {
gradientColor1() {
const startColor = "rgba(37, 54, 74, 1)"; // 渐变起始颜色
const endColor = "rgba(255, 0, 0, 1)"; // 渐变结束颜色
return `linear-gradient(to right, ${startColor}, ${endColor})`;
},
gradientColor2() {
const startColor = "rgba(37, 54, 74, 1)"; // 渐变起始颜色
const endColor = "rgba(255, 108, 0, 1)"; // 渐变结束颜色
return `linear-gradient(to right, ${startColor}, ${endColor})`;
},
gradientColor3() {
const startColor = "rgba(37, 54, 74, 1)"; // 渐变起始颜色
const endColor = "rgba(221, 205, 66, 1)"; // 渐变结束颜色
return `linear-gradient(to right, ${startColor}, ${endColor})`;
},
gradientColor4() {
const startColor = "rgba(37, 54, 74, 1)"; // 渐变起始颜色
const endColor = "rgba(0, 118, 214, 1)"; // 渐变结束颜色
return `linear-gradient(to right, ${startColor}, ${endColor})`;
},
},
components: {
EchartsCon,
},
methods: { methods: {
init() { init() {
//获取专利发展趋势图 //获取专利发展趋势图
this.getTrend(); this.getTrend();
}, },
getTrend() { getTrend() {
this.option5 = {}; this.option5 = {
color: ["#E94C5B", "#1EFF2E", "#1EE2FF", "#FFA81E"],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#FFF",
},
},
grid: {
left: "2%",
right: "5%",
bottom: "5%",
top: "30px",
containLabel: true,
},
legend: {
show: true,
icon: "circle",
orient: "horizontal",
left: "30",
itemWidth: 12,
itemHeight: 12,
formatter: ["{a|{name}}"].join("\n"),
textStyle: {
fontSize: 12,
color: "#6A93B9",
height: 8,
rich: {
a: {
verticalAlign: "bottom",
},
},
},
// data: ["", "能力值"],
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#B5C5D4",
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#B5C5D4",
fontSize: 12,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
minInterval: 1,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
type: "dashed", // dotted 虚线
},
},
splitArea: { show: false },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
},
series: [
{
type: "line",
// symbol: "none",
// showSymbol: false,
smooth: true, // 是否曲线
symbol: "none", // 不显示连接点
name: "专利总量", // 图例对应类别
data: [4000, 6000, 7000, 2000, 5000, 7000, 9000], // 纵坐标数据
areaStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: "rgba(233, 76, 91, 0.5)",
},
{
offset: 1,
color: "#1057E500", // 100% 处的颜色
},
],
},
},
},
{
type: "line",
smooth: true,
symbol: "none", // 不显示连接点
name: "发明专利",
data: [1000, 4000, 5000, 6000, 3000, 8000, 7000],
areaStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: "rgba(30, 255, 46, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "#86DCF300", // 100% 处的颜色
},
],
},
},
},
{
type: "line",
smooth: true,
symbol: "none", // 不显示连接点
name: "使用新型",
data: [1000, 4000, 5000, 4000, 3000, 8000, 3000],
areaStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
// 0% 处的颜色
color: "rgba(30, 226, 255, 0.5)",
},
{
offset: 1,
color: "#86DCF300", // 100% 处的颜色
},
],
},
},
},
{
type: "line",
smooth: true,
symbol: "none", // 不显示连接点
name: "外观设计",
data: [1000, 3000, 5000, 6000, 3000, 8000, 7000],
areaStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: "rgba(255, 168, 30, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "#86DCF300", // 100% 处的颜色
},
],
},
},
},
],
};
},
changetrend(tab) {
this.activeTrend = tab;
}, },
}, },
...@@ -78,6 +489,50 @@ export default { ...@@ -78,6 +489,50 @@ export default {
} }
.center { .center {
height: 70%; height: 70%;
.center_left{
width: 30%;
.center_left_echarts{
.center_left_title{
background: url("../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%;
font-size: 20px;
height: 39px;
width: 100%;
font-family: "jiangcheng";
font-weight: normal;
font-style: italic;
color: #f6f9fe;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
padding-left: 30px;
padding-top: 6px;
.center_left_title_btn {
font-size: 14px;
font-family: "jiangcheng";
font-weight: normal;
color: #bbcdef;
opacity: 0.8;
span {
padding: 5px 10px;
cursor: pointer;
}
.active {
color: #fff;
text-shadow: 0px 2px 8px #f6f9fe;
}
:deep(
.ant-select:not(.ant-select-customize-input) .ant-select-selector
) {
background-color: #2d58b8;
color: #99b1dd;
}
:deep(.ant-select-dropdown) {
background-color: #1052df !important;
}
}
}
}
}
} }
.bottom { .bottom {
height: 275px; height: 275px;
...@@ -107,10 +562,121 @@ export default { ...@@ -107,10 +562,121 @@ export default {
opacity: 0.8; opacity: 0.8;
span { span {
padding: 5px 15px; padding: 5px 15px;
cursor: pointer;
}
.active {
color: #fff;
text-shadow: 0px 2px 8px #f6f9fe;
}
:deep(
.ant-select:not(.ant-select-customize-input) .ant-select-selector
) {
background-color: #2d58b8;
color: #99b1dd;
}
:deep(.ant-select-dropdown) {
background-color: #1052df !important;
}
}
}
.rank_con {
height: 90%;
width: 100%;
display: flex;
justify-content: space-between;
.index {
font-size: 12px;
font-family: "jiangcheng";
font-weight: 400;
color: #f8fbff;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.index1 {
background: linear-gradient(to right, red, transparent);
}
.index2 {
background: linear-gradient(
to right,
rgba(255, 108, 0, 1),
transparent
);
}
.index3 {
background: linear-gradient(
to right,
rgba(221, 205, 66, 1),
transparent
);
}
.index4 {
background: linear-gradient(
to right,
rgba(44, 61, 81, 1),
transparent
);
}
.name {
font-size: 12px;
font-family: "jiangcheng";
font-weight: 400;
color: #f8fbff;
height: 30px;
text-align: center;
line-height: 30px;
}
.name1 {
text-shadow: 0px 1px 1px rgba(255, 114, 114, 0.5);
}
.name2 {
text-shadow: 0px 1px 1px rgba(255, 177, 120, 0.5);
}
.name3 {
text-shadow: 0px 1px 1px rgba(246, 233, 129, 0.5);
}
.name4 {
text-shadow: 0px 1px 1px rgba(132, 191, 251, 0.5);
}
.rank_progress {
width: 100%;
display: flex;
height: 15%;
margin: 10px 0;
.progress-marker {
position: absolute;
top: -25px;
left: 0;
transform: translateX(-50%);
background-color: #1890ff;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
}
.num {
font-size: 14px;
font-family: "jiangcheng";
font-weight: normal;
font-style: italic;
// color: #ff4b4b;
}
.num1 {
color: #ff4b4b;
}
.num2 {
color: rgba(255, 108, 0, 1);
}
.num3 {
color: rgba(235, 217, 74, 1);
}
.num4 {
color: rgba(0, 159, 255, 1);
} }
:deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector){ .progress {
background-color: #2D58B8; width: 300px;
color: #99B1DD;
} }
} }
} }
......
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