smartFactory/pages/solution/lampSms.vue

<template>
	<view class="content">
		<!-- 顶部logo和菜单 -->
		<uTop></uTop>
		<!-- 标题和介绍 -->
		<uDesc :title="dTitle" :description="dMemo" :bg="bannerBg"></uDesc>
		<view class="quesTitle">工厂设备的维修管理，您是否有
			以下烦恼？</view>
		
		<view class="boxs">
			<block v-if="functionList.length">
				<uFunction :showTitle="false" :title="item.title" :list="item.list" v-for="(item,index) in functionList"
					:key="index">
				</uFunction>
			</block>
			<view class="fajg box">
				<view class="title">解决方案</view>
				<view class="subtit">帮助<span>工厂</span>快速识别堵点，并<span>大幅消除生产异常浪费</span></view>
				<image src="../../static/imgs/fmcs_fajg.png" mode="widthFix" @click="showBigImg"></image>
			</view>
			<!-- 方案特征 -->
			<view class="fatz box">
				<view class="title">方案特征</view>
				<view class="items">
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz1.png"></image>
						<p>设备类型广泛</p>
					</view>
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz2.png"></image>
						<p>深入业务场景</p>
					</view>
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz3.png"></image>
						<p>试用范围广</p>
					</view>
					<view class="item">
						<image src="../../static/imgs/fmcs_fatz4.png"></image>
						<p>复制行强</p>
					</view>
				</view>
			</view>
			<!-- 方案架构 -->
		
			<!-- 产品功能 -->
			<view class="box">
				<view class="title">产品功能</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dTitle: '安灯系统',
				bannerBg: '../../static/imgs/fmcs_xtbg2.png',
				dMemo: '可快速实现设备异常自动呼叫，工位异常人工呼叫、及时通知相关责任人，保证生产异常处理的闭环。提供了丰富的异常探知硬件终端、推送呼叫工具，全流程性处理模式，精益化分析、持续积累形成生产企业问题处理知识库的能力。',
				functionList: [
					// 设备运维
					{
						title: '设备运维',
						list: [{
								title: '异常发现靠人工',
								desc: '1人长时间看管多台设备，人员懈怠异常容易被忽略'
							},
							{
								title: '生产异常无记录',
								desc: '异常数据无记录，想改善没有数据支撑'
							},
							{
								title: '生产计划调整慢',
								desc: '设备状态无实时监控，生产计划不能迅速调整'
							},
							{
								title: '设备异常传达慢',
								desc: '车间现场嘈杂，范围大，发生异常不能及时找到相关负责人'
							}
						]
					},
				]
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: 'FMCS厂务管理系统'
			})
		},
		methods: {
			//方案架构点击展示大图并且可下载到手机
			showBigImg(e) {
				let current = e.target.dataset.src;
				let that = this;
				uni.previewImage({
					current,
					urls: ['../../static/imgs/fmcs_fajg.png'],
					longPressActions: {
						itemList: ['保存图片'],
						success(data) {
							let imgUrl = '../../static/imgs/fmcs_fajg.png';
							that.saveImage(imgUrl);
						},
						fail(err) {
							that.$showToast(err.errMsg);
						}
					}
				})
			},
			saveImage(url) {
				let that = this;
				uni.downloadFile({
					url,
					success(res) {
						let filePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath,
							success() {
								that.$showToast('保存成功');
							},
							fail(err) {
								that.$showToast('保存失败');
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.quesTitle {
		margin: 54rpx 80rpx 58rpx;
		font-size: 42rpx;
		color: #333;
		line-height: 60rpx;
		font-weight: bold;
	}

	.content {
		.boxs {
			width: 100%;
			padding: 0 30rpx 148rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.box {
				width: 100%;
				margin-top: 48rpx;

				.title {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
					line-height: 50rpx;
					text-align: center;
				}

				&.fatz {
					.items {
						margin-top: -6rpx;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.item {
							width: calc(50% - 15rpx);
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: 48rpx;

							image {
								width: 118rpx;
								height: 118rpx;
							}

							p {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #111111;
								line-height: 42rpx;
								text-align: center;
								margin-top: 2rpx;
							}
						}
					}
				}

				&.fajg {
					margin-top: 92rpx;

					image {
						margin-top: 36rpx;
						width: 100%;
					}
				}
			}
		}
	}
</style>