0408xx水库水情页面

api/common/index.js

@@ -0,0 +1,14 @@
+export const uploadImg = (filePath, callBack, failHandle) => uni.uploadFile({
+	url: BASE_URL + '/api/yt/fileStorage/upload', //上传图片的后端接口
+	filePath: filePath,
+	name: 'file',
+	// header: {
+	// 	'X-Authorization': `Bearer ${_token}`
+	// },
+	success: res => {
+		callBack(res)
+	},
+	fail: (res) => {
+		failHandle(res)
+	}
+})

components/Card/BaseCard.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="base-card-box">
+		<view class="card-header">
+			<view class="card-header-title">
+				{{ props.cardInfo.title }}
+			</view>
+			<view class="card-header-time">
+				{{ props.cardInfo.time }}
+			</view>
+		</view>
+		<view class="card-body">
+			<view class="card-body-list" v-if="props.cardInfo?.list">
+				<view class="card-body-list-item" v-for="(item, index) in props.cardInfo.list" :key="index">
+					<view class="label">
+						{{item.label}}：
+					</view>
+					<view class="value">
+						{{item.value}}
+					</view>
+				</view>
+			</view>
+			<view class="card-body-right">
+				<image style="width: 100%; height: 100%;" src="/static/images/index/deploy/right-arrow.svg"
+					mode="scaleToFill"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		defineProps
+	} from 'vue';
+	const props = defineProps({
+		cardInfo: {
+			type: Object,
+			default: () => {
+				return {
+					title: '标题',
+					time: '2024-04-08 12:00:00',
+					list: [{
+							label: 'label',
+							value: '100m³'
+						},
+						{
+							label: 'label',
+							value: '100m³'
+						}
+					]
+				}
+			}
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.base-card-box {
+		padding: 0 32rpx;
+		background: #FFFFFF;
+		border-radius: 12rpx;
+
+		.card-header {
+			padding: 16rpx 0;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			box-sizing: border-box;
+			border-bottom: 2rpx solid $uni-text-color-grey;
+
+			&-title {
+				font-family: Source Han Sans;
+				font-size: 40rpx;
+				font-weight: 500;
+				font-feature-settings: "kern" on;
+				color: $uni-text-color;
+			}
+
+			&-time {
+				font-family: Source Han Sans;
+				font-size: 32rpx;
+				font-feature-settings: "kern" on;
+				color: $uni-text-color-grey;
+			}
+		}
+
+		.card-body {
+			padding: 20rpx 0;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			&-list {
+
+				&-item {
+					display: flex;
+
+					.label {
+						font-family: Source Han Sans;
+						font-size: 32rpx;
+						font-feature-settings: "kern" on;
+						color: $uni-text-color-grey;
+					}
+
+					.value {
+						font-family: Source Han Sans;
+						font-size: 32rpx;
+						font-feature-settings: "kern" on;
+						color: $uni-text-color;
+					}
+				}
+			}
+
+			&-right {
+				width: 20rpx;
+				height: 36rpx;
+			}
+		}
+	}
+</style>

components/DateSelect/CustomDateSelect.vue

@@ -9,14 +9,19 @@
 						{{dateRange[0]}}
 					</view>
 					<view class="icon">
-						
+						<image style="width: 100%; height: 100%;" src="/static/images/components/dateSelect/time.svg" mode="scaleToFill"></image>
 					</view>
 				</view>
 				<view class="middle">
 					-
 				</view>
 				<view class="right date-box">
-					{{dateRange[1]}}
+					<view class="date">
+						{{dateRange[1]}}
+					</view>
+					<view class="icon">
+						<image style="width: 100%; height: 100%;" src="/static/images/components/dateSelect/time.svg" mode="scaleToFill"></image>
+					</view>
 				</view>
 			</view>
 		</uni-datetime-picker>
@@ -80,6 +85,11 @@
 				width: calc(46% - 40rpx);
 				border-radius: 12rpx;
 				background: #FFFFFF;
+				
+				.icon{
+					width: 32rpx;
+					height: 32rpx;
+				}
 			}
 		}
 	}

package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "moment": "^2.30.1",
-    "pinyin-pro": "^3.19.6"
+    "pinyin-pro": "^3.19.7"
   }
 }

pages.json

@@ -50,6 +50,20 @@
 				"navigationBarTitleText": "水库水情",
 				"navigationBarBackgroundColor": "#e9f3fd"
 			}
