Merge branch 'master' of http://47.92.161.104:10080/zkx/jp-housekeep-electric

pages.json

@@ -180,6 +180,14 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/workOrderManagement/workOrderDetails",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/workOrderManagement/workOrderDetails.vue

@@ -0,0 +1,515 @@
+<template>
+	<view>
+		<u-navbar title="工单详情" title-color="#101010"></u-navbar>
+		<!-- 工单详情 -->
+		<view class="main">
+			<view class="title">
+				<view class="number">
+					工单编号：JP10001
+				</view>
+				<view class="state">
+					进行中
+				</view>
+				<view class="state state2">
+					处理中
+				</view>
+				<view class="state state3">
+					已解决
+				</view>
+				<view class="state state4">
+					已关闭
+				</view>
+			</view>
+			<view class="content">
+				<view class="content-item">
+					<view class="item-title">
+						告警设备
+					</view>
+					<view class="item-value">
+						荆鹏集团-荆鹏软件园01
+					</view>
+
+				</view>
+				<view class="content-item">
+					<view class="item-title">
+						告警类型
+					</view>
+					<view class="item-value">
+						温度过高
+					</view>
+				</view>
+
+				<view class="content-item">
+					<view class="item-title">
+						地址
+					</view>
+					<view class="item-value">
+						沙市区江津东路附155号
+						<image class="img" src="@/assets/img/riFill-navigation-fill 1.svg" mode=""></image>
+					</view>
+				</view>
+				<view class="content-item">
+					<view class="item-title">
+						告警时间
+					</view>
+					<view class="item-value">
+						2024-02-04 20:00:00
+					</view>
+				</view>
+				<view class="content-picture">
+					<view class="picture-title">
+						现场照片/视频
+					</view>
+					<view class="picture-box">
+						<image v-for="item in 4" class="img" src="@/assets/img/pImage@1x.png" mode=""></image>
+					</view>
+				</view>
+				<view class="content-item">
+					<view class="item-title">
+						运维专员
+					</view>
+					<view class="item-value">
+						<view class="photo">
+							<image class="photo-img" src="@/assets/img/photo@x1.png" mode=""></image>
+						</view>
+						郭群 15500001111
+						<image class="img" src="@/assets/img/riFill-phone-fill.svg" mode=""></image>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 处理记录 -->
+		<view class="record">
+			<view class="title">
+				<view class="icon">
+
+				</view>
+				<view class="text">
+					处理记录
+				</view>
+			</view>
+			<!-- 时间轴 -->
+			<view class="time-line">
+				<u-time-line>
+					<!-- 关闭原因 -->
+					<u-time-line-item nodeTop="10">
+					<template v-slot:node>
+						<view class="u-node" >
+							
+							
+						</view>
+					</template>
+					
+						<template v-slot:content>
+							<view>
+								<view class="u-order-title"> <text class="name">我 </text>关闭了工单</view>
+								<view class="u-order-desc">关闭原因：错误告警</view>
+								<view class="u-order-time">2019-05-08 12:12</view>
+							</view>
+						</template>
+					</u-time-line-item>
+					
+					<!-- 关闭工单 -->
+					<u-time-line-item nodeTop="10">
+
+                 <template v-slot:node>
+				<view class="u-node" >
+					
+					
+				</view>
+			</template>
+
+						<template v-slot:content>
+							<view >
+								<view class="u-order-title">关闭工单</view>
+
+								<view class="u-order-time">2019-05-08 12:12</view>
+							</view>
+						</template>
+					</u-time-line-item>
+					<!-- 完成工单 -->
+					<u-time-line-item nodeTop="10">
+
+
+
+						<template v-slot:content>
+							<view>
+								<view class="u-order-title"> <text class="name">郭群 </text>完成工单</view>
+								<view class="u-order-desc">处理结果：冻雨天气导致私变线路问题，已解决。</view>
+								<view class="u-order-picture">
+									<image v-for="item in 4" class="img" src="@/assets/img/pImage@1x.png" mode="">
+									</image>
+								</view>
+								<view class="u-order-time">2019-05-08 12:12</view>
+							</view>
+						</template>
+					</u-time-line-item>
+
+
+					<u-time-line-item nodeTop="10">
+
+
+
+						<template v-slot:content>
+							<view>
+								<view class="u-order-title">平台指派 <text class="name">郭群 </text>处理工单</view>
+
+								<view class="u-order-time">2019-05-08 12:12</view>
+							</view>
+						</template>
+					</u-time-line-item>
+					<u-time-line-item nodeTop="10">
+						<template v-slot:content>
+							<view>
+								<view class="u-order-title">触发告警 温度过高</view>
+
+								<view class="u-order-time">2019-05-08 12:12</view>
+							</view>
+						</template>
+					</u-time-line-item>
+				</u-time-line>
+			</view>
+		</view>
+		<!-- 底部 -->
+		<view class="bottom">
+			<button class="back">返回</button>
+			<button class="confirm" @click="resultShow=true">确认解决</button>
+		</view>
+		<!-- 填写处理结果 -->
+
+		<u-popup v-model="resultShow" mode="bottom" border-radius="12">
+			<view class="result-content">
+				<view class="title">
+					填写处理结果
+				</view>
+				<view class="textarea">
+					<textarea placeholder="请填写处理结果"></textarea>
+				</view>
+				<!-- 上传照片 -->
+				<view class="upload">
+					<view class="title">
+						上传现场照片
+					</view>
+					<view class="upload-picture">
+						<u-upload max-count="4" width="144" height="144" :action="action"
+							:file-list="fileList"></u-upload>
+					</view>
+				</view>
+				<!-- 按钮 -->
+				<view class="btn-box">
+					<button class="cancel">取消</button>
+					<button class="submit">提交</button>
+				</view>
+			</view>
+		</u-popup>
+
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				resultShow: false,
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		padding-bottom: 100px;
+	}
+
+	// 工单详情
+	.main {
+		background-color: #fff;
+
+		.title {
+			display: flex;
+			justify-content: space-between;
+			padding: 24rpx 32rpx;
+			box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+
+			.number {
+				color: rgba(51, 51, 51, 1);
+			}
+
+			.state {
+				border-radius: 4px;
+				background-color: rgba(255, 255, 255, 1);
+				color: rgba(22, 119, 255, 1);
+				font-size: 24rpx;
+				border: 1px solid rgba(22, 119, 255, 1);
+				width: 96rpx;
+				height: 48rpx;
+				line-height: 48rpx;
+				text-align: center;
+			}
+
+			.state2 {
+				color: rgba(255, 68, 68, 1);
+				border: 1px solid rgba(255, 68, 68, 1);
+			}
+
+			.state3 {
+				color: rgba(0, 185, 98, 1);
+				border: 1px solid rgba(0, 185, 98, 1);
+			}
+
+			.state4 {
+				border: 1px solid rgba(171, 171, 171, 1);
+				color: rgba(119, 119, 119, 1);
+			}
+		}
+
+		.content {
+			.content-item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 24rpx 0;
+				margin: 0 32rpx;
+				border-bottom: 1px solid rgba(242, 242, 242, 1);
+				font-size: 32rpx;
+
+				.item-title {
+					color: rgba(51, 51, 51, 1);
+
+				}
+
+				.item-value {
+					color: rgba(16, 16, 16, 1);
+					display: flex;
+					align-items: center;
+
+					.photo-img {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 999px;
+						vertical-align: middle;
+						margin-right: 24rpx;
+					}
+
+					.img {
+						width: 32rpx;
+						height: 32rpx;
+						transform: scaleX(-1);
+						margin-left: 8rpx;
+					}
+				}
+			}
+
+			.content-picture {
+				padding: 24rpx 32rpx;
+				border-bottom: 1px solid rgba(242, 242, 242, 1);
+
+				.picture-title {
+					color: rgba(51, 51, 51, 1);
+					font-size: 32rpx;
+				}
+
+				.picture-box {
+					margin-top: 16rpx;
+					display: flex;
+					justify-content: space-around;
+
+					.img {
+						width: 160rpx;
+						height: 160rpx;
+						border-radius: 4px;
+					}
+				}
+			}
+
+		}
+	}
+
+	// 处理记录
+	.record {
+		padding: 32rpx;
+		margin-top: 54rpx;
+		background-color: #fff;
+
+		.title {
+			display: flex;
+			align-items: center;
+			line-height: 32rpx;
+
+			.icon {
+				background-color: rgba(22, 119, 255, 1);
+				width: 4px;
+				height: 16px;
+			}
+
+			.text {
+				color: rgb(16, 16, 16);
+				font-size: 36rpx;
+				margin-left: 12rpx;
+				font-weight: bold;
+			}
+		}
+
+		// 时间轴
+		.time-line {
+			margin-top: 28rpx;
+
+			.u-node {
+				width: 18rpx;
+				height: 18rpx;
+				border-radius: 10px;
+				background-color: rgba(22,119,255,1);
+			}
+			
+
+			/deep/.u-time-axis {
+				padding-left: 4rpx;
+			}
+
+			// 照片
+			.u-order-picture {
+				.img {
+					width: 120rpx;
+					height: 120rpx;
+					margin-right: 16rpx;
+				}
+			}
+
+			.u-order-title {
+				color: rgba(51, 51, 51, 1);
+				font-size: 32rpx;
+
+				.name {
+					color: #1677FF;
+					margin: 0 4rpx;
+					font-weight: bold;
+				}
+			}
+
+			.u-order-desc {
+				color: rgba(51, 51, 51, 1);
+				font-size: 28rpx;
+				margin: 16rpx 0;
+			}
+
+			.u-order-time {
+				color: rgba(119, 119, 119, 1);
+				font-size: 24rpx;
+				margin-top: 8rpx;
+			}
+
+			/deep/.u-dot {
+				background: #cdcdcd !important;
+				width: 18rpx;
+				height: 18rpx;
+				border-radius: 10px;
+			}
+			
+
+			/deep/.u-time-axis-item::before {
+				border-left: 1px solid #cdcdcd !important;
+			}
+
+			/deep/.u-time-axis-item {
+				margin-bottom: 40rpx;
+			}
+
+		}
+		
+	}
+
+	// 底部
+	.bottom {
+		display: flex;
+		justify-content: space-between;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: #fff;
+		padding: 20rpx 32rpx;
+
+		.back {
+			width: 328rpx;
+			line-height: 80rpx;
+			border-radius: 4px;
+			background-color: rgba(222, 225, 228, 1);
+			color: rgba(51, 51, 51, 1);
+			font-size: 32rpx
+		}
+
+		.confirm {
+			width: 328rpx;
+			line-height: 80rpx;
+			border-radius: 4px;
+			background-color: rgba(22, 119, 255, 1);
+			color: rgba(255, 255, 255, 1);
+			font-size: 32rpx
+		}
+	}
+
+	// 填写处理结果
+	.result-content {
+		padding: 32rpx;
+
+		.textarea {
+			margin-top: 32rpx;
+
+			uni-textarea {
+				width: 100%;
+				height: 160rpx;
+				background-color: rgba(241, 242, 245, 1);
+				text-indent: 28rpx;
+				padding: 8rpx 0;
+				border-radius: 8px;
+			}
+		}
+
+		// 上传照片
+		.upload {
+			margin-top: 24rpx;
+
+			.title {
+				color: rgba(16, 16, 16, 1);
+				font-size: 32rpx;
+			}
+
+			.upload-picture {
+				margin-top: 16rpx;
+
+			}
+		}
+
+		// 按钮
+		.btn-box {
+			display: flex;
+			justify-content: space-between;
+			background-color: #fff;
+			margin-top: 68rpx;
+
+			.cancel {
+				width: 328rpx;
+				line-height: 80rpx;
+				border-radius: 4px;
+				background-color: rgba(222, 225, 228, 1);
+				color: rgba(51, 51, 51, 1);
+				font-size: 32rpx
+			}
+
+			.submit {
+				width: 328rpx;
+				line-height: 80rpx;
+				border-radius: 4px;
+				background-color: rgba(22, 119, 255, 1);
+				color: rgba(255, 255, 255, 1);
+				font-size: 32rpx
+			}
+		}
+	}
+</style>