imcs_yj_fe/imcs-ui/src/views/zuihou/largeScreen/supportCenter/index.vue

<!-- 【保障中心】模块 -->
<template>
  <div id="playerMap" ref="playerMap" class="app-container lineBoard platformDiv">
  	<!-- 统计数据区域 -->
    <el-row :gutter="20" class="rowCls">
    	<div class="headerBg">
	    	<!--<div class="headerTitle">智能化柔性制造单元</div>-->
	    	<!-- tab切换回 -->
    		<div class="tabsDiv">
    			<!-- 3D孪生展示 -->
    			<span>{{$t("largeScreen.common.data3d")}}</span>
    			<!-- 2D简洁模式 -->
    			<span class="tabsActive">{{$t("largeScreen.common.data2d")}}</span>
    			<!-- 2D数据模式 -->
    			<span @click="boxCardClk()">{{$t("largeScreen.common.data2shu")}}</span>
    		</div>
    		<!-- 全屏 -->
	    	<div class="battonDiv">
	    		<el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
	    			<a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
	    		</el-tooltip>
	    		<el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
	    			<a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
	    		</el-tooltip>
	    	</div>
	    	<!-- 返回产线 -->
	    	<span class="rebackLine" @click="rebackLine()">{{$t('largeScreen.common.returns')}}</span>
    	</div>
    </el-row>

  	<!-- 区域模块 -->
  	<div class="areaDiv">
  		<!-- 搜索-部分 -->
	  	<div class="defaultRow noBorder">
		  		<el-select v-model="opValue" @change="selectChange" :placeholder='$t("common.pleaseSelect")'>
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
	  	</div>
	  	<div class="conntent">
				  	<!-- 上-部分 -->
			  		<el-row class="topRow alignLeft">
			  			<div class="bottomDiv2">
			  				<!-- 方块 -->
				  			<el-card class="box-card" style="margin-right: 20px;">
					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
					  				<tr v-for="(item, index) in sideList1" :key="index">
					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
					  					</td>
					  				</tr>
					  			</table>
				  				<div class="linTitle">边线库</div>
				  			</el-card>
			  			</div>
			  		</el-row>

			  		<!-- 中-部分 -->
			  		<el-row class="topRow">
			  			<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin: 30px auto;">
			  				<tr>
			  					<td class="guiDaoTd" width="700px">
			  						<div class="guiDao"></div>
			  						<!-- 伺服舵机 -->
			  						<template v-for="item in moduleList">
											<el-card v-if="item.code == 'BZ_371'" class="box-card guiDao-card">
								  			<!-- 内容区域(格式一) -->
								  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
								  				<tr>
									  				<td align="center">
									  					<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
								  							<div class="eqTitle">{{item.name}}</div>
								  						</el-tooltip>
					  									<template v-for="obj in item.positionList">
					  										<el-tooltip :key="obj.id" class="item" effect="dark" :content="obj.name" placement="top-start">
					  											<div :class="reJisuanCls(obj, true)">
					  												<div class="ellipsisCom">{{obj.name}}</div>
					  											</div>
					  										</el-tooltip>
					  									</template>
								  						<!--<div class="contentView">0001</div>
								  						<div class="contentView">0002</div>
								  						<div class="contentView">0003</div>-->
								  					</td>
							  					</tr>
								  			</table>
												<!-- 状态 -->
					  						<div class="statusDiv">
													<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
													<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
													<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
												</div>
											</el-card>
										</template>
			  					</td>
			  				</tr>
			  			</table>


			  		</el-row>

			  		<!-- 下-部分 -->
			  		<el-row class="topRow" style="text-align: left;">
			  			<div class="bottomDiv2">
			  				<!-- AGV上下料站-1 -->
					  		<template v-for="item in moduleList">
						  		<el-card v-if="item.code == 'BZ_361'" :key="item.id" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
						  		</el-card>
								</template>

								<!-- 清洗机 -->
						  	<template v-for="item in moduleList">
									<el-card class="box-card" v-if="item.code == 'BZ_362'" :key="item.id">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
								</template>

				  			<!-- SMU50-4 -->
					  		<template v-for="item in moduleList">
									<el-card v-if="item.code == 'BZ_363'" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<div v-if="item.cncProgram == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
						  			<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
					  		</template>

			  				<!-- 方块 -->
				  			<el-card class="box-card" style="margin: 0 20px;">
					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
					  				<tr v-for="(item, index) in sideList2" :key="index">
					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
					  					</td>
					  				</tr>
					  			</table>
				  				<div class="linTitle">框体缓存库</div>
				  			</el-card>

				  			<!-- 方块 -->
				  			<el-card class="box-card" style="margin: 0 20px;">
					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
					  				<tr v-for="(item, index) in sideList3" :key="index">
					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
					  					</td>
					  				</tr>
					  			</table>
				  				<div class="linTitle">舱体缓存库</div>
				  			</el-card>

				  			<!-- 三坐标 -->
					  		<template v-for="item in moduleList">
						  		<el-card v-if="item.code == 'BZ_szb'" :key="item.id" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
						  		</el-card>
								</template>

								<!-- 打标机 -->
						  	<template v-for="item in moduleList">
									<el-card class="box-card" v-if="item.code == 'BZ_370'" :key="item.id">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
								</template>

				  			<!-- SMU50-4 -->
					  		<template v-for="item in moduleList">
									<el-card v-if="item.code == 'BZ_364'" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<div v-if="item.cncProgram == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
						  			<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
					  		</template>

			  				<!-- 打标机 -->
					  		<template v-for="item in moduleList">
						  		<el-card v-if="item.code == 'BZ_365'" :key="item.id" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
						  		</el-card>
								</template>

								<!-- 清洗机 -->
						  	<template v-for="item in moduleList">
									<el-card class="box-card" v-if="item.code == 'BZ_366'" :key="item.id">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
								</template>

				  			<!-- SMU50-4 -->
					  		<template v-for="item in moduleList">
									<el-card v-if="item.code == 'BZ_367'" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<div v-if="item.cncProgram == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
						  			<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
					  		</template>

			  				<!-- 打标机 -->
					  		<template v-for="item in moduleList">
						  		<el-card v-if="item.code == 'BZ_368'" :key="item.id" class="box-card">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
						  		</el-card>
								</template>

								<!-- 清洗机 -->
						  	<template v-for="item in moduleList">
									<el-card class="box-card" v-if="item.code == 'BZ_369'" :key="item.id">
						  			<!-- 内容区域(格式一) -->
						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
						  				<tr>
						  					<td>
						  						<!-- 名称 -->
						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
						  							<div class="eqTitle">{{ item.name }}</div>
						  						</el-tooltip>
						  						<!-- 进度条 -->
						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
						  						</div>
						  						<!-- 任务内容 -->
						  						<table style="width: 100%;">
						  							<tr>
						  								<td>
						  									<div :class="reJisuanCls(item.positionList[0])">
						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
						  										</el-tooltip>
						  									</div>
						  								</td>
						  								<td width="40" align="right" style="vertical-align: top;">
						  									<!--<div class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(toolsImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>-->
												  			<div v-if="item.toolLib == '1'" class="block">
															    <el-image
															      style="max-width: 40px; max-height:50px;"
															      :src="resolveLogo(programImg)"
															      fit="contain"
															    >
															    </el-image>
												  			</div>
						  								</td>
						  							</tr>
						  						</table>
						  					</td>
						  				</tr>
						  			</table>
										<!-- 状态 -->
										<div class="statusDiv">
											<!--											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>-->
											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
										</div>
									</el-card>
								</template>

			  			</div>
			  		</el-row>

	  	</div>
  	</div>
  </div>
</template>

<script>
	// 【区域管理】-API
	import lineBoardAPI from "@/api/runManageCenter/lineBoard"
	// 【示范线大屏】-API
	import LargeScreenAPI from "@/api/largeScreen"
	// 共通保存本地
	import db from '@/utils/localstorage'
	import elDragDialog from '@/directive/el-drag-dialog'
	import { downloadFile, initEnums, initDicts, initQueryParams, fullScreen, exitFullScreen } from '@/utils/commons'
	import { randomFloor } from '@/utils/utils'
	import axios from 'axios'
	// 加载动态数字组件
	import countTo from 'vue-count-to'
	export default {
	  name: "IntellectMachining",
	  directives: { elDragDialog },
	  components: { countTo },
	  props: {
	  },
	  data () {
	    return {
	    	resourceId: '',
	    	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
	    	toolsImg: 'tools.png',
	    	programImg: 'program.png',
	    	srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ],
	    	topTongjiData: {"allCount": 0, "onlineCount": 0,"offlineCount": 0,"supervisionCount": 0,"independentCount": 0,"workCount": 0,"freeCount": 0,"waitCount": 0,"exceptionCount": 0},
	    	tabOneData: {},  // 按区域-数据，
	    	tabDownData: {    // 下部分-数据
	    		list: []
	    	},
	    	sideList1: [], // 边线库-上
	    	sideList2: {}, // 边线库-框体缓存库
	    	sideList3: {}, // 边线库-舱体缓存库
	    	isFullSreen: false, // 默认不全屏
	      queryParams: initQueryParams({}),
	      moduleList: [], // 模块信息
	      options: [{
          value: 'A',
          label: '保障中心'
        }, {
          value: 'B',
          label: '舱体线'
        }, {
          value: 'C',
          label: '框体线'
        }],
        opValue: 'A',
	    }
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 加载生产资源
	  	this.getTabList();
	  	// 边线库-上
	  	this.getQualitySide("1");
	  	// 边线库-框体缓存库
	  	this.getQualitySide("2");
	  	// 边线库-舱体缓存库
	  	this.getQualitySide("3");
	  	// 加载-模块信息
	  	this.demoLineResource();
		},
		watch: {
			// $route(){
			// 	// 如果是【产线看板详情页面】
  	  // 	if(this.$route.fullPath.indexOf("/runManageCenter/lineBoard") > -1){
  	  // 		// 是否显示大屏
  	  // 		// this.setMaxScreen()
  	  // 	}
      // },
	  	websocketMsg(curVal, oldVal) {
			  console.log("33333333333333333333333333333333");
	      let obj = JSON.parse(curVal)
	      this.openMessageTips(obj)
	    }
	  },
	  computed: {
	    currentUser () {
	      return this.$store.state.account.user
	    },
	    nationList() {
        return convertEnum(this.dicts.NATION)
      },
      // 接收信息
      websocketMsg() {
	      return this.$store.getters.STAFF_UPDATE.msg
	    }
	  },
	  mounted () {
	    // 判断长连接，是否已经开启
	  	if(this.$store.state.websocket.websock == null){
	  		// 页面刚进入时开启长连接
    		this.$store.dispatch('STAFF_WEBSOCKET')
	  	}
	  },
	  // 销毁
		destroyed() {
	     this.websocketClose()
	  },
	  methods: {
	  	// 加载-仓储区模块信息
	  	demoLineResource(){
	  		LargeScreenAPI.yunjianResource({ type:1 }).then(res => {
	  			res =  res.data;
	  			if(res.isSuccess){
	  				console.log("2D模式-模块信息123: ",res.data);
	  				this.moduleList = res.data.list;
	  			}

	  		})
	  	},

	  	// [选择单元]的值变化-事件
	  	selectChange(val){
	  		console.log("[选择单元]的值变化: ", val);
	  		let paths = "";
	  		if(val == "A"){  // 保障中心
          paths = "/largeScreen/supportCenter";

	  		}
	  		if(val == "B"){  // 舱体线
	  			paths = "/largeScreen/frameLine";
	  		}
	  		if(val == "C"){  // 框体线
          paths = "/largeScreen/cabinLine";
	  		}
	  		if(paths){
	  			this.toRouter(paths);
	  		}
	  	},

	  	// 根据路由，跳转页面
	  	toRouter(paths){
	  		// 调用全局挂载的方法
				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
					this.$router.push({ path: paths, query: {resourceId: this.tabDownData.list.length > 0 ? this.tabDownData.list[0].id : '' }}) //带参跳转
				})
	  	},

	  	// 是否设置大屏
	  	setMaxScreen(){
	  		let isCurrScreen = db.get("isCurrScreen");
	  		console.log("是否全屏22222：",isCurrScreen)
	  		if(isCurrScreen == true){
	  			this.fullPing();
	  		}
	  	},
	  	// 推送接收到的数据
	  	openMessageTips(data){
	  		// 如果是【产线看板】
  	  	if(this.$route.fullPath.indexOf("/largeScreen/supportCenter") > -1){
		  		console.log("接收websocket的推送信息22222 == ",data)
		  		// 如果是【线边库】信息
		  		if(data.type == 'PUSH_TYPE_STORGE'){
            this.sideList1 = data.data.BZ_01;
            this.sideList2 = data.data.BZ_02;
            this.sideList3 = data.data.BZ_03;
		  		}
		  		// 如果是【生产资源】信息
		  		if(data.type == 'PUSH_TYPE_RESOURCE') {
		  			this.moduleList = data.data.list;
            console.log("接收websocket的推送信息333 == ",data.data.list)
		  			//console.log("接收websocket的推送信息--【柔性智能加工区】 == ",data.data.list);
		  			// this.moduleList = data.data['4'];
		  		}
		  		//  如果是【生产资源】信息
		  		/*if(data.type == 'PUSH_TYPE_RESOURCE_STATUS'){
		  			if(data[this.resourceId]){
		  				// 生产资源的状态和进度
		  				if(this.tabDownData.list[0].linkStatus){
		  					this.tabDownData.list[0].linkStatus = data[this.resourceId].linkStatus
		  				}
		  				if(this.tabDownData.list[0].controlStatus){
		  					this.tabDownData.list[0].controlStatus = data[this.resourceId].controlStatus
		  				}
		  				if(this.tabDownData.list[0].productionStatus){
		  					this.tabDownData.list[0].productionStatus = data[this.resourceId].productionStatus
		  				}
		  				this.tabDownData.list[0].todoTaskPercent = data[this.resourceId].todoTaskPercent
		  			}
		  		}*/
		  	}
	  	},
	  	// 组件销毁的时候，关闭websocket连接
	  	websocketClose() {
	      this.$store.getters.STAFF_UPDATE.lockReconnect = true
	      this.$store.getters.STAFF_UPDATE.websock.close() // 离开路由之后断开websocket连接
	      clearTimeout(this.$store.getters.STAFF_UPDATE.reconnectData) // 离开清除 timeout
	      clearTimeout(this.$store.getters.STAFF_UPDATE.timeoutObj) // 离开清除 timeout
	      clearTimeout(this.$store.getters.STAFF_UPDATE.serverTimeoutObj) // 离开清除 timeout
	    },
	  	// websocket信息变更
	  	onmessage() {
	      this.$store.getters.STAFF_UPDATE.websock.onmessage = function(evt) {
	        //console.log(evt)
	      }
	    },

	  	// 【SUM50】点击-事件
	  	boxCardClk(){
	  		let paths = "/largeScreen/twoDatasModel";
				// 调用全局挂载的方法
				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
					this.$router.push({ path: paths, query: {}}) //带参跳转
				})
				// this.$router.push('/runManageCenter/lineBoardDetail')
	  		// console.log("弹出详情页面！", paths)
	  	},

	  	// 全屏
	  	fullPing(){
	  		this.$nextTick(() => {
	  			// 显示【退出全屏】
	  			this.isFullSreen = true
	  			// 如果是退出全屏
	  			db.save("isCurrScreen", this.isFullSreen)
	  			let $playerMap = this.$refs.playerMap
	  			if($playerMap){
	  				fullScreen($playerMap)
	  				// fullScreen(document.getElementById('playerMap'))
	  			}
	  		})
	  	},
	  	// 退出全屏
	  	exitFullPing(){
	  		this.$nextTick(() => {
	  			// 显示【全屏】
	  			this.isFullSreen = false
	  			// 如果是全屏
	  			db.save("isCurrScreen", this.isFullSreen)
	  			exitFullScreen(document.getElementById('playerMap'))
	  		})
	  	},

	  	// 【返回产线】按钮-事件
	  	rebackLine(){
	  		this.$router.go(-1);
	  	},

	  	// 【SUM50】点击-事件
	  	boxCardClkCard(id){
	  		let paths = "/runManageCenter/lineBoardDetail";
				// 调用全局挂载的方法
				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
					this.$router.push({ path: paths, query: { resourceId: id }}) //带参跳转
				})
	  	},

	  	// 加载背景颜色
	  	setBackground(color){
	  		return "background: "+ color +";"
	  	},

	  	// 生产资源，计算返回class
	  	reJisuanCls(obj, flag) {
	  		let str = "contentView hebingDiv";
	  		if(flag){
	  			str = "contentView";
	  		}
	  		if(obj.lockStatus == "0"){
	  			str += " borderBottom8";
	  		}
	  		if(obj.haveGoods == '1'){
	  			str += " haveGoodsCls";
	  		}
	  		return str;
	  	},

	  	// 加载【本地图片】
	  	resolveLogo(logo) {
        return require(`@/assets/icon/${logo}`);
      },

	    // 获取列表数据
	    getTabList(){
	    	lineBoardAPI.getBigScreenList({}).then(res => {
	    		res = res.data
	    		console.log("神抽狗资源：", res)
	    		if(res.isSuccess){
	    			this.tabDownData.list = res.data.list
	    			// 给资源赋值id
	    			if(this.tabDownData.list && this.tabDownData.list.length > 0){
	    				this.resourceId = this.tabDownData.list[0].id;
	    			}
	    		}
	    	})
	    },

	    // 边线库
	    getQualitySide(type) {
	    	/*for(let i = 1; i <= 10; i++){
	    		let arr = [];
	    		for(let j = 1; j <= 30; j++){
	    			arr.push({
	    				no: 'wks'+ Math.random(),
	    				haveGoods: randomFloor(1,10000) > 9000 ? '1' : '0',
	    				lockStatus: randomFloor(1,10000) > 9000 ? '0' : '1',
	    				name: (i-1)*30+j
	    			});
	    		}
	    		this.sideList0.push(arr);
	    	}
	    	console.log("打印数据：", this.sideList0);
	    	this.sideList = [
	    		[
	    			{no: '1', haveGoods: '1', lockStatus: '0', name: '1'},
	    			{no: '2', haveGoods: '0', lockStatus: '0', name: '2'},
	    			{no: '3', haveGoods: '0', lockStatus: '0', name: '3'},
	    			{no: '4', haveGoods: '1', lockStatus: '0', name: '4'},
	    			{no: '5', haveGoods: '1', lockStatus: '1', name: '5'}
	    		],
	    		[
	    			{no: '10', haveGoods: '0', lockStatus: '1', name: '7'},
	    			{no: '21', haveGoods: '0', lockStatus: '0', name: '8'},
	    			{no: '22', haveGoods: '1', lockStatus: '0', name: '9'},
	    			{no: '23', haveGoods: '0', lockStatus: '1', name: '10'},
	    			{no: '24', haveGoods: '0', lockStatus: '0', name: '11'}
	    		]
	    	];*/
	    	LargeScreenAPI.baozhangCard({ type }).then(res => {
	    		res = res.data
	    		console.log("【边线库】5：", res)
	    		if(res.isSuccess){
	    			if(type == "1") {
	    				this.sideList1 = res.data;
	    			}
	    			if(type == "2") {
	    				this.sideList2 = res.data;
	    			}
	    			if(type == "3") {
	    				this.sideList3 = res.data;
	    			}
	    		}
	    	})
	    }
	  }
	}
