```
feat(router): 移除首页路由配置并添加Node版本文件 移除了原有的首页(home)路由配置,该路由包含进入系统主菜单和各种业务模块的快捷入口, 包括经营异常、严重违法、市场主体除名、批量吊销、撤销登记、联合惩戒、年报管理、智慧认领、 强制注销、综合查询、组织架构和系统管理等功能。 同时新增了.node-version文件,指定项目使用的Node版本为14.19.*,以确保开发环境的一致性。 ```
This commit is contained in:
parent
70a565555c
commit
56fc9f45d5
|
|
@ -0,0 +1 @@
|
|||
14.19.*
|
||||
|
|
@ -93,21 +93,6 @@ export const constantRoutes = [
|
|||
hidden: true,
|
||||
meta: { title: '用于同路由刷新', icon: 'home' }
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: Layout,
|
||||
redirect: '/home/index',
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/home/index',
|
||||
name: 'homeindex',
|
||||
component: () => import('@/views/home/index'),
|
||||
meta: { title: '首页', icon: 'home', hiddenMenu: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/menuIndex',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -1,616 +0,0 @@
|
|||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="left-content">
|
||||
<div
|
||||
class="entry"
|
||||
@click="()=>{
|
||||
$router.push({ path: '/menuIndex' })
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="home" />
|
||||
进入系统主菜单
|
||||
</div>
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="title">
|
||||
菜单快捷入口
|
||||
</div>
|
||||
<svg-icon icon-class="setting" />
|
||||
</div>
|
||||
<div class="menu-grid">
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m1" />
|
||||
<div>经营异常</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/illegalQuery'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m2" />
|
||||
<div>严重违法</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m3" />
|
||||
<div>市场主体除名</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m3" />
|
||||
<div>批量吊销</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m4" />
|
||||
<div>撤销登记</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m5" />
|
||||
<div>联合惩戒</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m6" />
|
||||
<div>年报管理</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m6" />
|
||||
<div>智慧认领</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m7" />
|
||||
<div>强制注销</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m7" />
|
||||
<div> 综合查询</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m8" />
|
||||
<div>组织架构</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
@click="()=>{
|
||||
$router.push({
|
||||
path: '/aiccs/comprehensive/abnMarket'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<svg-icon icon-class="m8" />
|
||||
<div>系统管理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="main-content">
|
||||
|
||||
<div class="todo-and-card">
|
||||
<!-- 待办事项总览 -->
|
||||
<div class="todo-header">
|
||||
<span class="title">待办事项总览</span>
|
||||
<span class="tag normal">正常 <span class="color">12</span></span>
|
||||
<span class="tag overdue">超期 <span class="color">42</span></span>
|
||||
<span class="tag soon-overdue">即将超期 <span class="color">122</span></span>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="card-group">
|
||||
<div class="stat-card">
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="d1" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="card-icon">经营异常</div>
|
||||
<div class="card-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="d2" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="card-icon">严重违法</div>
|
||||
<div class="card-num">0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="d3" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="card-icon">联合惩戒</div>
|
||||
<div class="card-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="d1" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="card-icon">撤销登记</div>
|
||||
<div class="card-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="d2" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="card-icon">市场除名</div>
|
||||
<div class="card-num">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="chart-container">
|
||||
<!-- 柱状图 -->
|
||||
<div class="chart-item bar-chart">
|
||||
<div class="chart-title">各市经营异常主体数量对比</div>
|
||||
<div id="barChart" class="chart-box" />
|
||||
</div>
|
||||
<!-- 环形图 -->
|
||||
<div class="chart-item pie-chart">
|
||||
<div class="chart-title">经营异常主体类型分布</div>
|
||||
<div id="pieChart" class="chart-box" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'BusinessAbnormalDashboard',
|
||||
data() {
|
||||
return {
|
||||
barChart: null,
|
||||
pieChart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initBarChart()
|
||||
this.initPieChart()
|
||||
// 监听窗口大小变化,自适应图表
|
||||
window.addEventListener('resize', () => {
|
||||
this.barChart.resize()
|
||||
this.pieChart.resize()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', () => {
|
||||
this.barChart.resize()
|
||||
this.pieChart.resize()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 初始化柱状图
|
||||
initBarChart() {
|
||||
const chartDom = document.getElementById('barChart')
|
||||
this.barChart = echarts.init(chartDom)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'呼和浩特市', '包头市', '呼伦贝尔市', '兴安盟', '通辽市', '赤峰市',
|
||||
'锡林郭勒盟', '乌兰察布市', '鄂尔多斯市', '巴彦淖尔市', '乌海市', '阿拉善盟'
|
||||
],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量(家)',
|
||||
nameTextStyle: { fontSize: 12 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
250000, 200000, 160000, 100000, 140000, 190000,
|
||||
90000, 130000, 210000, 100000, 70000, 60000
|
||||
],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
// 渐变蓝色系
|
||||
const colors = [
|
||||
'#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a',
|
||||
'#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a'
|
||||
]
|
||||
return colors[params.dataIndex]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.barChart.setOption(option)
|
||||
},
|
||||
// 初始化环形图
|
||||
initPieChart() {
|
||||
const chartDom = document.getElementById('pieChart')
|
||||
this.pieChart = echarts.init(chartDom)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center',
|
||||
textStyle: { fontSize: 12 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '主体类型',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 25, name: '企业' },
|
||||
{ value: 65, name: '个体工商户' },
|
||||
{ value: 10, name: '农民专业合作社' }
|
||||
],
|
||||
color: ['#409eff', '#66b1ff', '#a0cfff']
|
||||
}
|
||||
]
|
||||
}
|
||||
this.pieChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #f5f7fa;
|
||||
padding: 20px 12px;
|
||||
.left-content{
|
||||
.entry{
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3296FA;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 6px 0px #DDDDDD;
|
||||
background: #FFFFFF;
|
||||
.svg-icon{
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
// 左侧菜单样式
|
||||
.sidebar {
|
||||
margin-top: 15px;
|
||||
width: 234px;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
box-shadow: 0px 2px 6px 0px #DDDDDD;
|
||||
|
||||
.sidebar-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
margin-left: 14px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
border-radius: 1px;
|
||||
background: #3296FA;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
|
||||
.menu-item {
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
|
||||
}
|
||||
.svg-icon{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧主内容
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 0 20px 20px 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
.todo-and-card{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 6px 0px #DDDDDD;
|
||||
padding: 16px 13px;
|
||||
margin-bottom: 20px;
|
||||
// 待办事项头部
|
||||
.todo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: relative;
|
||||
margin-right: 94px;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
border-radius: 1px;
|
||||
background: #3296FA;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
.color{
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
&.normal {
|
||||
.color{
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
&.overdue {
|
||||
.color{
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
&.soon-overdue {
|
||||
.color{
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片组
|
||||
.card-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 35px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
.icon{
|
||||
background: #EBF5FF;
|
||||
border-radius: 65px;
|
||||
padding: 4px;
|
||||
border: 4px solid #FFFFFF;
|
||||
box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
|
||||
.svg-icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
.card-icon {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-num {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图表容器
|
||||
.chart-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 400px;
|
||||
|
||||
.chart-item {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&.bar-chart {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
&.pie-chart {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 1200px) {
|
||||
.chart-container {
|
||||
flex-direction: column;
|
||||
height: auto !important;
|
||||
|
||||
.chart-item {
|
||||
height: 400px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue