<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>植物孢子捕捉仪</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="check-btns">
			<div class="type-check">
				<el-button
				:type="displayType == '1'?'primary':'default'"
				size="mini"
				@click="checkType(1)"
				>图表</el-button>
				<el-button
				:type="displayType == '2'?'primary':'default'"
				size="mini"
				@click="checkType(2)"
				>列表</el-button>
			</div>
			<div class="search-box">
				<el-input
					placeholder="请输入内容"
					size="mini"
					clearable
					v-model="searchVal"
					suffix-icon="el-icon-search"
					class="input-with-select"
					@change="searchEquipList()"
					>
					<el-select
						v-model="selectItem"
						class="select02"
						slot="prepend"
						placeholder="请选择"
						@change="selClear()">
						<el-option label="设备ID" value="1"></el-option>
						<el-option label="设备名" value="2"></el-option>
					</el-select>
				</el-input>
			
			</div>
		</div>
		<div v-loading="tableLoading">
			<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="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 }}
									</p>
									<p>
										<i class="iconfont icon-dizhi"></i>载玻片、培养液更换时间
										<span @click="setTime(item.device_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="success" @click="equipSet(item.device_id)">设备控制</el-button>
										<el-button size="mini" type="warning" @click="dataDetail(item.device_id,item.device_name)">数据详情</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="status_time" label="最新上报时间">
							<template slot-scope="scope">{{scope.row.status_time }}</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="success" @click="equipSet(scope.row.device_id)">设备控制</el-button>
								<el-button
									size="mini"
									type="warning"
									@click="dataDetail(scope.row.device_id,scope.row.device_name)"
								>数据详情</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/zanwu.png"
					alt
					class="expertDiagnosis_referral_units_notImg"
				/>
			</div>
		</div>
		
		<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 {
			tableLoading : false,
			displayType: '1', //图表和表格切换
			d_id: '',
			itemId: '', //当前点开的弹框设备ID
			selectItem: '1', //1设备号，2用户名
			searchVal: '', //搜索框内容
			equipList: [], //设备列表
			totalNum: null, //数据总条数
			role: '',
			queryInfo: {
				page: 1,
				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: {
			checkType(i){
                this.displayType=i;
            },
		// 搜索组合数据
		searchEquipList() {
			if (this.selectItem == 1) {
				this.queryInfo.f_id = this.searchVal;
			} else if (this.selectItem == 2) {
				this.queryInfo.ename = this.searchVal;
			}
			this.getEquipList()
		},
		selClear() {
			this.searchVal = "";
			this.queryInfo.f_id = "";
			this.queryInfo.ename = "";
			this.getEquipList()
		},
		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.tableLoading = true;
			this.$axios({
				method: 'POST',
				url: '/equipmanage_bzy',
				data: this.qs.stringify({
					req: 'filter',
					ename: this.queryInfo.ename,
					page: this.queryInfo.page,
					f_id:this.queryInfo.f_id,
				})
			}).then((res) => {
				this.tableLoading = false;
				this.totalNum = res.data.nums
				if (this.totalNum > 0) {
					var dat = res.data.dat;
					var arr = [];
					for(var i = 0;i<dat.length;i++){
						var bzy_status = eval('('+dat[i].bzy_status+')');
						arr.push({
							device_id: bzy_status.imei,
							device_name: dat[i].equip_name,
							device_status: parseInt(dat[i].is_online),
							status_time:  dat[i].upl_time
						})
					}
					this.equipList = arr
					// this.role=res.data.role
				} else {
					this.equipList = []
				}
				console.log(res)
			},error =>{
				this.dataloading = false
				this.$message.error('获取失败')
			})
		},
		//载玻片、培养液更换时间配置
		setTime(d_id) {
			this.d_id = d_id
			this.$axios({
				method: 'POST',
				url: '/equipmanage_bzy_detail',
				data: this.qs.stringify({
					id:d_id
				})
			}).then((res) => {
				if (res.status == 200) {
					let data = res.data
					if(glass){
						var glass = data.glass.split('#')
					}else{
						var glass = ''
					}
					if(liquid){
						var liquid = data.liquid.split('#')
					}else{
						var liquid = ''
					}
					let glass_slide_time = new Date(glass[glass.length-1]).getTime()
					let cultivate_time = new Date(liquid[liquid.length-1]).getTime()
					this.time.time01 = glass_slide_time ? glass_slide_time : ''
					this.time.time02 = cultivate_time ? cultivate_time : ''
				}
				this.setTimeDialogVisible = true
			})
		},
		//载玻片、培养液更换时间配置提交
		setTimeSubm() {
			let glass_slide_time =  this.time.time01
			let cultivate_time = this.time.time02 
			this.$axios({
				method: 'POST',
				url: '/bzy_mqtt',
				data: this.qs.stringify({
					req: 'glass',
					id: this.d_id,
					glass: glass_slide_time,
				})
			}).then((res) => {
				if (res.data == '') {
					this.$message.success('修改成功!')
				} else {
					this.$message.error(res.data.message)
				}
				this.setTimeDialogVisible = false
			})
			this.$axios({
				method: 'POST',
				url: '/bzy_mqtt',
				data: this.qs.stringify({
					req: 'liquid',
					id: this.d_id,
					liquid:cultivate_time
				})
			}).then((res) => {
				if (res.data == '') {
					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) {
				var time01 = this.coll_time.time01.slice(0,2)
				this.setFrom.coll_time.push(
					`${this.coll_time.time01.split(':')[0]}-${this.coll_time.time02.split(':')[0]}`
				)
			}
			if (this.coll_time.time03 && this.coll_time.time04) {
				this.setFrom.coll_time.push(
					`${this.coll_time.time03.split(':')[0]}-${this.coll_time.time04.split(':')[0]}`
				)
			}
			if (this.coll_time.time05 && this.coll_time.time06) {
				this.setFrom.coll_time.push(
					`${this.coll_time.time05.split(':')[0]}-${this.coll_time.time06.split(':')[0]}`
				)
			}
			console.log(this.setFrom.coll_time)
			var colltime = JSON.stringify(this.setFrom.coll_time)
			this.$axios({
				method: 'POST',
				url: '/bzy_mqtt',
				data: this.qs.stringify({
					req: 'set',
					id: this.itemId,
					wind: this.setFrom.wind_sw,
					drop: this.setFrom.drop_time,
					culTime: this.setFrom.cul_time,
					stemp: this.setFrom.set_stemp,
					takt: this.setFrom.datt,
					colltime: colltime,
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('设备控制修改成功')
					this.setDialogVisible = false
				} else {
					this.$message.error('设备控制修改失败')
				}
			})
		},
		//数据详情
		dataDetail(e_id, name) {
			this.itemId = e_id
			this.$router.push({path:'/index/dataDetail/' + e_id,query: {name:name} })
		},
		viewImage(id,d_id) {
			this.itemId = id
			this.$router.push({path:'/index/bzyPhotos/' + id,query: {d_id:id} })
		},
		equipSet(d_id) {
			this.itemId = d_id
			this.$axios({
				method: 'POST',
				url: '/equipmanage_bzy_detail',
				data: this.qs.stringify({ id:d_id })
			}).then((res) => {
				if (res.status == 200) {
					var bzy_status = eval('('+res.data.bzy_status+')');
					this.setFrom = bzy_status
					let coll_time = this.setFrom.coll_time
					for (let i in coll_time) {
						if (i == 0) {
							this.coll_time.time01 = coll_time[i].split('-')[0]+':00'
							this.coll_time.time02 = coll_time[i].split('-')[1]+':00'
						} else if (i == 1) {
							this.coll_time.time03 = coll_time[i].split('-')[0]+':00'
							this.coll_time.time04 = coll_time[i].split('-')[1]+':00'
						} else if (i == 2) {
							this.coll_time.time05 = coll_time[i].split('-')[0]+':00'
							this.coll_time.time06 = coll_time[i].split('-')[1]+':00'
						}
					}
				}
				this.setDialogVisible = true
			})
		},
		equipControlDialogClosed() {
			this.$refs.equipContrlRef.resetFields()
			this.coll_time = {}
		},
		simSet(d_id) {
			this.$axios({
				method: 'POST',
				url: '/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_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_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_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);
}
.check-btns{
    display:flex;
    justify-content: space-between;
    margin-bottom:20px;
    align-items: center;
    .search-box{
         text-align: right;
        .el-input {
            width: 400px;
            vertical-align: middle;
        }
        .select01 {
            width: 200px;
            vertical-align: middle;
        }
       /deep/.select02 {
            width: 86px;
        }
        .input-with-select{
            width: 260px;
        }
    }
}
.onlineState .icon-diannao{
	margin: 0 21px 0 -2px!important;
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>