feat:投入品监管平台模块搭建

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',
+      //   path: '/sub-government-affairs-service/inputDataView',
-        name: 'inputDataView',
+      //   name: 'inputDataView',
-        component: () => import('@/views/inputSuppliesManage/inputDataView/index.vue'),
+      //   component: () => import('@/views/inputSuppliesManage/inputDataView/index.vue'),
-        meta: { title: '投入品资源一张图', icon: 'Document' },
+      //   meta: { title: '投入品资源一张图', icon: 'Document' },
-      },
+      // },
       {
         path: '/sub-government-affairs-service/basicInfo',
         name: 'basicInfo',
         component: () => import('@/views/inputSuppliesManage/basicInfo/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/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',
+      //   path: '/sub-government-affairs-service/knowledgeManage',
-        name: 'knowledgeManage',
+      //   name: 'knowledgeManage',
-        component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
+      //   component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
-        meta: { title: '知识库', icon: 'Document' },
+      //   meta: { title: '知识库', icon: 'Document' },
-      },
+      // },
-      {
+      // {
-        path: '/sub-government-affairs-service/patrolCaseManage',
+      //   path: '/sub-government-affairs-service/patrolCaseManage',
-        name: 'patrolCaseManage',
+      //   name: 'patrolCaseManage',
-        component: () => import('@/views/inputSuppliesManage/patrolCaseManage/index.vue'),
+      //   component: () => import('@/views/inputSuppliesManage/patrolCaseManage/index.vue'),
-        meta: { title: '巡查与案件管理', icon: 'Document' },
+      //   meta: { title: '巡查与案件管理', icon: 'Document' },
-      },
+      // },
     ],
   },
 ];

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>

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>

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>