2025-6-12

sub-operation-service/src/router/index.js

@@ -121,6 +121,41 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: '/sub-operation-service/finance',
+    component: Layout,
+    name: 'RuralFinance',
+    redirect: '/sub-operation-service/finance/integratedSector',
+    meta: { title: '涉农金融' },
+    children: [
+      {
+        path: 'integratedSector',
+        component: Views,
+        name: 'integratedSectors',
+        meta: { title: '综合板块' },
+        children: [
+          {
+            path: '',
+            component: () => import('@/views/ruralFinance/integratedSector/index.vue'),
+            name: 'integratedSectorMain',
+            meta: { title: '综合板块', hideInBread: true },
+          },
+          {
+            path: 'detail',
+            component: () => import('@/views/ruralFinance/integratedSector/detail.vue'),
+            name: 'integratedSectorDetail',
+            meta: { title: '查看详情', hideInBread: true },
+          },
+          {
+            path: 'loan',
+            component: () => import('@/views/ruralFinance/integratedSector/loan.vue'),
+            name: 'integratedSectorLoan',
+            meta: { title: '我要贷款', hideInBread: true },
+          },
+        ],
+      },
+    ],
+  },
   {
     path: '/sub-operation-service/farmService',
     component: Layout,

sub-operation-service/src/views/dashboard/breed/components/growthIndexesCharts.vue

@@ -44,7 +44,7 @@ const chartsData = reactive({
       containLabel: true,
     },
     legend: {
-      data: ['货款', '投保'],
+      data: ['贷款', '投保'],
       left: '35%', // 距离左侧10%的位置
       top: '0', // 垂直居中
       itemWidth: 20, // 图例标记的宽度
@@ -97,7 +97,7 @@ const chartsData = reactive({
     ],
     series: [
       {
-        name: '货款',
+        name: '贷款',
         type: 'bar',
         barWidth: '10px',
         itemStyle: {

sub-operation-service/src/views/ecommerce/sourceCodeDetail.vue

@@ -155,7 +155,7 @@
                         </el-col>
                         <el-col :span="12" class="des-item">
                           <span class="label">法人：</span>
-                          <span class="val">张三</span>
+                          <span class="val">顾翔</span>
                         </el-col>
                         <el-col :span="24" class="des-item">
                           <span class="label">公司地址：</span>

sub-operation-service/src/views/ruralFinance/components/common.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="smartFarm-common-warp">
+    <div class="smartFarm-common-content">
+      <div class="left-menu">
+        <slot v-if="$slots.left" name="left"></slot>
+        <template v-else>
+          <left-menu :menus="menus"></left-menu>
+        </template>
+      </div>
+      <div class="common-content">
+        <bread-comp></bread-comp>
+        <slot v-if="$slots.main" name="main"></slot>
+        <template v-else></template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import leftMenu from './leftMenu.vue';
+import BreadComp from '@/components/breadComp.vue';
+
+const props = defineProps({
+  currentName: { type: String, default: 'agricultural' },
+});
+
+const menus = reactive([
+  {
+    name: 'supplier',
+    title: '农业环境监测',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/smartFarm/main',
+    isOpen: true,
+    children: [
+      {
+        name: 'supplier',
+        title: '田间监测',
+        path: '/sub-operation-service/smartFarm/inspection',
+      },
+      {
+        name: 'supplier',
+        title: '水质监测',
+        path: '/sub-operation-service/ecommerce-supplier',
+      },
+      {
+        name: 'supplier',
+        title: '病虫害监测',
+        path: '/sub-operation-service/ecommerce-supplier',
+      },
+    ],
+  },
+  {
+    name: 'control',
+    title: '生产管理控制',
+    icon: 'menu3.png',
+    path: '',
+    isOpen: false,
+    children: [
+      {
+        name: 'control',
+        title: '一体育苗',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/growSeedlings',
+      },
+      {
+        name: 'control',
+        title: '病虫害预防',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/pestPrevention',
+      },
+      {
+        name: 'control',
+        title: '喷灌滴灌',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem',
+      },
+      {
+        name: 'control',
+        title: '排集水控制',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/drainageControl',
+      },
+      {
+        name: 'control',
+        title: '开窗卷帘',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/openCurtain',
+      },
+    ],
+  },
+]);
+</script>
+<style lang="scss" scoped>
+.smartFarm-common-warp {
+  width: 100%;
+  height: calc(100vh - 230px);
+  text-align: center;
+  .smartFarm-common-content {
+    width: $width-main;
+    margin: auto;
+    height: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    margin: auto;
+    width: $width-main;
+    height: 100%;
+    .left-menu,
+    .common-content {
+      overflow-y: auto;
+      padding: 8px;
+      height: calc(100% - 16px);
+      border-radius: 8px;
+    }
+    .left-menu {
+      width: 240px;
+      background: $color-fff;
+    }
+    .common-content {
+      margin-left: 16px;
+      width: calc(100% - 240px);
+    }
+  }
+}
+</style>

sub-operation-service/src/views/ruralFinance/components/leftMenu.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="smartFarm-left-menu-warp">
+    <div class="left-menu">
+      <div
+        v-for="(n, index) in leftMenu"
+        :key="index"
+        class="left-menu-item"
+        style="position: relative"
+        @click.stop="
+          toLink(index);
+          openList(index);
+        "
+      >
+        <div style="display: flex; justify-content: flex-start; align-items: center">
+          <div class="item-img">
+            <img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
+          </div>
+          <span :class="n.isOpen ? 'active' : ''" class="item-title">{{ n.title }}</span>
+          <img v-if="n.children && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
+          <img
+            v-if="n.children && !n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
+            class="isOpen fz"
+            @click.stop="openList(index)"
+          />
+        </div>
+        <div v-if="n.children && n.isOpen" class="item-children">
+          <div v-for="(item, indexC) in n.children" :key="indexC">
+            <ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
+              <li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
+                <div class="dot"></div>
+                {{ item.title }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const leftMenu = reactive([
+  {
+    name: 'inspection',
+    title: '综合板块',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/finance/integratedSector',
+  },
+]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref('');
+
+const toLink = (index) => {
+  currentIndex.value = index;
+  window.sessionStorage.setItem('currentOpen', index);
+  if (index === 0) {
+    window.sessionStorage.setItem('currentChild', 'main');
+  }
+  currentCIndex.value = '';
+  let path = index !== undefined ? leftMenu[index].path : null;
+  if (path) {
+    router.push(path);
+  }
+};
+const toLinkSub = (index, name) => {
+  console.info('index', index);
+  console.info('currentChild', name);
+  currentCIndex.value = name;
+  window.sessionStorage.setItem('currentChild', name);
+  let path;
+  for (let i in leftMenu[index].children) {
+    if (leftMenu[index].children[i].name === name) {
+      path = leftMenu[index].children[i].path;
+    }
+  }
+  if (path) {
+    console.info('path', path);
+    router.push(path);
+  }
+};
+const openList = (index) => {
+  currentIndex.value = index;
+  leftMenu[index].isOpen = !leftMenu[index].isOpen;
+};
+
+onMounted(() => {
+  const currentMenu = window.sessionStorage.getItem('currentOpen');
+  if (currentMenu) {
+    for (let i in leftMenu) {
+      leftMenu[i].isOpen = i === currentMenu;
+    }
+  }
+  const currentChild = window.sessionStorage.getItem('currentChild');
+  if (currentChild && currentChild === 'main') {
+    currentIndex.value = 0;
+    currentCIndex.value = '';
+  } else if (currentChild) {
+    currentCIndex.value = currentChild;
+  }
+});
+</script>
+<style lang="scss" scoped>
+.fz {
+  transform: rotate(180deg);
+}
+.isOpen {
+  position: absolute;
+  right: -24px;
+  width: 20px;
+  height: 20px;
+}
+.active {
+  color: $color-main;
+}
+.smartFarm-left-menu-warp {
+  padding: 0 30px 0 10px;
+  width: 100%;
+  height: 100%;
+  .left-menu {
+    .left-menu-item {
+      padding: 16px 0;
+      width: 100%;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+      }
+      .item-title {
+        padding-left: 8px;
+        font-size: 18px;
+        font-weight: 400;
+      }
+      .item-children {
+        margin-top: 8px;
+        font-size: 16px;
+        text-align: center;
+        transition: transform 0.3s ease;
+        .dot {
+          display: inline-block;
+          margin-right: 15px;
+          width: 4px;
+          height: 4px;
+          border-radius: 90px;
+          background-color: black;
+          vertical-align: middle;
+        }
+        li {
+          margin: 5px auto;
+          height: 35px;
+          line-height: 35px;
+        }
+      }
+    }
+  }
+}
+</style>

sub-operation-service/src/views/ruralFinance/integratedSector/detail.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

sub-operation-service/src/views/ruralFinance/integratedSector/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <common>
+      <template #main>
+        <el-card style="border-radius: 16px">
+          <div class="choose">
+            <div class="searchType">贷款金额</div>
+            <div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">不限</div>
+            <div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">50万元及以下</div>
+            <div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">50~100万元</div>
+            <div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">100~300万元</div>
+            <div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">300~500万元</div>
+            <div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">500万元及以下</div>
+          </div>
+          <div class="choose">
+            <div class="searchType">贷款期限</div>
+            <div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">不限</div>
+            <div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">6个月及以下</div>
+            <div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">6~12个月</div>
+            <div :class="{ active: chooseDate === 3 }" class="chooseItem" @click="changeChoose('date', 3)">12~24个月</div>
+            <div :class="{ active: chooseDate === 4 }" class="chooseItem" @click="changeChoose('date', 4)">24~36个月</div>
+            <div :class="{ active: chooseDate === 5 }" class="chooseItem" @click="changeChoose('date', 5)">36个月及以下</div>
+          </div>
+          <div class="choose">
+            <div class="searchType">投保方式</div>
+            <div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">不限</div>
+            <div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">信用</div>
+            <div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">抵押</div>
+            <div :class="{ active: chooseWay === 3 }" class="chooseItem" @click="changeChoose('way', 3)">质保</div>
+            <div :class="{ active: chooseWay === 4 }" class="chooseItem" @click="changeChoose('way', 4)">保证</div>
+            <div :class="{ active: chooseWay === 5 }" class="chooseItem" @click="changeChoose('way', 5)">其他</div>
+          </div>
+          <div class="choose">
+            <div class="searchType">消费主体</div>
+            <div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
+            <div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
+            <div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
+            <div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
+            <div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
+            <div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
+          </div>
+          <div class="choose">
+            <div class="searchType">产品类型</div>
+            <div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
+            <div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
+            <div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
+            <div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
+          </div>
+
+          <div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
+            <div>
+              共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
+            </div>
+            <div>线下审批</div>
+            <div>贷款额度</div>
+            <div>贷款利率</div>
+            <div>贷款期限</div>
+          </div>
+        </el-card>
+        <el-card style="border-radius: 16px; margin-top: 20px">
+          <div style="display: flex; justify-content: space-between">
+            <div>
+              <img :src="getAssetsFile('images/finance/nyyh.png')" alt="" style="width: 160px" />
+            </div>
+            <div style="display: flex; flex-direction: column; justify-content: space-between; padding: 20px">
+              <div>惠农e贷</div>
+              <div style="display: flex">
+                <div>额度高</div>
+                <div>政策扶持</div>
+              </div>
+            </div>
+            <div style="display: flex">
+              <div style="display: flex">
+                <div>最快放款</div>
+                <div>2周</div>
+              </div>
+              <div style="display: flex">
+                <div>申请额度</div>
+                <div>最高50万</div>
+              </div>
+              <div style="display: flex">
+                <div>最快放款</div>
+                <div>最长60个月</div>
+              </div>
+              <div style="display: flex">
+                <div>年利率</div>
+                <div>4.15%起</div>
+              </div>
+              <div style="display: flex">
+                <div>投保方式</div>
+                <div>信用</div>
+              </div>
+            </div>
+            <div></div>
+          </div>
+        </el-card>
+      </template>
+    </common>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import common from '../components/common.vue';
+import { getAssetsFile } from '../../../utils/index.js';
+
+/* --------------- data --------------- */
+// #region
+const chooseMoney = ref(0);
+const chooseDate = ref(0);
+const chooseWay = ref(0);
+const chooseUse = ref(0);
+const chooseType = ref(0);
+
+const pagination = ref({
+  total: 0,
+  size: 20,
+  page: 1,
+});
+
+const dataList = ref([
+  {
+    id: 1,
+    fast: '2周',
+    maxMoney: '最高50万',
+  },
+]);
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+const changeChoose = (type, index) => {
+  switch (type) {
+    case 'money':
+      chooseMoney.value = index;
+      break;
+    case 'date':
+      chooseDate.value = index;
+      break;
+    case 'way':
+      chooseWay.value = index;
+      break;
+    case 'use':
+      chooseUse.value = index;
+      break;
+    case 'type':
+      chooseType.value = index;
+      break;
+  }
+  getList();
+};
+
+const getList = () => {
+  console.log('刷新数据');
+};
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+.choose {
+  display: flex;
+  justify-content: flex-start;
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  .searchType {
+    color: #999999;
+  }
+  .chooseAll {
+    margin: 0 30px;
+    cursor: pointer;
+  }
+  .chooseItem {
+    cursor: pointer;
+    margin-right: 20px;
+  }
+}
+.active {
+  color: #25bf82;
+  font-weight: bold;
+}
+</style>

sub-operation-service/src/views/ruralFinance/integratedSector/loan.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>