bigdataCut/bigdata2/src/pages/forecasting/bzy/Bzy.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" @fun2="getIDName" @fun3="getIsOnline"></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.id">
					<el-card class="box-card">
						<equip-item :is_online="item.device_status">
							<span
								slot="set"
								v-show="userType==1"
								class="superOperate el-icon-setting"
								@click="equipOperation(item.device_id,item.d_id)"
							></span>
							<span slot="title">孢子仪</span>
							<div slot="content" class="content">
								<p>
									<i class="iconfont icon-yonghu"></i>
									设备ID：{{item.device_id.slice(-8)}}
								</p>
								<p>
									<i class="iconfont icon-biaoqian"></i>
									设备名称：{{item.device_name==""?"无":item.device_name}}
								</p>
								<p>
									<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>载玻片、培养液更换时间
									<span @click="setTime(item.d_id)" class="el-icon-edit"></span>
								</p>
								<p class="btns">
									<i class="iconfont icon-yemiancaozuo"></i>
									<el-button size="mini" type="info" @click="viewImage(item.device_id,item.d_id)">查看图片</el-button>
									<el-button size="mini" type="warning" @click="equipSet(item.d_id)">设备控制</el-button>
									<el-button size="mini" type="success" @click="simSet(item.d_id)">SIM卡</el-button>
									<el-button size="mini" type="danger" @click="dataDetail(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.slice(-8)}}</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="address" label="位置">
						<template slot-scope="scope">{{scope.row.address==""?"无":scope.row.address}}</template>
					</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="viewImage(scope.row.device_id,scope.row.d_id)">查看图片</el-button>
							<el-button size="mini" type="warning" @click="equipSet(scope.row.d_id)">设备控制</el-button>
							<el-button size="mini" type="success" @click="simSet(scope.row.d_id)">SIM卡</el-button>
							<el-button
								size="mini"
								type="danger"
								@click="dataDetail(scope.row.device_id,scope.row.d_id)"
							>数据详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</template>
		<el-pagination
			background
			:page-size="8"
			layout="prev, pager, next"
			:total="totalNum"
			:current-page="queryInfo.page"
			@current-change="changePage"
		></el-pagination>
		<!-- 设置载玻片、培养液更换时间配置弹框 -->
		<el-dialog title="配置（请及时填写）" :visible.sync="setTimeDialogVisible" width="420px">
			<el-form ref="form" :model="time" label-width="130px">
				<el-form-item label="载玻片更换时间: ">
					<el-date-picker v-model="time.time01" type="date" placeholder="选择日期"></el-date-picker>
				</el-form-item>
				<el-form-item label="培养液更换时间: ">
					<el-date-picker v-model="time.time02" type="date" placeholder="选择日期"></el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="setTimeDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="setTimeSubm()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 设备控制对话框 -->
		<el-dialog
			title="设备控制"
			:visible.sync="setDialogVisible"
			@close="equipControlDialogClosed"
			width="35%"
		>
			<el-form ref="equipContrlRef" :model="setFrom" label-width="160px">
				<el-form-item label="载玻片滴液时间: " prop="drop_time">
					<el-select v-model="setFrom.drop_time">
						<el-option label="1" value="1"></el-option>
						<el-option label="2" value="2"></el-option>
						<el-option label="3" value="3"></el-option>
						<el-option label="4" value="4"></el-option>
						<el-option label="5" value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="图片上传分辨率: " prop="imgres">
					<el-select v-model="setFrom.imgres">
						<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="孢子培养时间(h): " prop="cul_time">
					<div class="sliderParent">
						<div class="block">
							<el-slider v-model="setFrom.cul_time" show-input :min="1" :max="24"></el-slider>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="保温仓设定温度(℃): " prop="set_stemp">
					<div class="sliderParent">
						<div class="block">
							<el-slider v-model="setFrom.set_stemp" show-input :min="10" :max="40"></el-slider>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="数据上传时间间隔: " prop="datt">
					<div class="sliderParent">
						<div class="block">
							<el-slider v-model="setFrom.datt" show-input :min="10" :max="60"></el-slider>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="采集开启和关闭时间: ">
					<div class="timeSet">
						<el-time-select
							placeholder="起始时间"
							v-model="coll_time.time01"
							:picker-options="{
								start: '1:00',
								step: '1:00',
								end: '24:00'
							}"
						></el-time-select>
						<span>至</span>
						<el-time-select
							placeholder="结束时间"
							v-model="coll_time.time02"
							:picker-options="{
								start: '1:00',
								step: '1:00',
								end: '24:00',
								minTime: coll_time.time01
							}"
						></el-time-select>
					</div>
					<div class="timeSet">
						<el-time-select
							placeholder="起始时间"
							v-model="coll_time.time03"
							:picker-options="{
								start: '1:00',
								step: '1:00',
								end: '24:00',
								minTime: coll_time.time02
							}"
						></el-time-select>
						<span>至</span>
						<el-time-select
							placeholder="结束时间"
							v-model="coll_time.time04"
							:picker-options="{
								start: '1:00',
								step: '1:00',
								end: '24:00',
								minTime: coll_time.time03
							}"
						></el-time-select>
					</div>
					<div class="timeSet">
						<el-time-select
							placeholder="起始时间"
							v-model="coll_time.time05"
							:picker-options="{
								start: '1:00',
								step: '1:00',
								end: '24:00',
								minTime: coll_time.time04
							}"
						></el-time-select>
						<span>至</span>
						<el-time-select
							placeholder="结束时间"
							v-model="coll_time.time06"
							:picker-options="{
								start: '1:00',
								step: '1:00',
								end: '24:00',
								minTime: coll_time.time05
							}"
						></el-time-select>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="setDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="equipSetSubm()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- SIM卡对话框 -->
		<el-dialog title="SIM卡" :visible.sync="simCodeVisible" width="30%">
			<template>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="SIM卡流量" name="sim">
						<div class="simCodeBox">
							<div>
								<span class="simCodeTitle">ICCID：</span>
								<div>{{sim.iccid}}</div>
							</div>
							<div>
								<span class="simCodeTitle">状态：</span>
								<div>{{sim.account_status | simStatus}}</div>
							</div>
							<div>
								<span class="simCodeTitle">套餐：</span>
								<div>
									<el-progress :show-text="false" :percentage="100"></el-progress>
								</div>
								<span>{{sim.data_plan}}</span>
							</div>
							<div>
								<span class="simCodeTitle">已用流量：</span>
								<div>
									<template v-if="!isNaN(data_usage_Per)">
										<el-progress :show-text="false" :percentage="data_usage_Per"></el-progress>
									</template>
								</div>
								<span>{{sim.data_usage}}MB</span>
							</div>
							<div>
								<span class="simCodeTitle">剩余流量：</span>
								<div>
									<template v-if="!isNaN(data_balance_per)">
										<el-progress :show-text="false" :percentage="data_balance_per"></el-progress>
									</template>
								</div>
								<span>{{sim.data_balance}}MB</span>
							</div>
							<div>
								<span class="simCodeTitle">到期时间：</span>
								<div>{{sim.expiry_date*1000 | formatTime}}</div>
							</div>
							<div class="operateBtn">
								<el-button size="mini" @click="simCodeVisible=false">关闭</el-button>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="海康SIM卡流量" name="hksim">
						<div class="simCodeBox">
							<div>
								<span class="simCodeTitle">ICCID：</span>
								<div>1232456</div>
							</div>
							<div>
								<span class="simCodeTitle">状态：</span>
								<div>使用中</div>
							</div>
							<div>
								<span class="simCodeTitle">套餐：</span>
								<div>
									<el-progress :show-text="false" :percentage="100"></el-progress>
								</div>
								<span>2048.00MB</span>
							</div>
							<div>
								<span class="simCodeTitle">已用流量：</span>
								<div>
									<el-progress :show-text="false" :percentage="60"></el-progress>
								</div>
								<span>500.00MB</span>
							</div>
							<div>
								<span class="simCodeTitle">剩余流量：</span>
								<div>
									<el-progress :show-text="false" :percentage="40"></el-progress>
								</div>
								<span>1548.00MB</span>
							</div>
							<div>
								<span class="simCodeTitle">到期时间：</span>
								<div>2020-12-21 12:20:00</div>
							</div>
							<div>
								<span class="simCodeTitle">更换ICCID：</span>
								<div>
									<el-input type="number" v-model="queryInfo.f_id" placeholder="请输入ICCID"></el-input>
								</div>
							</div>
							<div class="operateBtn">
								<el-button type="primary" size="mini" @click="simCodeVisible=false">确定</el-button>
								<el-button size="mini" @click="simCodeVisible=false">取消</el-button>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</template>
		</el-dialog>
		<!-- 管理员设置 -->
		<el-dialog title="操作" :visible.sync="operarionDialogVisible" width="300px">
			<el-row>
				<el-col :span="12">
					设备开关:
					<el-switch @change="equipBtnControl($event,1)" v-model="switchForm.on_off"></el-switch>
				</el-col>
				<el-col :span="12">
					制冷开关:
					<el-switch @change="equipBtnControl($event,2)" v-model="switchForm.cold_sw"></el-switch>
				</el-col>
			</el-row>
			<el-row v-if="role=='staff'||role=='superuser'">
				<el-col :span="6">
					<el-button type="primary" size="mini">开机</el-button>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" size="mini">关机</el-button>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" size="mini">升级</el-button>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" size="mini">重启</el-button>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import EquipItem from '@/components/EquipItem'
