首页补充接口

src/api/home.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+// 获取柱状图数据
+export function getBarData() {
+    return request({
+        url: '/industry_oveview/industry_oveview/i_all_list',
+        method: 'get'
+    })
+}
+// 获取饼图数据
+export function getPieData() {
+    return request({
+        url: '/industry_oveview/industry_oveview/i_list',
+        method: 'get'
+    })
+}
+// 获取首页数据
+export function getIndexData(query) {
+    return request({
+        url: '/industry_oveview/industry_oveview/list',
+        method: 'get',
+        params: query
+    })
+}

src/views/index.vue

@@ -1,5 +1,5 @@
 <template>
-<!-- 首页 - littlegreen -->
+  <!-- 首页 - littlegreen -->
   <div :class="className" :style="{ height: '100%', width: width }">
     <el-row
       :gutter="20"
@@ -10,15 +10,25 @@
         <el-card>
           <div class="i-gq">
             <h3 class="i-title">政府与企业总投入</h3>
-            <el-dropdown >
-              <span class="el-dropdown-link" style="color: black;font-size: 16px;font-weight: bold;">
-                {{ selectYear }}
-                <i class="el-icon-arrow-down el-icon--right" style="font-size: 16px;font-weight: bold;"></i>
+            <el-dropdown>
+              <span
+                class="el-dropdown-link"
+                style="color: black; font-size: 16px; font-weight: bold"
+              >
+                {{ selectYearName }}
+                <i
+                  class="el-icon-arrow-down el-icon--right"
+                  style="font-size: 16px; font-weight: bold"
+                ></i>
                 <!-- <i class="el-icon-sort el-icon--right" style="font-size: 16px;font-weight: bold;transform:rotate(90deg)"></i> -->
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="(data, i) in yearDataList" :key="i" @click.native="handleDrop(data)">
-                  {{data.name}}
+                <el-dropdown-item
+                  v-for="(data, i) in yearDataList"
+                  :key="i"
+                  @click.native="handleDrop(data)"
+                >
+                  {{ data.name }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
@@ -27,27 +37,41 @@
             <el-col :span="6">
               <div>
                 <p class="i-name">土地/亩</p>
-                <p class="i-number">500</p>
+                <p class="i-number">
+                  {{ indexData.landArea ? indexData.landArea : "-" }}
+                </p>
               </div>
             </el-col>
             <el-col :span="6"
               ><div>
                 <p class="i-name">电力/万千瓦时</p>
-                <p class="i-number">4185</p>
+                <p class="i-number">
+                  {{
+                    indexData.powerConsumeSum ? indexData.powerConsumeSum : "-"
+                  }}
+                </p>
               </div></el-col
             >
             <el-col :span="6"
               ><div>
                 <p class="i-name">天然气/立方米</p>
-                <p class="i-number">33284</p>
+                <p class="i-number">
+                  {{
+                    indexData.energyConsumeSum
+                      ? indexData.energyConsumeSum
+                      : "-"
+                  }}
+                </p>
               </div></el-col
             >
             <el-col :span="6">
               <div>
                 <p class="i-name">研发经费/万元</p>
-                <p class="i-number">14299</p>
+                <p class="i-number">
+                  {{ indexData.fundingSum ? indexData.fundingSum : "-" }}
+                </p>
               </div>
-              </el-col>
+            </el-col>
           </el-row>
         </el-card>
       </el-col>
@@ -84,19 +108,33 @@
             <el-col :span="24"
               ><div class="i-out-box">
                 <p class="i-name">工业总产值/万元</p>
-                <p class="i-number">54252622</p>
+                <p class="i-number">
+                  {{
+                    indexData.totalIndustrialValueSum
+                      ? indexData.totalIndustrialValueSum
+                      : "-"
+                  }}
+                </p>
               </div></el-col
             >
             <el-col :span="24"
               ><div class="i-out-box">
                 <p class="i-name">应税收入/万元</p>
-                <p class="i-number">41857</p>
+                <p class="i-number">
+                  {{
+                    indexData.taxableIncomeSum
+                      ? indexData.taxableIncomeSum
+                      : "-"
+                  }}
+                </p>
               </div></el-col
             >
             <el-col :span="24"
               ><div class="i-out-box">
                 <p class="i-name">实缴税金/万元</p>
-                <p class="i-number">33651</p>
+                <p class="i-number">
+                  {{ indexData.paidTaxSum ? indexData.paidTaxSum : "-" }}
+                </p>
               </div></el-col
             >
           </el-row>
@@ -121,6 +159,7 @@
 <script>
 import * as echarts from "echarts";
 import resize from "./dashboard/mixins/resize";
+import { getBarData, getPieData, getIndexData } from "@/api/home";
 export default {
   mixins: [resize],
   props: {
@@ -140,24 +179,42 @@ export default {
   data() {
     return {
       chart: null,
+      chartData: [],
       piechart: null,
-      yearDataList:[
-        {
-          name: "总和"
-        },
+      pieChartData: [],
+      yearDataList: [
         {
-          name: "2023"
+          name: "总和",
+          key: 0,
         },
-        {
-          name: "2024"
-        }
       ],
-      selectYear: "总和"
+      selectYearName: "总和",
+      selectYear: 0,
+      indexData: {
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        id: null,
+        year: null,
+        landArea: null,
+        powerConsumeSum: null,
+        energyConsumeSum: null,
+        fundingSum: null,
+        employeeNumberSum: null,
+        profitSum: null,
+        enterpriseNumbers: null,
+        totalIndustrialValueSum: null,
+        taxableIncomeSum: null,
+        paidTaxSum: null,
+      },
     };
   },
   mounted() {
-    this.initChart();
-    this.initPieChart();
+    this.fetchData();
+    // this.initChart();
+    // this.initPieChart();
   },
   beforeDestroy() {
     if (this.chart) {
@@ -174,8 +231,8 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.chart);
+      console.log(this.chartData);
       // 饼图
-      //
       this.chart.setOption(
         {
           tooltip: {
@@ -186,16 +243,16 @@ export default {
           },
           dataZoom: [
             {
-              type: 'slider',
+              type: "slider",
               yAxisIndex: 0,
               left: 0,
-              start: 80,
-              end: 100
+              start: 95,
+              end: 100,
             },
             {
-              type: 'inside',
-              yAxisIndex: 0
-            }
+              type: "inside",
+              yAxisIndex: 0,
+            },
           ],
           legend: {},
           grid: {
@@ -212,29 +269,13 @@ export default {
           yAxis: {
             type: "category",
             // inverse: true,
-            data: [
-              "文教、工美、体育和娱乐用品制造业",
-              "文教、工美、体育和娱乐用品制造12",
-              "文教、工美、体育和娱乐用品制造业67",
-              "文教、工美、体育和娱乐用品制造业89",
-              "文教、工美、体育和娱乐用品制造业90",
-              "文教、工美、体育和娱乐用品制造业23",
-              "文教、工美、体育和娱乐用品制造业21",
-              "文教、工美、体育和娱乐用品制造业22",
-              "文教、工美、体育和娱乐用品制造业334",
-              "文教、工美、体育和娱乐用品制造业77",
-              "文教、工美、体育和娱乐用品制造业78",
-              "文教、工美、体育和娱乐用品制造业79",
-              "文教、工美、体育和娱乐用品制造业71",
-              "文教、工美、体育和娱乐用品制造业72",
-              "文教、工美、体育和娱乐用品制造业73",
-            ],
+            data: this.chartData.map((item) => item.industryName),
           },
           series: [
             {
               // realtimeSort: true,
               type: "bar",
-              data: [60, 50, 40, 30, 20, 10, 32, 45, 78, 99,33,44,55,66,77],
+              data: this.chartData.map((item) => item.number),
               label: {
                 show: true,
                 formatter: "{c}",
@@ -333,6 +374,13 @@ export default {
       if (this.piechart) {
         this.piechart.dispose();
       }
+      // console.log(this.pieChartData);
+      let chartArray = this.pieChartData.map((item) => {
+        return {
+          value: item.number,
+          name: item.industryName,
+        };
+      });
       this.piechart = echarts.init(this.$refs.piechart);
       this.piechart.setOption({
         tooltip: {
@@ -352,36 +400,68 @@ export default {
             label: {
               show: true,
             },
-            // emphasis: {
-            //   label: {
-            //     show: false,
-            //     fontSize: 40,
-            //     fontWeight: "bold",
-            //   },
-            // },
             labelLine: {
               show: true,
             },
-            data: [
-              { value: 1048, name: "文教、工美、体育和娱乐用品制造业" },
-              { value: 735, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
-              { value: 580, name: "电气机械和器材制造业" },
-              { value: 484, name: "印刷和记录媒介复制业" },
-              { value: 300, name: "电气机械和器材制造业" },
-              { value: 300, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
-              { value: 300, name: "金属制品业" },
-              { value: 300, name: "农副食品加工业" },
-              { value: 300, name: "酒、饮料和精制茶制造业" },
-              { value: 300, name: "其他" },
-            ],
+            data: chartArray,
           },
         ],
       });
     },
     // 切换年份
-    handleDrop(e){
-      this.selectYear = e?.name
-    }
+    handleDrop(e) {
+      this.selectYear = e?.key;
+      this.selectYearName = e?.name;
+      this.updateData(this.selectYear);
+    },
+    fetchData() {
+      getBarData()
+        .then((res) => {
+          if (res && res?.rows) {
+            this.chartData = res.rows;
+            this.initChart();
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
+      getPieData()
+        .then((res) => {
+          if (res && res?.rows) {
+            this.pieChartData = res.rows;
+            this.initPieChart();
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
+      this.updateData(this.selectYear);
+    },
+    updateData(year) {
+      const that = this;
+      getIndexData({
+        year: year,
+      })
+        .then((res) => {
+          that.indexData = res?.rows[0];
+          let arr = res?.rows[0].years.map((item) => {
+            return {
+              name: item,
+              key: item,
+            };
+          });
+          that.yearDataList = [
+            {
+              name: "总和",
+              key: 0,
+            },
+            ...arr,
+          ];
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
+    },
   },
 };
 </script>