服务发展总览

.env.development

@@ -5,9 +5,9 @@ VUE_APP_TITLE = 金鸡湖现代服务业品牌管理系统
 ENV = 'development'
 
 # 金鸡湖现代服务业品牌管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.0.110:9040'
+# VUE_APP_BASE_API = 'http://192.168.0.110:9040'
 # 测试环境数据库
-# VUE_APP_BASE_API = 'http://39.101.188.84:9040'
+VUE_APP_BASE_API = 'http://39.101.188.84:9040'
 # 脱敏三方测试用数据库
 # VUE_APP_BASE_API = 'http://39.101.188.84:9031'
 # 正式环境数据库

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruoyi",
-  "version": "1.0.202408290906",
+  "version": "1.0.202408291508",
   "description": "金鸡湖现代服务业品牌管理系统",
   "author": "若依",
   "license": "MIT",

src/assets/styles/publicPro.scss

@@ -5,13 +5,20 @@
 
   header {
     background: url("../images/workbench.png");
-    background-size: 100% 100%;
+    background-size: cover;
+    // background-size: contain; /* 按图片比例缩放到容器内完全显示 */
+    background-repeat: no-repeat;
+    /* 防止重复 */
+    background-position: 0px -50px;
+    /* 背景图相对于容器的左上角偏移 20px 水平和 30px 垂直 */
     padding: 20px 0;
     display: flex;
     align-items: center;
 
     .workbench-serch {
-      padding-left: 200px;
+      padding-left: 40px;
+      width: 100%;
+      display: flex;
 
       .workbench-title {
         display: flex;
@@ -19,11 +26,14 @@
 
         .title-item {
           cursor: pointer;
-          padding: 10px 60px 10px 40px;
+          padding: 12px 30px 12px 20px;
-          border-top-right-radius: 30% 100%;
+          border-radius: 10px;
+          border-top-right-radius: 20% 50%;
           margin-right: 15px;
           background: #FFFFFF;
           box-shadow: 2px 0 3px 0px #ccc;
+          color: #0086FF;
+          font-weight: 600;
         }
 
         .checked-item {
@@ -60,6 +70,7 @@
             color: #FFFFFF;
           }
         }
+
       }
     }
   }
@@ -71,6 +82,7 @@
     height: calc(100% - 132px);
     display: flex;
     flex-direction: column;