export default {
	data() {
		return {
			displayType: '1', //图表和表格切换
			d_id: '',
			itemId: '', //当前点开的弹框设备ID
			selectItem: '1', //1设备号，2用户名
			searchVal: '', //搜索框内容
			equipList: [], //设备列表
			totalNum: null, //数据总条数
			role: '',
			queryInfo: {
				page: 1,
				is_online: '', //筛选在线状态
				f_id: '',
				ename: ''
			},
			setTimeDialogVisible: false, //设置载玻片、培养液更换时间配置弹框
			setDialogVisible: false, //设备配置
			simCodeVisible: false, //SIM卡
			operarionDialogVisible: false, //操作弹框
			time: {
				time01: '', //载玻片更换时间
				time02: '' //培养液更换时间
			},
			switchForm: {
				on_off: false, //设备开关 false关闭，true开启
				cold_sw: false //制冷开关 false关闭，true开启
			},
			setFrom: {
				drop_time: '1', //载玻片滴液时间
				imgres: '0', //图片上传分辨率
				cul_time: 0, //孢子培养时间
				set_stemp: 0, //保温仓设定温度
				datt: 0, //数据上传时间间隔(h)-m
				coll_time: [] //采集开启和关闭时间
			},
			coll_time: {
				time01: '',
				time02: '',
				time03: '',
				time04: '',
				time05: '',
				time06: ''
			},
			activeName: 'sim',
			sim: {
				iccid: '',
				account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
				data_plan: 0, //套餐大小
				data_usage: 0, //当月用量
				data_balance: 0, //剩余流量
				expiry_date: 0 //到期日期
			}
		}
	},
	mounted() {
		this.getEquipList()
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		},
		data_usage_Per: function () {
			let aa = Number(this.sim.data_usage / this.sim.data_plan) * 100
			return aa
		},
		data_balance_per: function () {
			let aa = Number(this.sim.data_balance / this.sim.data_plan) * 100
			return aa
		}
	},
	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 = data
		},
		//获取设备列表
		getEquipList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
				data: this.qs.stringify({
					device_type_id: 7,
					page_size: 8,
					device_id: this.queryInfo.f_id,
					device_name: this.queryInfo.ename,
					page: this.queryInfo.page,
					device_status: this.queryInfo.is_online
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.equipList = res.data.data.data
					this.totalNum = res.data.data.counts
					// this.role=res.data.role
				} else {
					//  this.$message.error('获取数据失败!')
				}
				console.log(res)
			})
		},
		//载玻片、培养液更换时间配置
		setTime(d_id) {
			this.d_id = d_id
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=device.device_manage.get_spore_time',
				data: this.qs.stringify({
					device_type_id: 7,
					d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data
					let glass_slide_time = data.glass_slide_time * 1000
					let cultivate_time = data.cultivate_time * 1000
					this.time.time01 = glass_slide_time ? glass_slide_time : ''
					this.time.time02 = cultivate_time ? cultivate_time : ''
				}
				this.setTimeDialogVisible = true
			})
		},
		//载玻片、培养液更换时间配置提交
		setTimeSubm() {
			let glass_slide_time = parseInt(
				new Date(this.time.time01).getTime() / 1000
			)
			let cultivate_time = parseInt(new Date(this.time.time02).getTime() / 1000)
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=device.device_manage.updata_spore_time',
				data: this.qs.stringify({
					device_type_id: 7,
					d_id: this.d_id,
					glass_slide_time,
					cultivate_time
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('修改成功!')
				} else {
					this.$message.error(res.data.message)
				}
				this.setTimeDialogVisible = false
			})
		},
		equipSetSubm() {
			this.setFrom.coll_time = []
			if (this.coll_time.time01 && this.coll_time.time02) {
				this.setFrom.coll_time.push(
					`${this.coll_time.time01}-${this.coll_time.time02}`
				)
			}
			if (this.coll_time.time03 && this.coll_time.time04) {
				this.setFrom.coll_time.push(
					`${this.coll_time.time03}-${this.coll_time.time04}`
				)
			}
			if (this.coll_time.time05 && this.coll_time.time06) {
				this.setFrom.coll_time.push(
					`${this.coll_time.time05}-${this.coll_time.time06}`
				)
			}
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.send_control.device_control',
				data: this.qs.stringify({
					device_type_id: 7,
					d_id: this.d_id,
					config: JSON.stringify(this.setFrom)
				})
			}).then((res) => {
				if (res.data.data) {
					this.$message.success('设备控制修改成功')
				} else {
					this.$message.error('设备控制修改失败')
				}
				this.setDialogVisible = false
			})
		},
		//数据详情
		dataDetail(e_id, d_id) {
			this.itemId = e_id
			this.$router.push(`/index/dataDetail/${e_id}/${d_id}`)
		},
		viewImage(id,d_id) {
			this.itemId = id
			this.$router.push({path:'/index/bzyPhotos/' + id,query: {d_id:d_id} })
		},
		equipSet(d_id) {
			this.d_id = d_id
			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
					this.setFrom = data
					let { coll_time } = this.setFrom
					for (let i in coll_time) {
						if (i == 0) {
							this.coll_time.time01 = coll_time[i].split('-')[0]
							this.coll_time.time02 = coll_time[i].split('-')[1]
						} else if (i == 1) {
							this.coll_time.time03 = coll_time[i].split('-')[0]
							this.coll_time.time04 = coll_time[i].split('-')[1]
						} else if (i == 2) {
							this.coll_time.time05 = coll_time[i].split('-')[0]
							this.coll_time.time06 = coll_time[i].split('-')[1]
						}
					}
					console.log(this.coll_time)
				}
				this.setDialogVisible = true
			})
		},
		equipControlDialogClosed() {
			this.$refs.equipContrlRef.resetFields()
			this.coll_time = {}
		},
		simSet(d_id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.send_control.device_sim',
				data: this.qs.stringify({
					d_id: d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.sim.iccid = res.data.data[0].iccid
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=forecast.send_control.sim_query',
						data: this.qs.stringify({
							iccid: this.sim.iccid
						})
					}).then((res) => {
						if (res.data.message == '') {
							let data = eval('(' + res.data.data.data + ')')
							let cardInfo = data.data.card_list[0]
							this.sim = cardInfo
						}
						this.simCodeVisible = true
					})
				}else{
					this.$message.error(res.data.message)
				}
			})
		},
		// SIMtab切换
		handleClick(tab) {},
		equipOperation(device_id, d_id) {
			this.d_id = d_id
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.bzy_device',
				data: this.qs.stringify({
					device_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.switchForm = res.data.data[0]
				}
			})
			this.operarionDialogVisible = true
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getEquipList()
		},
		equipBtnControl(val, num) {
			if (num == 1) {
				if (val) {
					this.equipControl('poweron')
				} else {
					this.equipControl('poweroff')
				}
			} else if (num == 2) {
				if (val) {
					this.equipControl('coldon')
				} else {
					this.equipControl('coldoff')
				}
			}
		},
		equipControl(cmd) {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.admin_device_control',
				data: this.qs.stringify({
					cmd,
					device_type_id: 7,
					d_id: this.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		}
	},
	filters: {
		simStatus(val) {
			switch (val) {
				case 0:
					return '未知'
				case 1:
					return '测试期'
				case 2:
					return '沉默期'
				case 3:
					return '使用中'
				case 4:
					return '停机'
				case 5:
					return '停机保号'
				case 6:
					return '预销号'
				case 7:
					return '销号'
			}
		}
	},
	components: {
		SearchBar,
		EquipItem
	}
}
</script>

<style lang='less' scoped>
.sliderParent {
	display: flex;
	.block {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;
	}
	> span {
		width: 40px;
	}
}
.timeSet {
	margin-bottom: 10px;
}
.simCodeBox {
	> div {
		line-height: 40px;
		display: flex;
		align-content: center;
		.simCodeTitle {
			width: 100px;
			text-align: right;
			font-size: 14px;
			color: #333;
		}
		> div {
			flex: 1;
			.el-progress {
				margin-top: 17px;
			}
		}
		span {
			width: 85px;
			font-size: 12px;
			padding-left: 3px;
			color: #909090;
		}
		.el-input {
			width: 60%;
		}
	}
	.operateBtn {
		display: block;
		text-align: right;
	}
}
.red {
	color: rgb(235, 103, 101);
}
.green {
	color: rgb(23, 187, 137);
}
</style>