From 760fcdcf17bc4aae5fc2b3813ab77f770829ecec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=83=B3?= <826276471@qq.com>
Date: Fri, 7 Mar 2025 14:36:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=8A=95=E5=85=A5=E5=93=81=E7=9B=91?=
 =?UTF-8?q?=E7=AE=A1=E5=B9=B3=E5=8F=B0=E6=A8=A1=E5=9D=97=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/index.js                       |  3 +-
 .../src/router/modules/inputSupplies/index.js | 68 +++++++++++++++++++
 .../soilClassification/useSoilTypeHook.js     | 26 +++----
 .../inputSuppliesManage/basicInfo/index.vue   | 20 ++++++
 .../enterpriseDealer/index.vue                | 20 ++++++
 .../inputDataView/index.vue                   | 20 ++++++
 .../knowledgeManage/index.vue                 | 20 ++++++
 .../leaseSupervise/index.vue                  | 20 ++++++
 .../patrolCaseManage/index.vue                | 20 ++++++
 .../productionDealer/index.vue                | 20 ++++++
 .../redBlackRank/index.vue                    | 20 ++++++
 .../useSupervise/index.vue                    | 20 ++++++
 12 files changed, 259 insertions(+), 18 deletions(-)
 create mode 100644 sub-government-affairs-service/src/router/modules/inputSupplies/index.js
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/basicInfo/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/enterpriseDealer/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/inputDataView/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/knowledgeManage/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/leaseSupervise/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/patrolCaseManage/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/productionDealer/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/useSupervise/index.vue

diff --git a/sub-government-affairs-service/src/router/index.js b/sub-government-affairs-service/src/router/index.js
index 26299d6..33f1c38 100644
--- a/sub-government-affairs-service/src/router/index.js
+++ b/sub-government-affairs-service/src/router/index.js
@@ -12,7 +12,7 @@ import resourceRouter from './modules/resource';
 import traceRouter from './modules/trace';
 import landsRoutes from './modules/lands';
 import dictRoutes from './modules/dict';
