1.首页优化

src/views/home/index.vue

@@ -4,9 +4,9 @@
       <div class="words">
         <h1>渐进、交互式文档生成</h1>
         <p>
-          覆盖房地产、土地和各类资产评估报告自动生成。<br>
-          支持测算表生成和下载，亦可以应用于文档。<br>
-          用户仅需提交必要评估物数据和测算数据，由平台自动生成商业级评估报告。
+          覆盖房地产、土地和各类资产评估报告自动生成。
+          <br />支持测算表生成和下载，亦可以应用于文档。
+          <br />用户仅需提交必要评估物数据和测算数据，由平台自动生成商业级评估报告。
         </p>
       </div>
       <div style="display:flex;">
@@ -16,8 +16,8 @@
               房地产
               <div class="icon">
                 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M0 0h24v24H0z" fill="none"></path>
-                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor"></path>
+                  <path d="M0 0h24v24H0z" fill="none" />
+                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor" />
                 </svg>
               </div>
             </button>
@@ -25,8 +25,8 @@
               资产
               <div class="icon">
                 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M0 0h24v24H0z" fill="none"></path>
-                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor"></path>
+                  <path d="M0 0h24v24H0z" fill="none" />
+                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor" />
                 </svg>
               </div>
             </button>
@@ -34,8 +34,8 @@
               土地
               <div class="icon">
                 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M0 0h24v24H0z" fill="none"></path>
-                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor"></path>
+                  <path d="M0 0h24v24H0z" fill="none" />
+                  <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor" />
                 </svg>
               </div>
             </button>
@@ -43,28 +43,36 @@
           <div class="example-list" style="min-height:500px;">
             <div class="input-container">
               <el-input v-model="listQuery.docName" style="max-width: 300px; margin-bottom: 10px;" placeholder="关键字搜索" class="input-with-select">
-              <template #append>
-                <el-button type="primary" @click="getDocuments()"><el-icon color="#ff6154"><Search /></el-icon></el-button>
-              </template>
-            </el-input>
+                <template #append>
+                  <el-button type="primary" @click="getDocuments()">
+                    <el-icon color="#ff6154">
+                      <Search />
+                    </el-icon>
+                  </el-button>
+                </template>
+              </el-input>
             </div>
             <div class="dayChoice_div">
-              <el-button link style="border:0;width:10px;margin-right: 10px;" @click="activeBtn--, choiceDay(activeBtn)" :disabled="activeBtn <= 0"><el-icon>
+              <el-button link style="border:0;width:10px;margin-right: 10px;" @click="activeBtn--, choiceDay(activeBtn)" :disabled="activeBtn <= 0">
+                <el-icon>
                   <Back />
-                </el-icon></el-button>
+                </el-icon>
+              </el-button>
               <el-button v-for="(item, index) in days" :key="index" text :class="{ show: index === activeBtn }" style="border:0;width:10px;margin:0" @click="choiceDay(index)">{{ item.id }}</el-button>
-              <el-button link style="border:0;width:10px" @click="activeBtn++, choiceDay(activeBtn)" :disabled="activeBtn >= (days.length - 1)"><el-icon>
+              <el-button link style="border:0;width:10px" @click="activeBtn++, choiceDay(activeBtn)" :disabled="activeBtn >= (days.length - 1)">
+                <el-icon>
                   <Right />
-                </el-icon></el-button>
+                </el-icon>
+              </el-button>
             </div>
-            <el-card class="report-item no-border" shadow="never" v-for="(doc, id) in page">
+            <el-card class="report-item no-border" shadow="never" v-for="(doc, id) in page" v-if="page !== null && page.length !== 0">
               <div class="report-icon">
                 <img :src="docLog(doc.docType)" style="width: 52px; height: 52px;" />
               </div>
               <div class="report-text">
                 <div>
                   <span class="report-text-type">{{ doc.businessType + doc.businessCate + '【' + doc.docNo + '】' }}</span>
-                  <span> 一 </span>
+                  <span>一</span>
                   <span class="report-text-name">{{ doc.docName }}</span>
                 </div>
                 <div style="padding-top: 5px;">
@@ -72,18 +80,13 @@
                     <el-icon>
                       <Avatar />
                     </el-icon>
-                    {{ doc.consignor }}</span>
-                  <span>
-                    <el-tag style="margin-left: 5px;">
-                      {{ doc.businessType }}
-                    </el-tag>
-                    <el-tag style="margin-left: 5px;" type="success">
-                      {{ doc.businessCate }}
-                    </el-tag>
+                    {{ doc.consignor }}
                   </span>
