hbj_app/pages/indexpage/zdwxy/zdwxyOld.vue

<template>
	<view :style="{ paddingTop: top + 'px' }">
		<!-- //导航栏 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="重大危险源" :autoBack="true">

		</u-navbar>
		<!-- <u-sticky bgColor="#fff">
			<u-tabs lineWidth="37" gutter="25" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.25)'
				}" :inactiveStyle="{
					color: '#999999',
					transform: 'scale(1)'
				}" :current="tabIndex" :scrollable="true" :list="list1" @click="clicktabs" style="padding-left: 20rpx;"></u-tabs>
		</u-sticky> -->
		<!-- <swiper :current="tabIndex" @change="tabChange" style="height: calc(100vh - 176rpx);margin-top: 10rpx;">
			<swiper-item> -->
		<view class="content">
			<!-- 危险源统计 -->
			<view class="tongji" v-for="(item,index) in countList" :key="index">
				<view class="head">
					<image src="../../../static/images/zdwxy/dept.png"
						style="width: 54rpx;height: 54rpx;margin-right: 28rpx;"></image>
					<view>{{item.deptName}}</view>
				</view>
				<view style="display: flex;justify-content: space-around; align-items: center;margin-top: 27rpx;">
					<view class="bg">
						<view>
							<image src="../../../static/images/zdwxy/weixianyuan.png"
								style="width: 60rpx;height: 60rpx;margin-right: 24rpx;"></image>
						</view>
						<view class="title">
							<view style="font-size: 28rpx;color: #666666;">重大危险源场站</view>
							<view>
								<span style="font-weight: 400;font-size: 28rpx;color: #E65659;line-height: 38rpx;">
									{{item.czNum}}</span>
								个
							</view>
						</view>
					</view>
					<view class="bg">
						<view>
							<image src="../../../static/images/zdwxy/beian.png"
								style="width: 60rpx;height: 60rpx;margin-right: 24rpx;"></image>
						</view>
						<view class="title">
							<view style="font-size: 28rpx;color: #666666;">已备案重大危险源</view>
							<view>
								<span
									style="font-weight: 400;font-size: 30rpx;color: #2D6DFF;line-height: 38rpx;">{{item.dangerNum}}</span>
								个
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 危险源场站 -->
			<view>
				<view class="cardInfo" v-for="(item,index) in tableData" :key="index">
					<!-- <view class="head">
								<image src="../../../static/images/zdwxy/dept.png"
									style="width: 54rpx;height: 54rpx;margin-right: 28rpx;"></image>
								<view>{{ item.name }}</view>
							</view>
							<view>到期时间:{{item.validityEnd}}</view>
							<view>归属单位：{{item.plantName}}</view>
							<view class="gotodetail">查看危险源 <image src="../../../static/images/zdwxy/jiantou.png"
									style="width: 36rpx;height: 23rpx;margin-left: 5rpx;">
								</image>
							</view> -->
					<view>
						<view style="display: flex;">
							<image src="../../../static/images/zdwxy/danger.png"
								style="width: 178rpx;height: 131rpx;margin-right: 18rpx;"></image>
							<view>
								<view class="drillName">{{item.name}}</view>
								<view class="address">
									<image src="../../../static/images/drill/dept.png"
										style="width: 24rpx;height: 24rpx;" />
									<span style="margin-left: 15rpx;">所属单位：{{item.plantName}}</span>
								</view>
								<view class="address">
									<image src="../../../static/images/drill/time .png" alt="" srcset=""
										style="width: 24rpx;height: 24rpx;" />
									<span style="margin-left: 15rpx;">到期时间：{{item.validityEnd}}</span>
								</view>
							</view>
						</view>
						<view>备案回执：</view>
						<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
							v-for="(item1,index1) in item.fileList" @click="goToPdfSee(item1.showUrl)"
							v-if="item1.fileSuffix === 'pdf'">
							{{item1.fileActualName}}
						</view>
						<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
							v-for="(item1,index1) in item.fileList" @click="prefile(item1.showUrl)" v-else>
							{{item1.fileActualName}}
						</view>
						<view class="gotodetail" @click="gotoDetail(item.id)">查看危险源 <image
								src="../../../static/images/zdwxy/jiantou.png"
								style="width: 36rpx;height: 23rpx;margin-left: 5rpx;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- </swiper-item>
			<swiper-item>22</swiper-item>
		</swiper> -->
	</view>
