推进项目

src/layout/components/Navbar.vue

@@ -8,13 +8,13 @@
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
+<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
+<!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
+<!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
+<!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 

src/views/login.vue

@@ -161,8 +161,9 @@ getCookie();
 <style lang='scss' scoped>
 .login {
   display: flex;
-  justify-content: right;
-  padding-right: 170px;
+  //justify-content: right;
+  justify-content: center;
+  //padding-right: 170px;
   align-items: center;
   height: 100%;
   background-image:

src/views/qyjydtfx/dkfx/index.vue

@@ -1,70 +1,3 @@
-<template>
-  <div class="container mx-auto p-4">
-    <el-row>
-      <el-col :span="4" :offset="10">
-        <h1 class="text-2xl font-bold mb-4 text-center text-gray-800">贷款数据可视化</h1>
-      </el-col>
-      <el-col :span="8" :offset="2">
-        <el-card class="box-card w-500px">
-          <template #header>
-            <div class="card-header">
-              <span>贷款总额 (万元)</span>
-            </div>
-          </template>
-          <div class="text-2xl font-bold">{{ totalLoanAmount }}</div>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-form :inline="true" @submit.prevent="fetchData" class="mb-4">
-      <el-form-item label="年份" required>
-        <el-input v-model="year" placeholder="年份" :rules="[{ required: true, message: '年份为必填项' }]"></el-input>
-      </el-form-item>
-      <el-form-item label="月份" required>
-        <el-select v-model="month" class="w-100px" placeholder="月份" :rules="[{ required: true, message: '月份为必填项' }]">
-          <el-option v-for="m in 12" :key="m" :label="m" :value="m.toString()"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="fetchData" :disabled="!year || !month">搜索</el-button>
-      </el-form-item>
-    </el-form>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>贷款企业数量</span>
-          </div>
-        </template>
-        <div class="text-2xl font-bold">{{ companyNum }}</div>
-      </el-card>
-
-    </div>
-
-    <!-- Loan Amount and Repaid Principal Chart -->
-    <div ref="chartRef" style="width: 100%; height: 400px;" class="mb-4"></div>
-
-    <div class="flex">
-      <!-- Total Loan Amount Distribution Chart -->
-      <div ref="pieChartRef" style="width: 100%; height: 400px;" class="mb-4"></div>
-
-      <!-- Bank Loan Percentage Chart -->
-      <div ref="bankLoanChartRef" style="width: 100%; height: 400px;" class="mb-4"></div>
-    </div>
-
-    <el-table :data="loanData" style="width: 100%" stripe border class="mb-4">
-      <el-table-column prop="disbursementDate" label="放款日期" width="120"></el-table-column>
-      <el-table-column prop="enterpriseName" label="企业名称" width="180"></el-table-column>
-      <el-table-column prop="limitTime" label="还款时间" width="120"></el-table-column>
-      <el-table-column prop="loanAmount" label="贷款金额(万元)" width="120"></el-table-column>
-      <el-table-column prop="nowOfYear" label="当前年份" width="100"></el-table-column>
-      <el-table-column prop="repaidPrincipal" label="已还本金(万元)" width="120"></el-table-column>
-      <el-table-column prop="uniCode" label="统一社会信用代码"></el-table-column>
-    </el-table>
-  </div>
-</template>
-
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import request from "@/utils/request.js";
@@ -73,7 +6,7 @@ import { ElMessage } from "element-plus";
 
 const loanData = ref([]);
 const year = ref('2024');
-const month = ref('1');
+const month = ref(null);
 const chartRef = ref(null);
 const pieChartRef = ref(null);
 const bankLoanChartRef = ref(null);
@@ -85,7 +18,12 @@ const totalLoanAmount = ref(0);
 const bankLoanPercentageData = ref([]);
 
 const fetchData = async () => {
-  if (!year.value || !month.value) {
+  // if (!year.value || !month.value) {
+  //   ElMessage.warning('请填写年份和月份');
+  //   return;
+  // }
+
+  if (!year.value) {
     ElMessage.warning('请填写年份和月份');
     return;
   }
@@ -128,10 +66,10 @@ const updateChart = () => {
       }
     },
     legend: {
-      data: ['贷款金额', '已还本金'],
-      top: 30
+      data: ['贷款金额(万元)', '已还本金(万元)'],
+      top:30
     },
-    xAxis: {
+    yAxis: {  // 将 xAxis 改为 yAxis
       type: 'category',
       data: loanData.value.map(item => item.enterpriseName),
       axisLabel: {
@@ -139,7 +77,7 @@ const updateChart = () => {
         interval: 0
       }
     },
-    yAxis: {
+    xAxis: {  // 将 yAxis 改为 xAxis
       type: 'value',
       name: '金额(万元)'
     },
@@ -160,7 +98,16 @@ const updateChart = () => {
           color: '#2ecc71'
         }
       }
-    ]
+    ],
+    dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
+      type: 'inside', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
+      yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
+      start: 100, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
+      end: month.value ?50:95, // 数据窗口范围的结束百分比, 表示到60%的位置结束
+      moveOnMouseWheel: true, // 启用滚轮滚动
+      moveOnMouseMove: false,
+      zoomOnMouseWheel: false,
+    }]
   };
 
   chart.setOption(option);
