imcs_yj_fe/imcs-ui/src/views/zuihou/largeScreen/twoDatasModel/Index.vue

<template>
  <div id="playerMap" ref="playerMap" class="app-container lineBoard platformDiv">
  	<!-- 头部-部分 -->
    <el-row class="rowCls">
    	<div class="headerBg headerNwBg">
    		<!-- 标题-产线运行智能总控监控平台 -->
    		<div class="headerTitle">{{$t("largeScreen.common.largeAllTitle")}}</div>
    		<!-- tab切换回 -->
    		<div class="tabsDiv">
    			<!-- 3D孪生展示 -->
    			<span>{{$t("largeScreen.common.data3d")}}</span>
    			<!-- 2D简洁模式 -->
    			<span @click="boxCardClk()">{{$t("largeScreen.common.data2d")}}</span>
    			<!-- 2D数据模式 -->
    			<span class="tabsActive">{{$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>
    	</div>
    </el-row>

  	<!-- 中间-部分 -->
  	<el-row :gutter="15" class="rowCls marginBottom15">
  		<!-- 左 -->
  		<el-col :span="7">
  			<!-- 车间产线运转评估 -->
  			<div class="leftDiv marginBottom15">
  				<div class="modelTitle marginBottom15">车间产线运转评估</div>
  				<!-- Echarts仪表盘 -->
  				<div class="gaugeDiv">
  					<gauge-grade :gaugeData="gaugeData" :width="gaudeWidth" :height="gaudeHeight"></gauge-grade>
  				</div>
  			</div>
  			<!-- 车间产线 -->
  			<div class="leftDiv leftDivAuto">
  				<div class="modelTitle marginBottom15">车间产线</div>
  				<table class="pragreeTable tableBorder" border="0" cellspacing="0" cellpadding="0">
  					<tr>
  						<th width="50">编号</th>
  						<th width="250">产线名称</th>
  						<th width="150">模式</th>
  					</tr>
  					<tr v-for="(item, index) in orderDatas" :key="index">
  						<td>{{ index+1 }}</td>
  						<td>{{ item.name }}</td>
  						<td>{{ dicts.RUN_MODE[item.runMode]}}</td>
  					</tr>
  				</table>
  			</div>
  			<!-- 设备利用率 -->
		  	<div class="rightDiv marginBottom15">
		  		<div class="modelTitle marginBottom15">设备利用率</div>
		  		<el-row :gutter="15">
					  <el-col :span="12">
					  	<div id="percenter1" class="percenter">
					  		<el-progress type="circle" :percentage="percentages[0]" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">智能生产单元</span>
					  	</div>
					  </el-col>
					  <el-col :span="12">
					  	<div id="percenter2" class="percenter">
					  		<el-progress type="circle" :percentage="percentages[1]" color="#5cb87a" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">柔性智能加工</span>
					  	</div>
					  </el-col>
					</el-row>
		  	</div>
  		</el-col>
  		<!-- 中 -->
		  <el-col :span="10">
		  	<!-- 车间总体情况 -->
		  	<div class="centerDiv marginBottom15">
		  		<div class="modelTitle marginBottom15">车间总体情况</div>
		  		<el-row class="marginBottom15" :gutter="15">
					  <el-col :span="11" align="left">
					  	<div class="allTitleLeft font12">持续运行时间</div>
					  	<div class="allFont"  ref="runningTime">{{ (allDatas[0]/60).toFixed(1) }}小时</div>
					  </el-col>
					  <el-col :span="13">
					  	<el-row :gutter="15">
							  <el-col :span="8">
							  	<div class="allTitle font12">产线运行状态</div>
							  	<div class="modelStatus">正常</div>
							  </el-col>
							  <el-col :span="8">
							  	<div class="allTitle font12">调度管理状态</div>
							  	<div class="modelStatus">正常</div>
							  </el-col>
							  <el-col :span="8">
							  	<div class="allTitle font12">生产资料准备</div>
							  	<div class="modelStatus">正常</div>
							  </el-col>
							</el-row>
					  </el-col>
					</el-row>
					
					<el-row class="borderTop">
					  <el-col>
					  	<el-row :gutter="15">
							  <el-col :span="6">
							  	<div class="modelStatus2">
							  		<p class="centerNums">{{ this.diaoduList.length }}</p>
							  		<div class="centerTitle">待完成订单</div>
							  	</div>
							  </el-col>
							  <el-col :span="6">
							  	<div class="modelStatus2">
							  		<p class="centerNums">{{ this.incomplete }}</p>
							  		<div class="centerTitle">待完成零件</div>
							  	</div>
							  </el-col>
							  <el-col :span="6">
							  	<div class="modelStatus2">
							  		<p class="centerNums"><countTo :startVal='0' :endVal='allDatas[3]' :duration='3000'></countTo>%</p>
							  		<div class="centerTitle">合格率</div>
							  	</div>
							  </el-col>
							  <el-col :span="6">
							  	<div class="modelStatus2">
							  		<p class="centerNums"><countTo :startVal='0' :endVal='allDatas[4]' :duration='3000'></countTo>%</p>
							  		<div class="centerTitle">当日合格率</div>
							  	</div>
							  </el-col>
							</el-row>
					  </el-col>
					</el-row>
		  		
		  	</div>
		  	
		  	<!-- 生产计划 -->
		  	<div class="centerDiv">
		  		<div class="modelTitle marginBottom15">生产计划</div>
		  		<table class="pragreeTable tableBorder" border="0" cellspacing="0" cellpadding="0" >
  					<tr>
  						<th width="70">生产计划(-订单)</th>
  						<th width="60">零件名称</th>
  						<!--<th width="55">排产产线</th>-->
  						<th width="45">数量</th>  						
  						<th width="80">计划完成时间</th>
						<th width="45">已生产</th>
  						<th width="45">合格率</th>
  						<th width="60">生产进度</th>
  					</tr>
  					<tr v-for="(item, index) in runDatas" :key="index">
  						<td>{{ item.planNo }}-{{ item.orderNo }}</td>
  						<td>{{ item.bomDesc }}</td>
  						<!--<td>{{ item.zoenDesc }}</td>-->
  						<td>{{ item.planBomNum }}</td>
  						<td>{{ item.endTime }}</td>
  						<td>{{ item.completeNum }}</td>
  						<td>{{ item.qualification }}%</td>
  						<td>
  							<el-progress :text-inside="true" :stroke-width="15" :percentage="item.process" status="success"></el-progress>
  						</td>
  					</tr>
  				</table>
		  	</div>
		  </el-col>
		  
		  <!-- 右 -->
		  <el-col :span="7">
		  	<!-- 预警信息 -->
		  	<div class="rightDiv marginBottom15">
		  		<div class="modelTitle marginBottom15">预警信息</div>
				<!--
		  		<table class="tableBorder" border="0" cellspacing="0" cellpadding="0">
  					<tr v-for="(item, index) in yujingList" :key="index">
  						<td style="text-align: left;">{{ item.name1 }}</td>
  						<td>{{ item.name2 }}</td>
  					</tr>
  				</table> -->
				<vue-seamless-scroll :data="yujingList" class="seamless-warp" :class-option="classOption">
					<ul class="item" style="height:160px;">
						<li class="DataList_top" v-for="(item,index) in yujingList" :key="index">							
							<div class="DataList_col">{{item.itemname}}</div>
							<div class="DataList_col2">{{item.time}}</div>
							<div class="clearfix"></div>
						</li>
					</ul>
				</vue-seamless-scroll>
				
		  	</div>
		  	<!-- 待完成订单 -->
		  	<div class="rightDiv marginBottom15">
		  		<div class="modelTitle marginBottom15">待完成订单</div>
		  		<table class="tableBorder" border="0" cellspacing="0" cellpadding="0" >
  					<tr>
  						<th>订单号</th>
  						<th width="80">客户</th>
  						<th width="60">零件数量</th>
  						<th width="50">已生产</th>
  						<th>交付时间</th>
  						<th width="120">交付倒计时</th>
  					</tr>
  					<tr v-for="(item, index) in diaoduList" :key="index">
  						<td style="word-wrap: break-word;word-break: break-all;width:80px;">{{ item.orderNo }}</td>
  						<td style="min-width:30px;">{{ item.custDesc }}</td>
  						<td>{{ item.productNum }}</td>
  						<td v-if="item.completeNum">{{ item.completeNum}}</td>
						<td v-else>0</td>
  						<td style="min-width:30px;">{{ item.deliveryTime }}</td>
  						<td class="timeprogress" style="min-width:80px;">
						    <el-progress :text-inside="true" :stroke-width="15" :percentage="setPercentage(item.deliveryTime)" :format="setItemText(item.deliveryTime)" color="#FF3366"></el-progress>
						</td>
  					</tr>
  				</table>
		  	</div>
		  	<!-- 维保倒计时（2天内） -->
		  	<div class="rightDiv">
		  		<div class="modelTitle marginBottom15">维保倒计时</div>
		  		<table class="tableBorder" border="0" cellspacing="0" cellpadding="0">
  					<tr>
  						<th width="130">设备</th>
  						<th>剩余时间</th>
  					</tr>
  					<tr v-for="(item, index) in weibaoList" :key="index">
  						<td>{{ item.productionresourceName }}</td>
  						<td class="timeprogress">
						    <el-progress :text-inside="true" :stroke-width="15" :percentage="setPercentage(item.repairEndTime)" color="#FF3366" :format="setItemText(item.repairEndTime)" ></el-progress>
						</td>
  					</tr>
  				</table>
		  	</div>
		  </el-col>
  	</el-row>
  	
  	<!-- 尾部-部分 -->
  	<el-row class="rowCls">
  		<div class="bottomDiv">
	  		<vue-scroll :ops="ops" style="width:100%;height:100%;">
	  			<ul>
	  				<li class="resourceLi">
	  					<div class="modelTitle2">设备生产资源</div>
	  				</li>
	  				<li v-for="(item, index) in mashingOneList.data" :key="index">
	  					<span class="mStatus">运行中</span>
	  					<!--<span class="mAudit">{{item.productionStatus.text}}</span>-->
	  					<img class="mashingImg" :src="item.pic" v-lazy="item.pic"  />
	  					<div class="mashingDiv">
	  						<!--<div class="mashingCode">{{ item.model }}</div> -->
	  						<div class="mashingName">{{ item.name }}</div>
	  					</div>
	  				</li>
	  			</ul>
	  		</vue-scroll>
  		</div>
  	</el-row>
	
  </div>
</template>

<script>
	// Echarts的组件
	import * as echarts from 'echarts'
	// 引入vuescroll
	import VueScroll from "vuescroll"
	
	import vueSeamlessScroll from 'vue-seamless-scroll'
	// 【区域管理】-API
	import lineBoardAPI from "@/api/runManageCenter/lineBoard"
	import areaMgrApi from "@/api/resourceProductMgr/areaMgr"
	import planMgrApi from "@/api/runManageCenter/planMgr"
	import orderMgrApi from "@/api/runManageCenter/orderMgr"
	import repairApi from "@/api/resourceProductMgr/repair"
	// 【Echarts-仪表盘】-API
	import GaugeGrade from "@/components/Charts/GaugeGrade"
	// 共通保存本地
	import db from '@/utils/localstorage'
	import elDragDialog from '@/directive/el-drag-dialog'
	// 共通的函数
	import { downloadFile, initDicts, initQueryParams, fullScreen, exitFullScreen, percentPie, randomFloor } from '@/utils/commons'
	import { convertEnum } from '@/utils/utils'
	
	// 加载动态数字组件
	import countTo from 'vue-count-to'
   
	export default {
	  name: "TwoDatasModel",
	  directives: { elDragDialog },
	  components: { countTo, GaugeGrade, VueScroll, vueSeamlessScroll},
	  props: {},
	  data () {
	    return {
		    dicts: {
				RUN_MODE: {}  //运行模式
			},
			incomplete: 0,
	    	gaugeData: {value: randomFloor(40,100)/100, name: '效率'},
	    	gaudeWidth: '100%',
	    	gaudeHeight: '190px',
	    	percentages: [randomFloor(10,100), randomFloor(20,100), randomFloor(30,100)],
	    	allDatas: [randomFloor(100,4000), randomFloor(1,10), randomFloor(20,100), randomFloor(90,100), randomFloor(95,100)],
	    	resourceId: '',
	    	orderDatas: [], // [插单订单]数据
	    	runDatas: [],  // [运行中订单]数据
	  		yujingList: [], // [预警信息]
	  		diaoduList: [],  // [最新订单/待调度]
	  		mashingOneList: [], // [机器人]产线一数据
			mashingTwoList: [],  // [机器人]产线二数据
			weibaoList: [], //维保数据
	    	tabDownData: {    // 下部分-数据
	    		list: []
	    	},
	    	isFullSreen: false, // 默认不全屏
	      queryParams: initQueryParams({}),
	      ops: {
	        vuescroll: {
			  mode: 'native',
			  sizeStrategy: 'percent',
			  detectResize: true,			
			},
	        scrollPanel: {
			   initialScrollY: false,
			   initialScrollX: false,
			   scrollingX: true,
			   scrollingY: false,
			   speed: 200			
			},
	        rail: {
			  background: '#1883f7',
			  opacity: 0.5,
              size: '6px',
			  specifyBorderRadius: false,
			  gutterOfEnds: null,
			  gutterOfSide: '2px',
	          keepShow: true
	        },
	        bar: {
	          hoverStyle: true,
	          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
	          background: "#F5F5F5",			//滚动条颜色
	          opacity: 0.5 								//滚动条透明度
	        }
	      }
	    }
	  },
	  filters:{
       
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 初始化数据
		initDicts(['RUN_MODE'], this.dicts)
	  	this.initDatas()
		this.getDatas()
		},
		watch: {
	  	    websocketMsg(curVal, oldVal) {
	      		let obj = JSON.parse(curVal)
	      		this.openMessageTips(obj)
	    	}
	  },
	  computed: {
	    currentUser () {
	      return this.$store.state.account.user
	    },
	    nationList() {
			return convertEnum(this.dicts.NATION)
        },
		runModelList() {
			return convertEnum(this.dicts.RUN_MODE)
		},
        classOption () {
			return {
				step: 0.2, // 数值越大速度滚动越快
				limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) 
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) 
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			}
		},		
		
      // 接收信息
		websocketMsg() {		  
	      return this.$store.getters.STAFF_UPDATE.msg
	    }
      ,
		percentage(){
			return Math.floor(Math.random()*100)
		}
	  },
	  mounted () {
	    // 判断长连接，是否已经开启
	  	if(this.$store.state.websocket.websock == null){
	  		// 页面刚进入时开启长连接
    		this.$store.dispatch('STAFF_WEBSOCKET')			
	  	}
	  	// DOM加载后，加载
	  	this.$nextTick(()=> {
	  		// 加载数据
	  		this.initPercentPie()
	  	})
	  },
	  // 销毁
	  destroyed() {
	     this.websocketClose()
	  },
	  methods: {
	  	// 初始化数据
		getDatas(){
		   //产线数据
		   areaMgrApi.getList({status:1}).then(res => {
				//resolve(res)
				//console.log(res)
				if(res.status == 200 && res.data.isSuccess){
				   this.orderDatas = res.data.data
				}else{
                   this.$message({
						message: "产线数据查询失败",
						type: "error"
					})			
                }
		   })
		   
		   //计划数据
		   this.queryParams.size = 5
		   this.queryParams.model.planStatus = 2
		   planMgrApi.page(this.queryParams).then(res => {
		       //console.log(res)
			   if(res.status == 200 && res.data.isSuccess){
				   this.runDatas = res.data.data.records
				}else{
                   this.$message({
						message: "计划数据查询失败",
						type: "error"
					})			
                }
		   })
		   
		   //未完成订单
		   let orderParams = initQueryParams({})		   
		   orderParams.size = 5
		   //orderParams.timeRange = {}
		  
		   orderMgrApi.page(orderParams).then(res => {
		       //console.log(res)
		       if(res.status == 200 && res.data.isSuccess){
				   this.diaoduList = res.data.data.records

                   //待完成零件
				   for(let i = 0; i < this.diaoduList.length; i++){
				        if(this.diaoduList[i].completeNum == null){
						   this.incomplete += parseInt(this.diaoduList[i].productNum)
						}else{
						   this.incomplete += parseInt(this.diaoduList[i].productNum) - parseInt(this.diaoduList[i].completeNum)	
						}   
				   }				   
				   
				}else{
                   this.$message({
						message: "未完成订单数据查询失败",
						type: "error"
					})			
                }
		   })
		   
		    //维保数据
			let repairParams = initQueryParams({})
		   //this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
	       //this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
			repairParams.size = 5
			repairApi.page(repairParams).then(res => {
			    //console.log(res)				
				if (res.status == 200 && res.data.isSuccess) {
					 this.weibaoList = res.data.data.records
				}else{
                     this.$message({
						message: "维保数据查询失败",
						type: "error"
					})
                }				
			})
			
			//设备资源数据			
	        areaMgrApi.iconGroupList({resourceStatus:"1",group:0}).then(res => {
				//console.log(res)
				if (res.status == 200 && res.data.isSuccess) {
				    this.mashingOneList = this.filterResource(res.data.data.iconGroupList[0])
					this.mashingTwoList = this.filterResource(res.data.data.iconGroupList[1])					
					//计算产线利用率
					this.mashingOneList.data = this.mashingOneList.data.concat(this.mashingTwoList.data)
					
				}else{
                    this.$message({
						message: "设备数据查询失败",
						type: "error"
					})
                }				
	        })		   
		},
	  	initDatas(){	  		
	  		
	  		// [预警信息]
	  		this.yujingList = [
	  			{itemname: '[设备离线]柔性线打标机离线', time: '2021-11-04 08:41'},
	  			{itemname: '[设备离线]柔性线机器人离线', time: '2021-11-04 08:57'}	  			
	  		];
	  	},
	  	
	  	// 加载数据-[生产资源使用率]
	  	initPercentPie(vals){
			var elm = echarts.init(document.getElementById("percenter1"))
			var elm2 = echarts.init(document.getElementById("percenter2"))
			if(elm != null && elm !='' && elm != undefined){
				elm.dispose()
			}
			if(elm2 != null && elm2 !='' && elm2 != undefined){
				elm2.dispose()
			}
	  		var option1 = {
			    value: vals == null ? randomFloor(67,77) : vals[0],    //百分比,必填
			    name:'智能生产单元利用率',		//必填
			    name2:'未利用率',
			    title:'',
			    backgroundColor: null,
			    color:['#24a9ea','#DDDDDD'],
			    fontSize:12,
			    domEle:document.getElementById("percenter1")//必填
				};
				percentPie(option1);
				
				var option2 = {
			    value: vals == null ? randomFloor(49,59) : vals[1],	  //百分比,必填
			    name:'柔性智能加工利用率',				//必填
			    name2:'未利用率',			//必填
			    title:'',
			    backgroundColor: null,
			    color:['#13ce66','#DDDDDD'],
			    fontSize:12,
			    domEle:document.getElementById("percenter2")//必填
				};
				percentPie(option2);				
				
	  	},
	  		
	  	// 是否设置大屏
	  	setMaxScreen(){
	  		let isCurrScreen = db.get("isCurrScreen");
	  		console.log("是否全屏22222：",isCurrScreen)
	  		if(isCurrScreen == true){
	  			this.fullPing();
	  		}
	  	},
	  	// 推送接收到的数据
	  	openMessageTips(data){
	  		// 如果是【数据模式】
		  if(this.$route.fullPath.indexOf("/largeScreen/twoDatasModel") > -1){  	  
			  console.log("接收websocket的推送信息 == ",data)
			  if(data.type == 'PUSH_TYPE_DATA_SCREEN'){
					this.$nextTick(()=> {
						// 数据变更
						this.initPercentPie([randomFloor(77,87), randomFloor(59,69)])
						this.orderDatas = data.data.zoneMap.zoneData
						this.runDatas = data.data.planMap.planData.records
												
						this.diaoduList = data.data.orderMap.orderData.records
						this.incomplete = 0			 			
						for(let i = 0; i < this.diaoduList.length; i++){
							if(this.diaoduList[i].completeNum == null){
								this.incomplete += parseInt(this.diaoduList[i].productNum)
							}else{
								this.incomplete += parseInt(this.diaoduList[i].productNum) - parseInt(this.diaoduList[i].completeNum)	
							}   
				        }
						 this.weibaoList = []		 				 
						 
						 this.weibaoList = data.data.repairMap.repairData.records
						 						 
						 this.mashingOneList = this.filterResource(data.data.groupMap.iconGroupList[0])
						 this.mashingTwoList = this.filterResource(data.data.groupMap.iconGroupList[1])
						 
						 this.mashingOneList.data = this.mashingOneList.data.concat(this.mashingTwoList.data)	
						
						 //this.$ref.runningTime.innerHmtl =  ((allDatas[0] + 5/360)/60).toFixed(1)
                         
						 let datas = data.data.warnMap.warnData.records
						 let that = this
						 this.yujingList = datas.map((data)=>{						    
						    let msg = data.feedback ? data.feedback : " 响应超时 ";
							let arr = data.createTime;                            							 
							let time = arr[0] + "-" + arr[1] + "-" + arr[2] + "\t" + arr[3] + ":" + arr[4];	
                            let itemname = "["+ data.resourceName +"] "+data.procedureName+"("+data.instructionName+")" + msg; 	
                            if(data.status == '0'){
							    setTimeout(function(){
								    that.$notify({
								    title: '预警提示',
									message: itemname + "\t" + "请管理人员去产线查看",
									type: 'warning',
									position: 'bottom-right',									
									duration: 5000,
									customClass:'notifyStyle', 
								   });								
								},8000);							    
							}						
						    return {itemname:itemname , time: time}
						 });


					})
			    }	
		  	  }			
	  	},
	  	// 组件销毁的时候，关闭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)
			console.log("websocket获取数据==="+evt)
	      }
	    },
				
		// 过滤设备数据
		filterResource(mashingList){		   
		   let arr = mashingList.data.filter((data) => {		       
			   return data.name.indexOf("接驳位") <0 && data.name.indexOf("托板") < 0 && data.name.indexOf("上下料站") < 0 
			          && data.name.indexOf("线边库") <0
           });
		   mashingList.data = arr
		   return mashingList
		},
	    
	    // 【SUM50】点击-事件
	  	boxCardClk(){
	  		let paths = "/largeScreen/modeSummary";
				// 调用全局挂载的方法
				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'))
	  		})
	  	},
	  	// 加载背景颜色
	  	setBackground(color){
	  		return "background: "+ color +";"
	  	},
	  	// 加载【本地图片】
	  	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
	    			this.resourceId = this.tabDownData.list[0].id
	    		}
	    	})
	    },

        //时间差转换
        formatGap(date) {            		
		    let staytimeGap = new Date(date).getTime() - new Date().getTime();			
			if(staytimeGap<0){
				staytimeGap = new Date().getTime() - new Date(date).getTime();
			}	
            			
            let stayDay =  Math.floor(staytimeGap/(24*3600*1000));
            let level = staytimeGap%(24*3600*1000);			
			let stayHour = Math.floor(level/(3600*1000));
			let leave12 = level%(3600*1000);
			let stayMin = Math.floor(leave12/(60*1000));
				
			return [Number(parseFloat(stayDay/30*100).toFixed(2)), stayDay + "天" +stayHour + "小时" + stayMin + "分"]
		},
		
	   // 设置进度文本内容
	   setItemText(text){
	       return () => {
		        return this.formatGap(text)[1]
			}	  
	    },
       setPercentage(text){
			return this.formatGap(text)[0]>100? 100 : this.formatGap(text)[0]			
	    }
	  } 
	}