+		},
+		{
+			"path": "pages/index/pages/Reservoir/create/index",
+			"style": {
+				"navigationBarTitleText": "上报水库水情",
+				"navigationBarBackgroundColor": "#e9f3fd"
+			}
+		},
+		{
+			"path": "pages/index/pages/Reservoir/info/index",
+			"style": {
+				"navigationBarTitleText": "水库水情详情",
+				"navigationBarBackgroundColor": "#e9f3fd"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/pages/Reservoir/components/DataList.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="reservoir-data-list">
+		<view class="reservoir-data-list-item" v-for="(item,index) in list" :key="index">
+			<base-card :cardInfo="item" @tap="handleClick(item)"></base-card>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		defineProps,
+		onMounted,
+		reactive,
+		ref
+	} from 'vue';
+	import BaseCard from '@/components/Card/BaseCard.vue';
+	const props = defineProps({
+		reservoirId: {
+			type: String,
+			default: '1'
+		}
+	})
+
+	const list = ref([{
+			title: "标题",
+			// time: "2024-04-08 12:00:00",
+			list: [{
+					label: "label",
+					value: "100m³"
+				},
+				{
+					label: "label",
+					value: "100m³"
+				}
+			]
+		},
+		{
+			title: "标题",
+			// time: "2024-04-08 12:00:00",
+			list: [{
+					label: "label",
+					value: "100m³"
+				},
+				{
+					label: "label",
+					value: "100m³"
+				}
+			]
+		},
+		{
+			title: "标题",
+			// time: "2024-04-08 12:00:00",
+			list: [{
+					label: "label",
+					value: "100m³"
+				},
+				{
+					label: "label",
+					value: "100m³"
+				}
+			]
+		}
+	])
+
+	const getDataList = (param) => {
+		let params = {
+			id: props.reservoirId,
+			...param
+		}
+		console.log(params)
+	}
+	defineExpose({
+		getDataList
+	})
+	onMounted(() => {
+		// 在此处查询水情数据列表
+		getDataList()
+	})
+	// 跳转详情
+	const handleClick = (item) => {
+		console.log(item)
+		uni.navigateTo({
+			url:'/pages/index/pages/Reservoir/info/index'
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.reservoir-data-list {
+		&-item {
+			margin: 20rpx 0;
+		}
+	}
+</style>

pages/index/pages/Reservoir/create/index.vue

@@ -0,0 +1,203 @@
+<template>
+	<view class="reservoir-create-page">
+		<view class="create-form-box">
+			<uni-forms ref="valiFormRef" :rules="rules" :label-width="100" :model="valiFormData" label-position="left"
+				:border="true">
+				<uni-forms-item label="水库名称" required name="reservoirName">
+					<!-- <uni-easyinput class="custom-input" :inputBorder="false" v-model="valiFormData.reservoirName"
+						placeholder="请输入水库名称" disabled/> -->
+					<view style="text-align: right;">{{valiFormData.reservoirName}}</view>
+				</uni-forms-item>
+				<uni-forms-item label="坝址位置" required name="reservoirAddress">
+					<!-- <uni-easyinput class="custom-input" :inputBorder="false" v-model="valiFormData.reservoirAddress"
+						placeholder="请输入坝址位置" disabled/> -->
+					<view style="text-align: right;">{{valiFormData.reservoirAddress}}</view>
+				</uni-forms-item>
+				<uni-forms-item label="坝址坐标" required name="reservoirLonLat">
+					<!-- <uni-easyinput class="custom-input" :inputBorder="false" v-model="valiFormData.reservoirLonLat"
+						placeholder="请输入坝址坐标" disabled /> -->
+					<view style="text-align: right;">{{valiFormData.reservoirLonLat}}</view>
+				</uni-forms-item>
+				<!-- <uni-forms-item class="custom-uni-form-item" label="自我介绍" name="introduction">
+					<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
+				</uni-forms-item> -->
+				<uni-forms-item label="观测日期" required name="createDate">
+					<uni-datetime-picker type="date" v-model="valiFormData.createDate" :clear-icon="false">
+						<uni-easyinput suffixIcon="calendar" :clearable="false" class="custom-input"
+							:inputBorder="false" :value="valiFormData.createDate" placeholder="请选择日期" />
+					</uni-datetime-picker>
+				</uni-forms-item>
+				<uni-forms-item label="观测时间" required name="createTime">
+					<picker mode="time" :value="valiFormData.createTime" @change="onTimeChange">
+						<uni-easyinput :clearable="false" class="custom-input" :inputBorder="false"
+							:value="valiFormData.createTime" placeholder="请选择时间" />
+					</picker>
+				</uni-forms-item>
+				<uni-forms-item label="水位" required name="waterLevel">
+					<uni-easyinput type="number" class="custom-input" :inputBorder="false"
+						v-model="valiFormData.waterLevel" placeholder="请输入水位" />
+				</uni-forms-item>
+				<uni-forms-item label="库容" required name="waterCapacity">
+					<view style="text-align: right;">{{valiFormData.waterCapacity}}</view>
+				</uni-forms-item>
+				<uni-forms-item class="custom-uni-form-item" label="水尺图片" required name="pictures">
+					<uni-file-picker ref="uploadRef" :auto-upload="false" limit="1" :sourceType="fileSourceType"
+						v-model="fileList" @select="seleceFile" @delete="removeFile"></uni-file-picker>
+				</uni-forms-item>
+				<uni-forms-item label="备注" name="remark">
+					<uni-easyinput class="custom-input" :inputBorder="false" v-model="valiFormData.remark"
+						placeholder="请输入备注" />
+				</uni-forms-item>
+			</uni-forms>
+			<button type="primary" style="border-radius: 19998rpx;" @tap="handleSubmit">提交</button>
+		</view>
+		<view class="submit-btn">
+			<!-- <button type="primary" @tap="handleSubmit">提交</button> -->
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref,
+		watch
+	} from 'vue';
+	import moment from 'moment';
+
+	const rules = {
+		createDate: {
+			rules: [{
+				required: true,
+				errorMessage: '观测日期不能为空'
+			}]
+		},
+		createTime: {
+			rules: [{
+				required: true,
+				errorMessage: '观测时间不能为空'
+			}]
+		},
+		waterLevel: {
+			rules: [{
+				required: true,
+				errorMessage: '水位不能为空'
+			}]
+		},
+		waterCapacity: {
+			rules: [{
+				required: true,
+				errorMessage: '库容不能为空'
+			}]
+		},
+		pictures:{
+			rules: [{
+				required: true,
+				type: Array,
+				errorMessage: '水尺图片不能为空'
+			}]
+		}
+		// age: {
+		// 	rules: [{
+		// 		required: true,
+		// 		errorMessage: '年龄不能为空'
+		// 	}, {
+		// 		format: 'number',
+		// 		errorMessage: '年龄只能输入数字'
+		// 	}]
+		// }
+	}
+
+	const onTimeChange = (e) => {
+		valiFormData.createTime = e.detail.value
+	}
+
+	const valiFormData = reactive({
+		reservoirName: "黑龙滩水库",
+		reservoirAddress: "四川省仁寿县黑龙滩镇大坝社区",
+		reservoirLonLat: "东经104º03ˊ 北纬30º03ˊ",
+		createDate: moment().format('YYYY-MM-DD'),
+		createTime: moment().format('HH:mm'),
+		waterLevel: "",
+		waterCapacity: "根据水位计算",
+		pictures: [],
+		remark: ""
+	})
+	watch(
+		() => valiFormData.waterLevel,
+		(newVal) => {
+			if(newVal){
+				valiFormData.waterCapacity = parseFloat(newVal) + 544
+			}else{
+				valiFormData.waterCapacity = "根据水位计算"
+			}
+		},
+		{
+			deep: true
+		}
+	)
+
+	const fileSourceType = ['album', 'camera']
+	const fileList = ref([])
+	const seleceFile = (fileList) => {
+		// uploadImg(
+		// 	fileList.tempFilePaths,
+		// 	(res) => {
+		// 		console.log('成功', res)
+		// 	},
+		// 	(res) => {
+		// 		console.log('失败', res)
+		// 	}
+		// )
+	}
+	const removeFile = (file) => {
+		fileList.value = []
+	}
+
+	const valiFormRef = ref(null)
+
+	const handleSubmit = () => {
+		valiFormRef.value.validate().then((res) => {
+			console.log(res)
+		}).catch(e => {
+			console.log('err', e)
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.reservoir-create-page {
+		min-height: calc(100vh - var(--window-top) - 40rpx);
+		background-color: $uni-user-page-bgc;
+		padding: 20rpx;
+
+		.create-form-box {
+			border-radius: 12rpx;
+			background: #FFFFFF;
+			padding: 30rpx;
+
+			::v-deep .custom-input {
+
+				input {
+					text-align: right;
+				}
+
+				.uni-input-placeholder {
+					text-align: right;
+				}
+
+				.uni-date__x-input {
+					text-align: right;
+				}
+			}
+
+			::v-deep .uni-forms-item {
+				align-items: center;
+			}
+
+			::v-deep .custom-uni-form-item {
+				display: block;
+			}
+		}
+	}
+</style>

pages/index/pages/Reservoir/index.vue

@@ -9,6 +9,8 @@
 		</view>
 		<Overview :reservoirId="current"></Overview>
 		<custom-date-select :range="range" @dateChange="handleDateSelect"></custom-date-select>
+		<data-list :reservoirId="current" ref="dataListRef"></data-list>
+		<uni-fab horizontal="right" vertical="bottom" @fabClick="fabClick" />
 	</view>
 </template>
 
@@ -17,6 +19,7 @@
 		ref
 	} from 'vue';
 	import Overview from './components/Overview.vue';
+	import DataList from './components/DataList.vue';
 	import CustomDateSelect from '@/components/DateSelect/CustomDateSelect.vue';
 	import moment from 'moment';
 	const menus = [{
@@ -33,8 +36,18 @@
 		current.value = item.id
 	}
 	const range = ref([moment().subtract(5,'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
+	const dataListRef = ref(null)
 	const handleDateSelect = (e)=>{
 		console.log(e)
+		console.log(dataListRef)
+		dataListRef && dataListRef.value.getDataList(e)
+		
+	}
+	const fabClick = ()=>{
+		console.log('点击了')
+		uni.navigateTo({
+			url:'/pages/index/pages/Reservoir/create/index'
+		})
 	}
 </script>
 

pages/index/pages/Reservoir/info/index.vue

@@ -0,0 +1,248 @@
+<template>
+	<view class="reservoir-info-page">
+		<view class="info-base-card">
+			<view class="info-base-card-list">
+				<view class="info-base-card-list-item" v-for="(item,index) in baseInfo.reservoirList" :key="index">
+					<view class="label">
+						{{item.label}}：
+					</view>
+					<view class="value">
+						{{item.value}}
+					</view>
+				</view>
+			</view>
+			<view class="info-base-card-list">
+				<view class="info-base-card-list-item" v-for="(item,index) in baseInfo.reservoirData" :key="index">
+					<view class="label">
+						{{item.label}}：
+					</view>
+					<view class="value">
+						{{item.value}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="info-details-card">
+			<view class="info-details-card-item" v-for="(item, index) in detailsList" :key="index">
+				<view class="info-details-card-item-title">
+					{{item.title}}
+				</view>
+				<view class="info-details-card-item-list" v-for="(item1, index1) in item.list" :key="index1">
+					<view class="label">
+						{{item1.label}}：
+					</view>
+					<view class="value" v-if="item1.label!=='拍摄图片'">
+						{{item1.value}}
+					</view>
+					<view class="value picture" v-else>
+						<image style="width: 100%; height: 100%;" src="/static/images/components/mapControl/layer_yx.png" mode="scaleToFill"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	const baseInfo = {
+		reservoirList:[
+			{
+				label:"水库",
+				value:"黑龙滩水库"
+			},
+			{
+				label:"坝址位置",
+				value:"四川省仁寿县黑龙滩镇大坝社区"
+			},
+			{
+				label:"坝址坐标",
+				value:"东经104º03ˊ 北纬30º03ˊ"
+			},
+			{
+				label:"观测日期",
+				value:"2023年7月12日"
+			}
+		],
+		reservoirData:[
+			{
+				label:"平均水位",
+				value:"480.2m"
+			},
+			{
+				label:"平均库容",
+				value:"23.033万m³"
+			}
+		]
+	}
+	const detailsList = [
+		{
+			title:"第一次观测",
+			list:[
+				{
+					label: "观测时间",
+					value: "10:00"
+				},
+				{
+					label: "水位",
+					value: "480.2m"
+				},
+				{
+					label: "库容",
+					value: "23.033万m³"
+				},
+				{
+					label: "拍摄图片",
+					value: "10:00"
+				},
+				{
+					label: "备注",
+					value: "这里是一个备注"
+				},
+				{
+					label: "上报人",
+					value: "张三"
+				},
+				{
+					label: "上报时间",
+					value: "2024/04/08 10:00"
+				}
+			]
+		},
+		{
+			title:"第二次观测",
+			list:[
+				{
+					label: "观测时间",
+					value: "10:00"
+				},
+				{
+					label: "水位",
+					value: "480.2m"
+				},
+				{
+					label: "库容",
+					value: "23.033万m³"
+				},
+				{
+					label: "拍摄图片",
+					value: "10:00"
+				},
+				{
+					label: "备注",
+					value: "这里是一个备注"
+				},
+				{
+					label: "上报人",
+					value: "张三"
+				},
+				{
+					label: "上报时间",
+					value: "2024/04/08 10:00"
+				}
+			]
+		}
+	]
+</script>
+
+<style lang="scss" scoped>
+	.reservoir-info-page{
+		min-height: calc(100vh - var(--window-top) - 40rpx);
+		background-color: $uni-user-page-bgc;
+		padding: 20rpx;
+		
+		.info-base-card{
+			border-radius: 12rpx;
+			background: #FFFFFF;
+			padding: 20rpx 30rpx;
+			
+			.info-base-card-list{
+				border-bottom: 2rpx dotted $uni-text-color-grey;
+				box-sizing: border-box;
+				padding-bottom: 20rpx;
+				
+				&:last-child{
+					padding-bottom: 0;
+					border-bottom:none;
+				}
+				.info-base-card-list-item{
+					display: flex;
+					padding: 10rpx 0;
+					
+					.label{
+						font-family: Source Han Sans;
+						font-size: 32rpx;
+						text-align: right;
+						font-feature-settings: "kern" on;
+						color: $uni-text-color-grey;
+						white-space: nowrap;
+						min-width: 160rpx;
+					}
+					.value{
+						// white-space: nowrap;
+						// text-overflow: ellipsis;
+						// overflow: hidden;
+						font-family: Source Han Sans;
+						font-size: 32rpx;
+						font-feature-settings: "kern" on;
+						color: $uni-text-color;
+					}
+				}
+			}
+		}
+		
+		.info-details-card{
+			border-radius: 12rpx;
+			background: #FFFFFF;
+			padding: 20rpx 30rpx;
+			margin-top: 20rpx;
+			
+			&-item{
+				border-bottom: 2rpx dotted $uni-text-color-grey;
+				box-sizing: border-box;
+				padding: 20rpx;
+				
+				&:last-child{
+					padding-bottom: 0;
+					border-bottom:none;
+				}
+				
+				&-title{
+					font-family: Source Han Sans;
+					font-size: 40rpx;
+					font-weight: 500;
+					font-feature-settings: "kern" on;
+					color: $uni-text-color;
+					margin-bottom: 30rpx;
+				}
+				
+				&-list{
+					display: flex;
+					padding: 10rpx 0;
+					
+					.label{
+						font-family: Source Han Sans;
+						font-size: 32rpx;
+						text-align: right;
+						font-feature-settings: "kern" on;
+						color: $uni-text-color-grey;
+						white-space: nowrap;
+						min-width: 160rpx;
+					}
+					.value{
+						// white-space: nowrap;
+						// text-overflow: ellipsis;
+						// overflow: hidden;
+						font-family: Source Han Sans;
+						font-size: 32rpx;
+						font-feature-settings: "kern" on;
+						color: $uni-text-color;
+					}
+					.picture{
+						flex: 1;
+						min-height: 240rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

yarn.lock

@@ -7,7 +7,7 @@ moment@^2.30.1:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
 
-pinyin-pro@^3.19.6:
-  version "3.19.6"
-  resolved "https://registry.yarnpkg.com/pinyin-pro/-/pinyin-pro-3.19.6.tgz#ed5eebcd43d84f8eaa32d40452b2cca55760e58c"
-  integrity sha512-oWb34orr12+DjXf6gtGMB+gIpjRi7DZzyJE66ultbmNzVhpimM/utGtMI8GcbOy/lb26Ph/nogwNYriRPu+SGQ==
+pinyin-pro@^3.19.7:
+  version "3.19.7"
+  resolved "https://registry.yarnpkg.com/pinyin-pro/-/pinyin-pro-3.19.7.tgz#a0c0f994686f48935202687f197808039439b5cc"
+  integrity sha512-SydYnjrvUpvW6qRpuZPfutYAz+lgoMJDPAbKUy8fnXt3qQIg+Wdpcd07A/1ljj0mTG7YDoYjXcF/jHTBCPShYQ==