parent
85777235b2
commit
8302af65f4
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 263 KiB |
|
After Width: | Height: | Size: 508 KiB |
|
After Width: | Height: | Size: 669 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 134 KiB |
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="navbarleft">
|
||||
<!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||
@toggleClick="toggleSideBar" /> -->
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import TopNav from '@/components/TopNav'
|
||||
// import Hamburger from '@/components/Hamburger'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import RuoYiGit from '@/components/RuoYi/Git'
|
||||
import RuoYiDoc from '@/components/RuoYi/Doc'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
TopNav,
|
||||
// Hamburger,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search,
|
||||
RuoYiGit,
|
||||
RuoYiDoc
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'device'
|
||||
]),
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showSettings',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// toggleSideBar() {
|
||||
// this.$store.dispatch('app/toggleSideBar')
|
||||
// },
|
||||
async logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
})
|
||||
}).catch(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
|
||||
.logoimg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navbarleft{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
border-bottom: 1px solid #f3f4f5;
|
||||
}
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 30px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,127 @@
|
||||
<template>
|
||||
<div>项目整体情况</div>
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="title">整体项目情况</div class="title">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目总数</th>
|
||||
<th>建筑面积(万平方米)</th>
|
||||
<th>已建数量(个)</th>
|
||||
<th>在建数量(个)</th>
|
||||
<th>拟建数量(个)</th>
|
||||
<th style="visibility: hidden;">拟建数量(个)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ projectData.totalProjects }}</td>
|
||||
<td>{{ projectData.totalArea }}</td>
|
||||
<td>{{ projectData.completedProjects }}</td>
|
||||
<td>{{ projectData.ongoingProjects }}</td>
|
||||
<td>{{ projectData.plannedProjects }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">当年项目情况</div class="title">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>新开工项目数</th>
|
||||
<th>建筑面积(万平方米)</th>
|
||||
<th>已建数量(个)</th>
|
||||
<th>在建数量(个)</th>
|
||||
<th style="visibility: hidden;">拟建数量(个)</th>
|
||||
<th style="visibility: hidden;">拟建数量(个)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ projectData.totalProjects }}</td>
|
||||
<td>{{ projectData.totalArea }}</td>
|
||||
<td>{{ projectData.completedProjects }}</td>
|
||||
<td>{{ projectData.ongoingProjects }}</td>
|
||||
<!-- <td>{{ projectData.plannedProjects }}</td> -->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projectData: {
|
||||
totalProjects: 384,
|
||||
totalArea: 2352.6,
|
||||
completedProjects: 189,
|
||||
ongoingProjects: 100,
|
||||
plannedProjects: 97
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
</script>
|
||||
th,
|
||||
td {
|
||||
border: none;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: .5rem;
|
||||
margin-left: .4rem;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 0.88rem;
|
||||
color: #7B8599;
|
||||
line-height: 1.19rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
tbody tr {
|
||||
font-family: DIN, DIN;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
color: #292C33;
|
||||
line-height: 2.11rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,166 +1,76 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2>项目总数</h2>
|
||||
<p>384</p>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div ref="chart" :style="{ width: '100%', height: '300px' }"></div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div v-for="item in legendData" :key="item.name" class="legend-item">
|
||||
<span class="color-block" :style="{ backgroundColor: item.color }"></span>
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<span class="value">{{ item.value }}个</span>
|
||||
<span class="percentage">{{ item.percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'ProjectDistributionModule',
|
||||
data() {
|
||||
return {
|
||||
legendData: [
|
||||
{ name: '高贸区', value: 54, percentage: 30, color: '#6eb158' },
|
||||
{ name: '科创区', value: 65, percentage: 35, color: '#3f8cff' },
|
||||
{ name: '度假区', value: 32, percentage: 12, color: '#ffc107' },
|
||||
{ name: '商务区', value: 25, percentage: 13, color: '#cdcdcd' },
|
||||
{ name: '苏相合作区', value: 15, percentage: 10, color: '#ff6b6b' },
|
||||
],
|
||||
};
|
||||
},
|
||||
name: 'RingChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose();
|
||||
}
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
this.myChart = echarts.init(this.$refs.chart);
|
||||
const option = this.getChartOption();
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
renderChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
// 获取图表配置
|
||||
getChartOption() {
|
||||
return {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
right: '10%', // 图例在右侧
|
||||
top: 'center', // 图例垂直居中
|
||||
itemGap: 20, //右侧间隔
|
||||
formatter: function (name) {
|
||||
// 自定义图例显示格式
|
||||
const data = [
|
||||
{ value: 54, name: '高贸区' , itemStyle:{color:'#36C3FB'}},
|
||||
{ value: 65, name: '科创区' , itemStyle:{color:'#5B76F9'} },
|
||||
{ value: 32, name: '度假区' , itemStyle:{color:'#F08445'} },
|
||||
{ value: 25, name: '商务区' , itemStyle:{color:'#F6B600'} },
|
||||
{ value: 15, name: '苏相合作区' , itemStyle:{color:'#50DFB3'} }
|
||||
];
|
||||
// 文本标签
|
||||
const item = data.find(item => item.name === name);
|
||||
return `${name} ${item.value}个 ${((item.value / 384) * 100).toFixed(1)}%`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '项目分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'], // 圆环图的内半径和外半径
|
||||
data: this.legendData.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
})),
|
||||
radius: ['40%', '70%'],
|
||||
center: ['30%', '50%'],
|
||||
data: [
|
||||
{ value: 54, name: '高贸区' , itemStyle:{color:'#36C3FB'}},
|
||||
{ value: 65, name: '科创区' , itemStyle:{color:'#5B76F9'} },
|
||||
{ value: 32, name: '度假区' , itemStyle:{color:'#F08445'} },
|
||||
{ value: 25, name: '商务区' , itemStyle:{color:'#F6B600'} },
|
||||
{ value: 15, name: '苏相合作区' , itemStyle:{color:'#50DFB3'} }
|
||||
],
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}\n{c} ({d}%)', // 标签内容格式
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
labelLine: {
|
||||
show: false, // 隐藏引导线
|
||||
show: false // 隐藏饼图内部的标签
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
color: this.legendData.map(item => item.color),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
// 调整图表大小
|
||||
resizeChart() {
|
||||
if (this.myChart) {
|
||||
this.myChart.resize();
|
||||
}
|
||||
},
|
||||
},
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 40rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.color-block {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value,
|
||||
.percentage {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
/* 你可以在这里添加样式 */
|
||||
</style>
|
||||
@ -1,3 +1,74 @@
|
||||
<template>
|
||||
<div>分析</div>
|
||||
</template>
|
||||
</template><template>
|
||||
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'RingChart',
|
||||
mounted() {
|
||||
this.renderChart();
|
||||
},
|
||||
methods: {
|
||||
renderChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
right: '10%', // 图例在右侧
|
||||
top: 'center', // 图例垂直居中
|
||||
itemGap: 40, //右侧间隔
|
||||
formatter: function (name) {
|
||||
// 自定义图例显示格式
|
||||
const data = [
|
||||
{ value: 54, name: '国企' },
|
||||
{ value: 65, name: '民企' },
|
||||
{ value: 32, name: '外企' },
|
||||
];
|
||||
// 文本标签
|
||||
const item = data.find(item => item.name === name);
|
||||
return `${name} ${item.value}个 ${((item.value / 384) * 100).toFixed(1)}%`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '项目分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['30%', '50%'],
|
||||
data: [
|
||||
{ value: 54, name: '国企' , itemStyle:{color:'#36C3FB'}},
|
||||
{ value: 65, name: '民企' , itemStyle:{color:'#5B76F9'} },
|
||||
{ value: 32, name: '外企' , itemStyle:{color:'#F08445'} },
|
||||
],
|
||||
label: {
|
||||
show: false // 隐藏饼图内部的标签
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 你可以在这里添加样式 */
|
||||
</style>
|
||||
@ -1,13 +1,66 @@
|
||||
<template>
|
||||
<div>消息通知</div>
|
||||
<div class="container">
|
||||
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
||||
<el-table-column width="80">
|
||||
<template slot-scope="scope">
|
||||
<img :src="getIcon(scope.$index)" alt="icon" style="width: 2.19rem; height: 1.25rem;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" width="300">
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'xxxxxxx项目2024年12月项目进展未填写',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIcon(index) {
|
||||
return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.container{
|
||||
width: 30rem;
|
||||
height: 15.5rem;;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,99 @@
|
||||
<template>
|
||||
<div>项目列表</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<div class="projectList">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="项目名称"
|
||||
width="170">
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="所在区域">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="data"
|
||||
label='总投资额(万元)'
|
||||
width="88"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="data"
|
||||
label='建筑面积(万平方米)'
|
||||
width="88">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="70">
|
||||
<template slot-scope="scope">
|
||||
<span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 1518 弄',
|
||||
data: '1000',
|
||||
status: '在建'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 1517 弄',
|
||||
data: '1500',
|
||||
status: '拟建'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 1519 弄',
|
||||
data: '2000',
|
||||
status: '已建'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 1516 弄',
|
||||
data: '2500',
|
||||
status: '在建'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStatusColor(status) {
|
||||
switch (status) {
|
||||
case '在建':
|
||||
return 'color: #2DD29F;';
|
||||
case '拟建':
|
||||
return 'color: #F08445;';
|
||||
case '已建':
|
||||
return 'color: #2B62F1;';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.projectList {
|
||||
padding: 0 .5rem 0rem 0;
|
||||
height: 15rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<h1>项目详情</h1>
|
||||
<el-form :model="project" label-width="120px">
|
||||
<el-form-item label="项目编号">
|
||||
<span>{{ project.postId }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目编码">
|
||||
<span>{{ project.postCode }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称">
|
||||
<span>{{ project.postName }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目排序">
|
||||
<span>{{ project.postSort }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="project.status"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<span>{{ parseTime(project.createTime) }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<span>{{ project.remark }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPost } from "@/api/system/post";
|
||||
|
||||
export default {
|
||||
name: "ProjectDetail",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
project: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const postId = this.$route.params.postId;
|
||||
this.getProjectDetail(postId);
|
||||
},
|
||||
methods: {
|
||||
getProjectDetail(postId) {
|
||||
getPost(postId).then(response => {
|
||||
this.project = response.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="项目编码" prop="postCode">
|
||||
<el-input
|
||||
v-model="queryParams.postCode"
|
||||
placeholder="请输入项目编码"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="postName">
|
||||
<el-input
|
||||
v-model="queryParams.postName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="项目状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:post:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:post:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:post:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:post:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="项目编号" align="center" prop="postId" />
|
||||
<el-table-column label="项目编码" align="center" prop="postCode" />
|
||||
<el-table-column label="项目名称" align="center" prop="postName" />
|
||||
<el-table-column label="项目排序" align="center" prop="postSort" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleDetail(scope.row)"
|
||||
v-hasPermi="['system:post:detail']"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:post:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:post:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改项目对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="项目名称" prop="postName">
|
||||
<el-input v-model="form.postName" placeholder="请输入项目名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目编码" prop="postCode">
|
||||
<el-input v-model="form.postCode" placeholder="请输入编码名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目顺序" prop="postSort">
|
||||
<el-input-number v-model="form.postSort" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
|
||||
|
||||
export default {
|
||||
name: "Post",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 项目表格数据
|
||||
postList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
postCode: undefined,
|
||||
postName: undefined,
|
||||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
postName: [
|
||||
{ required: true, message: "项目名称不能为空", trigger: "blur" }
|
||||
],
|
||||
postCode: [
|
||||
{ required: true, message: "项目编码不能为空", trigger: "blur" }
|
||||
],
|
||||
postSort: [
|
||||
{ required: true, message: "项目顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询项目列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listPost(this.queryParams).then(response => {
|
||||
this.postList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
postId: undefined,
|
||||
postCode: undefined,
|
||||
postName: undefined,
|
||||
postSort: 0,
|
||||
status: "0",
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.postId)
|
||||
this.single = selection.length!=1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加项目";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const postId = row.postId || this.ids
|
||||
getPost(postId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改项目";
|
||||
});
|
||||
},
|
||||
/** 详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
const userId = row.postId;
|
||||
this.$router.push("/manage/detail/" + postId);
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.postId != undefined) {
|
||||
updatePost(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addPost(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const postIds = row.postId || this.ids;
|
||||
this.$modal.confirm('是否确认删除项目编号为"' + postIds + '"的数据项？').then(function() {
|
||||
return delPost(postIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/post/export', {
|
||||
...this.queryParams
|
||||
}, `post_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
Loading…
Reference in new issue