gwlz/jp-mobile/pages/workbench/workbench.vue

<template>
	<view class="workbench_main">
		<!-- #ifdef APP-PLUS -->
		<cu-custom bgColor="bg-blue">
			<block slot="content">工作台</block>
		</cu-custom>
		<!-- #endif -->
		<swiper class="screen-swiper square-dot bg-blue" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="2000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFit" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<view class="cu-list grid col-4 no-border fixed">
			<view class="circle-button-box">
				<view class="text-primary text_font_size">{{statistics.allcount?statistics.allcount:0}}</view>
				<text class="grid_text">总数</text>
			</view>
			<view class="circle-button-box">
				<view class="text-danger text_font_size">{{statistics.db?statistics.db:0}}</view>
				<text class="grid_text">待办</text>
			</view>
			<view class="circle-button-box">
				<view class="text-success text_font_size">{{statistics.yb?statistics.yb:0}}</view>
				<text class="grid_text">已办</text>
			</view>
			<view class="circle-button-box">
				<view class="text-warning text_font_size">{{statistics.gdcount?statistics.gdcount:0}}</view>
				<text class="grid_text">归档</text>
			</view>
		</view>
		<scroll-view scroll-y class="page">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="text-orange font-b" style="font-size: 24px;">快捷入口</text>
				</view>
			</view>
			<uni-section titleFontSize="20px" class="mb-10" title="文件传阅" type="line"></uni-section>
			<view class="cu-list grid col-4 no-border">
				<view @tap="add(1)" class="circle-button-box">
					<view><u--image src="/static/index/icon4.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">新增</text>
				</view>
				<view @tap="toList(1)" class="circle-button-box">
					<view><u--image src="/static/index/icon1.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">待办</text>
				</view>
				<view @tap="toList(4)" class="circle-button-box">
					<view><u--image src="/static/index/icon5.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">已办</text>
				</view>
				<view @tap="toList(3)" class="circle-button-box">
					<view><u--image src="/static/index/icon2.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">已归档</text>
				</view>
			</view>
			<uni-section titleFontSize="20px" class="mb-10" title="用章审批" type="line"></uni-section>
			<view class="cu-list grid col-4 no-border">
				<view @tap="add(2)" class="circle-button-box">
					<view><u--image src="/static/index/icon4.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">新增</text>
				</view>
				<view @tap="toCommonList(1)" class="circle-button-box">
					<view><u--image src="/static/index/icon1.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">待办</text>
				</view>
				<view @tap="toCommonList(4)" class="circle-button-box">
					<view><u--image src="/static/index/icon5.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">已办</text>
				</view>
				<view @tap="toCommonList(3)" class="circle-button-box">
					<view><u--image src="/static/index/icon2.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">已归档</text>
				</view>
			</view>
			<uni-section titleFontSize="20px" class="mb-10" title="公文统计" type="line"></uni-section>
			<view class="cu-list grid col-4 no-border">
				<view @tap="toApplyList" class="circle-button-box">
					<view><u--image src="/static/index/icon6.png" width="40px" height="40px"></u--image></view>
					<text class="grid_text">公文统计</text>
				</view>
			</view>
			<u-gap height="80" bgColor="#fff"></u-gap>
		</scroll-view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import actCategoryService from "@/api/flowable/actCategoryService"
	import processService from "@/api/flowable/processService"
	import taskService from "@/api/flowable/taskService"
	import gwCirculationCard2Service from '@/api/circulation/gwCirculationCard2.js'
	export default {
		data() {
			return {
				cardCur: 0,
				dataList: [],
				categoryList: [],
				processMap: new Map(),
				swiperList: [{
					id: 0,
					type: 'image',
					url: '/static/swiper/1.svg'
				}, {
					id: 1,
					type: 'image',
					url: '/static/swiper/2.svg'
				}, {
					id: 2,
					type: 'image',
					url: '/static/swiper/3.svg'
				}, {
					id: 3,
					type: 'image',
					url: '/static/swiper/4.svg'
				}, {
					id: 4,
					type: 'image',
					url: '/static/swiper/5.svg'
				}, {
					id: 5,
					type: 'image',
					url: '/static/swiper/6.svg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/swiper/7.svg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				statistics: {},
			};
		},

		computed: mapState({
			username: (state) => state.user.username
		}),
		async mounted() {
			gwCirculationCard2Service.getStatistics().then(data => {
				this.statistics = data
			})
		},
		created() {
			if (!this.username) {
				this.refreshUserInfo()
			}
		},
		methods: {
			...mapActions(['refreshUserInfo']),
			toApplyList(mail) {
				uni.navigateTo({
					url: '/pages/fileTransmit/statistics'
				})
			},
			add(mail) {
				if (mail == 1) {
					uni.navigateTo({
						url: '/pages/fileTransmit/addFileTransmit'
					})
				} else {
					uni.navigateTo({
						url: '/pages/commonseal/addCommon'
					})
				}
			},
			toPerson(mail) {
				uni.navigateTo({
					url: "/pages/index/index?type='addressbook'"
				})
			},
			toList(type) {
				uni.navigateTo({
					url: '/pages/fileTransmit/fileTransmitList?type=' + type
				})
			},
			toCommonList(type) {
				uni.navigateTo({
					url: '/pages/commonseal/commonList?type=' + type
				})
			},
		}
	}
</script>

<style>
	.workbench_main .screen-swiper {
		min-height: 60px !important;
		height: 60px;
	}

	.page .uni-section {
		border-bottom: 1px solid #ededed;
		padding-left: 10px;
	}

	.cu-list.card-menu {
		overflow: hidden;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 7px;
	}

	.cu-list.card-menu.margin-top-20 {
		margin-top: -20px;
	}

	.cu-list.menu>.cu-item .content>uni-view:first-child {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		/* -webkit-align-items: center; */
		/* align-items: center; */
		display: inline-block;
		margin-right: 5px;
		width: 1.6em;
		text-align: center;
	}

	.text_font_size {
		font-size: 28px !important;
		/* margin-bottom: 5px; */
	}

	.grid_text {
		font-size: 16px;
		margin-top: 5px;
	}

	.circle-button {
		width: 44px;
		height: 44px;
		border-radius: 18px;
		padding-top: 4px;
	}

	.circle-button-box {
		width: 25%;
		margin-top: 10px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.font-b {
		vertical-align: middle;
		font-size: 18px;
		font-weight: 500;
		color: #3a3a3a;
	}
</style>