You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
11 KiB
371 lines
11 KiB
<template>
|
|
<view class="project">
|
|
<!-- Tabs栏 -->
|
|
<view class="tabs">
|
|
<view class="tab" :class="{'active': activeTab === 0}" @click="changeTab(0)">
|
|
<view class="tab-text">监督检查</view>
|
|
</view>
|
|
<view class="tab" :class="{'active': activeTab === 1}" @click="changeTab(1)">
|
|
<view class="tab-text">草稿</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="cc-search search-bar">
|
|
<view class="search-box">
|
|
<image src="/static/images/icon/search.png" />
|
|
<input v-model="searchQuery" type="text" placeholder="请输入项目名称或项目编号" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 行政区划和项目类型下拉框 -->
|
|
<view class="cc-query-dropdowns dropdowns">
|
|
<picker mode="selector" :range="districts" v-model="selectedDistrict">
|
|
<view class="dropdown">行政区划<image src="/static/images/icon/down.png" /></view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 项目列表 -->
|
|
<view class="project-list">
|
|
<view v-for="(project, index) in projectCheckList" :key="index" class="project-card">
|
|
<view class="attr-item project-title">{{ project.projectName }}</view>
|
|
<view class="attr-item">
|
|
<view class="attr-title">项目编号</view>
|
|
<view class="attr-value">{{ project.proCode }}</view>
|
|
</view>
|
|
<view class="attr-item">
|
|
<view class="attr-title">行政区划</view>
|
|
<view class="attr-value">{{ project.adcdName }}</view>
|
|
</view>
|
|
<view v-if="activeTab===0" class="attr-item">
|
|
<view class="attr-title">检查次数</view>
|
|
<view class="attr-value">{{ project.checkNum }}</view>
|
|
</view>
|
|
<view v-if="activeTab===0" class="attr-item">
|
|
<view class="attr-title">发现问题数</view>
|
|
<view class="attr-value">{{ project.problemTotal }}</view>
|
|
</view>
|
|
<view v-if="activeTab===0" class="attr-item">
|
|
<view class="attr-title">未更改总数</view>
|
|
<view class="attr-value">{{ project.notRectifiedNum }}</view>
|
|
</view>
|
|
<view v-if="activeTab===0" class="attr-item">
|
|
<view class="attr-title">涉及责任单位数</view>
|
|
<view class="attr-value">{{ project.liabilityUnitsNum }}</view>
|
|
</view>
|
|
<view v-if="activeTab===1" class="attr-item">
|
|
<view class="attr-title">检查类型</view>
|
|
<view class="attr-value">{{ project.district }}</view>
|
|
</view>
|
|
<view class="operate-buttons">
|
|
<view class="buttons-group">
|
|
<view v-if="activeTab===0" class="primary-button__text button" @click="handleSeeProblem(project)">查看</view>
|
|
<view v-if="activeTab==1" class="primary-button__text button" @click="handleEditProject(project)">编辑</view>
|
|
<view v-if="activeTab==1" class="error-button__text button" @click="handleEditProject(project)">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view v-if="activeTab===0" class="operation-buttons">
|
|
<view class="buttons-group">
|
|
<view class="primary-button button" @click="handleAddCheck()">新增检查</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { projectCheckListApi } from '@/api/system/project'
|
|
import { addressList } from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/cityData.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeTab: 0, // 当前选中的Tab索引
|
|
searchQuery: '', // 搜索框的内容
|
|
selectedDistrict: 0, // 行政区划选择的索引
|
|
selectedProjectType: 0, // 项目类型选择的索引
|
|
districts: ['请选择', '北京市', '上海市', '广州市'], // 行政区划数据
|
|
projectTypes: ['请选择', '建筑', 'IT', '教育'], // 项目类型数据
|
|
// 省市区数据
|
|
addressTreeList: addressList,
|
|
addressList: [],
|
|
projects: [ // 项目列表
|
|
{ name: '项目1', code: 'P001', district: '北京市', type: '建筑', status: 1 },
|
|
{ name: '项目2', code: 'P002', district: '上海市', type: 'IT', status: 0},
|
|
{ name: '项目3', code: 'P003', district: '广州市', type: '教育', status: 1},
|
|
{ name: '项目4', code: 'P004', district: '北京市', type: '建筑', status: 1}
|
|
],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
params: {orderBy: "create_time", sortBy: "desc"},
|
|
data: {}
|
|
},
|
|
projectCheckList: []
|
|
};
|
|
},
|
|
computed: {
|
|
// filteredProjects() {
|
|
// return this.projects.filter(project => {
|
|
// // 根据搜索内容、行政区划和项目类型进行筛选
|
|
// const matchesSearch = project.name.toLowerCase().includes(this.searchQuery.toLowerCase());
|
|
// const matchesDistrict = this.selectedDistrict === 0 || project.district === this.districts[this.selectedDistrict];
|
|
// const matchesType = this.selectedProjectType === 0 || project.type === this.projectTypes[this.selectedProjectType];
|
|
// return matchesSearch && matchesDistrict && matchesType;
|
|
// });
|
|
// }
|
|
},
|
|
created() {
|
|
this.handleAddressTreeData()
|
|
this.getProjectCheckList()
|
|
},
|
|
onReachBottom() {
|
|
if (this.queryParams.pageNum < this.pages) {
|
|
this.queryParams.pageNum++; // 页码加1
|
|
this.getProjectCheckList()
|
|
}
|
|
},
|
|
methods: {
|
|
changeTab(index) {
|
|
this.activeTab = index;
|
|
},
|
|
|
|
// 获取项目列表
|
|
getProjectCheckList() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
projectCheckListApi(this.queryParams).then(res => {
|
|
this.projectCheckList = [...this.projectCheckList, ...res.records]
|
|
this.pages = res.pages
|
|
this.projectCheckList.forEach(projectItem => {
|
|
projectItem.adcdName = this.formatAdcd(projectItem)
|
|
})
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
// 将省市区的树状数据分解成列表,并在后面补零
|
|
handleAddressTreeData() {
|
|
let result = [];
|
|
function traverse(node) {
|
|
result.push({ code: node.code, name: node.name, dictLabel: node.name, dictValue: node.code}); // 将当前节点添加到结果中
|
|
if (node.children) {
|
|
node.children.forEach(child => traverse(child)); // 递归遍历子节点
|
|
}
|
|
}
|
|
this.addressTreeList.forEach(node => traverse(node)); // 遍历树的每个根节点
|
|
this.addressList = result
|
|
this.addressList.forEach(item => {
|
|
if (item.code.length===2) {
|
|
item.code = item.dictValue = item.code + '0000'
|
|
}
|
|
if (item.code.length===4) {
|
|
item.code = item.dictValue = item.code + '00'
|
|
}
|
|
})
|
|
},
|
|
|
|
// 处理省市区显示
|
|
formatAdcd(row) {
|
|
if (row.adcd) {
|
|
let provinceCode = row.adcd.slice(0, 2)+"0000";
|
|
let cityCode = row.adcd.slice(0, 4)+"00";
|
|
let areaCode = row.adcd;
|
|
let s="";
|
|
if (areaCode.length > 2) {
|
|
s=this.areaCodeFormat(provinceCode)
|
|
if (cityCode!=provinceCode){
|
|
s+="-"+this.areaCodeFormat(cityCode)
|
|
}
|
|
if (areaCode!=cityCode){
|
|
s+="-" + this.areaCodeFormat(areaCode)
|
|
}
|
|
}
|
|
return s
|
|
}
|
|
},
|
|
|
|
//行政区划字典
|
|
areaCodeFormat(adcd, column) {
|
|
return this.selectDictLabel(
|
|
this.addressList,
|
|
adcd
|
|
);
|
|
},
|
|
|
|
handleAddCheck() {
|
|
// 跳转到新增项目页面
|
|
this.$tab.navigateTo(`/pages/monitoring/edit/index`);
|
|
},
|
|
handleSeeProblem() {
|
|
// 跳转到查看问题页面
|
|
this.$tab.navigateTo(`/pages/monitoring/problem/list`);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project {
|
|
// padding: 20px;
|
|
.tabs {
|
|
height: 48px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #fff;
|
|
.tab {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
color: #595959;
|
|
cursor: pointer;
|
|
&.active {
|
|
color: #00B39D;
|
|
.tab-text {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #00B39D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .search-bar {
|
|
// padding: 12px 25px;
|
|
// background: #fff;
|
|
// border-top: 1px solid #f0f0f0;
|
|
// border-bottom: 1px solid #f0f0f0;
|
|
// .search-box {
|
|
// padding: 8px 20px;
|
|
// background: #f7f8fa;
|
|
// border-radius: 8px;
|
|
// }
|
|
// input {
|
|
// width: 100%;
|
|
// border: none;
|
|
// border-radius: 5px;
|
|
// }
|
|
// }
|
|
.dropdowns {
|
|
height: 48px;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
uni-picker {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.dropdown {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.project-list {
|
|
padding: 0 20px 95px;
|
|
.project-card {
|
|
background-color: #fff;
|
|
padding: 20px 0 0 0;
|
|
margin-top: 10px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
margin-top: 15px;
|
|
.attr-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #262626;
|
|
padding: 0 20px 20px 20px;
|
|
padding-bottom: 15px;
|
|
.attr-title {
|
|
font-size: 16px;
|
|
color: #595959;
|
|
}
|
|
.attr-value {
|
|
&.no-done {
|
|
color: #FF0000;
|
|
}
|
|
}
|
|
}
|
|
.operate-buttons {
|
|
border-top: 1px solid #f0f0f0;
|
|
display: flex;
|
|
height: 48px;
|
|
box-sizing: border-box;
|
|
.buttons-group {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
&:nth-child(1) {
|
|
.button {
|
|
border-right: 1px solid #f0f0f0;
|
|
&:nth-last-child(1) {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.button {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
&.primary-button__text {
|
|
color: #00B39D;
|
|
}
|
|
&.error-button__text {
|
|
color: #E04040;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.project-title {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.operation-buttons {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 80px;
|
|
padding: 16px 20px;
|
|
background: #fff;
|
|
border-top: 1px solid #f0f0f0;
|
|
.buttons-group {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.button {
|
|
cursor: pointer;
|
|
}
|
|
.primary-button {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background-color: #00B39D;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|