Browse Source

首页完善

ljb 9 months ago
parent
commit
f04a05363e
2 changed files with 232 additions and 164 deletions
  1. 14 1
      src/components/year-month-select/index.vue
  2. 218 163
      src/views/wel/index.vue

+ 14 - 1
src/components/year-month-select/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="year-month-select">
-    <div class="year-warp" :style="`width: ${this.showMonth ? 95 : 220}px`">
+    <div class="year-warp" :style="`width: ${this.showMonth ? 95 : 190}px`">
       <el-date-picker
         v-model="year"
         type="year"
@@ -86,7 +86,14 @@ export default {
     this.initMonth();
   },
   mounted() {
+    const loading = this.$loading({
+      lock: true,
+      text: '页面加载中...',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    });
     getVipYears().then(({ data }) => {
+      loading.close();
       this.vipYearList = data.data.map(year => Number(year));
       let date = new Date();
       let currYear = date.getFullYear();
@@ -103,6 +110,8 @@ export default {
       this.month = currMonthStr;
 
       this.$emit("input", this.formatYearMonth(this.year, this.month));
+    }).catch(() => {
+      loading.close();
     });
   },
   methods: {
@@ -127,6 +136,10 @@ export default {
       return year + "" + month;
     },
     handleMonthClick(data) {
+      if (!this.vipYearList.length) {
+        this.$message.error("未开通权限!");
+        return;
+      }
       this.month = data.value;
       this.$emit("input", this.formatYearMonth(this.year, this.month));
     },

+ 218 - 163
src/views/wel/index.vue

@@ -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: {