+
     .main-row {
       height: 100%;
       box-sizing: border-box;
@@ -130,6 +142,7 @@
               background-color: #F5F8FA;
               border: none;
               margin-bottom: 10px;
+
               .el-card__body {
                 padding: 10px 20px;
               }
@@ -159,29 +172,36 @@
 
                 .warn-main-content {
                   flex: 1;
-                  .content-title,.content-title-type {
+
+                  .content-title,
+                  .content-title-type {
                     font-weight: bold;
                     font-size: 15px;
                     color: #333333;
                   }
+
                   .content-title-type {
                     margin-top: 5px;
                   }
+
                   .content-middle {
                     font-weight: bold;
                     font-size: 15px;
                     color: #333333;
                     margin: 10px 0;
                   }
+
                   .tixing-duanxin {
                     display: flex;
                     align-items: center;
                   }
+
                   .content-time {
                     font-weight: 500;
                     font-size: 14px;
                     color: #737373;
                   }
+
                   .content-time-two {
                     margin-left: 10px;
                   }
@@ -234,25 +254,144 @@
 
       .service-left {
         padding: 10px 20px;
-        .home-mainPro-top,.home-mainPro-middle,.home-mainPro-bottom {
+
+        .home-mainPro-top,
+        .home-mainPro-middle,
+        .home-mainPro-bottom {
           display: flex;
           align-items: center;
-          .pro-left-box, .pro-right-box {
+
+          .pro-left-box,
+          .pro-right-box {
             width: 50%;
             padding: 10px;
             background-color: #F5F8FA;
             border-radius: 10px;
           }
         }
+
+
         .home-mainPro-top {
+          .home-mainPro-top-box {
+            width: 100%;
+            height: 28vh;
+            overflow: hidden;
+          }
+
+          // 服务发展
+          .AFuwufazhanzonglan-box {
+            .AFuwufazhanzonglan {
+              width: 100%;
+              height: 100%;
+
+              .AFuwufazhanzonglan-listbox {
+                width: 100%;
+                height: 45%;
+                background: #FFFFFF;
+                border-radius: 10px;
+                margin: 2% 0;
+                padding: 5px 5px;
+                display: flex;
+                align-items: center;
+
+
+                .AFuwufazhanzonglan-niandu {
+                  width: 3%;
+                  writing-mode: vertical-rl;
+                  /* 竖直显示，文字从上到下 */
+                  text-align: center;
+                  font-size: 12px;
+                }
+
+                .AFuwufazhanzonglan-neirongBox {
+                  width: 100%;
+                  display: flex;
+                  align-items: center;
+                  .AFuwufazhanzonglan-item {
+                    width: 95%;
+                    display: flex;
+                    align-items: center;
+                    margin: 0 10px;
+                    flex: 1;
+
+                    .AFuwufazhanzonglan-img-box {
+                      width: 65px;
+                      height: 65px;
+                      border-radius: 50%;
+                      background-size: cover;
+                      background-repeat: no-repeat;
+                      background-position: top left;
+                      /* 背景图位置从左上角开始 */
+                      margin-right: 10px;
+                    }
+
+                    .img-box_0 {
+                      background-image: url("../images/mapIconOne.png");
+                    }
+
+                    .img-box_1 {
+                      background-image: url("../images/mapIconTwo.png");
+                    }
 
+                    .img-box_2 {
+                      background-image: url("../images/mapIconThree.png");
                     }
+
+                    .AFuwufazhanzonglan-item-top {
+                      div {
+                        
+                      }
+
+                      div:nth-child(1) {
+                        font-size: 20px;
+                        font-weight: bold;
+
+                        span {
+                          font-size: 12px;
+                          color: #737373;
+                        }
+                      }
+
+                      div:nth-child(2) {
+                        font-size: 14px;
+                        margin-bottom: 5px;
+                        font-size: 14px;
+                        max-width: 100px;
+                        white-space: nowrap;
+                        /* 不换行 */
+                        overflow: hidden;
+                        /* 隐藏溢出的内容 */
+                        text-overflow: ellipsis;
+                        /* 显示省略号 */
+                      }
+
+                      div:nth-child(3) {
+                      
+                      }
+                    }
+                  }
+                }
+
+
+              }
+            }
+          }
+
+          //近三年
+          .BJinsannianzijin-box {
+            .BJinsannianzijin {}
+          }
+        }
+
         .home-mainPro-middle {
           margin: 10px 0;
+
           .capitalConditionTOP5-box {
             padding: 10px 0;
+
             section {
               margin-top: 10px;
+
               // .el-table--border {
               //   border: 1px solid #dfe6ec;
               // }
@@ -268,6 +407,7 @@
                   font-family: ArialB;
                   color: #FFFFFF;
                 }
+
                 .project-table-Info {
                   font-family: AlibabaPuHuiTiR;
                   font-weight: 500;
@@ -278,16 +418,19 @@
                   // text-transform: none;
                   cursor: pointer;
                 }
+
                 th {
                   font-weight: bold;
                   font-size: 14px;
                   color: #000;
                   text-align: center;
+
                   .Table-header {
                     // font-family: AlibabaPuHuiTiM;
                     font-size: 14px;
                     color: #333333;
                   }
+
                   .Table-unit {
                     font-family: AlibabaPuHuiTiR;
                     font-size: 12px;
@@ -295,6 +438,7 @@
                     color: #333333;
                   }
                 }
+
                 td {
                   font-weight: 500;
                   font-size: 14px;
@@ -303,9 +447,11 @@
               }
             }
           }
+
         }
       }
 
+
       .work-main-right {
         background-color: #fff;
         border-radius: 10px;
@@ -314,6 +460,7 @@
         .main-right {
           padding: 10px 20px;
           height: 100%;
+
           .right-header {
             display: flex;
             justify-content: space-between;
@@ -352,6 +499,7 @@
           .right-main {
             height: calc(100% - 55px);
             overflow-y: scroll;
+
             .main-items {
               display: flex;
               align-items: center;
@@ -410,6 +558,7 @@
     .box-header {
       display: flex;
       align-items: center;
+
       .garden {
         width: 10px;
         height: 10px;
@@ -417,18 +566,22 @@
         background-color: #0086FF;
         margin-right: 10px;
       }
+
       .box-header-title {
         font-family: AlibabaPuHuiTiB;
         font-size: 16px;
         color: #383838;
       }
+
       .left-box-select {
         flex: 1;
         display: flex;
         justify-content: flex-end;
         align-items: center;
+
         .el-select {
           width: 100px;
+
           .el-input__inner {
             text-align: center;
           }

src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue

@@ -0,0 +1,113 @@
+<!-- 拨付资金企业申请情况TOP5 -->
+<template>
+    <div class="AFuwufazhanzonglan">
+        <div class="AFuwufazhanzonglan-listbox" v-for="item in tableData">
+            <div class="AFuwufazhanzonglan-niandu">
+                【{{ item.niandu }}】
+            </div>
+            <div class="AFuwufazhanzonglan-neirongBox">
+                <div class="AFuwufazhanzonglan-item" v-for="(itemTow,index) in item.list">
+                    <div class=" AFuwufazhanzonglan-img-box" :class="'img-box_'+index"></div>
+                    <div class="AFuwufazhanzonglan-item-top">
+                        <div>{{ itemTow.tponumber }} <span>{{ itemTow.danwei }}</span></div>
+                        <div>{{ itemTow.content }}</div>
+                        <div>[{{ itemTow.nian }}]</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+import { top5Fund } from "@/api/jin_ji_hu/zijinbiao"
+export default {
+    data() {
+        return {
+            loading: false,
+            tableData: [{
+                niandu: "上一年度",
+                list: [
+                    {
+                        tponumber: "1758.13",
+                        danwei: "亿元",
+                        content: "服务业增加值",
+                        nian: "2023",
+                    }, {
+                        tponumber: "1.3",
+                        danwei: "%",
+                        content: "服务业增速",
+                        nian: "2023",
+                    }, {
+                        tponumber: "49.9",
+                        danwei: "%",
+                        content: "服务业增速",
+                        nian: "2023",
+                    },
+                ]
+            },
+            {
+                niandu: "上一季度",
+                list: [
+                    {
+                        tponumber: "1758.13",
+                        danwei: "亿元",
+                        content: "服务业增加值",
+                        nian: "2023",
+                    }, {
+                        tponumber: "1.3",
+                        danwei: "%",
+                        content: "服务业增速",
+                        nian: "2023",
+                    }, {
+                        tponumber: "49.9",
+                        danwei: "%",
+                        content: "服务业增加值GDP比重",
+                        nian: "2023",
+                    },
+                ]
+            }],
+            tabHeader: 288,
+        }
+    },
+    props: {
+        typeValue: {
+            type: Number,
+            default: 1,
+        },
+        yearsChange: {
+            type: Number,
+            default: 1,
+        },
+    },
+    watch: {
+        typeValue: {
+            handler(newVAlue) {
+                console.log(newVAlue);
+            },
+        },
+        yearsChange: {
+            handler(newVAlue) {
+                console.log(newVAlue);
+            },
+        },
+    },
+    mounted() {
+        // this.cancalDebounce();
+        window.addEventListener('resize', this.cancalDebounce);
+    },
+    methods: {
+        // 获取top5列表
+
+        // 屏幕尺寸变化
+        cancalDebounce() {
+            const element = document.getElementById('zhijinbofu-qingkaung'); // 通过元素的 ID 获取元素
+            const header = document.getElementById('zhijinbofu-header-id'); // 通过元素的 ID 获取元素
+            const elementHeight = element.offsetHeight;
+            const headerHeight = header.offsetHeight;
+            this.tabHeader = elementHeight - headerHeight - 35;
+        }
+    },
+}
+</script>
+<style lang="scss"></style>

src/views/workbenchPro/components/BJinsannianzijin/index.vue

@@ -0,0 +1,60 @@
+<!-- 拨付资金企业申请情况TOP5 -->
+<template>
+    <div class="BJinsannianzijin">
+
+    </div>
+  </template>
+  <script>
+  import { top5Fund } from "@/api/jin_ji_hu/zijinbiao"
+  export default {
+    data() {
+      return {
+        loading:false,
+        tableData:[],
+        tabHeader: 288,
+      }
+    },
+    props:{
+      typeValue:{
+        type:Number,
+        default:1,
+      },
+      yearsChange:{
+        type:Number,
+        default:1,
+      },
+    },
+    watch:{
+      typeValue:{
+        handler(newVAlue){
+          console.log(newVAlue);
+        },
+      },
+      yearsChange:{
+        handler(newVAlue){
+          console.log(newVAlue);
+        },
+      },
+    },
+    mounted() {
+      // this.cancalDebounce();
+      window.addEventListener('resize', this.cancalDebounce);
+    },
+    methods:{
+      // 获取top5列表
+    
+      // 屏幕尺寸变化
+      cancalDebounce(){
+        const element = document.getElementById('zhijinbofu-qingkaung'); // 通过元素的 ID 获取元素
+        const header = document.getElementById('zhijinbofu-header-id'); // 通过元素的 ID 获取元素
+        const elementHeight = element.offsetHeight;
+        const headerHeight = header.offsetHeight;
+        this.tabHeader = elementHeight - headerHeight - 35;
+      }
+    },
+  }
+  </script>
+  <style lang="scss" scoped>
+  
+  </style>
+  

src/views/workbenchPro/components/capitalConditionTOP5/index.vue

@@ -33,7 +33,7 @@ export default {
     return {
       loading:false,
       tableData:[],
-      tabHeader: 288,
+      tabHeader: 200,
     }
   },
   props:{

src/views/workbenchPro/index.vue

@@ -32,12 +32,18 @@
                 <span class="garden"></span>
                 <span class="box-header-title">服务业发展总览</span>
               </div>
+              <div class="AFuwufazhanzonglan-box home-mainPro-top-box">
+                <AFuwufazhanzonglan :typeValue="typeValue" :yearsChange="yearsChange"></AFuwufazhanzonglan>
+              </div>
             </div>
             <div class="pro-right-box">
               <div class="box-header" id="zhongdian-header-id">
                 <span class="garden"></span>
                 <span class="box-header-title">近三年资金拨付情况</span>
               </div>
+              <div class="BJinsannianzijin-box home-mainPro-top-box">
+                <BJinsannianzijin :typeValue="typeValue" :yearsChange="yearsChange"></BJinsannianzijin>
+              </div>
             </div>
           </div>
           <div class="home-mainPro-middle">
@@ -223,13 +229,17 @@ import { chiefAll, changeIsRead } from "@/api/jin_ji_hu/intelligentReminder"
 import hometwoIndex from "@/views/homeTwo/index.vue"
 import { zhinengtixing, daibanrenwu } from "@/views/workbench/components"
 import TableThree from "./components/capitalConditionTOP5"
+import AFuwufazhanzonglan from "./components/AFuwufazhanzonglan"
+import BJinsannianzijin from "./components/BJinsannianzijin"
 export default {
   dicts: ["project_small_type"],
   components:{
     hometwoIndex,
     zhinengtixing,
     daibanrenwu,
-    TableThree
+    TableThree,
+    AFuwufazhanzonglan,
+    BJinsannianzijin
   },
   data() {
     return {