</template>
<script>
	import {
		getDicts
	} from '@/api/indexpage/user.js';
	// 重大危险源详情
	import {
		listSource,
		listSourceFiling,
		getSource,
		sourcePageInfo
	} from '@/api/indexpage/zdwxy/index.js';
	import {
		getInfo
	} from "@/api/login.js"
	export default {
		data() {
			return {
				// tabs内容
				list1: [{
						name: '危险源场站'
					},
					{
						name: '备案情况'
					}
				],

				tabIndex: 0, //tabs下标
				tableData: [], //危险源表格数据
				levelList: [], //等级数组
				beianList: [], //备案表格数据
				beianStatusList: [], //是否备案字典数组
				countList: [], //数量数组
				// 导航栏高度（动态计算）
				top: 0,
			};
		},
		mounted() {
			this.getDict();
			this.top = uni.getSystemInfoSync().safeAreaInsets.top
		},

		methods: {
			//文件预览
			prefile(e) {
				uni.downloadFile({
					url: e,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});

			},
			//pdf跳转
			goToPdfSee(url) {
				this.$tab.navigateTo(`/pages/pdf/filePreview?urlID=${url}`);
			},
			getCount() {
				sourcePageInfo().then(res => {
					this.tableData = res.data.filingList; //站场数组
					this.countList = res.data.sourceTjList; //数量数组
					console.log(res, "数量统计");
				})
			},
			// 字典值
			getDict() {
				getDicts('emergency_level').then(res => {
					let dataInfo = res.data;
					this.levelList = dataInfo.map(item => {
						return {
							key: item.dictLabel,
							value: item.dictValue
						};
					});
				});
				getDicts('filing_status').then(res => {
					let dataInfo = res.data;
					this.beianStatusList = dataInfo.map(item => {
						return {
							key: item.dictLabel,
							value: item.dictValue
						};
					});
				});
				this.getCount()
			},
			setDict(stauts, list) {
				for (let item of list) {
					if (item.value === stauts) {
						return item.key;
					}
				}
			},
			gotoDetail(id) {
				this.$tab.navigateTo(`/pages/indexpage/zdwxy/dangerDetail/dangerDetail?id=${id}`)
			},
			getBeiAnList() {
				listSourceFiling().then(res => {
					this.beianList = res.rows;
				});
			},
			// tabs点击切换
			clicktabs(e) {
				this.switchTab(e.index);
			},
			// 轮播图切换
			tabChange(e) {
				let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
				this.switchTab(index);
			},
			//优化---当index相同时，不执行代码
			switchTab(index) {
				if (this.tabIndex == index) {
					return;
				} else {
					this.tabIndex = index;
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		box-sizing: border-box !important;

		.content {
			height: 100%;
			overflow-y: scroll;
			padding: 30rpx;

			.tongji {
				width: 690rpx;
				height: 298rpx;
				background: #ffffff;
				box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.head {
					display: flex;
					align-items: center;
					padding: 26rpx 45rpx;
					border-bottom: 2rpx solid #eeeeee;
				}

				.bg {
					width: 330rpx;
					height: 143rpx;
					background: url('@/static/images/zdwxy/bg.png') no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					padding-left: 28rpx;
				}
			}

			.cardInfo {
				padding: 15rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
				border-radius: 10rpx;
				overflow: hidden;

				.drillName {
					font-family: Noto Sans S Chinese;
					font-weight: 500;
					font-size: 34rpx;
					color: #212121;
				}

				.address {
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
				}

				.gotodetail {
					width: 240rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #4996FF;
					border-radius: 10rpx;
					font-family: Noto Sans S Chinese;
					font-weight: normal;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					float: right;
				}
			}
		}
	}
</style>