查核开发

App.vue

@@ -45,6 +45,7 @@
 		height: 100%;
 		font-size: 20rpx;
 		line-height: 30rpx;
+		color: #292C33;
 		background-color: #F5F6FA;
 	}
 
@@ -158,16 +159,4 @@
 		}
 	}
 	// 查核地图列表样式end
-	// 弹出层样式start
-	.modal {
-		overflow: hidden;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1000;
-		background-color: rgba(18, 20, 26, 0.5);
-	}
-	// 弹出层样式end
 </style>

README.md

@@ -9,6 +9,8 @@
 3. 底部tabBar：tm-tabbar。
 4. 单选列表组合/下拉式单选列表组合：tm-radio-group。使用步骤看tm-radio-group/README.md
 5. 底部简单双按钮：tm-simple-btn-group。
+6. 顶部菜单容器：tm-top-menu。
+7. 弹出层：tm-modal。
 
 ### 公共组件的注册方式
 ---

components/com-button/com-button.vue

@@ -95,7 +95,7 @@
 	}
 	
 	.default {
-		background: #E6EAF2;
+		background: #E6EAF2!important;
 		color: #7A8599;
 	}
 

components/tm-modal/tm-modal.vue

@@ -0,0 +1,32 @@
+<template>
+	<view class="tm-modal" @click="$emit('click')">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	/**
+	 * modal弹出层
+	 * @click为点击元素的事件监听
+	 */
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="less">
+	.tm-modal {
+		overflow: hidden;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1000;
+		background-color: rgba(18, 20, 26, 0.5);
+	}
+</style>

components/tm-top-menu/tm-top-menu.vue

@@ -0,0 +1,25 @@
+<template>
+	<view class="tm-top-menu">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+	}
+</script>
+
+<style lang="less">
+	// 顶部按钮、信息start
+	.tm-top-menu {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10000;
+		border-bottom: 1px solid #DADEE6;
+		width: 100%;
+		min-height: 50rpx;
+		background-color: #fff;
+	}
+	// 顶部按钮、信息end
+</style>

components/tm-trees/row.vue

@@ -9,7 +9,7 @@
 				</view>
 				<text>{{ option.label }}</text>
 			</view>
-			<view v-if="!hasChildren" class="right" @click="checkedHandle">
+			<view v-if="option.parentId !== 0" class="right" @click="checkedHandle">
 				<image :src="`../../static/${rightIcon}.png`"></image>
 			</view>
 		</view>

pages.json

@@ -100,20 +100,37 @@
 				"navigationBarTitleText": "查核地图",
 				"enablePullDownRefresh": false
 			}