-import annualplanRoutes from './modules/annualplan';
+import inputSuppliesRoutes from './modules/inputSupplies';
 
 export const constantRoutes = [
   {
@@ -46,6 +46,7 @@ export const constantRoutes = [
   ...traceRouter,
   ...landsRoutes,
   ...dictRoutes,
+  ...inputSuppliesRoutes,
 ];
 
 /**
diff --git a/sub-government-affairs-service/src/router/modules/inputSupplies/index.js b/sub-government-affairs-service/src/router/modules/inputSupplies/index.js
new file mode 100644
index 0000000..6f50be0
--- /dev/null
+++ b/sub-government-affairs-service/src/router/modules/inputSupplies/index.js
@@ -0,0 +1,68 @@
+import Layout from '@/layouts/index.vue';
+
+const inputSuppliesRoutes = [
+  {
+    path: '/sub-government-affairs-service/inputSuppliesManage',
+    name: 'inputSuppliesManage',
+    component: Layout,
+    redirect: '/sub-government-affairs-service/inputDataView',
+    meta: { title: '投入品监管平台', icon: 'Document' },
+    children: [
+      {
+        path: '/sub-government-affairs-service/inputDataView',
+        name: 'inputDataView',
+        component: () => import('@/views/inputSuppliesManage/inputDataView/index.vue'),
+        meta: { title: '投入品资源一张图', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/basicInfo',
+        name: 'basicInfo',
+        component: () => import('@/views/inputSuppliesManage/basicInfo/index.vue'),
+        meta: { title: '基本信息管理', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/productionDealer',
+        name: 'productionDealer',
+        component: () => import('@/views/inputSuppliesManage/productionDealer/index.vue'),
+        meta: { title: '生产经销商管理', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/enterpriseDealer',
+        name: 'enterpriseDealer',
+        component: () => import('@/views/inputSuppliesManage/enterpriseDealer/index.vue'),
+        meta: { title: '企业经销商抽检', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/useSupervise',
+        name: 'useSupervise',
+        component: () => import('@/views/inputSuppliesManage/useSupervise/index.vue'),
+        meta: { title: '使用监管', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/leaseSupervise',
+        name: 'leaseSupervise',
+        component: () => import('@/views/inputSuppliesManage/leaseSupervise/index.vue'),
+        meta: { title: '农机租赁监管', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/redBlackRank',
+        name: 'redBlackRank',
+        component: () => import('@/views/inputSuppliesManage/redBlackRank/index.vue'),
+        meta: { title: '企业红黑榜', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/knowledgeManage',
+        name: 'knowledgeManage',
+        component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
+        meta: { title: '知识库', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/patrolCaseManage',
+        name: 'patrolCaseManage',
+        component: () => import('@/views/inputSuppliesManage/patrolCaseManage/index.vue'),
+        meta: { title: '巡查与案件管理', icon: 'Document' },
+      },
+    ],
+  },
+];
+export default inputSuppliesRoutes;
diff --git a/sub-government-affairs-service/src/views/dict/component/soilClassification/useSoilTypeHook.js b/sub-government-affairs-service/src/views/dict/component/soilClassification/useSoilTypeHook.js
index 82b282e..f16e863 100644
--- a/sub-government-affairs-service/src/views/dict/component/soilClassification/useSoilTypeHook.js
+++ b/sub-government-affairs-service/src/views/dict/component/soilClassification/useSoilTypeHook.js
@@ -6,22 +6,22 @@ export default function useSoilTypeHook() {
 
   const crudRef = ref();
   const condition = ref({
-    villageName: '',
+    soilType: '',
   });
   const data = ref([
     {
-      code: '1',
-      soilType: '1111111111111',
+      code: 'a123456',
+      soilType: '黑土地',
       status: 0,
     },
     {
-      code: '2',
-      soilType: '2222222222222',
+      code: 'b258369',
+      soilType: '黄土地',
       status: 1,
     },
     {
-      code: '3',
-      soilType: '3333333333333',
+      code: 'c987654',
+      soilType: '盐碱土地',
       status: 0,
     },
   ]);
@@ -38,15 +38,6 @@ export default function useSoilTypeHook() {
     refreshBtn: false,
     border: false,
     column: [
-      {
-        label: '村名',
-        prop: 'villageName',
-        search: true,
-        hide: true,
-        display: false,
-        addDisplay: false,
-        viewDisplay: false,
-      },
       {
         label: '编号',
         prop: 'code',
@@ -54,10 +45,11 @@ export default function useSoilTypeHook() {
         addDisplay: false,
       },
       {
-        label: '土壤类型',
+        label: '土壤类别',
         prop: 'soilType',
         labelWidth: 100,
         span: 23,
+        search: true,
         rules: [
           {
             required: true,
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/basicInfo/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/basicInfo/index.vue
new file mode 100644
index 0000000..318d7a7
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/basicInfo/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard> 基础信息 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/enterpriseDealer/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/enterpriseDealer/index.vue
new file mode 100644
index 0000000..d6492f1
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/enterpriseDealer/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard> 企业经销商抽检 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/inputDataView/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/inputDataView/index.vue
new file mode 100644
index 0000000..5677381
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/inputDataView/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard> 投入品资源一张图 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/knowledgeManage/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/knowledgeManage/index.vue
new file mode 100644
index 0000000..08c26cb
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/knowledgeManage/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard>知识库 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/leaseSupervise/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/leaseSupervise/index.vue
new file mode 100644
index 0000000..e9e2927
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/leaseSupervise/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard>租赁监管</CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/patrolCaseManage/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/patrolCaseManage/index.vue
new file mode 100644
index 0000000..1fbf9e0
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/patrolCaseManage/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard>巡查与案件 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/productionDealer/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/productionDealer/index.vue
new file mode 100644
index 0000000..d817da6
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/productionDealer/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard> 生产经销商管理 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue
new file mode 100644
index 0000000..6f1e494
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard>企业红黑榜 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/useSupervise/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/useSupervise/index.vue
new file mode 100644
index 0000000..0182045
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/useSupervise/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <CustomCard>使用监管 </CustomCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomCard from '@/components/CustomCard.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

From cc1ae6969e4a489951c0feb5220fecea64697f9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=83=B3?= <826276471@qq.com>
Date: Fri, 7 Mar 2025 17:32:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=E6=8A=95=E5=85=A5=E5=93=81=E7=9B=91?=
 =?UTF-8?q?=E7=AE=A1=E5=B9=B3=E5=8F=B0=E6=A8=A1=E5=9D=97=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/modules/inputSupplies/index.js | 88 +++++++++----------
 .../inputSuppliesManage/common/typeRadio.vue  | 56 ++++++++++++
 .../redBlackRank/common/rankCard.vue          | 67 ++++++++++++++
 .../redBlackRank/index.vue                    | 62 ++++++++++++-
 4 files changed, 227 insertions(+), 46 deletions(-)
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/common/typeRadio.vue
 create mode 100644 sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/common/rankCard.vue

diff --git a/sub-government-affairs-service/src/router/modules/inputSupplies/index.js b/sub-government-affairs-service/src/router/modules/inputSupplies/index.js
index 6f50be0..3de517a 100644
--- a/sub-government-affairs-service/src/router/modules/inputSupplies/index.js
+++ b/sub-government-affairs-service/src/router/modules/inputSupplies/index.js
@@ -5,63 +5,63 @@ const inputSuppliesRoutes = [
     path: '/sub-government-affairs-service/inputSuppliesManage',
     name: 'inputSuppliesManage',
     component: Layout,
-    redirect: '/sub-government-affairs-service/inputDataView',
+    redirect: '/sub-government-affairs-service/basicInfo',
     meta: { title: '投入品监管平台', icon: 'Document' },
     children: [
-      {
-        path: '/sub-government-affairs-service/inputDataView',
-        name: 'inputDataView',
-        component: () => import('@/views/inputSuppliesManage/inputDataView/index.vue'),
-        meta: { title: '投入品资源一张图', icon: 'Document' },
-      },
+      // {
+      //   path: '/sub-government-affairs-service/inputDataView',
+      //   name: 'inputDataView',
+      //   component: () => import('@/views/inputSuppliesManage/inputDataView/index.vue'),
+      //   meta: { title: '投入品资源一张图', icon: 'Document' },
+      // },
       {
         path: '/sub-government-affairs-service/basicInfo',
         name: 'basicInfo',
         component: () => import('@/views/inputSuppliesManage/basicInfo/index.vue'),
-        meta: { title: '基本信息管理', icon: 'Document' },
-      },
-      {
-        path: '/sub-government-affairs-service/productionDealer',
-        name: 'productionDealer',
-        component: () => import('@/views/inputSuppliesManage/productionDealer/index.vue'),
-        meta: { title: '生产经销商管理', icon: 'Document' },
-      },
-      {
-        path: '/sub-government-affairs-service/enterpriseDealer',
-        name: 'enterpriseDealer',
-        component: () => import('@/views/inputSuppliesManage/enterpriseDealer/index.vue'),
-        meta: { title: '企业经销商抽检', icon: 'Document' },
-      },
-      {
-        path: '/sub-government-affairs-service/useSupervise',
-        name: 'useSupervise',
-        component: () => import('@/views/inputSuppliesManage/useSupervise/index.vue'),
-        meta: { title: '使用监管', icon: 'Document' },
-      },
-      {
-        path: '/sub-government-affairs-service/leaseSupervise',
-        name: 'leaseSupervise',
-        component: () => import('@/views/inputSuppliesManage/leaseSupervise/index.vue'),
-        meta: { title: '农机租赁监管', icon: 'Document' },
+        meta: { title: '物资', icon: 'Document' },
       },
+      // {
+      //   path: '/sub-government-affairs-service/productionDealer',
+      //   name: 'productionDealer',
+      //   component: () => import('@/views/inputSuppliesManage/productionDealer/index.vue'),
+      //   meta: { title: '生产经销商管理', icon: 'Document' },
+      // },
+      // {
+      //   path: '/sub-government-affairs-service/enterpriseDealer',
+      //   name: 'enterpriseDealer',
+      //   component: () => import('@/views/inputSuppliesManage/enterpriseDealer/index.vue'),
+      //   meta: { title: '企业经销商抽检', icon: 'Document' },
+      // },
+      // {
+      //   path: '/sub-government-affairs-service/useSupervise',
+      //   name: 'useSupervise',
+      //   component: () => import('@/views/inputSuppliesManage/useSupervise/index.vue'),
+      //   meta: { title: '使用监管', icon: 'Document' },
+      // },
+      // {
+      //   path: '/sub-government-affairs-service/leaseSupervise',
+      //   name: 'leaseSupervise',
+      //   component: () => import('@/views/inputSuppliesManage/leaseSupervise/index.vue'),
+      //   meta: { title: '农机租赁监管', icon: 'Document' },
+      // },
       {
         path: '/sub-government-affairs-service/redBlackRank',
         name: 'redBlackRank',
         component: () => import('@/views/inputSuppliesManage/redBlackRank/index.vue'),
         meta: { title: '企业红黑榜', icon: 'Document' },
       },
-      {
-        path: '/sub-government-affairs-service/knowledgeManage',
-        name: 'knowledgeManage',
-        component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
-        meta: { title: '知识库', icon: 'Document' },
-      },
-      {
-        path: '/sub-government-affairs-service/patrolCaseManage',
-        name: 'patrolCaseManage',
-        component: () => import('@/views/inputSuppliesManage/patrolCaseManage/index.vue'),
-        meta: { title: '巡查与案件管理', icon: 'Document' },
-      },
+      // {
+      //   path: '/sub-government-affairs-service/knowledgeManage',
+      //   name: 'knowledgeManage',
+      //   component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
+      //   meta: { title: '知识库', icon: 'Document' },
+      // },
+      // {
+      //   path: '/sub-government-affairs-service/patrolCaseManage',
+      //   name: 'patrolCaseManage',
+      //   component: () => import('@/views/inputSuppliesManage/patrolCaseManage/index.vue'),
+      //   meta: { title: '巡查与案件管理', icon: 'Document' },
+      // },
     ],
   },
 ];
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/common/typeRadio.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/common/typeRadio.vue
new file mode 100644
index 0000000..82e50d3
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/common/typeRadio.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-radio-group v-model="landType" class="radio_group" style="margin-bottom: 30px" @change="getList()">
+    <el-radio-button v-for="item in props.option" :key="'radio_' + item.value" :value="item.value">
+      {{ item.label }}
+    </el-radio-button>
+  </el-radio-group>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  option: {
+    type: Array,
+    default: () => [
+      {
+        value: '1',
+        label: 'label 1',
+      },
+      {
+        value: '2',
+        label: 'label 2',
+      },
+      {
+        value: '3',
+        label: 'label 3',
+      },
+    ],
+  },
+});
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+.radio_group {
+  justify-content: center;
+  width: 100%;
+  > label {
+    width: 12%;
+    ::v-deep() {
+      .el-radio-button__inner {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/common/rankCard.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/common/rankCard.vue
new file mode 100644
index 0000000..f12c9a9
--- /dev/null
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/common/rankCard.vue
@@ -0,0 +1,67 @@
+<template>
+  <section class="rank_content" :style="{ '--theme': props.type == 1 ? 'red' : 'black' }">
+    <h2>{{ props.type == '1' ? '红' : '黑' }}榜</h2>
+    <div v-for="(item, i) in props.data" :key="`rank_${props.type}_${i}`" class="rank_item">
+      <div class="name">{{ item.name }}</div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '1',
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+.rank_content {
+  border: 1px solid skyblue;
+  border-radius: 2px;
+  h2 {
+    padding: 4px 0;
+    font-size: 28px;
+    font-family: '黑体';
+    text-align: center;
+    color: var(--theme);
+  }
+  > .rank_item {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    border-top: 1px solid skyblue;
+    > div {
+      padding: 6px 12px;
+      border-right: 1px solid skyblue;
+    }
+    :last-child {
+      border-right: none;
+    }
+    .name {
+      font-size: 18px;
+      color: var(--theme);
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue
index 6f1e494..bd13997 100644
--- a/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/redBlackRank/index.vue
@@ -1,14 +1,64 @@
 <template>
-  <CustomCard>企业红黑榜 </CustomCard>
+  <CustomCard>
+    <section class="rank_container">
+      <RankCard type="1" :data="redData" />
+      <RankCard type="2" :data="blackData" />
+    </section>
+  </CustomCard>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import CustomCard from '@/components/CustomCard.vue';
+import RankCard from './common/rankCard.vue';
 
 /* --------------- data --------------- */
 // #region
 
+const redData = ref([
+  {
+    id: '1',
+    name: '企业1',
+  },
+  {
+    id: '2',
+    name: '企业2',
+  },
+  {
+    id: '3',
+    name: '企业3',
+  },
+  {
+    id: '4',
+    name: '企业4',
+  },
+  {
+    id: '5',
+    name: '企业5',
+  },
+  {
+    id: '6',
+    name: '企业6',
+  },
+  {
+    id: '7',
+    name: '企业7',
+  },
+  {
+    id: '8',
+    name: '企业8',
+  },
+  {
+    id: '9',
+    name: '企业9',
+  },
+  {
+    id: '10',
+    name: '企业10',
+  },
+]);
+const blackData = ref(JSON.parse(JSON.stringify(redData.value)));
+
 // #endregion
 
 /* --------------- methods --------------- */
@@ -17,4 +67,12 @@ import CustomCard from '@/components/CustomCard.vue';
 // #endregion
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.rank_container {
+  padding: 40px 0;
+  display: grid;
+  justify-content: center;
+  grid-template-columns: calc(30%) calc(30%);
+  gap: 40px;
+}
+</style>