-                  <span style="float: right; color:darkgrey">
-                    {{ doc.updateTime }}
+                  <span>
+                    <el-tag style="margin-left: 5px;">{{ doc.businessType }}</el-tag>
+                    <el-tag style="margin-left: 5px;" type="success">{{ doc.businessCate }}</el-tag>
                   </span>
+                  <span style="float: right; color:darkgrey">{{ doc.updateTime }}</span>
                 </div>
               </div>
               <div class="report-button" @click="downloadFile(doc.docUrl, doc.docName)">
@@ -92,12 +95,30 @@
                 </el-icon>
               </div>
             </el-card>
+            <div class="null-div" v-if="page === null || page.length == 0">
+              <img src="../../assets/icons/null.png" style="width: 128px; height: 128px;" />
+              <div>
+                <span>还没有项目</span>
+              </div>
+            </div>
           </div>
         </div>
-        <el-tree ref="treeDataYear" style="width: 300px;display: inline-block;margin-top: 10px;margin-left:20px" :data="treeDataYear" accordion node-key="id" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[101]" icon="none" :check-on-click-node="true" @node-click="nodeClick" />
+        <el-tree
+          ref="treeDataYear"
+          style="width: 300px;display: inline-block;margin-top: 10px;margin-left:20px"
+          :data="treeDataYear"
+          accordion
+          node-key="id"
+          highlight-current
+          :default-expanded-keys="[1]"
+          :default-checked-keys="[101]"
+          icon="none"
+          :check-on-click-node="true"
+          @node-click="nodeClick"
+        />
       </div>
 
-      <div class="pagination">
+      <div class="pagination" v-if="page !== null && page.length !== 0">
         <el-pagination background layout="prev, pager, next" style="--el-color-primary: #ff6154" :page-count="listQuery.pages" v-model:current-page="listQuery.current" @current-change="getDocuments" />
       </div>
     </div>
@@ -105,11 +126,11 @@
 </template>
 
 <script>
-import { loginByOAInfo } from '@/api/user';
-import { setToken, getToken } from '@/utils/auth';
+import { loginByOAInfo } from '@/api/user'
+import { setToken, getToken } from '@/utils/auth'
 import { mapStores } from 'pinia'
-import { useUserStore } from '@/stores/useUserStore';
-import documentProduction from '@/api/documentProduction';
+import { useUserStore } from '@/stores/useUserStore'
+import documentProduction from '@/api/documentProduction'
 import wordLog from '../../assets/icons/word.png'
 import excelLog from '../../assets/icons/excel.png'
 import folderLog from '../../assets/icons/folder.png'
