feat:投入品监管平台模块搭建
This commit is contained in:
parent
760fcdcf17
commit
cc1ae6969e
@ -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' },
|
||||
// },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user