| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518 |
- <template>
- <div class="home-contain" v-loading="loading">
-
- <div style="position: relative; padding: 16px 0; background-color: #fff;">
- <div style="position: absolute; top: 20px; right: 20px; z-index: 99;">
- <div style="display: flex; align-items: center;">
- <year-month-select v-model="currYear" :showMonth="false" style="margin: 0;" />
- <el-button type="primary" size="mini" icon="el-icon-search" style="margin-left: 12px;" @click="handleSearchBtn">查询</el-button>
- </div>
- </div>
- <el-row gutter="20">
- <el-col :span="9">
- <basic-card title="研发项目情况">
- <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="9">
- <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-divider></el-divider>
- <el-row gutter="20">
- <el-col :span="9">
- <basic-card title="研发人员情况">
- <avue-data-display :option="RD_person_zb_opt"></avue-data-display>
- <div style="position: relative;">
- <basic-chart
- style="width: 100%; height: 300px"
- :options="RD_personOpt"
- />
- </div>
- </basic-card>
- </el-col>
- <el-col :span="9">
- <basic-card title="知识产权情况">
- <avue-data-display :option="zscqTotalOpt"></avue-data-display>
- <div style="position: relative;">
- <basic-chart
- style="width: 100%; height: 300px"
- :options="zscqOpt"
- />
- </div>
- </basic-card>
- </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>
- <script>
- 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";
- import { getProjectListByYear } from "@/api/projectManage/projectList";
- import { getList as getCostSummaryList } from "@/api/yfCostManage/yfCostStatistics/yfCostSummaryList";
- import { getList as getZlList } from "@/api/achievement/patentAchievement";
- import { getList as getCyPersonList } from "@/api/techPerson/cyPersonRoster";
- import Decimal from "decimal.js";
- export default {
- name: "home",
- components: {
- basicCard,
- basicChart,
- numStatistics,
- YearMonthSelect
- },
- data() {
- let monthArr = [];
- for(let i=0; i<12; i++) {
- monthArr.push((i+1)+"月");
- }
- return {
- loading: false,
- currYear: "",
- projectTotal: 0,
- costAmount: 0,
- yfPersonZb: 0, // 研发人员占比
- zscqTotal: 0,
-
- // 项目情况
- projectStatusOpt: {},
- // 研发费用情况
- yffyPieOptions: {},
- // 研发人员情况
- RD_personOpt: {},
- // 知识产权情况
- zscqOpt: {},
- // 本年度月研发归集趋势图
- monthAggregationBarOpt: {},
- // 本年度项目预算与归集表
- currYearBudgetOpt: {
- title: {
- 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",
- 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],
- },
- ],
- }
- };
- },
- computed: {
- projectTotalOpt() {
- return {
- span: 24,
- data: [
- {
- icon: 'el-icon-view',
- color: 'rgb(56, 161, 242)',
- count: this.projectTotal,
- decimals: 0,
- title: "项目总数",
- },
- ],
- }
- },
- RD_costOpt() {
- return {
- span: 24,
- data: [
- {
- icon: 'el-icon-view',
- color: 'rgb(56, 161, 242)',
- count: this.costAmount,
- decimals: 2,
- title: "研发费用(元)",
- },
- ],
- }
- },
- RD_person_zb_opt() {
- return {
- span: 24,
- data: [
- {
- icon: 'el-icon-view',
- color: 'rgb(56, 161, 242)',
- count: this.yfPersonZb,
- decimals: 2,
- title: "研发人员占比(%)",
- },
- ],
- }
- },
- zscqTotalOpt() {
- return {
- span: 24,
- data: [
- {
- icon: 'el-icon-view',
- color: 'rgb(56, 161, 242)',
- count: this.zscqTotal,
- decimals: 0,
- title: "知识产权总数",
- },
- ],
- }
- }
- },
- watch: {
- currYear() {
- this.getProjectListByYearFunc();
- this.getCostSummaryListFunc();
- this.getZlListFunc();
- this.getCyPersonListFunc();
- }
- },
- methods: {
- handleSearchBtn() {
- this.getProjectListByYearFunc();
- this.getCostSummaryListFunc();
- this.getZlListFunc();
- this.getCyPersonListFunc();
- },
- getProjectListByYearFunc() {
- getProjectListByYear({ year: this.currYear }).then(({ data }) => {
- let _projectList = data.data;
- this.projectTotal = _projectList.length;
- this.projectStatusOpt = this.getPieOptions("研发项目情况", [
- { value: _projectList.filter(item => item.status == 1).length, name: "开展中" },
- { value: _projectList.filter(item => item.status == 2).length, name: "已结题" },
- { value: _projectList.filter(item => item.status == 3).length, name: "项目暂停" },
- { value: _projectList.filter(item => item.status == 4).length, name: "项目终止" },
- ]);
- });
- },
- // 获取费用统计数据
- getCostSummaryListFunc() {
- this.loading = true;
- getCostSummaryList({ yearAndMonth: `${this.currYear}12` }).then(({ data }) => {
- this.loading = false;
- let costList = data.data;
- let ryrgfyTotal = new Decimal(0); // 人员人工费用
- let zjtrfyTotal = new Decimal(0); // 直接投入费用
- let zjfyycqdtfyTotal = new Decimal(0); // 折旧费用和长期待摊费用
- let sjfyTotal = new Decimal(0); // 设计费用
- let wxzctxfyTotal = new Decimal(0); // 无形资产摊销费用
- let zbtsfyysyfyTotal = new Decimal(0); // 装备调试费用与试验费用
- let qtfyTotal = new Decimal(0); // 其他费用
- let wwfyTotal = new Decimal(0); // 委外费用
- let monthArr = [];
- let monthSalesArr = [];
- costList.forEach(item => {
- ryrgfyTotal = ryrgfyTotal.add(new Decimal(item.ryrgfy));
- zjtrfyTotal = zjtrfyTotal.add(new Decimal(item.zjtrfy));
- zjfyycqdtfyTotal = zjfyycqdtfyTotal.add(new Decimal(item.zjfyycqdtfy));
- sjfyTotal = sjfyTotal.add(new Decimal(item.sjfy));
- wxzctxfyTotal = wxzctxfyTotal.add(new Decimal(item.wxzctxfy));
- zbtsfyysyfyTotal = zbtsfyysyfyTotal.add(new Decimal(item.zbtsfyysyfy));
- qtfyTotal = qtfyTotal.add(new Decimal(item.qtfy));
- wwfyTotal = wwfyTotal.add(new Decimal(item.wwfy));
- monthArr.push(item.yearAndMonth);
- monthSalesArr.push(Number(new Decimal(item.total).div(new Decimal(0.8))));
- });
- // 研发费用总额
- let costAmount = ryrgfyTotal
- .add(zjtrfyTotal)
- .add(zjfyycqdtfyTotal)
- .add(sjfyTotal)
- .add(wxzctxfyTotal)
- .add(zbtsfyysyfyTotal)
- .add(qtfyTotal)
- .add(wwfyTotal)
- this.costAmount = costAmount.toFixed(2);
- this.yffyPieOptions = this.getPieOptions("研发费用情况", [
- { value: Number(ryrgfyTotal), name: "人员人工费用" },
- { value: Number(zjtrfyTotal), name: "直接投入费用" },
- { value: Number(zjfyycqdtfyTotal), name: "折旧费用与长期待摊费用" },
- { value: Number(wxzctxfyTotal), name: "无形资产摊销费用" },
- { value: Number(sjfyTotal), name: "设计费用" },
- { value: Number(zbtsfyysyfyTotal), name: "装备调试费用与试验费用" },
- { value: Number(wwfyTotal), name: "委托外部研究开发费用" },
- { value: Number(qtfyTotal), name: "其他费用" },
- ]);
- // 本年度月研发归集趋势图
- this.monthAggregationBarOpt = {
- grid: {
- top: "3%",
- left: "3%",
- right: "3%",
- bottom: "10%",
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- xAxis: {
- type: 'category',
- data: monthArr
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- formatter: value => {
- return value+" 元";
- }
- }
- },
- series: [
- {
- data: monthSalesArr,
- type: 'bar',
- barWidth: "25%",
- label: {
- show: true,
- position: "top"
- }
- }
- ]
- }
- }).catch(err => {
- this.loading = false;
- })
- },
- // 获取专利数据
- getZlListFunc() {
- getZlList(1, 99999).then(({ data }) => {
- let _zscqList = data.data.records;
- this.zscqTotal = _zscqList.length;
- // 授权数
- let sqListTotal = _zscqList.filter(item => item.flzt == '授权有效').length;
- this.zscqOpt = this.getPieOptions("", [
- { value: _zscqList.length - sqListTotal, name: "申请数" },
- { value: sqListTotal, name: "授权数" },
- ]);
- });
- },
- // 获取年度参研人员
- getCyPersonListFunc() {
- getCyPersonList(1, 99999, { yearAndMonth: this.currYear }).then(({ data }) => {
- let _personList = data.data.records;
- let yfPersonList = _personList.filter(item => item.personnelType == '研发人员');
- this.yfPersonZb = ((yfPersonList.length / _personList.length) * 100).toFixed(2);
- this.RD_personOpt = this.getPieOptions("", [
- { value: _personList.filter(item => item.situation == '全职').length, name: "全职" },
- { value: _personList.filter(item => item.situation == '非全职').length, name: "非全职" },
- ]);
- });
- },
- getPieOptions(title, seriesData) {
- let options = {
- title: {
- text: title,
- left: "center",
- show: false
- },
- tooltip: {
- trigger: "item",
- },
- legend: {
- orient: "vertical",
- top: "center",
- right: 0,
- textStyle: {
- rich: {
- a: {
- verticalAlign: "right",
- align: "left",
- width: 160,
- 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>
- <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>
|