zj-mobile-oa/pages/digitalHousing/digitalHousing.vue

<template>
	<scroll-view>
		<view class="overview content">
			<scroll-view scroll-x="true">
				<view class="part">
					<view class="card" v-for="(item,index) in cardList" :key="index" :style="{'background-color':item.bgcColor}">
						<view>
							<image :src="item.icon" mode="scaleToFill"></image>
						</view>
						<view>
							<view>{{item.CNAME}}</view>
							<view style="margin-top: 20rpx;font-size: 50rpx;font-weight:600">{{item.TODOCOUNT}} 件</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="other">
				<button type="primary" @click="link1">住建一张图</button>
				<button type="primary" @click="link2">数据分析平台</button>
			</view>
		</view>
		<scroll-view class="tableList content">
			<myTable 
			:column="column" 
			:tableData="tableData"
			:pageCurrent="pageCurrent"
			:pageSize="pageSize"
			:total="total"
			blUrl="/pages/information/information?url=/pages/digitalHousing/digitalHousing"
			>
				<template #action="{row, blUrl}">
					<button class="uni-button" size="mini" type="primary" @click="handleBL(row, blUrl)">办理</button>
				</template>
			</myTable>
		</scroll-view>
	</scroll-view>
</template>

<script setup>
	import {ref} from "vue"
	import { onReady, onShow } from "@dcloudio/uni-app"
	import { ApiRequest } from "@/utils/request.js"
	
	const cardList = ref([
		{
			icon: "../../static/digitalIcon/u1.svg",
			CNAME: "党建工作",
			bgcColor: "#cfe8f5",
			TODOCOUNT: 0
		},
		{
			icon: "../../static/digitalIcon/u2.svg",
			CNAME: "公文办理",
			bgcColor: "#cfe8f5",
			TODOCOUNT: 5
		},
		{
			icon: "../../static/digitalIcon/u3.svg",
			CNAME: "业务办理",
			bgcColor: "#cfe8f5",
			TODOCOUNT: 0
		},
		{
			icon: "../../static/digitalIcon/u4.svg",
			CNAME: "数字住建",
			bgcColor: "#ffeccf",
			TODOCOUNT: 0
		},
		{
			icon: "../../static/digitalIcon/u5.svg",
			CNAME: "政务管理",
			bgcColor: "#eae9f7",
			TODOCOUNT: 1
		},
		{
			icon: "../../static/digitalIcon/u6.svg",
			CNAME: "监察督办",
			bgcColor: "#eae9f7",
			TODOCOUNT: 0
		}
	])
	const pageCurrent = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const column = ref([
		{
			title:"紧急程度",
			key:"JJCD"
		},
		{
			title:"公文种类",
			key:"FLOWNAME"
		},
		{
			title:"标题",
			key:"TITLE"
		},
		{
			title:"操作",
			key:"action"
		}
	])
	const tableData = ref([])
	
	function link1() {
		console.log(123+'一张图')
	}
	
	function link2() {
		console.log(456+'分析平台')
	}
	
	//加载顶部卡片
	function loadCard(){
		ApiRequest({
			url: '/g2work/routeinfo/queryDataToDoFlowRouteCountDesktopByUseridGroup',
			method: 'POST',
			data:{
				userid:uni.getStorageSync('GlWorkPlatform-userid')
			}
		}).then(res=>{
			if(res.code === 0 && res.success){
				cardList.value = res.data.map((item,index)=>{
					return{
						icon: `../../static/digitalIcon/u${index > 5 ? index - 5 : index + 1}.svg`,
						CNAME: item.CNAME,
						TODOCOUNT: item.TODOCOUNT,
						bgcColor: index < 3 ? '#cfe8f5' : index===3 ? '#ffeccf': '#eae9f7'
					}
				})
			}
		})
	}
	
	function getTableList(pageno){
		ApiRequest({
			url: '/g2work/routeinfo/queryDataTodoWithPage',
			method: 'POST',
			data:{
				pageno: pageno || pageCurrent.value,
				pagesize: pageSize.value,
				userid: uni.getStorageSync('GlWorkPlatform-userid'),
				querycondition: "[]",
				ordercondition:  "",
				flowid: "AA20|AA03|AA10|AA55|AA56|AA57|AA08|AA23|AA77|AA06",
				columnscondition: '[{"COLID":"JJCD","COLUMNS":"FW_ZSWSXW.JJCD|FW_ZSWPXXW.JJCD|FW_ZB.JJCD|FW_GFXWJXGMRBM.JJCD|FW_WFH.JJCD|FW_SPJ.JJCD|FW_ZRBGHYJY.JJCD|FW_HYJY.JJCD"},{"COLID":"GWZL","COLUMNS":"FW_ZSWSXW.GWZL|FW_ZSWPXXW.GWZL|FW_ZB.GWZL|FW_GWHBGSFW.FWZL|FW_GWHFWGZ.FWZL|FW_GFXWJXGMRBM.GWZL|FW_WFH.GWZL|FW_SPJ.GWZL|FW_ZRBGHYJY.GWZL|FW_HYJY.GWZL"},{"COLID":"FWZH","COLUMNS":"FW_ZSWSXW.FWZH|FW_ZSWPXXW.FWZH|FW_ZB.FWZH|FW_GFXWJXGMRBM.FWZH|FW_WFH.FWZH|FW_SPJ.FWZH|FW_ZRBGHYJY.FWZH|FW_HYJY.FWZH"},{"COLID":"NGRBM","COLUMNS":"FW_ZSWSXW.NGRBM|FW_ZSWPXXW.NGRBM|FW_ZB.NGRBM|FW_GWHBGSFW.NGRBM|FW_GWHFWGZ.NGRBM|FW_GFXWJXGMRBM.NGRBM|FW_WFH.NGRBM|FW_SPJ.NGRBM|FW_ZRBGHYJY.NGRBM|FW_HYJY.NGRBM"},{"COLID":"NGR","COLUMNS":"FW_ZSWSXW.NGR|FW_ZSWPXXW.NGR|FW_ZB.NGR|FW_GWHBGSFW.NGR|FW_GWHFWGZ.NGR|FW_GFXWJXGMRBM.NGR|FW_WFH.NGR|FW_SPJ.NGR|FW_ZRBGHYJY.NGR|FW_HYJY.NGR"}]'
			}
		}).then(res=>{
			if(res.code === 0 && res.success){
				tableData.value = res.data
				total.value = res.meta.totalCount
			}
		})
	}
	
	function handleBL(row, blUrl){
		console.log(row);
		uni.reLaunch({
			url: blUrl + '&name=' + row.name
		})
	}
	
	onReady(()=>{
		loadCard() //加载卡片
		getTableList()
	})

	
</script>

<style lang="scss" scoped>	
	body{
		background-color: #0063d0;
	}
	.content{
		margin: 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: calc(100vw - 100rpx);
	}
	.overview{
		height: 600rpx;
		padding: 30rpx;
		.part{
			display: flex;
			flex-direction: row;
			.card{
				width: 450rpx;
				flex-shrink: 0;
				margin: 10rpx;
				height: 300rpx;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				>view:nth-child(1){
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
					background-color: #91d2f6;
					margin-right: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 75rpx;
						height: 75rpx;
					}
				}
			}
		}
		.other{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-top: 50rpx;
			button{
				width: 45vw;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.tableList{
		padding: 50rpx 0;
		height: calc(100vh - 950rpx);
		margin-top: 0;
	}
</style>