bigdataCut/bigdata2/src/pages/equipmanger/EquipList.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-select
					size="small"
					v-model="queryInfo.device_type_id"
					placeholder="请选择设备类型"
					@change="searchChange()"
				>
					<el-option label="全部" value="0"></el-option>
					<el-option label="性诱测报" value="4"></el-option>
					<el-option label="孢子仪" value="7"></el-option>
					<el-option label="虫情测报" value="3"></el-option>
					<el-option label="杀虫灯" value="2"></el-option>
				</el-select>
				<el-input
					size="small"
					clearable
					@change="searchChange()"
					placeholder="请输入设备ID"
					v-model="queryInfo.f_id"
				>
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-date-picker
				size="small"
				@change="DateChange()"
				v-model="timeRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
			></el-date-picker>
		</div>
		<el-row :gutter="10">
			<el-col
				:xs="24"
				:sm="24"
				:md="12"
				:lg="6"
				:xl="4"
				v-for="item in dataList"
				:key="item.id"
			>
				<el-card class="box-card pad0">
					<div class="img-box">
						<template v-if="item.equip_type == '2'">
							<img src="@/assets/images/equipdistribute/scdIconOn.png" />
							<p>杀虫灯</p>
						</template>
						<template v-if="item.equip_type == '3'">
							<img src="@/assets/images/equipdistribute/cbdIconOn.png" />
							<p>测报灯</p>
						</template>
						<template v-if="item.equip_type == '4'">
							<img src="@/assets/images/equipdistribute/znxyOn.png" />
							<p>智能性诱</p>
						</template>
						<template v-if="item.equip_type == '5'">
							<img src="@/assets/images/equipdistribute/hjjcIconOn.png" />
							<p>环境监测</p>
						</template>
						<template v-if="item.equip_type == '6'">
							<img src="@/assets/images/equipdistribute/jkIconOn.png" />
							<p>监控设备</p>
						</template>
						<template v-if="item.equip_type == '7'">
							<img src="@/assets/images/equipdistribute/bzyIconOn.png" />
							<p>孢子仪</p>
						</template>
						<template v-if="item.equip_type == '8'">
							<img src="@/assets/images/equipdistribute/xyOn.png" />
							<p>性诱设备</p>
						</template>
						<template v-if="item.equip_type == 9">
							<img src="@/assets/images/equipdistribute/tccbOn.png" />
							<p>糖醋测报</p>
						</template>
					</div>
					<div class="detail">
						<p>
							设备ID
							<span>{{ item.equip_id }}</span>
						</p>
						<p>
							适配用户
							<span>{{ item.equip_user || '无' }}</span>
						</p>
						<p>
							设备名称
							<span>{{ item.equip_name || '无' }}</span>
						</p>
						<p>
							设备添加时间
							<span>{{ item.equip_add_time }}</span>
						</p>
					</div>
					<div class="bottom">
						<span @click="modifyName(item.equip_id, item.equip_name)">
							<i class="el-icon-edit-outline"></i> 修改名称
						</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 暂无数据 -->
		<div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
			<img
				src="@/assets/images/zanwu.png"
				alt
				class="expertDiagnosis_referral_units_notImg"
			/>
		</div>
		<el-pagination
			v-if="dataList.length > 0"
			background
			layout="prev, pager, next"
			:page-size="12"
			:total="totalNum"
			@current-change="changePage"
		></el-pagination>
		<!-- 添加定位弹框 -->
		<el-dialog
			class="map_dialog"
			title="添加定位"
			v-if="addLocationDialogVisible"
			:visible.sync="addLocationDialogVisible"
			width="800px"
			@closed="addLocationDialogClosed"
		>
			<el-form
				:inline="true"
				:model="locationForm"
				class="demo-form-inline"
				size="mini"
			>
				<el-form-item label="经度">
					<el-input clearable v-model="locationForm.lng"></el-input>
				</el-form-item>
				<el-form-item label="维度">
					<el-input clearable v-model="locationForm.lat"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="locationSearch"
						>定位</el-button
					>
				</el-form-item>
				<el-form-item label="">
					<el-input
						placeholder="请输入地区检索"
						v-model="addr"
						clearable
						@change="addrChange()"
					></el-input>
				</el-form-item>
			</el-form>
			<baidu-map
				class="Bmap"
				:center="center"
				:zoom="mapZoom"
				:scroll-wheel-zoom="true"
				@ready="handlerBMap"
				@click="locationPoint"
			>
				<bm-marker :position="point" :dragging="true"></bm-marker>
			</baidu-map>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addLocationDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addLocationSubm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			timeRange: '',
			queryInfo: {
				f_id: '',
				page: 1,
				device_type_id: '0',
				start_time: '',
				end_time: ''
			},
			dataList: [],
			totalNum: 0,
			addr: '',
			locationForm: {
				lat: '',
				lng: ''
			},
			device_id: '',
			mapZoom: 6,
			point: { lng: '', lat: '' },
			center: { lng: '', lat: '' },
			addLocationDialogVisible: false
		}
	},
	mounted() {
		this.getList()
	},
	beforeMount() {},
	methods: {
		//获取设备列表
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/equiplist_filter',
				data: this.qs.stringify({
					f_type: this.queryInfo.device_type_id,
					f_id: this.queryInfo.f_id,
					f_tbegin: this.queryInfo.start_time,
					f_tend: this.queryInfo.end_time,
					page: this.queryInfo.page,
				})
			}).then((res) => {
				this.dataList = res.data.dat
				this.totalNum = res.data.nums
			})
		},
		searchChange() {
			this.queryInfo.page = 1
			this.getList()
		},
		DateChange(val) {
			this.queryInfo.page = 1
			if (this.timeRange) {
				this.queryInfo.start_time = new Date(this.timeRange[0]).toLocaleDateString().replace(/\//g,'-'); 
				this.queryInfo.end_time = new Date(this.timeRange[1]).toLocaleDateString().replace(/\//g,'-'); 
				this.getList()
			} else {
				this.queryInfo.start_time = ''
				this.queryInfo.end_time = ''
				this.getList()
			}
		},
		//在地图中点击定位
		locationPoint(e) {
			let { point } = e
			this.point = point
			this.locationForm = point
			this.map.clearOverlays()
			this.map.addOverlay(new BMap.Marker(this.point))
		},
		addrChange() {
			let local = new this.BMap.LocalSearch(this.map, {
				renderOptions: { map: this.map, panel: 'r-result' }
			})
			local.search(this.addr)
		},
		// 修改设备名称
		modifyName(id, device_name) {
			let value = device_name
			this.$prompt('', '修改名字', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPlaceholder: device_name
			})
				.then(({ value }) => {
					if (value) {
						this.$axios({
							method: 'POST',
							url: '/api/equiplist',
							data: this.qs.stringify({
								req: 'rename',
								ename: value,
								eid: id
							})
						}).then((res) => {
							if (res.data == 0) {
								this.getList()
								this.$message({
									type: 'success',
									message: '修改成功'
								})
							}
						})
					} else {
						this.$message({
							type: 'info',
							message: '内容不能为空'
						})
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		},
		//通过经纬度搜索定位
		locationSearch() {
			if (this.locationForm.lat && this.locationForm.lng) {
				this.point = this.locationForm
				this.map.clearOverlays()
				this.map.addOverlay(new BMap.Marker(this.point))
			}
		},
		handlerBMap({ BMap, map }) {
			this.BMap = BMap
			this.map = map
			let point = new BMap.Point(this.point.lng, this.point.lat)
			map.centerAndZoom(point, 15)
		},
		//点击“添加定位”按钮
		addPosition(device_id, lng, lat) {
			this.device_id = device_id
			this.point = { lng, lat }
			this.addLocationDialogVisible = true
		},
		changePage(val) {
			console.log(val)
			this.queryInfo.page = val
			this.getList()
		},
		//关闭定位弹框时调用
		addLocationDialogClosed() {
			this.locationForm = { lat: '', lng: '' }
			this.point = { lng: '', lat: '' }
			this.center = { lng: 113.271429, lat: 23.135336 }

			//   this.map.clearOverlays();
			this.map = null
			this.BMap = null
		},
		//选择定位点后，提交
		addLocationSubm() {
			console.log(this.point)
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
				data: this.qs.stringify({
					device_id: this.device_id,
					lat: this.point.lat,
					lng: this.point.lng
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.getList()
					this.$message({
						type: 'success',
						message: '定位成功'
					})
				} else {
					this.$message({
						type: 'error',
						message: '定位失败'
					})
				}
			})
			this.addLocationDialogVisible = false
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: flex-left;
	justify-content: space-between;
	margin-bottom: 10px;
	.filter-box > div {
		margin-right: 15px;
	}
	.el-input {
		width: 200px;
	}
	.el-date-editor--daterange {
		width: 222px;
	}
}
.el-card.selected {
	border: 1px solid #14a478;
}
.el-card {
	.img-box {
		text-align: center;
		border-bottom: 1px solid #e1e1e1;
		padding: 20px 0;
		img {
			height: 55px;
		}
		p {
			font-size: 14px;
			font-weight: 800;
			margin-top: 10px;
		}
	}
	.detail {
		border-bottom: 1px solid #e1e1e1;
		padding: 10px 0;
		padding: 0 20px;
		p {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			line-height: 34px;
			color: #666;
		}
	}
	.bottom {
		display: flex;
		font-size: 13px;
		color: #666;
		line-height: 50px;
		span {
			flex: 1;
			text-align: center;
			cursor: pointer;
			i {
				font-size: 16px;
			}
		}
		span:first-child {
			border-right: 1px solid #e1e1e1;
		}
	}
}
.Bmap {
	width: 100%;
	height: 400px;
}
.map_dialog /deep/ .el-dialog__body {
	padding: 20px 20px 0 20px;
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>