</script>
<!-- 全局样式-通过定义父DOM的calss，来只影响本组件 -->
<style lang="scss" type="text/css">
	.percenter{
		.el-progress--circle .el-progress__text{
			top: 60%;
			color: #FFFFFF;
			font-size: 14px;
		}
	}
	.pragreeTable {
		.el-progress-bar__outer{
			background-color: #a1a1a178;
		}
	}
	.timeprogress .el-progress-bar__outer {
	  background-color:#000;
	}	
	.timeprogress .el-progress-bar__inner {
	  text-align:center;
	}
	.notifyStyle {
	  background-color:#000088 !important;	  
	}
	.notifyStyle .el-notification__content{
	   color: #fff !important;
	}
	.notifyStyle .el-notification__title {
	   color: #fff !important;
	}
</style>
<!-- 本组件样式 -->
<style lang="scss" scoped>
	.headerTitle{
		position: relative;
		top: 20px;
		left: -13px;
		font-family: "微软雅黑";
		font-size: 32px;
		text-shadow: 1px 2px 3px #ece9e9;
		letter-spacing: 3px;
	}
	
	.platformDiv {
		.leftDivAuto {
			min-height: initial;
		}
		.modelTitle {
			color: #28BDE0;
		}
	}
	.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;
			}
		}
	}
	.gaugeDiv{
		width: 100%;
		height: 190px;
	}
	.bottomDiv{
		width: 100%;
		min-height: 215px;
		white-space: nowrap;
		ul {
			width: 100%;
			list-style: none;
			margin: 0;
			padding: 0;
			li {
				position: relative;
				background: #457f968c;
				display: inline-block;
				margin: 0 10px 10px;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				border-radius: 8px;
				.mStatus {
					position: absolute;
					top: 10px;
					right: 0px;
					display: inline-block;
					background: #2573b8d1;
					padding: 2px 6px;
					font-size: 14px;
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;
					border-radius: 3px;
				}
				.mAudit {
					position: absolute;
					top: 40px;
					right: 0px;
					display: inline-block;
					background: #2573b8d1;
					padding: 2px 6px;
					font-size: 14px;
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;
					border-radius: 3px;
				}
				.mashingImg {
					background: #FFFFFF;
					width: 180px;
					height: 110px;
					-moz-border-radius: 8px;
					-webkit-border-radius: 8px;
					border-radius: 8px;
				}
				.mashingDiv {
					padding: 20px 10px 10px;
					.mashingCode {
						position: relative;
						text-align: left;
						padding-left: 20px;
						margin-bottom: 7px;
					}
					.mashingCode:before {
						background: #00FFFF;
						position: absolute;
						content: "";
						left: 0;
						top: 5px;
						width: 10px;
						height: 10px;
						-moz-border-radius: 50%;
						-webkit-border-radius: 50%;
						border-radius: 50%;
					}
					.mashingName {
						text-align: left;
					}
				}
			}
			li.resourceLi{
				background: none;
				.modelTitle2 {
					position: relative;
					top: 0;
					color: #28BDE0;
					font-size: 18px;
					line-height: 22px;
					font-weight: bold;
					width: 20px;
					white-space: normal;
				}
			}
		}
	}
	.tableBorder{
		width: 100%;
		border-left: 1px solid #184659;
		border-top: 1px solid #184659;
		tr {
			th{
				background: #457f968c;
				padding: 5px 2px;
				font-size: 12px;
				border-bottom: 1px solid #184659;
			}
			td {
				padding: 5px 2px;
				text-align: center;
				font-size: 11px;
				border-right: 1px solid #184659;
				border-bottom: 1px solid #184659;
			}
		} 
	}
	.percenter{
		position: relative;
		width: 100%;
		height: 105px;
		.pcText{
			display: inline-block;
			position: absolute;
			top: 35%;
			left: 0;
			width: 100%;
			color: #999999;
			font-size: 12px;
			text-align: center;
		}
	}
	.allTitleLeft{
		padding-top: 10px;
		margin-bottom: 30px;
		border-top: 1px solid #275379;
	}
	.allTitle{
		margin-bottom: 10px;
		font-size: 11px;
	}
	.allFont{
		font-size: 22px;
		color: #00d8ff;
	}
	.modelStatus{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #13ce66;
		min-height: 60px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.modelStatus2{
		background: #457f968c;
		min-height: 60px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.centerNums{
		font-size: 28px;
		margin: 0;
		padding: 15px 0 10px;
	}
	.centerTitle{
		font-size: 14px;
		padding: 10px 0;
	}
	.borderTop{
		padding-top: 10px;
		border-top: 1px solid #275379;
	}
	
	.seamless-warp {
        height: 200px;
        overflow: hidden;
    }
	.item > .DataList_top {
	   list-style: none;
	   float: left;	   
	   color: red;
       margin-left: -40px;
       font-size: 14px;
	   min-width:400px;
	   width:100%;
	}
	.item .DataList_col {   
	   float: left;
	   font-size: 12px;
	   margin:2px 0;
	  
	}
	
	.item .DataList_col2 {
       float: left;
	   font-size: 12px;
	   margin:2px 0 2px 12px;	   	   
	}
	.item .clearfix {
      clear: both;
	}
	
</style>