usky-web-mobile/src/pages/business/mhxf/informationSelect/index.vue

<template>
	<u-sticky bgColor="#fff" style="border-bottom: 1px #ececec solid">
		<u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
	</u-sticky>

  <view class="informationSelect" @touchstart="fingerstart" @touchend="fingerend">
    <uni-swipe-action>
      <uni-swipe-action-item style="background-color: #ffffff; padding: 10px">
        <!-- 警情查询 -->
        <view class="content1">
          <u-input style="border-radius: 50px; margin-bottom: 10px"  @blur="blur" v-model="dataInput" prefixIcon="search" prefixIconStyle="color: #0c7bf9" placeholder="请输入案件编号"> </u-input>
         <u-row v-for="po in policeData" :key="po" style="height: 36px; line-height: 36px">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 0px">{{ po.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 0px 0px 5px">{{ po.value }}</view>
            </u-col>
          </u-row>
        </view> 

				<!-- 各类查询 start -->
				<view class="content1">
					<u-input style="border-radius: 50px; margin-bottom: 10px" @blur="blur" v-model="dataInput"
						prefixIcon="search" prefixIconStyle="color: #0c7bf9" :placeholder="placeholderText"> </u-input>
						<view style="text-align:center;padding:10px" v-if="!hasRes">暂无数据...</view>
					<u-row v-for="po in classifyData" :key="po" style="height: 36px; line-height: 36px">
						<u-col span="4">
							<view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
						</u-col>
						<u-col span="8">
							<view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
						</u-col>
					</u-row>
				</view>
				<!-- 各类查询 end -->
				
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script setup>
	import {
		onReady,
		onLoad,
		onShow,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
		inject,
		shallowRef,
		reactive,
		watchEffect
	} from "vue";
	import useXunJianStore from "@/store/modules/xunJian";

	const myRequest = inject("$myRequest"); //全局接口请求
	const settingsStore = useXunJianStore(); //全局变量值Store

	const dataInput = ref("");
	const current = ref(0);
	const classifyUrl = ref('')
	const classifyCode = ref('')
	const placeholderText = ref('');
	const hasRes=ref(true)

	const list = ref([{
			id: 1,
			name: "警情查询",
		},
		{
			id: 2,
			name: "火灾查询",
		},
		{
			id: 3,
			name: "人员查询",
			badge: {
				// isDot: true,
				// value: 5,
			},
		},
		{
			id: 4,
			name: "车辆查询",
			badge: {
				// value: 5,
			},
		},
		{
			id: 5,
			name: "站点查询",
			badge: {
				// value: 5,
			},
		},
		{
			id: 6,
			name: "消火栓",
			badge: {
				// value: 5,
			},
		},

		{
			id: 7,
			name: "重点单位",
			badge: {
				// value: 5,
			},
		},
		{
			id: 8,
			name: "消防检查信息",
			badge: {
				// value: 5,
			},
		},
	]);

	const startData = ref({
		clientX: "",
		clientY: "",
	});
	const updDistance = ref(100);
	const lrDistance = ref(50);
	const topMed = ref("");
	const bottomMed = ref("");
	const leftMed = ref("");
	const rightMed = ref("");
	const classifyData = ref([]); //警情查询数据存储

	/**
	 * @当按下去的时候
	 */
	function fingerstart(e) {
		// 记录 距离可视区域左上角 左边距 和 上边距
		startData.value.clientX = e.changedTouches[0].clientX;
		startData.value.clientY = e.changedTouches[0].clientY;
	}
	/**
	 * @当抬起来的时候
	 */
	function fingerend(e) {
		// 当前位置 减去 按下位置 计算 距离
		const subX = e.changedTouches[0].clientX - startData.value.clientX;
		const subY = e.changedTouches[0].clientY - startData.value.clientY;
		if (subY > updDistance.value || subY < -updDistance.value) {
			if (subY > updDistance.value) {
				bottomscroll(subY);
			} else if (subY < -updDistance.value) {
				topscroll(subY);
			}
		} else {
			if (subX > lrDistance.value) {
				rightscroll(subX);
			} else if (subX < -lrDistance.value) {
				leftscroll(subX);
			} else {
				console.log("无效操作");
			}
		}
	}
	/**
	 * @上滑触发
	 */
	function topscroll(dista) {
		topMed.value ? (topMed.value = dista) : (topMed.value = null);
		console.log("触发了上滑方法!");
	}
	/**
	 * @下滑触发
	 */
	function bottomscroll(dista) {
		bottomMed.value ? (bottomMed.value = dista) : (bottomMed.value = null);
		console.log("触发了下滑方法!");
	}
	/**
	 * @右滑触发
	 */
	function rightscroll(dista) {
		rightMed.value ? (rightMed.value = dista) : (rightMed.value = null);
		console.log("触发了右滑方法!");
		if (current.value >= 1) {
			current.value--;
		} else {
			current.value = 0;
		}
	}
	/**
	 * @左滑触发
	 */
	function leftscroll(dista) {
		leftMed.value ? (leftMed.value = dista) : (leftMed.value = null);
		console.log("触发了左滑方法!");
		if (current.value < list.value.length - 1) {
			current.value++;
		} else {
			current.value = 0;
		}
	}

	function blur(e) {
		if(dataInput.value ){
			gogogogog()
		}
			
		
	}

	/**
	 * @tabs点击事件
	 */
	function tabsClick(e) {
		current.value = e.index;
		console.log(current.value)
		dataInput.value = ''
	}
	
	function gogogogog(){
		if (current.value == 0) { //警情查询
			classifyUrl.value = '/service-fire/demPoliceInfo/page'
			placeholderText.value = '请输入案件编号'
			classifySearch(classifyUrl.value, {
				caseCode: dataInput.value
			})
		} else if (current.value == 1) { //火灾查询
			placeholderText.value = '请输入火灾地址'
			classifyUrl.value = '/service-fire/demFireStatisticsAttach/page' 
			classifySearch(classifyUrl.value, {
				address: dataInput.value
			})
		} else if (current.value == 2) { //人员查询
			placeholderText.value = '请输入值班人员名称'
			classifyUrl.value = '/service-fire/unitBeOnDuty/list'
			classifySearch(classifyUrl.value, {
				name: dataInput.value
			})
		} else if (current.value == 3) { //车辆信息
			placeholderText.value = '请输入车牌号'
			classifyUrl.value = '/service-fire/unitBeOnDuty/vehiclelist' 
			classifySearch(classifyUrl.value, {
				licensePlate: dataInput.value
			})
		} else if (current.value == 4) { //站点查询
			placeholderText.value = '请输入站点名称'
			classifyUrl.value = '/service-fire/unitBeOnDuty/page' 
			classifySearch(classifyUrl.value, {
				stationName: dataInput.value
			})	
		} else if (current.value == 5) { //消火栓
			placeholderText.value = '请输入水源名称'
			classifyUrl.value = '/service-fire/demWaterSource/waterSourceList'
			classifySearch(classifyUrl.value, {
				waterName: dataInput.value
			})
		} else if (current.value == 6) { //重点单位
			placeholderText.value = '请输入单位名称'
			classifyUrl.value = '/service-fire/baseCompany/companyList' 
			classifySearch(classifyUrl.value, {
				companyName: dataInput.value
			})
		} else if (current.value == 7) {//消防检查信息
			placeholderText.value = '请输入单位ID'
			classifyUrl.value = '/service-fire/demFireInspect/fireInspectList' 
			classifySearch(classifyUrl.value, {
				companyId: dataInput.value
			})
		}
	}


	//分类信息查询 start
	async function classifySearch(URL, params) {
		classifyData.value = []
		hasRes.value=true
	
		const res = await myRequest({
			url: URL,
			data: params
		})
	
		if (res.data.status == "SUCCESS") {
			if(current.value==2){
				var records = res.data.data[0][0]
			}else if(current.value==3){
				var records = res.data.data[0];
			}else{
				var records = res.data.data.records[0];
			}
			if(!records){
				hasRes.value=false
				
			}
			
			switch (current.value) {
				case 0: //警情查询
					var classifyTitle = ["案件编号", "主管支队", "案件时间段", "通知到场时间", "通知出水时间", "通知控制时间", "通知熄火时间", "通知返队时间",
						"区域", "案件类型", "案发地址", "立案时间", "立案日期", "处置对象", "案件等级", "主管中队", "区县", "案件状态", "案件性质", "填表时间",
						"街镇", "创建时间"
					];
					var classifyValue = [records.caseCode, records.branch, records.timeSlot, records.noticeArrivalTime,
						records.noticeEffluentTime, records.controlTime, records.quenchTime, records.returnTime, ,
						records.caseArea, records.caseTypeCode, records.address, records.filingTime, records
						.filingDate, records.handleObject, records.caseLevel, records.squadron, records.district,
						records.caseStatus, records.caseNature, records.bdpAudit, records.streetTown, records
						.createTime,
					]
					break;
				case 1: //火灾查询
					var classifyTitle = [ '地区','街镇', '经度', '维度',
					 '平台ID','火灾地址', '过火面积', '直接财产损失',  '死亡人数', '受伤人数','受灾户数','火灾原因','火灾等级','场所一级','场所二级','起火物一级','起火物二级'
						,'性质' 
					];
					var classifyValue = [records.district, records.street, records.longitude, records.latitude,
						records.id, records.address, records.burnedArea, records.propertyLoss, records
						.deathToll, records.nonFatal, records.disasterHome, records.fireCause,
						 records.fireLevel, records.placeOne, records.placeTwo, records.fireGoodsOne, records.fireGoodsTwo,records.nature
					]
					break;
				case 2: //人员查询
					var classifyTitle = ['值班人员信息', '岗位名称', '机构名称', '机构简称', '机构地址', '值班日期'];
					var classifyValue = [records.name, records.postName, records.organizationName, records
						.organizationShort,
						records.organizationAddress, records.time
					]
					break;
				case 3: //车辆查询
					var classifyTitle = ['车辆信息', '单件装备编码', '装备名称', '装备编码', '上级装备编码', '所属消防机构', '车牌号码', '资产编号', '商标',
						'颜色', '生产厂家名称',
						'有效期至', '车架号', '发动机编号', '批次号', '电台呼号', '车辆简称', '电台频道', '指挥员姓名', '驾驶员'
					];
					var classifyValue = [records.vehicleId, records.singleEquipCode, records.equipName, records
						.equipCode,
						records.superiorEquipCode, records.fireOrga, records.licensePlate, records.assetCode,
						records.assetCode, records.colour, records.productName, records.validityTime,
						records.frameCode, records.engineCode, records.batchCode, records.radioCallSign, records
						.vehicleAbbreviat, records.radioChannel, records.commanderName, records.driver
					]
					break;
				case 4: //站点查询
					var classifyTitle = ['平台ID', '支队名称', '所属辖区中队', '消防站名称', '单位性质', '地址', '所在位置', '联动固定电话',
						'负责人姓名', '负责人手机号码', '备注', '消防站类型', '经度', '维度', '创建时间', '更新时间', '支队id', '中队id',
						'编号', '原单位性质'
					];
					var classifyValue = [records.id, records.branchName, records.squadron, records.stationName,
						records.companyNature, records.address, records.location, records.fixedPhone, records
						.chargeName, records.chargePhone, records.remark,
						records.stationType, records.longitude, records.dimension, records.createTime, records
						.updateTime,
						records.branchId, records.squadronId, records.number, records.primaryCompanyNature
					]
					break;
				case 5: //消火栓
					var classifyTitle = ['可用状态名称', '消防站简介', '水源地址', '建造时间', '消火栓接口形式', '水源类型', '管辖机构名称', '取水形式',
						'联系方式', '可用状态', '水源性质', '水源名称', '管网单位', '管网压力'
					];
					var classifyValue = [records.availableStatusName, records.fireAbbreviat, records.waterAddress, records.buildTime,
						records.hydrantInterface, records.waterType, records.organizateName, records.waterForm, records
						.contactMode, records.availableStatus, records.waterNature,
						records.waterName, records.pipeCompany, records.pipePressure
					]
					break;
				case 6: //重点单位
					var classifyTitle = ['单位联系电话', '单位详细地址', '职工人数', '单位类型', '消防安全责任人姓名', '法人代表姓名', '单位名称', '消防安全管理人姓名',
						'单位主属性', '建筑面积', '行政区域', '单位成立时间', '占地面积', '火灾危险性','创建时间','单位性质','固定资产（单位：万元）'
					];
					var classifyValue = [records.linkPhone, records.address, records.employeeNum, records.companyType,
						records.fireDutyName, records.delegateName, records.companyName, records.fireManageName, records
						.mainAttribute, records.buildArea, records.administrativeDivision,
						records.foundTimecoverArea,records.coverArea, records.fireHazard, records.createTime,
						records.companyNature,records.fixedAssets,
					]
					break;
				case 7: //消防检查信息
					var classifyTitle = ['单位ID', '检查人员ID', '计划生成时间', '检查结果', '创建人', '创建时间', '检查员名称', '检查员职位',
						'单位电话'];
					var classifyValue = [records.companyId, records.personId, records.planTime, records.inspectResult,
						records.creator, records.createTime, records.personName, records.personPosition, records
						.linkPhone]
					break;
					// default:
					//    默认代码块
			}

			for (var i = 0; i < classifyTitle.length; i++) {
				var obj = {};
				obj.title = classifyTitle[i];
				obj.value = classifyValue[i];
				classifyData.value.push(obj)
			}
		} else {
			
		}
	}
	// end

	watchEffect(() => {
		gogogogog()
		
	});

	// 自定义导航事件
	onNavigationBarButtonTap((e) => {
		if (e.float == "right") {
			uni.navigateTo({
				url: "/pages/business/mhxf/xunJian/collect/components/collectRecord",
			});
		} else {}
	});

	onLoad((options) => {
	});

	onReady(() => {});

	onMounted(() => {});
</script>

<style lang="scss">
	.is-selected {
		color: #1989fa;
	}

.informationSelect {
  height: calc(100% - 45px);
  background-color: #ffffff;

		.content1 {
			.u-row {

				height: 36px;
				line-height: 36px;

				.u-col {
					border: 1px #e4e3e3 solid;
					border-right: 0px;
					border-bottom: 0px;
					tex-align: center;

					view {
						padding: 0 10px;
						min-height: 40px;
						overflow: hidden; //超出的文本隐藏
						// text-overflow: ellipsis; //溢出用省略号显示
						overflow:auto;
						white-space: nowrap; // 默认不换行；
						font-size: 14px;
					}

				}

				.u-col:last-child {
					border-right: 1px #e4e3e3 solid;
				}
			}

			.u-row:last-child {
				.u-col {
					border-bottom: 1px #e4e3e3 solid;
				}
			}
		}
	}
</style>

<style scoped>
	body,
	uni-page-body,
	uni-page-refresh,
	.grayBackgroundColor {
		background: rgb(241, 241, 241);
	}

	.whiteBackgroundColor {
		background-color: #ffffff;
	}
</style>