@@ -275,6 +222,74 @@ onUnmounted(() => {
 });
 </script>
 
+<template>
+  <div class="container mx-auto p-4">
+    <el-row>
+      <el-col :span="4" :offset="10">
+        <h1 class="text-2xl font-bold mb-4 text-center text-gray-800">贷款数据可视化</h1>
+      </el-col>
+      <el-col :span="8" :offset="2">
+
+      </el-col>
+    </el-row>
+
+    <el-form :inline="true" @submit.prevent="fetchData" class="mb-4">
+      <el-form-item label="年份" required>
+        <el-input v-model="year" placeholder="年份" :rules="[{ required: true, message: '年份为必填项' }]"></el-input>
+      </el-form-item>
+      <el-form-item label="月份">
+        <el-select clearable v-model="month" class="w-100px" placeholder="月份" :rules="[{ required: true, message: '月份为必填项' }]">
+          <el-option v-for="m in 12" :key="m" :label="m" :value="m.toString()"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+<!--        <el-button type="primary" @click="fetchData" :disabled="!year || !month">搜索</el-button>-->
+        <el-button type="primary" @click="fetchData" :disabled="!year">搜索</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
+            <span>贷款企业数量</span>
+          </div>
+        </template>
+        <div class="text-2xl font-bold">{{ companyNum }}</div>
+      </el-card>
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
+            <span>贷款总额 (万元)</span>
+          </div>
+        </template>
+        <div class="text-2xl font-bold">{{ totalLoanAmount }}</div>
+      </el-card>
+    </div>
+
+    <!-- Loan Amount and Repaid Principal Chart -->
+    <div ref="chartRef" style="width: 100%; height: 400px;" class="mb-4"></div>
+
+    <div class="flex">
+      <!-- Total Loan Amount Distribution Chart -->
+      <div ref="pieChartRef" style="width: 100%; height: 400px;" class="mb-4"></div>
+
+      <!-- Bank Loan Percentage Chart -->
+      <div ref="bankLoanChartRef" style="width: 100%; height: 400px;" class="mb-4"></div>
+    </div>
+
+    <el-table :data="loanData" style="width: 100%" stripe border class="mb-4">
+      <el-table-column prop="disbursementDate" label="放款日期" width="120"></el-table-column>
+      <el-table-column prop="enterpriseName" label="企业名称" width="180"></el-table-column>
+      <el-table-column prop="limitTime" label="还款时间" width="120"></el-table-column>
+      <el-table-column prop="loanAmount" label="贷款金额(万元)" width="120"></el-table-column>
+      <el-table-column prop="nowOfYear" label="当前年份" width="100"></el-table-column>
+      <el-table-column prop="repaidPrincipal" label="已还本金(万元)" width="120"></el-table-column>
+      <el-table-column prop="uniCode" label="统一社会信用代码"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
 <style scoped>
 .box-card {
   margin-bottom: 20px;

vite.config.js

@@ -32,8 +32,8 @@ export default defineConfig(({ mode, command }) => {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
           // target: 'http://localhost:8900/background',
-          target: 'http://localhost:18902',
-          // target: 'http://42.48.99.5:8900/background',
+          // target: 'http://localhost:18902',
+          target: 'http://42.48.99.5:8900/background',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }