|
@@ -1,50 +1,334 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div>
|
|
|
|
|
- <el-row>
|
|
|
|
|
|
|
+ <div class="home-contain">
|
|
|
|
|
+ <el-row :gutter="20" style="margin-top: 20px">
|
|
|
<el-col :span="24">
|
|
<el-col :span="24">
|
|
|
- <third-register></third-register>
|
|
|
|
|
|
|
+ <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-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
- <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>
|
|
|
|
|
+ </basic-card>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+
|
|
|
|
|
+ <el-row :gutter="20" style="margin-top: 20px">
|
|
|
<el-col :span="24">
|
|
<el-col :span="24">
|
|
|
- <basic-container>
|
|
|
|
|
- <p style="text-align: center">
|
|
|
|
|
- <img src="https://img.shields.io/badge/Release-V4.5.0-green.svg" alt="Downloads"/>
|
|
|
|
|
- <img src="https://img.shields.io/badge/JDK-17+-green.svg" alt="Build Status"/>
|
|
|
|
|
- <img src="https://img.shields.io/badge/Spring%20Cloud-2023-blue.svg" alt="Coverage Status"/>
|
|
|
|
|
- <img src="https://img.shields.io/badge/Spring%20Boot-3.2-blue.svg" alt="Downloads"/>
|
|
|
|
|
- </p>
|
|
|
|
|
- </basic-container>
|
|
|
|
|
|
|
+ <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-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
-
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- import {mapGetters} from "vuex";
|
|
|
|
|
|
|
+import basicCard from "@/components/basic-card";
|
|
|
|
|
+import basicChart from "@/components/basic-chart";
|
|
|
|
|
+import numStatistics from "./components/num-statistics.vue";
|
|
|
|
|
|
|
|
- export default {
|
|
|
|
|
- name: "wel",
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- activeNames: ['1', '2', '3', '5'],
|
|
|
|
|
- logActiveNames: ['41']
|
|
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: "home",
|
|
|
|
|
+ components: {
|
|
|
|
|
+ basicCard,
|
|
|
|
|
+ basicChart,
|
|
|
|
|
+ numStatistics
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ currYear: "2025",
|
|
|
|
|
+ topPie1Options: {},
|
|
|
|
|
+ topPie2Options: {},
|
|
|
|
|
+ ysBarOptions: {
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ top: "13%",
|
|
|
|
|
+ left: "12%",
|
|
|
|
|
+ right: "8%",
|
|
|
|
|
+ bottom: "8%",
|
|
|
|
|
+ },
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: "axis",
|
|
|
|
|
+ axisPointer: {
|
|
|
|
|
+ type: "shadow",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ data: ['预计研发投入金额', '实际已归集研发费用金额']
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ type: 'value'
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [6200, 4000],
|
|
|
|
|
+ type: 'bar',
|
|
|
|
|
+ barWidth: "25%",
|
|
|
|
|
+ label: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ position: "top"
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ },
|
|
|
|
|
+ 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 = {
|
|
|
|
|
+ title: {
|
|
|
|
|
+ text: "2025年科研费用(万元)",
|
|
|
|
|
+ left: "center",
|
|
|
|
|
+ },
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: "axis",
|
|
|
|
|
+ axisPointer: {
|
|
|
|
|
+ type: "shadow",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ left: "center",
|
|
|
|
|
+ bottom: 0,
|
|
|
|
|
+ },
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ top: "13%",
|
|
|
|
|
+ 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],
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
- computed: {
|
|
|
|
|
- ...mapGetters(["userInfo"]),
|
|
|
|
|
|
|
+ initYfffChartOptions() {
|
|
|
|
|
+ this.yffyPieOptions = this.getPieOptions("2025年研发费用(万元)", [
|
|
|
|
|
+ { value: 800, name: "人员人工费用" },
|
|
|
|
|
+ { value: 2400, name: "直接投入费用" },
|
|
|
|
|
+ { value: 500, name: "折旧费用与长期待摊费用" },
|
|
|
|
|
+ { value: 50, name: "无形资产摊销费用" },
|
|
|
|
|
+ { value: 100, name: "设计费用" },
|
|
|
|
|
+ { value: 100, name: "装备调试费用与试验费用" },
|
|
|
|
|
+ { value: 20, name: "委托外部研究开发费用" },
|
|
|
|
|
+ { 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: "其他成果" },
|
|
|
|
|
+ ]);
|
|
|
},
|
|
},
|
|
|
- methods: {
|
|
|
|
|
- handleChange(val) {
|
|
|
|
|
- window.console.log(val);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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: {
|
|
|
|
|
+ text: title,
|
|
|
|
|
+ left: "center",
|
|
|
|
|
+ },
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: "item",
|
|
|
|
|
+ },
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ orient: "vertical",
|
|
|
|
|
+ top: "center",
|
|
|
|
|
+ right: 0,
|
|
|
|
|
+ textStyle: {
|
|
|
|
|
+ rich: {
|
|
|
|
|
+ a: {
|
|
|
|
|
+ verticalAlign: "right",
|
|
|
|
|
+ align: "left",
|
|
|
|
|
+ width: 180,
|
|
|
|
|
+ fontSize: 14,
|
|
|
|
|
+ },
|
|
|
|
|
+ num: {
|
|
|
|
|
+ align: "right",
|
|
|
|
|
+ fontSize: 14,
|
|
|
|
|
+ color: "rgb(64, 158, 255)",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ formatter: function (name) {
|
|
|
|
|
+ let currItem = seriesData.find((item) => item.name === name);
|
|
|
|
|
+ let str = "{a|" + name + "}{num|" + currItem.value + "}";
|
|
|
|
|
+ return str;
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: title,
|
|
|
|
|
+ type: "pie",
|
|
|
|
|
+ radius: "50%",
|
|
|
|
|
+ radius: ["45%", "70%"],
|
|
|
|
|
+ center: ["25%", "50%"],
|
|
|
|
|
+ avoidLabelOverlap: false,
|
|
|
|
|
+ label: {
|
|
|
|
|
+ show: false,
|
|
|
|
|
+ position: "center",
|
|
|
|
|
+ },
|
|
|
|
|
+ labelLine: {
|
|
|
|
|
+ show: false,
|
|
|
|
|
+ },
|
|
|
|
|
+ data: seriesData,
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ };
|
|
|
|
|
+ return options;
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style>
|
|
|
|
|
- .el-font-size {
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.home-contain {
|
|
|
|
|
+ min-height: calc(100vh - 50px);
|
|
|
|
|
+ background-color: #eee;
|
|
|
|
|
+ padding: 16px 18px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
+.count {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: rgb(64, 158, 255);
|
|
|
|
|
+ margin: 0 3px;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|