|
|
@@ -1,94 +1,95 @@
|
|
|
<template>
|
|
|
<div class="home-contain">
|
|
|
- <el-row :gutter="20" style="margin-top: 20px">
|
|
|
- <el-col :span="24">
|
|
|
+
|
|
|
+
|
|
|
+ <div style="position: relative; padding: 16px 0; background-color: #fff;">
|
|
|
+ <div style="position: absolute; top: 20px; right: 20px;">
|
|
|
+ <year-month-select v-model="currYear" :showMonth="false" style="margin: 0;" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row gutter="80">
|
|
|
+ <el-col :span="8">
|
|
|
<basic-card title="研发项目情况">
|
|
|
- <el-row style="margin-top: 45px">
|
|
|
- <el-col :span="8">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="ysBarOptions"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div style="position: relative;">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="yffyPieOptions"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="yfhmProjectOptions"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <avue-data-display :option="projectTotalOpt"></avue-data-display>
|
|
|
+ <div style="position: relative;">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="projectStatusOpt"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </basic-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <basic-card title="研发费用情况">
|
|
|
+ <avue-data-display :option="RD_costOpt"></avue-data-display>
|
|
|
+ <div style="position: relative;">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="yffyPieOptions"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</basic-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
|
|
|
- <el-row :gutter="20" style="margin-top: 20px">
|
|
|
- <el-col :span="24">
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <el-row gutter="80">
|
|
|
+ <el-col :span="8">
|
|
|
<basic-card title="研发人员情况">
|
|
|
- <el-row style="margin-top: 45px">
|
|
|
- <el-col :span="8">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="ysBarOptions"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div style="position: relative;">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="yffyPieOptions"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="yfhmProjectOptions"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </basic-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
|
|
|
- <el-row :gutter="20" style="margin-top: 20px">
|
|
|
- <el-col :span="24">
|
|
|
- <basic-card title="本年度月研发归集趋势图">
|
|
|
- <el-row style="margin-top: 45px">
|
|
|
- <el-col :span="8">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="ysBarOptions"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div style="position: relative;">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="yffyPieOptions"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <basic-chart
|
|
|
- style="width: 100%; height: 300px"
|
|
|
- :options="yfhmProjectOptions"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div style="position: relative;">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="RD_personOpt"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </basic-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <basic-card title="知识产权情况">
|
|
|
+ <div style="position: relative;">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="zscqOpt"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</basic-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <basic-card title="本年度月研发归集趋势图">
|
|
|
+ <el-row style="margin-top: 45px">
|
|
|
+ <el-col :span="24">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="monthAggregationBarOpt"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </basic-card>
|
|
|
+
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <basic-card title="项目预算与归集趋势图">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="12">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="currYearBudgetOpt"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <basic-chart
|
|
|
+ style="width: 100%; height: 300px"
|
|
|
+ :options="fullCycleBudgetOpt"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </basic-card>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -96,25 +97,62 @@
|
|
|
import basicCard from "@/components/basic-card";
|
|
|
import basicChart from "@/components/basic-chart";
|
|
|
import numStatistics from "./components/num-statistics.vue";
|
|
|
+import YearMonthSelect from "@/components/year-month-select";
|
|
|
|
|
|
export default {
|
|
|
name: "home",
|
|
|
components: {
|
|
|
basicCard,
|
|
|
basicChart,
|
|
|
- numStatistics
|
|
|
+ numStatistics,
|
|
|
+ YearMonthSelect
|
|
|
},
|
|
|
data() {
|
|
|
+ let monthArr = [];
|
|
|
+ for(let i=0; i<12; i++) {
|
|
|
+ monthArr.push((i+1)+"月");
|
|
|
+ }
|
|
|
return {
|
|
|
- currYear: "2025",
|
|
|
- topPie1Options: {},
|
|
|
- topPie2Options: {},
|
|
|
- ysBarOptions: {
|
|
|
+ currYear: "",
|
|
|
+ projectTotalOpt: {
|
|
|
+ span: 24,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ icon: 'el-icon-view',
|
|
|
+ color: 'rgb(56, 161, 242)',
|
|
|
+ count: 100,
|
|
|
+ decimals: 0,
|
|
|
+ title: "项目总数",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ RD_costOpt: {
|
|
|
+ span: 24,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ icon: 'el-icon-view',
|
|
|
+ color: 'rgb(56, 161, 242)',
|
|
|
+ count: 1212121,
|
|
|
+ decimals: 2,
|
|
|
+ title: "研发费用(元)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 项目情况
|
|
|
+ projectStatusOpt: {},
|
|
|
+ // 研发费用情况
|
|
|
+ yffyPieOptions: {},
|
|
|
+ // 研发人员情况
|
|
|
+ RD_personOpt: {},
|
|
|
+ // 知识产权情况
|
|
|
+ zscqOpt: {},
|
|
|
+ // 本年度月研发归集趋势图
|
|
|
+ monthAggregationBarOpt: {
|
|
|
grid: {
|
|
|
- top: "13%",
|
|
|
- left: "12%",
|
|
|
- right: "8%",
|
|
|
- bottom: "8%",
|
|
|
+ top: "3%",
|
|
|
+ left: "3%",
|
|
|
+ right: "3%",
|
|
|
+ bottom: "10%",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
@@ -124,14 +162,19 @@ export default {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['预计研发投入金额', '实际已归集研发费用金额']
|
|
|
+ data: monthArr
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'value'
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: value => {
|
|
|
+ return value+" 元";
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- data: [6200, 4000],
|
|
|
+ data: [6200, 4000, 300, 200, 1000, 6000, 3000, 2000, 1500, 5000, 1600, 9000],
|
|
|
type: 'bar',
|
|
|
barWidth: "25%",
|
|
|
label: {
|
|
|
@@ -141,43 +184,55 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- yffyPieOptions: {},
|
|
|
- yfhmProjectOptions: {},
|
|
|
- zscqOptions: {},
|
|
|
- zlPieOptions: {},
|
|
|
- xxZlPieOptions: {},
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initTopPie1Options();
|
|
|
- this.initTopPie2Options();
|
|
|
- this.initYfffChartOptions();
|
|
|
- this.initYfhmProjectOptions();
|
|
|
- this.initZscqChartOptions();
|
|
|
- this.initZlChartOptions();
|
|
|
- this.initXxzlChartOptions();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initTopPie1Options() {
|
|
|
- this.topPie1Options = this.getPieOptions("", [
|
|
|
- { value: 21, name: "研发项目" },
|
|
|
- { value: 3, name: "终止项目" },
|
|
|
- { value: 11, name: "结题项目" },
|
|
|
- ]);
|
|
|
- },
|
|
|
- initTopPie2Options() {
|
|
|
- this.topPie2Options = this.getPieOptions("", [
|
|
|
- { value: 25, name: "自主研发项目" },
|
|
|
- { value: 5, name: "委外研发项目" },
|
|
|
- { value: 2, name: "集中研发项目" },
|
|
|
- { value: 3, name: "合作研发项目" },
|
|
|
- ]);
|
|
|
- },
|
|
|
- initYfhmProjectOptions() {
|
|
|
- this.yfhmProjectOptions = {
|
|
|
+ // 本年度项目预算与归集表
|
|
|
+ currYearBudgetOpt: {
|
|
|
title: {
|
|
|
- text: "2025年科研费用(万元)",
|
|
|
+ text: "本年度",
|
|
|
+ left: "13%",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
left: "center",
|
|
|
+ bottom: 0,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "16%",
|
|
|
+ left: "8%",
|
|
|
+ right: "2%",
|
|
|
+ bottom: "13%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["项目一", "项目二", "项目三", "项目四", "项目五", "项目六"],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "预算",
|
|
|
+ type: "bar",
|
|
|
+ data: [18203, 23489, 29034, 104970, 131744, 630230],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "归集",
|
|
|
+ type: "bar",
|
|
|
+ data: [19325, 23438, 31000, 121594, 134141, 681807],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 全周期项目预算与归集表
|
|
|
+ fullCycleBudgetOpt: {
|
|
|
+ title: {
|
|
|
+ text: "全周期",
|
|
|
+ left: "13%",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
@@ -190,7 +245,7 @@ export default {
|
|
|
bottom: 0,
|
|
|
},
|
|
|
grid: {
|
|
|
- top: "13%",
|
|
|
+ top: "16%",
|
|
|
left: "8%",
|
|
|
right: "2%",
|
|
|
bottom: "13%",
|
|
|
@@ -206,20 +261,48 @@ export default {
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: "已归集研发费用",
|
|
|
+ name: "预算",
|
|
|
type: "bar",
|
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230],
|
|
|
},
|
|
|
{
|
|
|
- name: "全年研发投入金额",
|
|
|
+ name: "归集",
|
|
|
type: "bar",
|
|
|
data: [19325, 23438, 31000, 121594, 134141, 681807],
|
|
|
},
|
|
|
],
|
|
|
- };
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initProjectStatusOptions();
|
|
|
+ this.initRdPersonOptions();
|
|
|
+ this.initZscqOptions();
|
|
|
+ this.initYfffChartOptions();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initProjectStatusOptions() {
|
|
|
+ this.projectStatusOpt = this.getPieOptions("", [
|
|
|
+ { value: 21, name: "开展中" },
|
|
|
+ { value: 3, name: "已结题" },
|
|
|
+ { value: 3, name: "项目暂停" },
|
|
|
+ { value: 3, name: "项目终止" },
|
|
|
+ ]);
|
|
|
+ },
|
|
|
+ initRdPersonOptions() {
|
|
|
+ this.RD_personOpt = this.getPieOptions("", [
|
|
|
+ { value: 21, name: "全职" },
|
|
|
+ { value: 3, name: "非全职" },
|
|
|
+ ]);
|
|
|
+ },
|
|
|
+ initZscqOptions() {
|
|
|
+ this.zscqOpt = this.getPieOptions("", [
|
|
|
+ { value: 30, name: "申请数" },
|
|
|
+ { value: 29, name: "授权数" },
|
|
|
+ ]);
|
|
|
},
|
|
|
initYfffChartOptions() {
|
|
|
- this.yffyPieOptions = this.getPieOptions("2025年研发费用(万元)", [
|
|
|
+ this.yffyPieOptions = this.getPieOptions("", [
|
|
|
{ value: 800, name: "人员人工费用" },
|
|
|
{ value: 2400, name: "直接投入费用" },
|
|
|
{ value: 500, name: "折旧费用与长期待摊费用" },
|
|
|
@@ -230,34 +313,6 @@ export default {
|
|
|
{ value: 30, name: "其他费用" },
|
|
|
]);
|
|
|
},
|
|
|
- initZscqChartOptions() {
|
|
|
- this.zscqOptions = this.getPieOptions("知识产权申报情况", [
|
|
|
- { value: 5, name: "发明专利" },
|
|
|
- { value: 20, name: "实用新型专利" },
|
|
|
- { value: 15, name: "软件著作权" },
|
|
|
- { value: 5, name: "技术标注" },
|
|
|
- { value: 8, name: "科研论文" },
|
|
|
- { value: 6, name: "其他成果" },
|
|
|
- ]);
|
|
|
- },
|
|
|
- initZlChartOptions() {
|
|
|
- this.zlPieOptions = this.getPieOptions("知识产权获得情况", [
|
|
|
- { value: 2, name: "发明专利" },
|
|
|
- { value: 9, name: "实用新型专利" },
|
|
|
- { value: 10, name: "软件著作权" },
|
|
|
- { value: 1, name: "技术标注" },
|
|
|
- { value: 3, name: "科研论文" },
|
|
|
- { value: 5, name: "其他成果" },
|
|
|
- ]);
|
|
|
- },
|
|
|
- initXxzlChartOptions() {
|
|
|
- this.xxZlPieOptions = this.getPieOptions("各子公司实用新型专利数量", [
|
|
|
- { value: 5, name: "银漫矿业" },
|
|
|
- { value: 2, name: "融冠矿业" },
|
|
|
- { value: 3, name: "荣邦矿业" },
|
|
|
- { value: 1, name: "乾金达矿业" },
|
|
|
- ]);
|
|
|
- },
|
|
|
getPieOptions(title, seriesData) {
|
|
|
let options = {
|
|
|
title: {
|