-		}
-    ,{
-       "path" : "pages/planList/planList",
-       "style":  {
-          "navigationBarTitleText": "计划列表",
-          "enablePullDownRefresh": false
-       }
-    },
+		},
 		{
 			"path" : "pages/checkList/checkList",
 			"style" :	{
 				"navigationBarTitleText": "查核列表",
 				"enablePullDownRefresh": false
 			}
+    }, {
+			"path" : "pages/checkMainPoints/checkMainPoints",
+			"style" :	{
+				"navigationBarTitleText": "查核要点",
+				"enablePullDownRefresh": false
+			}
+    }, {
+			"path" : "pages/auditItemDetails/auditItemDetails",
+			"style" :	{
+				"navigationBarTitleText": "查核项详情",
+				"enablePullDownRefresh": false
+			}
+    }, {
+			"path" : "pages/legendDetails/legendDetails",
+			"style" :	{
+				"navigationBarTitleText": "图例详情",
+				"enablePullDownRefresh": false
+			}
+    }, {
+       "path" : "pages/planList/planList",
+       "style":  {
+          "navigationBarTitleText": "计划列表",
+          "enablePullDownRefresh": false
+       }
     },
 		{
 			"path" : "pages/editCheckList/editCheckList",

pages/auditItemDetails/auditItemDetails.vue

@@ -0,0 +1,211 @@
+<template>
+	<view class="auditItemDetails">
+		<view class="top-box">
+			<view class="icon-wrap">
+				<image src="../../static/chahexiang-bg.png"></image>
+				<text>查核项</text>
+			</view>
+			<image class="img-tuli" 
+				@click="goLegendDetails(detail.checkItemId)"
+				src="../../static/tuli.png"></image>
+			<view class="title-wrap">
+				<text>{{detail.checkItemName}}</text>
+				<text>{{detail.checkPointName}}</text>
+			</view>
+			<view class="children">
+				<view class="child">
+					<text>{{detail.deptName || '--'}}</text>
+					<text>查核单位</text>
+				</view>
+				<view class="child">
+					<text>{{detail.checkModelName || '--'}}</text>
+					<text>查核方式</text>
+				</view>
+				<view class="child">
+					<text>{{detail.lastResult || '--'}}</text>
+					<text>上次结果</text>
+				</view>
+				<view class="child">
+					<text>{{detail.checkResult || '--'}}</text>
+					<text>本次结果</text>
+				</view>
+			</view>
+		</view>
+		<view class="bottom-box" 
+			v-for="(item, index) in detail.checkResultRequestList"
+			:key="index">
+			<view class="box-item">
+				<view>查核结果</view>
+				<view>{{item.checkResultDescribe}}</view>
+			</view>
+			<view class="box-item">
+				<view>查核时间</view>
+				<view>{{item.completeTimeStr}}</view>
+			</view>
+			<view class="box-item">
+				<view>图片展示</view>
+				<view class="img-wrap">
+					<image mode="widthFix" 
+						v-for="(img, i) in getArr(item.checkResultUrl)"
+						:key="i"
+						:src="img"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 查核项详情
+	 */
+	export default {
+		data() {
+			return {
+				detail: {
+					checkPointName: '',
+					deptName: '',
+					checkModelName: '',
+					lastResult: '',
+					checkResult: '',
+					checkItemName: '',
+					checkResultRequestList: []
+				}
+			};
+		},
+		onLoad: function ({id}) {
+			this.dispatch('checkTaskDetail', {id}).then((data)=>{
+				if(data) {
+					this.detail = data;
+				}
+			});
+		},
+		methods: {
+			getArr(value) {
+				return value ? value.split(',') : [];
+			},
+			goLegendDetails(checkItemId) {
+				//跳转到图例详情
+				uni.navigateTo({
+					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}`
+				});
+			},
+			dispatch(key, data) {
+				return this.$store.dispatch({type: 'checkList/commActions', key, data});
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.auditItemDetails {
+		.top-box {
+			position: relative;
+			margin-top: 15rpx;
+			padding-bottom: 37.5rpx;
+			background-color: #fff;
+			.icon-wrap {
+				position: relative;
+				overflow: hidden;
+				width: 125rpx;
+				height: 37.5rpx;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+				text {
+					position: absolute;
+					top: 0;
+					left: 25rpx;
+					font-size: 20rpx;
+					line-height: 37.5rpx;
+					color: #fff;
+				}
+			}
+			.img-tuli {
+				position: absolute;
+				top: 25rpx;
+				right: 25rpx;
+				width: 40rpx;
+				height: 40rpx;
+			}
+			.title-wrap {
+				display: flex;
+				flex-direction: column;
+				padding: 25rpx 31.25rpx;
+				text {
+					font-size: 25rpx;
+					line-height: 37.5rpx;
+					&:last-child {
+						padding-top: 4.37rpx;
+						font-size: 17.5rpx;
+						line-height: 26.25rpx;
+						color: #7A8599;
+					}
+				}
+			}
+			.children {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				margin-top: 10.62rpx;
+				.child {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					flex: 1;
+					border-right: 1px solid #DADEE6;
+					text {
+						font-weight: 500;
+						&:last-child {
+							font-size: 17.5rpx;
+							line-height: 26.25rpx;
+							color: #7A8599;
+							font-weight: 400;
+						}
+					}
+					&:last-child {
+						border-right: 0;
+					}
+				}
+			}
+		}
+		.bottom-box {
+			margin-top: 15rpx;
+			padding: 0 25rpx;
+			background-color: #fff;
+			
+			.box-item {
+				display: flex;
+				flex-direction: row;
+				border-bottom: 0.62rpx solid #DADEE6;
+				padding: 26.25rpx 0;
+				&:last-child {
+					border-bottom: 0;
+				}
+				>view {
+					width: 100%;
+					&:first-child {
+						width: 175rpx;
+						white-space: nowrap;
+						color: #525866;
+					}
+					&.img-wrap {
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						
+						image {
+							margin-bottom: 12.5rpx;
+							width: calc(50% - 12.5rpx);
+							&:nth-child(2n) {
+								margin-left: 12.5rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/checkList/checkList.vue

@@ -1,7 +1,14 @@
 <template>
 	<view class="check-map-list">
+		<tm-top-menu>
+			<view class="top-menu"  @click="showModalHandle(!showModal)">
+				<text>第{{checkIndex}}/{{planList.length}}次查核</text>
+				<image :src="`../../static/${showModal?'open':'close'}-icon.png`"></image>
+			</view>
+		</tm-top-menu>
 		<view class="item"
 			v-for="(item, index) in depList" 
+			@click="gotoCheckMainPointsPage(item)"
 			:key="index">
 			<view class="title-wrap">
 				<text>{{item.deptName}}</text>
@@ -18,55 +25,98 @@
 			</view>
 			<view class="footer">
 				<text>查核人：{{item.empName}}</text>
-				<text>{{item.startDate}}~{{item.endDate}}</text>
+				<text>
+					{{item.startDate}}~{{item.endDate}}
+				</text>
+			</view>
+			<view class="icon-wrap" 
+				v-if="Number(item.completeStatus) === 2 || Number(item.completeStatus) === 3">
+				<image :src="`../../static/${Number(item.completeStatus) === 2 ?'hight-bg':'top-img'}.png`"></image>
+				<text>{{item.completeDes}}</text>
 			</view>
 		</view>
 		<view class="null" v-if="depList.length === 0">暂无数据</view>
-		<view class="modal">
+		<tm-modal v-show="showModal" v-on:click="showModalHandle(false)">
 			<view class="content-list">
-				<view class="list-item">
-					<text>第1次查核计划（2020-09-21 ~ 2020-09-22）</text>
-					<view class="item-icon">已完成</view>
-				</view>
-				<view class="list-item active">
-					<text>第1次查核计划（2020-09-21 ~ 2020-09-22）</text>
-					<view class="item-icon">进行中</view>
+				<view class="list-item" 
+					v-for="(item, index) in planList"
+					:class="{active: checkId === item.id}" 
+					@click="checkItem($event, item.id)"
+					:key="index">
+					<view>
+						<text>{{item.name}}（{{item.startDate}} ~ {{item.endDate}}）</text>
+						<view class="item-icon" 
+							:class="{icon2: Number(item.status) === 2}" 
+							v-if="Number(item.status) !== 1">
+							{{Number(item.status) === 2 ? '进行中' : '已完成'}}
+						</view>
+					</view>
+					<image class="check-img" 
+						v-if="checkId === item.id"
+						src="../../static/checkStatus.png"></image>
 				</view>
 			</view>
-		</view>
+		</tm-modal>
 	</view>
 </template>
 
 <script>
+	import {_stopPropagation} from "../../utils/compatible.js";
+	
 	export default {
 		data() {
 			return {
-				depList: [
-					{
-						"checkId":30, //类型：Number  必有字段  备注：计划id
-						"deptId":1, //类型：Number  必有字段  备注：单位id
-						"deptName":"测试单位1", //类型：String  必有字段  备注：单位名称
-						"deptClassId":1, //类型：Number  必有字段  备注：单位分组id
-						"deptClassName":"单位分类1", //类型：String  必有字段  备注：单位分组名称
-						"checkPointNames":"要点1", //类型：String  必有字段  备注：要点名称拼接
-						"decs":"包含1个查核要点, 已完成0/2个查核项目", //类型：String  必有字段  备注：描述
-						"empId":6, //类型：Number  必有字段  备注：分配查核人id
-						"empName":"查核组员2", //类型：String  必有字段  备注：分配查核人名称
-						"startDate":"2021-02-20 08:00", //类型：String  必有字段  备注：分配开始时间
-						"endDate":"2021-02-21 05:00" //类型：String  必有字段  备注：分配结束时间
-					}
-				]
+				showModal: false,
+				planList: [],
+				checkId: '',
+				depList: []
 			};
 		},
-		created: function(){
-			this.dispatch('depList', {checkId: ''}).then((data)=>{
-				console.log(data);
+		computed: {
+			checkIndex: function() {
+				let index = this.planList.findIndex((item)=> item.id === this.checkId);
+				if(index !== -1) {
+					return index + 1;
+				} else {
+					return 0;
+				}
+			}
+		},
+		onLoad: function ({situationId}) {
+			this.dispatch('planList', {situationId}).then((data)=>{
 				if(data) {
-					// this.depList = data;
+					this.planList = data;
+					let check = data.find((item)=> Number(item.status)=== 2);
+					this.checkId = check ? check.id 
+						: data.length > 0 ? data[0].id : '';
+					this.getDepList();
 				}
 			});
 		},
 		methods: {
+			checkItem: function(e, id) {
+				_stopPropagation(e);
+				if(this.checkId === id) return;
+				this.checkId = id;
+				this.getDepList();
+			},
+			getDepList: function() {
+				this.dispatch('depList', {checkId: this.checkId}).then((data)=>{
+					if(data) {
+						this.depList = data;
+						this.showModalHandle(false);
+					}
+				});
+			},
+			showModalHandle: function(showModal) {
+				this.showModal = showModal;
+			},
+			gotoCheckMainPointsPage({checkId, deptId}) {
+				//跳转到查核要点
+				uni.navigateTo({
+					url: `/pages/checkMainPoints/checkMainPoints?checkId=${checkId}&deptId=${deptId}`
+				});
+			},
 			dispatch: function(key, data) {
 				return this.$store.dispatch({type: 'checkList/commActions', key, data});
 			},
@@ -77,6 +127,41 @@
 <style lang="less">
 	.check-map-list {
 		padding: 25rpx;
+		padding-top: 75rpx;
+		.top-menu {
+			overflow: hidden;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			height: 50rpx;
+			image {
+				margin-left: 9.37rpx;
+				width: 12.5rpx;
+				height: 12.5rpx;
+			}
+		}
+		.item {
+			position: relative;
+		}
+		.icon-wrap {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 100rpx;
+			height: 35rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+			text {
+				position: absolute;
+				left: 28.75rpx;
+				line-height: 35rpx;
+				font-size: 17.5rpx;
+				color: #fff;
+			}
+		}
 		.footer {
 			display: flex;
 			flex-direction: row;
@@ -95,11 +180,13 @@
 		color: #999;
 	}
 	.content-list {
+		padding-top: 50rpx;
 		width: 100%;
 		background-color: #fff;
 		.list-item {
 			display: flex;
 			flex-direction: row;
+			justify-content: space-between;
 			align-items: center;
 			border-bottom: 1px solid #DADEE6;
 			padding: 0 25rpx;
@@ -108,20 +195,29 @@
 			font-size: 22.5rpx;
 			line-height: 33.75rpx;
 			color: #292C33;
-			.item-icon {
-				border-radius: 5rpx;
-				padding: 6.25rpx 11.25rpx;
-				line-height: 26.25rpx;
-				color: #29CC96;
-				background-color: #e9f9f4;
+			.check-img {
+				float: right;
+				width: 19.37rpx;
+				height: 14.37rpx;
 			}
-			&.active {
-				color: #3377FF;
+			>view {
+				display: flex;
+				flex-direction: row;
 				.item-icon {
-					color: #FFAA00;
-					background-color: #fff9ef;
+					border-radius: 5rpx;
+					padding: 6.25rpx 11.25rpx;
+					line-height: 26.25rpx;
+					color: #29CC96;
+					background-color: #e9f9f4;
+					&.icon2 {
+						color: #FFAA00;
+						background-color: #fff9ef;
+					}
 				}
 			}
+			&.active {
+				color: #3377FF;
+			}
 		}
 	}
 </style>

pages/checkList/model.js

@@ -1,5 +1,4 @@
 import { commServer } from './server.js';
-	import {dateHandle} from "../../utils/dateHandle.js";
 	
 export default {
   namespaced: true,

pages/checkList/server.js

@@ -5,9 +5,27 @@ const requestList = {
   depList: {
     method: 'GET',
     url: 'plan/depList',
-		// successMessage: '',
-		// needLoading: false // 还有这两个参数，但不是必传的，默认loading
   }, 
+	// 计划列表
+  planList: {
+    method: 'GET',
+    url: 'plan/list',
+  }, 
+	// 查核任务列表2
+	checkTaskDetailList: {
+	  method: 'GET',
+	  url: 'checkTask/checkTaskDetailList',
+	}, 
+	// 查核项明细
+	checkTaskDetail: {
+	  method: 'GET',
+	  url: 'checkTask/checkTaskDetail',
+	}, 
+	// 获取查核任务正确答案（小灯泡）
+	rightAnswer: {
+	  method: 'GET',
+	  url: 'checkTask/rightAnswer',
+	}, 
 };
 
 export const commServer = (key, data) => {

pages/checkMainPoints/checkMainPoints.vue

@@ -0,0 +1,345 @@
+<template>
+	<view class="checkMainPoints">
+		<tm-top-menu>
+			<view class="top-search">
+				<view class="search">
+					<input confirm-type="search" 
+						@input="filterFromName" 
+						placeholder="搜索查核要点或查核项" />
+					<image src="../../static/search.png"></image>
+				</view>
+				<view class="top-btn-wrap">
+					<view class="btn-list" v-if="permissions.includes(3)">
+						<com-button v-for="(item, index) in btnArr" 
+							:btnText="item.label" 
+							:type="active === item.id ? 'pramary':'default'" 
+							v-on:btnClick="btnClick(item.id)"/>
+					</view>
+					<view class="select-wrap" 
+						v-else-if="permissions.includes(2) || permissions.includes(1)" 
+						@click="toggleModal(!showModal)">
+						<text>{{getCheckPointName}}</text>
+						<image :src="`../../static/${showModal?'open':'close'}-icon.png`"></image>
+					</view>
+				</view>
+			</view>
+		</tm-top-menu>
+		<tm-modal v-show="showModal" v-on:click="toggleModal(false)">
+			<view class="content-list">
+				<view class="list-item"
+					v-for="(item, index) in point"
+					:class="{active: checkPointId === item.checkPointId}"
+					@click="checkPointHandle(item.checkPointId)">
+					<text>{{item.checkPointName}}</text>
+					<image class="check-img"
+						v-if="checkPointId === item.checkPointId"
+						src="../../static/checkStatus.png"></image>
+				</view>
+			</view>
+		</tm-modal>
+		<view class="list" v-for="(item, index) in detailList" :key="index">
+			<view class="title">查核要点一：{{item.checkPointName}}</view>
+			<view class="item" 
+				v-for="(child, n) in item.responseList" 
+				@click="childClick(child)"
+				:key="n">
+				<view class="top-box">
+					<view class="top-box-left">
+						<view class="index-icon">{{n + 1}}</view>
+						<text>{{child.checkItemName}}</text>
+					</view>
+					<image src="../../static/tuli.png" 
+						@click="goLegendDetails(child.checkItemId)"></image>
+				</view>
+				<view class="children">
+					<view class="child">
+						<text>{{child.deptName || '--'}}</text>
+						<text>查核单位</text>
+					</view>
+					<view class="child">
+						<text>{{child.checkModelName || '--'}}</text>
+						<text>查核方式</text>
+					</view>
+					<view class="child">
+						<text>{{child.lastResult || '--'}}</text>
+						<text>上次结果</text>
+					</view>
+					<view class="child">
+						<text>{{child.checkResult || '--'}}</text>
+						<text>本次结果</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				btnArr: [
+					{id: 0, label: '全部'},
+					{id: 1, label: '未查核'},
+					{id: 2, label: '已查核'},
+				],
+				showModal: false,
+				detailList: [],
+				copyDetailList: [],
+				point: [{checkPointId: 'all', checkPointName: '全部要点'}],
+				checkPointId: 'all',
+				permissions: uni.getStorageSync('permissions'),
+				active: 0
+			};
+		},
+		computed: {
+			getCheckPointName() {
+				let item=this.point.find((item)=> item.checkPointId === this.checkPointId);
+				return item ? item.checkPointName : '';
+			},
+		},
+		onLoad: function ({checkId,deptId}) {
+			this.dispatch('checkTaskDetailList', {checkId,deptId}).then((data)=>{
+				if(data) {
+					this.detailList = data;
+					this.copyDetailList = data;
+					data.map(({checkPointId,checkPointName})=>{
+						this.point.push({checkPointId, checkPointName});
+					});
+				}
+			});
+		},
+		methods: {
+			btnClick(id) {
+				this.active = id;
+				this.filterCompleteFlag(id);
+			},
+			childClick(child) {
+				// 查核者，管理员
+				if(this.permissions.includes(1) || this.permissions.includes(3)) { 
+					let str = '';
+					if(child.checkResult) {
+						// 跳转到查核项详情
+						str = 'auditItemDetails/auditItemDetails';
+					} else {
+						// 跳转到查核结果提交
+						str = 'mainPointsDetail/mainPointsDetail';
+					}
+					uni.navigateTo({
+						url: `/pages/${str}?id=${child.id}`
+					});
+				}
+			},
+			toggleModal(flage) {
+				this.showModal = flage;
+			},
+			checkPointHandle(id) {
+				this.checkPointId = id;
+				if(id === 'all') {
+					this.detailList = [...this.copyDetailList];
+				} else {
+					this.detailList = this.copyDetailList
+						.filter((item)=> item.checkPointId === id);
+				}
+			},
+			filterCompleteFlag(btnId) {
+				if(btnId === 0) {
+					this.detailList = [...this.copyDetailList];
+				} else {
+					let completeFlag = btnId === 1 ? false : true;
+					this.detailList = this.copyDetailList.map((item)=>{
+						return {
+							...item,
+							responseList: item.responseList
+								.filter((child)=> child.completeFlag === completeFlag)
+						}
+					});
+				}
+			},
+			filterFromName(e) {
+				const {value} = e.detail; 
+				if(value === '') {
+					this.detailList = [...this.copyDetailList];
+				} else {
+					this.detailList = [];
+					this.copyDetailList.map((item)=>{
+						let responseList = item.responseList
+							.filter((child)=> child.checkItemName.indexOf(value) >= 0);
+						if(item.checkPointName.indexOf(value) >= 0) {
+							this.detailList.push({...item});
+						} else if(responseList.length > 0) {
+							this.detailList.push({...item, responseList});
+						}
+					});
+				}
+			},
+			goLegendDetails(checkItemId) {
+				//跳转到图例详情
+				uni.navigateTo({
+					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}`
+				});
+			},
+			dispatch(key, data) {
+				return this.$store.dispatch({type: 'checkList/commActions', key, data});
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+	.checkMainPoints {
+		padding-top: 105rpx;
+		font-size: 22.5rpx;
+		line-height: 33.75rpx;
+		background-color: #F5F6FA;
+		
+		.top-search {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			padding: 25rpx;
+			background-color: #fff;
+			box-shadow: 0 3.75rpx 12.5rpx 0 rgba(0, 13, 51, 0.1);
+			.search {
+				position: relative;
+				width: 100%;
+				height: 55rpx;
+				line-height: 55rpx;
+				background-color: #F0F2F7;
+				input {
+					padding: 0 45rpx 0 15rpx;
+					height: 55rpx;
+					line-height: 55rpx;
+					font-size: 22.5rpx;
+				}
+				image {
+					position: absolute;
+					top: 16.87rpx;
+					right: 15rpx;
+					width: 21.25rpx;
+					height: 21.25rpx;
+				}
+			}
+			.top-btn-wrap {
+				padding-left: 25rpx;
+				.btn-list {
+					display: flex;
+					flex-direction: row;
+					.com-button {
+						margin-left: 5rpx;
+						&:first-child {
+							margin-left: 0;
+						}
+					}
+				}
+				.select-wrap {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					white-space: nowrap;
+					image {
+						margin-left: 9.37rpx;
+						width: 12.5rpx;
+						height: 12.5rpx;
+					}
+				}
+			}
+		}
+		.content-list {
+			padding-top: 105rpx;
+			width: 100%;
+			background-color: #fff;
+			.list-item {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				border-bottom: 1px solid #DADEE6;
+				padding: 0 25rpx;
+				width: 100%;
+				height: 87.5rpx;
+				font-size: 22.5rpx;
+				line-height: 33.75rpx;
+				color: #292C33;
+				.check-img {
+					float: right;
+					width: 19.37rpx;
+					height: 14.37rpx;
+				}
+				&.active {
+					color: #3377FF;
+				}
+			}
+		}
+		.list {
+			.title {
+				padding-left: 25rpx;
+				width: 100%;
+				height: 62.5rpx;
+				line-height: 62.5rpx;
+				color: #666F80;
+			}
+			.item {
+				margin-top: 15rpx;
+				padding: 25rpx 0;
+				height: 167.5rpx;
+				background-color: #fff;
+				&:nth-child(2) {
+					margin-top: 0;
+				}
+				.top-box {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+					
+					.top-box-left {
+						display: flex;
+						flex-direction: row;
+						.index-icon {
+							margin-right: 15rpx;
+							border-radius: 0 62.5rpx 62.5rpx 0;
+							width: 50rpx;
+							height: 35rpx;
+							line-height: 35rpx;
+							text-align: center;
+							color: #fff;
+							background-color: #66B2FE;
+						}
+					}
+					image {
+						margin-right: 15rpx;
+						width: 40rpx;
+						height: 40rpx;
+					}
+				}
+				.children {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					margin-top: 18.75rpx;
+					.child {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						flex: 1;
+						border-right: 1px solid #DADEE6;
+						text {
+							font-weight: 500;
+							&:last-child {
+								font-size: 17.5rpx;
+								line-height: 26.25rpx;
+								color: #7A8599;
+								font-weight: 400;
+							}
+						}
+						&:last-child {
+							border-right: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/legendDetails/legendDetails.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="legendDetails">
+		<view class="box-item">
+			<view>图例介绍</view>
+			<view>{{rightAnswer.rightAnswerText}}</view>
+		</view>
+		<view class="box-item">
+			<view>图例图片</view>
+			<view class="img-wrap">
+				<image mode="widthFix"
+					v-for="(img, i) in getArr" 
+					:key="i"
+					:src="img"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 图例详情
+	 */
+	export default {
+		data() {
+			return {
+				rightAnswer: {
+					rightAnswerText: '',
+					rightAnswerImage: ''
+				}
+			};
+		},
+		computed: {
+			getArr() {
+				const {rightAnswerImage} = this.rightAnswer;
+				return rightAnswerImage ? rightAnswerImage.split(',') : [];
+			}
+		},
+		onLoad: function ({checkItemId}) {
+			this.dispatch('rightAnswer', {checkItemId}).then((data)=>{
+				if(data) {
+					this.rightAnswer = data;
+				}
+			});
+		},
+		methods: {
+			dispatch(key, data) {
+				return this.$store.dispatch({type: 'checkList/commActions', key, data});
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.legendDetails {
+		padding: 0 25rpx;
+		background-color: #fff;
+		.box-item {
+			display: flex;
+			flex-direction: row;
+			border-bottom: 0.62rpx solid #DADEE6;
+			padding: 26.25rpx 0;
+			&:last-child {
+				border-bottom: 0;
+			}
+			>view {
+				width: 100%;
+				&:first-child {
+					width: 175rpx;
+					white-space: nowrap;
+					color: #525866;
+				}
+				&.img-wrap {
+					display: flex;
+					flex-direction: column;
+					
+					image {
+						margin-bottom: 12.5rpx;
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/situationDetail/situationDetail.vue

@@ -108,7 +108,6 @@
 				}
 			}).then((data) => {
 				if (data) {
-          console.log(9, data)
 					this.name=data.name;
 					this.startDate=data.startDate;
 					this.endDate=data.endDate;