</script>

<!-- 全局样式-通过定义父DOM的calss，来只影响本组件 -->
<style type="text/css" lang="scss">
	.bottomDiv2::-webkit-scrollbar-thumb {
			background: #EEEEEE20;
	}
</style>
<!-- 本组件样式 -->
<style lang="scss" scoped>
	.bottomDiv2 {
		text-align: left;
		.el-card {
			vertical-align: top;
		}
	}
	.linTitle {
		display: inline-block;
		width: 100%;
		text-align: left;
		color: #FFFFFF;
		margin-top: 5px;
		font-size: 14px;
	}
	.defaultRow{
		text-align: left;
		margin-left: 20px;
		margin-bottom: 0;
		.el-input__inner {
			background: none;
			color: #FFFFFF;
		}
	}
	.headerBg{
		.tabsDiv{
			position: absolute;
			font-size: 17px;
			font-weight: bold;
			color: #28BDE0;
			bottom: 20px;
			left: 0;
			span {
				cursor: pointer;
				margin-right: 20px;
			}
			span:hover{
				opacity: 0.7;
			}
			.tabsActive{
				color: #FFFFFF;
			}
		}
		.rebackLine{
			position: absolute;
			right: 60px;
			top: 45px;
			display: inline-block;
			padding: 5px 10px;
			color: #28BDE0;
			cursor: pointer;
			&:hover{
				opacity: 0.7;
			}
		}
	}
	.battonDiv{
		right: 20px;
	}
	.topRow{
		margin: 20px 20px;
		.alignLeft{
			text-align: left;
		}
		.bottomDiv2{
			width: 100%;
			min-height: 202px;
			white-space: nowrap;
			overflow-x: auto;
			/*&::-webkit-scrollbar-thumb {
				background: rgb(238 233 233 / 20%);
			}*/
		}
	}
	.headerTitle{
		position: relative;
		top: 20px;
		left: -13px;
		font-family: "微软雅黑";
		font-size: 32px;
		text-shadow: 1px 2px 3px #ece9e9;
		letter-spacing: 3px;
	}
	.blokTable{
		display: inline-block;
		border-left: 1px solid #096A94;
		border-top: 1px solid #096A94;
		vertical-align: top;
		text-align: center;
	}
	.blokTable td{
		position: relative;
		border-right: 1px solid #096A94;
		border-bottom: 1px solid #096A94;
		color: white;
		padding: 9px 12px;
		font-size: 14px;
	}
	.blokTable td:hover{
		cursor: pointer;
		opacity: 0.7;
	}
	.blokTable .selectTd{
		background: #04d3f4;
	}
	.guiDao-card{
		position: relative;
		z-index: 2;
	}
	.guiDaoTd{
		position: relative;
	}
	.guiDao{
		position: absolute;
		top: 32%;
		background: #457f968c;
		width: 100%;
		height: 50px;
		z-index: 1;
	}
	.boxCardCls:hover{
		cursor: pointer;
		opacity: 0.7;
	}
	.blockDiv{
		position: relative;
		border: 1px solid #EEEEEE;
		padding-left: 15px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		text-align: center;
		color: white;
		-moz-box-shadow: 1px 5px 5px #c0b7b7;
		webkit-box-shadow: 1px 5px 5px #c0b7b7;
		box-shadow: 1px 5px 5px #c0b7b7;
		h1{
			margin: 20px;
			font-size: 45px;
		}
		p{
			color: #000000;
		}
	}
	.danweiSpan{
		display: inline-block;
		font-size: 16px;
		color: black;
	}
	.blockBg1{
		background: #0F79DC;
		border: 1px solid #0F79DC;
	}
	.blockBg2{
		background: #8E66E4;
		border: 1px solid #8E66E4;
	}
	.blockBg3{
		background: #3EB64B;
		border: 1px solid #3EB64B;
	}
	.blockBg4{
		background: #0BA6D5;
		border: 1px solid #0BA6D5;
	}
	.blockBg5{
		background: #E57878;
		border: 1px solid #E57878;
	}
	.blockBg6{
		background: #E37B3D;
		border: 1px solid #E37B3D;
	}
	.rowCls{
		box-sizing: border-box;
	}
	.rowCls .el-col{
		margin-bottom: 20px;
	}
	.doubleTable{
		width: 100%;
	}
	.doubleTable h1{
		margin: 17px 0;
	}
	.el-card{
		display: inline-block;
		min-width: 200px;
		margin: 0 5px 5px 0;
	}
	.areaTitle{
		margin-bottom: 15px;
	}
	.areaTitle span{
		position: relative;
		display: inline-block;
		padding-right: 20px;
		font-weight: bold;
	}
	.areaTitle span:before{
		position: absolute;
		content: '';
		background: #42d885;
		top: 0px;
		right: 0px;
		width: 10px;
		height: 100%;
	}
	.contentView{
		font-size: 14px;
		color: white;
		text-align: center;
		max-width: 126px;
		padding: 3px 5px;
		margin-bottom: 5px;
	}
	.borderBottom4{
		border-bottom: 4px solid red;
	}
	.hebingDiv{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		min-height: 60px;
		word-break: break-all;
	}
	.lineBianku{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #CCCCCC;
		text-align: center;
		padding: 3px 5px;
		min-height: 60px;
		max-width: 190px;
		word-break: break-all;
	}
	.eqTitle{
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding-left: 25px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		color: #FFFFFF;
		margin: 20px 0 5px;
	}
	.eqTitle:before{
		content: 'M';
		position: absolute;
		top: 0;
		left: 0;
		background: #1890ff;
		color: white;
		padding: 0 2px 1px;
	}
	.eqTitle2{
		width: 100%;
		max-width: 70px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
	}
	.recordSpan{
		display: inline-block;
		background: #0F79DC;
		font-size: 12px;
		padding: 2px 10px;
		color: white;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.jinduTiao{
		margin: 5px 0;
	}
	.statusDiv{
		position: absolute;
		top: 5px;
		right: 55px;
		text-align: right;
	}
	.statusDiv span{
		display: inline-block;
		font-size: 12px;
		padding: 2px 10px;
		color: white;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
	}
	.footerDiv{
		width: 100%;
		padding: 7px 0 3px;
		border-top: 1px solid #CCCCCC;
	}
	.footerDiv a{
		display: inline-block;
		background: #0F79DC;
		font-size: 12px;
		padding: 5px 15px;
		color: white;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.footerDiv a:hover{
		opacity: 0.7;
	}
</style>