RT_SY/src/pages/forecasting/cbd/Cbd.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item>虫情测报</el-breadcrumb-item>
		</el-breadcrumb>
		<search-bar
			@fun="getDisplayType"
			:displayType="displayType"
			@fun2="getIDName"
			@fun3="getIsOnline"
		>
			<template slot="search-box">
				<template v-if="role == 'admin'">
					<el-select
						v-model="queryInfo.dver"
						class="select01"
						clearable
						size="mini"
						placeholder="请选择设备版本"
						@change="searchChange()"
					>
						<el-option
							v-for="item in dverGather"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</template>
				<!-- <template v-if="role=='admin'">
					<el-select
						v-model="queryInfo.selectUser"
						class="select01"
						clearable
						size="mini"
						filterable
						placeholder="请选择用户"
						@change="searchChange()"
					>
						<el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</template> -->
			</template>
		</search-bar>
		<template v-if="displayType == 1">
			<el-row :gutter="10">
				<el-col
					:xs="24"
					:sm="24"
					:md="12"
					:lg="8"
					:xl="6"
					v-for="item in equipList"
					:key="item.imei"
				>
					<el-card class="box-card">
						<equip-item :is_online="item.device_status">
							<span
								v-show="userType == 1"
								slot="set"
								class="superOperate el-icon-setting"
								@click="
									equipOperation(item.d_id, item.device_id, item.device_name)
								"
							></span>
							<span slot="title">虫情测报</span>
							<div slot="content" class="content">
								<p>
									<i class="iconfont icon-yonghu"></i>
									设备ID：{{ item.device_id }}
								</p>
								<p>
									<i class="iconfont icon-biaoqian"></i>
									设备名称：{{
										item.device_name == '' ? '无' : item.device_name
									}}
								</p>
								<p class="onlineState">
									<i class="iconfont icon-diannao"></i>在线状态：
									<span
										:class="{
											red: item.device_status == 0,
											green: item.device_status == 1
										}"
										>{{ item.device_status == 0 ? '离线' : '在线' }}</span
									>
								</p>
								<p>
									<i class="iconfont icon-shijian"></i>
									最新上报时间 : {{ (item.status_time * 1000) | formatTime }}
								</p>
								<p>
									<i class="iconfont icon-dizhi"></i>
									地址 : {{ item.address || '无' }}
								</p>
								<p class="btns">
									<i class="iconfont icon-yemiancaozuo"></i>
									<el-button
										size="mini"
										type="info"
										@click="viewPhotoDialog(item.device_id, item.d_id)"
										>查看图片</el-button
									>
									<el-button
										size="mini"
										type="warning"
										@click="
											EquipControl(item.d_id, item.device_id, item.device_name)
										"
										>设备控制</el-button
									>
									<el-button
										size="mini"
										type="success"
										@click="showTimeControlDialog(item.d_id,item.device_id,)"
										>害虫统计</el-button
									>
									<el-button
										size="mini"
										type="danger"
										@click="dataDetails(item.device_id, item.d_id)"
										>数据详情</el-button
									>
								</p>
							</div>
						</equip-item>
					</el-card>
				</el-col>
			</el-row>
		</template>
		<template v-if="displayType == 2">
			<el-card class="box-card">
				<el-table :data="equipList" stripe style="width: 100%">
					<el-table-column prop="device_id" label="设备ID" width="180">
						<template slot-scope="scope">{{ scope.row.device_id }}</template>
					</el-table-column>
					<el-table-column prop="device_name" label="设备名称" width="180">
						<template slot-scope="scope">{{
							scope.row.device_name == '' ? '无' : scope.row.device_name
						}}</template>
					</el-table-column>
					<el-table-column prop="device_status" label="在线状态">
						<template slot-scope="scope">
							<p style="color: #17bb89" v-if="scope.row.device_status == 1">
								在线
							</p>
							<p style="color: #eb6765" v-if="scope.row.device_status == 0">
								离线
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="dver_num" label="设备版本"></el-table-column>
					<el-table-column prop="status_time" label="最新上报时间">
						<template slot-scope="scope">{{
							(scope.row.status_time * 1000) | formatTime
						}}</template>
					</el-table-column>
					<el-table-column label="操作" width="400">
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="info"
								@click="viewPhotoDialog(scope.row.device_id, scope.row.d_id)"
								>查看图片</el-button
							>
							<el-button
								size="mini"
								type="warning"
								@click="
									EquipControl(
										scope.row.d_id,
										scope.row.device_id,
										scope.row.device_name
									)
								"
								>设备控制</el-button
							>
							<el-button
								size="mini"
								type="success"
								@click="showTimeControlDialog(scope.row.d_id,scope.row.device_id)"
								>害虫统计</el-button
							>
							<el-button
								size="mini"
								type="danger"
								@click="dataDetails(scope.row.device_id, scope.row.d_id)"
								>数据详情</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</template>
		<!-- 暂无数据 -->
		<div
			class="expertDiagnosis_referral_units_not"
			v-if="equipList.length <= 0 && displayType == 1"
		>
			<img
				src="@/assets/images/expertDiagnosis/zanwu.png"
				alt
				class="expertDiagnosis_referral_units_notImg"
			/>
		</div>
		<el-pagination
			v-if="equipList.length > 0"
			background
			:page-size="8"
			layout="prev, pager, next"
			:total="totalNum"
			:current-page="queryInfo.page"
			@current-change="changePage"
		></el-pagination>
		<!-- 设备控制对话框 -->
		<el-dialog
			title="设备控制"
			:visible.sync="equipControlDialogVisible"
			@close="resetEquipControlDialogClosed"
			width="600px"
		>
			<div class="handAddForm">
				<el-form
					ref="equipContrlRef"
					:model="equipContrlForm"
					label-position="right"
					label-width="150px"
				>
					<el-form-item label="设备编号:">
						<el-input disabled v-model="equipInfo.device_id"></el-input>
					</el-form-item>
					<el-form-item label="设备名称:" v-if="equipInfo.device_name">
						<el-input disabled v-model="equipInfo.device_name"></el-input>
					</el-form-item>
					<el-form-item label="设备开关：" prop="ds">
						<el-select v-model="equipContrlForm.ds">
							<el-option label="开机" :value="1"></el-option>
							<el-option label="关机" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="工作模式:" prop="ws">
						<el-select
							v-model="ws"
							placeholder="请选择工作模式"
							@change="wsChange()"
						>
							<el-option label="节能" :value="0"></el-option>
							<el-option label="常规" :value="1"></el-option>
							<el-option label="加强" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="定时模式:" prop="ts">
						<el-select
							v-model="equipContrlForm.ts"
							placeholder="请选择定时模式"
						>
							<el-option label="光控" :value="0"></el-option>
							<el-option label="时控" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="equipContrlForm.ts == 1" label="开始结束时间:">
						<el-col :span="11">
							<el-time-select
								placeholder="起始时间"
								v-model="equipContrlForm.st"
								:picker-options="{
									start: '00:00',
									step: '01:00',
									end: '24:00'
								}"
							></el-time-select>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-time-select
								placeholder="结束时间"
								v-model="equipContrlForm.et"
								:picker-options="{
									start: '00:00',
									step: '01:00',
									end: '24:00'
								}"
							></el-time-select>
						</el-col>
					</el-form-item>
					<el-form-item
						v-if="equipContrlForm.ts != 1"
						label="定时时长(h):"
						prop="tt"
					>
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.tt"
									show-input
									:min="1"
									:max="10"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="落虫时间(min):" prop="collt">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.collt"
									show-input
									:min="1"
									:max="20"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="加热时间(min):" prop="htim">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.htim"
									show-input
									:min="1"
									:max="20"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="加热温度(℃):" prop="hst">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.hst"
									show-input
									:min="75"
									:max="120"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="高温保护阈值(℃):" prop="tph">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.tph"
									show-input
									:min="50"
									:max="70"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="低温保护阈值(℃):" prop="tpl">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.tpl"
									show-input
									:min="1"
									:max="10"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="数据上传间隔(min):" prop="datt">
						<div class="sliderParent">
							<div class="block">
								<el-slider
									v-model="equipContrlForm.datt"
									:step="10"
									show-input
									:min="10"
									:max="60"
								></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="图片分辨率:" prop="imgres">
						<el-select
							v-model="equipContrlForm.imgres"
							placeholder="请选择图片分辨率"
						>
							<el-option label="高" :value="0"></el-option>
							<el-option label="中" :value="1"></el-option>
							<el-option label="低" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="handAddFormBtn">
						<el-button type="primary" size="mini" @click="equipControlSubm()"
							>确定</el-button
						>
						<el-button size="mini" @click="equipControlDialogVisible = false"
							>取消</el-button
						>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<!-- 管理员操作弹框 -->
		<el-dialog
			title="管理员操作"
			:visible.sync="operationDialogVisible"
			width="360px"
		>
			<div class="item">
				<span>设备编号 : </span><span>{{ equipInfo.device_id }}</span>
			</div>
			<div class="item" v-if="equipInfo.device_name">
				<span>设备名称 : </span><span>{{ equipInfo.device_name }}</span>
			</div>
			<div class="tit">联网模块</div>
			<el-button
				type="primary"
				size="mini"
				@click="equipBtnControl('dtu_update')"
				>升级</el-button
			>
			<el-button
				type="primary"
				size="mini"
				@click="equipBtnControl('dtu_reboot')"
				>重启</el-button
			>
			<div class="tit">板子设置</div>
			<el-row>
				<el-button type="primary" size="mini">查看原始imei</el-button>
				<el-button type="primary" size="mini">更改imei</el-button>
			</el-row>
			<div class="tit">强制操作</div>
			<el-row>
				<el-button
					type="danger"
					size="mini"
					@click="equipBtnControl('takephoto')"
					>拍照</el-button
				>
				<el-button type="danger" size="mini" @click="equipBtnControl('update')"
					>升级</el-button
				>
				<el-button type="danger" size="mini" @click="equipBtnControl('reboot')"
					>重启</el-button
				>
				<el-button
					type="danger"
					size="mini"
					@click="equipBtnControl('open_shake')"
					>震动开启</el-button
				>
				<el-button
					type="danger"
					size="mini"
					@click="equipBtnControl('close_shake')"
					>震动关闭</el-button
				>
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import EquipItem from '@/components/EquipItem'
export default {
	data() {
		return {
			//图表和表格切换
			displayType: '',
			//设备列表
			equipList: [],
			role: 'admin',
			dverGather: [
				{ label: '全部', value: '' },
				{ label: '版本1', value: '1' },
				{ label: '版本2', value: '2' },
				{ label: '版本3', value: '3' },
				{ label: '版本4', value: '4' },
				{ label: '版本5', value: '5' }
			],
			userList: [
				{ label: '用户1', value: '用户1' },
				{ label: '用户2', value: '用户2' }
			],
			d_id: '',
			device_id: '',
			ws: 0, //工作模式
			equipInfo: {
				//设备控制回显
				device_id: '',
				device_name: ''
			},
			equipContrlForm: {
				st: '',
				et: '',
				ts: 0,
				tt: null,
				collt: null,
				htim: null,
				hst: null,
				tph: null,
				tpl: null,
				datt: null,
				imgres: 0,
				ds:1
			},
			//参数
			queryInfo: {
				page: 1,
				is_online: null,
				dver: null,
				selectUser: '',
				f_id: '',
				ename: ''
			},
			totalNum: 0,
			//设备控制对话框
			equipControlDialogVisible: false,
			operationDialogVisible: false
		}
	},
	created() {
		this.displayType = String(localStorage.getItem('cbdListType') || '1')
	},
	mounted() {
		this.getEquipList()
	},
	computed: {
		userType: function () {
			//获取用户类型
			return sessionStorage.getItem('myuser_type')
		}
	},
	methods: {
		getIsOnline(data) {
			this.queryInfo.is_online = data
			this.queryInfo.page = 1
			this.getEquipList()
		},
		getIDName(data) {
			this.queryInfo.f_id = data.f_id
			this.queryInfo.ename = data.ename
			this.queryInfo.page = 1
			this.getEquipList()
		},
		getDisplayType(data) {
			this.displayType = String(data)
			localStorage.setItem('cbdListType', data)
		},
		//获取设备列表
		getEquipList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
				data: this.qs.stringify({
					device_type_id: 3,
					page_size: 8,
					page: this.queryInfo.page,
					device_status: this.queryInfo.is_online,
					device_name: this.queryInfo.ename,
					device_id: this.queryInfo.f_id,
					dver_num: this.queryInfo.dver
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.equipList = res.data.data.data
					this.totalNum = res.data.data.counts
				}
			})
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getEquipList()
		},
		// 数据详情
		dataDetails(e_id, d_id) {
			this.device_id = e_id
			this.$router.push({ path: `/index/cbdDataDetails/${e_id}/${d_id}` })
		},
		// 查看图片
		viewPhotoDialog(id, d_id) {
			this.device_id = id
			this.$router.push({
				path: `/index/cbdDataPhotos/${id}`,
				query: { d_id: d_id }
			})
		},
		//设备控制
		EquipControl(d_id, device_id, device_name) {
			this.d_id = d_id
			this.equipInfo = { device_id, device_name }
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.device_control_info',
				data: this.qs.stringify({ d_id, get_type: 1 })
			}).then((res) => {
				if (Object.keys(res.data.data).length > 0) {
					let data = res.data.data
					data.ds=data.ds?data.ds:null
					data.st =
						data.st && data.st < 10 ? '0' + data.st + ':00' : data.st + ':00'
					data.et =
						data.et && data.et < 10 ? '0' + data.et + ':00' : data.et + ':00'
					this.equipContrlForm = data
				}
				this.equipControlDialogVisible = true
			})
		},
		//设备控制提交
		equipControlSubm() {
			let newForm = Object.assign({}, this.equipContrlForm) //深拷贝
			newForm.st =
				newForm.st && newForm.st.slice(0, 2).charAt(0) != '0'
					? newForm.st.slice(0, 2)
					: newForm.st.slice(1, 2)
			newForm.et =
				newForm.et && newForm.et.slice(0, 2).charAt(0) != '0'
					? newForm.et.slice(0, 2)
					: newForm.et.slice(1, 2)
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.send_control.device_control',
				data: this.qs.stringify({
					device_type_id: 3,
					d_id: this.d_id,
					config: JSON.stringify(newForm)
				})
			}).then((res) => {
				if (res.data.message=='') {
					this.$message.success('设备控制修改成功')
				} else {
					his.$message.error('设备控制修改失败')
				}
				this.equipControlDialogVisible = false
			})
		},
		resetEquipControlDialogClosed() {
			this.$refs.equipContrlRef.resetFields()
			this.ws = 0
		},
		//害虫统计
		showTimeControlDialog(d_id,id) {
			this.device_id = id
			this.$router.push(`/index/pestsStats/${d_id}/${id}`)
		},
		//设备控制->工作模式切换
		wsChange() {
			this.$confirm('确定修改工作模式?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=forecast.send_control.device_control',
						data: this.qs.stringify({
							device_type_id: 3,
							d_id: this.d_id,
							work_type: this.ws
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '修改成功!'
							})
						} else {
							this.$message({
								type: 'error',
								message: res.data.message
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消修改'
					})
				})
		},
		equipOperation(d_id, device_id, device_name) {
			this.d_id = d_id
			this.equipInfo = { device_id, device_name }
			this.operationDialogVisible = true
		},
		equipBtnControl(cmd) {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.admin_device_control',
				data: this.qs.stringify({
					cmd,
					device_type_id: 3,
					d_id: this.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		},

		// 设备版本、用户筛选
		searchChange() {
			console.log(this.queryInfo.selectUser)
			this.getEquipList()
		}
	},
	components: {
		SearchBar,
		EquipItem
	}
}
</script>
<style lang="less" scoped>
.handAddForm {
	/deep/.el-form-item {
		margin-bottom: 8px;
	}
	.handAddFormBtn {
		text-align: right;
	}
}
.sliderParent {
	display: flex;
	.block {
		flex: 1;
		margin-right: 10px;
		/deep/.el-slider__runway,
		/deep/.el-slider__bar {
			height: 10px;
		}
	}
	> span {
		width: 40px;
	}
}
.swi-box {
	text-align: center;
	padding: 10px 0;
	label {
		color: #333;
		margin-right: 8px;
		font-size: 14px;
	}
	i.el-icon-edit {
		margin-right: 8px;
	}
}

.real-time {
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 20px 0;
	.left {
		margin-right: 10px;
		.icon-box {
			border-radius: 50%;
			width: 46px;
			height: 46px;
			padding: 5px;
			box-sizing: border-box;
			margin-bottom: 3px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.aisle {
			text-align: center;
			font-size: 14px;
			color: #666;
		}
	}
	.right {
		color: #333;
		.num {
			font-weight: 600;
			font-size: 20px;
			margin-bottom: 3px;
		}
		.unit {
			font-size: 14px;
			color: #666;
		}
	}
}
.checkData {
	text-align: right;
	font-size: 14px;
	span {
		cursor: pointer;
	}
}
.red {
	color: rgb(235, 103, 101);
}
.green {
	color: rgb(23, 187, 137);
}
.el-date-editor--time-select {
	width: 100% !important;
}
.el-form .line {
	text-align: center;
}
.el-select {
	width: 100%;
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
.tit {
	font-weight: 800;
	margin: 15px 0 8px 0;
}
.item {
	margin-bottom: 10px;
}

.onlineState {
	margin: 0 3px 0 3px;
}
.onlineState .icon-diannao {
	margin: 0 19px 0 -2px !important;
}
</style>