@@ -128,104 +149,104 @@ export default {
         pages: null,
         total: null,
         createDate: null,
-        docName: null
-      }
+        docName: null,
+      },
     }
   },
   mounted() {
     // 使用$nextTick 等页面加载完毕之后,再选中tree组件默认节点，防止加载顺序问题
     this.$nextTick(function () {
       // 这行会生效
-      let childrenIndex = 0;
+      let childrenIndex = 0
       // 默认拿当前月份
       switch (new Date().getMonth() + 1) {
         case 12:
-          childrenIndex = 0;
-          break;
+          childrenIndex = 0
+          break
         case 11:
-          childrenIndex = 1;
-          break;
+          childrenIndex = 1
+          break
         case 10:
-          childrenIndex = 2;
-          break;
+          childrenIndex = 2
+          break
         case 9:
-          childrenIndex = 3;
-          break;
+          childrenIndex = 3
+          break
         case 8:
-          childrenIndex = 4;
-          break;
+          childrenIndex = 4
+          break
         case 7:
-          childrenIndex = 5;
-          break;
+          childrenIndex = 5
+          break
         case 6:
-          childrenIndex = 6;
-          break;
+          childrenIndex = 6
+          break
         case 5:
-          childrenIndex = 7;
-          break;
+          childrenIndex = 7
+          break
         case 4:
-          childrenIndex = 8;
-          break;
+          childrenIndex = 8
+          break
         case 3:
-          childrenIndex = 9;
-          break;
+          childrenIndex = 9
+          break
         case 2:
-          childrenIndex = 10;
-          break;
+          childrenIndex = 10
+          break
         case 1:
-          childrenIndex = 11;
-          break;
+          childrenIndex = 11
+          break
       }
-      this.$refs.treeDataYear.setCurrentKey(this.treeDataYear[0].children[childrenIndex].id);
+      this.$refs.treeDataYear.setCurrentKey(this.treeDataYear[0].children[childrenIndex].id)
       this.setDay(this.$refs.treeDataYear.getCurrentNode())
-    });
+    })
   },
   computed: {
     // 非setup语法,需要使用mapStores()才能访问
     // 直接放在生命周期函数也可以访问,但是似乎会导致持久化失效,没找到解决办法,建议还是用mapStores
     // 名字会变成id + 'Store' 的形式,比如id本来是user,那么这种方式使用就需要变成this.userStore.xxx
-    ...mapStores(useUserStore)
+    ...mapStores(useUserStore),
   },
   created() {
-    this.login();
+    this.login()
     // this.getDocuments();
-    this.setYearMonth();
+    this.setYearMonth()
   },
   methods: {
     nodeClick(node) {
-      this.setDay(node);
+      this.setDay(node)
     },
     choiceDay(index) {
-      this.activeBtn = index;
-      this.listQuery.createDate = this.days[index].date;
-      this.getDocuments();
+      this.activeBtn = index
+      this.listQuery.createDate = this.days[index].date
+      this.getDocuments()
     },
     // 设置横向的天数
     setDay(node) {
-      this.days = [];
+      this.days = []
       if (node.year) {
         // 计算是平年还是闰年
-        let dayLength = 31;
-        if ((node.year % 4 === 0 && node.year % 100 !== 0) || (node.year % 400 === 0)) {
+        let dayLength = 31
+        if ((node.year % 4 === 0 && node.year % 100 !== 0) || node.year % 400 === 0) {
           // 闰年且二月
           if (node.month === 2) {
-            dayLength = 28;
+            dayLength = 28
           } else if ([1, 3, 5, 7, 8, 10, 12].includes(node.month)) {
-            dayLength = 31;
+            dayLength = 31
           } else {
-            dayLength = 30;
+            dayLength = 30
           }
         } else {
           if (node.month === 2) {
-            dayLength = 29;
+            dayLength = 29
           } else if ([1, 3, 5, 7, 8, 10, 12].includes(node.month)) {
-            dayLength = 31;
+            dayLength = 31
           } else {
-            dayLength = 30;
+            dayLength = 30
           }
         }
         for (let index = 1; index <= dayLength; index++) {
-          this.days.push({ id: index, date: node.year + '-' + node.month + '-' + index });
+          this.days.push({ id: index, date: node.year + '-' + node.month + '-' + index })
         }
       }
       // 默认选中当前月的第一天
@@ -233,91 +254,93 @@ export default {
     },
     // 设置tree组件节点
     setYearMonth() {
-      const currentYear = new Date().getFullYear(); // 获取当前年份
-      let idVal = 100;
+      const currentYear = new Date().getFullYear() // 获取当前年份
+      let idVal = 100
       for (let i = 0; i < 10; i++) {
-        const month = [{
-          id: null,
-          label: '十二月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '十一月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '十月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '九月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '八月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '七月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '六月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '五月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '四月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '三月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '二月',
-          year: null,
-          month: null
-        },
-        {
-          id: null,
-          label: '一月',
-          year: null,
-          month: null
-        }];
-        let m = 12;
+        const month = [
+          {
+            id: null,
+            label: '十二月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '十一月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '十月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '九月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '八月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '七月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '六月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '五月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '四月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '三月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '二月',
+            year: null,
+            month: null,
+          },
+          {
+            id: null,
+            label: '一月',
+            year: null,
+            month: null,
+          },
+        ]
+        let m = 12
         for (let n = 1; n <= month.length; n++) {
           // 设置id
-          month[n - 1].id = n + idVal;
+          month[n - 1].id = n + idVal
           // 设置节点的年月
-          month[n - 1].year = currentYear - i;
-          month[n - 1].month = m--;
+          month[n - 1].year = currentYear - i
+          month[n - 1].month = m--
         }
         this.treeDataYear.push({ id: i + 1, label: currentYear - i, children: month })
-        idVal = idVal + 100;
+        idVal = idVal + 100
       }
     },
     goto(path) {
@@ -326,76 +349,74 @@ export default {
     login() {
       // 如果路由上带了token,说明是从oa刚跳转过来,需要进行登录
       // 解析url获取token
-      var url = window.location.href; //获取当前url
-      var dz_url = url.split('#')[0]; //获取#之前的字符串
-      var cs = url.split('?')[1]; //获取?之后的参数字符串
+      var url = window.location.href //获取当前url
+      var dz_url = url.split('#')[0] //获取#之前的字符串
+      var cs = url.split('?')[1] //获取?之后的参数字符串
       // 判断参数是否为空
       if (cs) {
-        var cs_arr = cs.split('&'); //参数字符串分割为数组
-        var params = {};
-        for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
+        var cs_arr = cs.split('&') //参数字符串分割为数组
+        var params = {}
+        for (var i = 0; i < cs_arr.length; i++) {
+          //遍历数组，拿到json对象
           params[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
         }
 
-        let token = params.token;
+        let token = params.token
         if (token) {
-          loginByOAInfo(token).then(res => {
-            setToken(res.data.tokenValue);
-            this.userStore.setUserInfo(res.data);
+          loginByOAInfo(token).then((res) => {
+            setToken(res.data.tokenValue)
+            this.userStore.setUserInfo(res.data)
             // 登录成功,重新跳转到主页
             this.$router.push(`/home/index`)
           })
         }
       }
-
     },
     getDocuments() {
-      documentProduction.page(this.listQuery).then(res => {
+      documentProduction.page(this.listQuery).then((res) => {
         if (res.code === 200) {
-          this.page = res.data.records;
-          this.listQuery.pages = res.data.pages;
+          this.page = res.data.records
+          this.listQuery.pages = res.data.pages
         }
       })
     },
     docLog(docType) {
       switch (docType) {
         case 'CALCULATE_TABLE':
-          return excelLog;
+          return excelLog
         case 'FOLDER':
-          return folderLog;
+          return folderLog
         default:
-          return wordLog;
+          return wordLog
       }
     },
     // 下载文件
     downloadFile(docUrl, docName) {
       if (docUrl && docName) {
         let downloadUrl = '/file/download?fileDiskPath=' + docUrl + '&fileName=' + docName
-        fileUtil.download(downloadUrl);
+        fileUtil.download(downloadUrl)
       } else {
         ElMessage({
           showClose: true,
           message: '文档还未生成,请完成生成步骤!',
-          type: 'warning'
+          type: 'warning',
         })
       }
-    }
-
-  }
-
+    },
+  },
 }
 </script>
 <style scoped>
 :deep(.el-input__wrapper.is-focus) {
-    --el-input-focus-border: #ff6154;
-    --el-input-focus-border-color: #ff6154;
+  --el-input-focus-border: #ff6154;
+  --el-input-focus-border-color: #ff6154;
 }
 :deep(.el-button--text:hover) {
-    color: #ff6154;
+  color: #ff6154;
 }
 
 :deep(.el-button--text) {
-    color: #ff6154;
+  color: #ff6154;
 }
 .input-container {
   display: flex; /* 使用 Flexbox 布局 */
@@ -403,7 +424,7 @@ export default {
 }
 .show {
   color: #ff6154;
-  background-color: #FDF0EE;
+  background-color: #fdf0ee;
 }
 
 .dayChoice_div {
@@ -432,7 +453,8 @@ export default {
 
 .words {
   padding: 70px 20px 20px 20px;
-  background: linear-gradient(180deg, transparent, hsla(0, 0%, 95%, .29) 47.39%, #fff), linear-gradient(90deg, #f9ddf1 .07%, #e5e1ff 16.73%, #daedff 34.48%, #e2f4e3 49.98%, #ebf5d8 66.12%, #faf2da 81.95%, #fbe5d8 99.9%);
+  background: linear-gradient(180deg, transparent, hsla(0, 0%, 95%, 0.29) 47.39%, #fff),
+    linear-gradient(90deg, #f9ddf1 0.07%, #e5e1ff 16.73%, #daedff 34.48%, #e2f4e3 49.98%, #ebf5d8 66.12%, #faf2da 81.95%, #fbe5d8 99.9%);
 }
 
 h1 {
@@ -530,23 +552,30 @@ p {
   display: flex;
 }
 
-
 :deep(.el-tree-node__content:hover) {
   border-radius: 5px;
   color: #ff6154;
-  background-color: #FDF0EE !important;
+  background-color: #fdf0ee !important;
 }
 
-:deep(v-deep .el-tree-node.is-current>.el-tree-node__content) {
+:deep(v-deep .el-tree-node.is-current > .el-tree-node__content) {
   margin: 5px;
   border-radius: 5px;
   color: #ff6154;
-  background-color: #FDF0EE !important;
+  background-color: #fdf0ee !important;
 }
 
-:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
   border-radius: 5px;
   color: #ff6154;
-  background-color: #FDF0EE !important;
+  background-color: #fdf0ee !important;
+}
+
+.null-div {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  margin-top: 20%;
+  color: var(--vt-c-text-light-2);
 }
 </style>