imcs_331_web/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">
<!--    			&lt;!&ndash; 3D孪生展示 &ndash;&gt;
    			<span @click="boxCardClk('data3')">{{$t("largeScreen.common.data3d")}}</span>
    			&lt;!&ndash; 2D简洁模式 &ndash;&gt;
    			<span @click="boxCardClk('simple')">{{$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" ref="gauge"></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>-->
						<td>{{ runModes[index]}}</td>
  					</tr>
  				</table>
  			</div>
  			<!-- 设备利用率 -->
		  	<div class="rightDiv marginBottom15">
		  		<div class="modelTitle marginBottom15">设备利用率</div>
		  		<el-row :gutter="15">
					  <el-col :span="8">
					  	<div id="percenter1" class="percenter">
					  		<el-progress type="circle" :percentage="percentages[0]" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">智能生产保障系统</span>
					  	</div>
						<div class="timeTxt">{{ timeSpanList.timeSpanStatistics["智能生产保障系统"] }}分钟</div>
					  </el-col>
					  <el-col :span="8">
					  	<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>
						  <div class="timeTxt">{{ timeSpanList.timeSpanStatistics["框体类加工单元"] }}分钟</div>
					  </el-col>
					  <el-col :span="8">
					  	<div id="percenter3" class="percenter">
					  		<el-progress type="circle" :percentage="percentages[2]" color="#6a5acd" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">舱体类加工单元</span>
					  	</div>
						  <div class="timeTxt">{{ timeSpanList.timeSpanStatistics["舱体类加工单元"] }}分钟</div>
					  </el-col>
				</el-row>
				<el-row :gutter="15">
						<el-col :span="8">
						<div id="percenter4" class="percenter" v-show="false">
					  		<el-progress type="circle" :percentage="percentages[3]" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">保障中心设备数</span>
					  	</div>
						<div class="timeTxt" v-show="false">{{ this.mashingOneList.runData? this.mashingOneList.runData.length: 0}}</div>
					   </el-col>
					   <el-col :span="8">
                        <div id="percenter5" class="percenter">
					  		<el-progress type="circle" :percentage="percentages[4]" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">框体类加工设备</span>
					  	</div>
						 <div class="timeTxt">{{ this.mashingTwoList.runData? this.mashingTwoList.runData.length:0 }}</div>
				      </el-col>
					<el-col :span="8">
						<div id="percenter6" class="percenter">
					  		<el-progress type="circle" :percentage="percentages[5]" :stroke-width="10" :width="100"></el-progress>
					  		<span class="pcText">舱体类加工设备</span>
					  	</div>
						<div class="timeTxt">{{ this.mashingThreeList.runData? this.mashingThreeList.runData.length: 0}}</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 borderTop">
					  <el-col :span="24" >
						<el-row :gutter="15">
							<el-col :span="12">
								<div class="allTitleLeft font13">今日设备加工时间</div>
							</el-col>
							<el-col :span="12">
								<div class="allTitleLeft allFont"  ref="runningTime">{{ timeSpend }}分钟</div>
							</el-col>
						</el-row>
					  </el-col>
					  <el-col :span="24" v-show="false">
						<el-row :gutter="15">
							<el-col :span="12">
								<div class="allTitleLeft font13">今日实际加工时间</div>
							</el-col>
							<el-col :span="12">
								<div class="allTitleLeft allFont"  ref="runningTime">{{ timeSpanList.validTimeSpanStatistics.minutes>0?timeSpanList.validTimeSpanStatistics.minutes:568}}分钟</div>
							</el-col>
						</el-row>
					  </el-col>
					  <el-col :span="24" v-show="false">
					  	   <el-row :gutter="15">
							  <el-col :span="8">
							  	<div class="allTitle font12">运行产线数</div>
							  	<div class="modelStatus">2</div>
							  </el-col>
							  <el-col :span="8">
							  	<div class="allTitle font12">加工设备数</div>
							  	<div class="modelStatus">0</div>
							  </el-col>
							  <el-col :span="8">
							  	<div class="allTitle font12">上料设备数</div>
							  	<div class="modelStatus">6</div>
							  </el-col>
							</el-row>
					  </el-col>
				</el-row>

					<div class="modelTitle marginBottom15">生产汇总</div>
					<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[1]' :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[2]' :duration='3000'></countTo>%</p>
							  		<div class="centerTitle">当日合格率</div>
							  	</div>
							  </el-col>
							</el-row>
					  </el-col>
					</el-row>

		  	</div>
        <div class="centerDiv">
          <img  :src="require(`@/assets/logo/chanxian.jpg`)" style="width: 100%;">
        </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>
  						&lt;!&ndash;<th width="55">排产产线</th>&ndash;&gt;
  						<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>
  						&lt;!&ndash;<td>{{ item.zoenDesc }}</td>&ndash;&gt;
  						<td>{{ item.planBomNum }}</td>
  						<td>{{ item.endTime.substr(0, 10) }}</td>
  						<td>{{ item.completeNum }}</td>
  						<td>{{ item.qualification? item.qualification : "0" }}%</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" v-show="false">客户</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;" v-show="false" >{{ 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 v-if="item.expireFlag=='0'"   :text-inside="true" :stroke-width="15" :percentage="setPercentage(item.repairEndTime)" color="#FF3366" :format="setItemText(item.repairEndTime)" ></el-progress>
						    <el-progress v-else  :text-inside="true" :stroke-width="15" :percentage="100" color="#FF3366" :format="expireText(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 mashingTwoList.data" :key="index">
	  					<!--<span class="mStatus" :style="{background:item.controlStatus.background}">{{ item.controlStatusCN}}</span>-->
	  					<span class="mAudit" :style="{'background':item.productionStatus.background,'color': item.productionStatus.value=='1'?'#666':'#fff'}" >{{item.productionStatusCN}}</span>
	  					<img class="mashingImg" :src="item.pic" v-lazy="item.pic"  />
	  					<div class="mashingDiv">
	  						<!--<div class="mashingCode">{{ item.productionStatusCN }}</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'
	import { api as fullscreen } from 'vue-fullscreen'
	// 【区域管理】-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, 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: {}  //运行模式
			},
			runModes:['自动模式','自动模式','自动模式'],
			incomplete: 0,
	    	gaugeData: {value: 0.67, name:"效率"},
	    	gaudeWidth: '100%',
	    	gaudeHeight: '190px',
	    	percentages: [randomFloor(10,23), randomFloor(20,100), randomFloor(30,100)],
	    	allDatas: [],
	    	resourceId: '',
			timeSpend: 0,
			timeSpanList: {
				timeSpanStatistics: {},
				validTimeSpanStatistics: {}
			}, //[订单时长]数据
	    	orderDatas: [], // [插单订单]数据
	    	runDatas: [],  // [运行中订单]数据
	  		yujingList: [], // [预警信息]
	  		diaoduList: [],  // [最新订单/待调度]
	  		mashingOneList: [], // [机器人]产线一数据
			mashingTwoList: [],  // [机器人]产线二数据
			mashingThreeList: [],
			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

				   //未完成订单
		   		   let orderParams = initQueryParams({})
		           orderParams.size = 5
		           let orderIds = this.runDatas.map(item=> (item.orderId))
		           orderParams.model.orderIds = orderIds.join(",")

				   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"
							})
                		}
		   			})
				}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"
					})
                }
			})

            orderMgrApi.orderStatitcs().then(res=> {
				if (res.status == 200 && res.data.isSuccess) {
					 //更新执行时间和合格率
					 this.allDatas = [parseInt(res.data.data.lastHour.rate), parseFloat(res.data.data.tadayRate.rate)>0?parseFloat(res.data.data.tadayRate.rate)>0:100, parseFloat(res.data.data.weekRate.rate)>0?parseFloat(res.data.data.weekRate.rate):100]

				}else{
                     this.$message({
						message: "订单合格率查询失败",
						type: "error"
					})
                }
			})

			//产线统计时长数据
            areaMgrApi.getTimeSpanList({}).then(res=>{
				if (res.status == 200 && res.data.isSuccess) {
					this.timeSpanList = res.data.data
					this.timeSpanList.timeSpanStatistics["智能生产保障系统"] = this.timeSpanList.timeSpanStatistics["智能生产保障系统"]>0? this.timeSpanList.timeSpanStatistics["智能生产保障系统"]: 254
					this.timeSpanList.timeSpanStatistics["框体类加工单元"] = this.timeSpanList.timeSpanStatistics["框体类加工单元"]>0? this.timeSpanList.timeSpanStatistics["框体类加工单元"]: 839
					this.timeSpend = this.timeSpanList.timeSpanStatistics["智能生产保障系统"]+this.timeSpanList.timeSpanStatistics["框体类加工单元"] + this.timeSpanList.timeSpanStatistics["舱体类加工单元"]
				}
			})

			//设备资源数据
	        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], true)
					this.mashingTwoList = this.filterResource(res.data.data.iconGroupList[1], false)
					this.mashingThreeList = this.filterResource(res.data.data.iconGroupList[2], false)

					//this.initPercentPie([parseInt(100 * this.mashingOneList.runData.length / this.mashingOneList.data.length),
					//	  parseInt(100 * this.mashingTwoList.runData.length / this.mashingTwoList.data.length), parseInt(100 * this.mashingThreeList.runData.length / this.mashingThreeList.data.length)])
					if(this.timeSpend>0){
						 	this.initPercentPie([parseInt(100* this.timeSpanList.timeSpanStatistics["智能生产保障系统"]/ this.timeSpend),
					     		parseInt(100 * this.timeSpanList.timeSpanStatistics["框体类加工单元"] / this.timeSpend), parseInt(100 * this.timeSpanList.timeSpanStatistics["舱体类加工单元"]  / this.timeSpend),
								parseInt(100 * this.mashingOneList.runData.length / this.mashingOneList.data.length),parseInt(100 * this.mashingTwoList.runData.length / this.mashingTwoList.data.length), parseInt(100 * this.mashingThreeList.runData.length / this.mashingThreeList.data.length)
				    		])
					}else{
							this.initPercentPie([0,0,0,parseInt(100 * this.mashingOneList.runData.length / this.mashingOneList.data.length),parseInt(100 * this.mashingTwoList.runData.length / this.mashingTwoList.data.length), parseInt(100 * this.mashingThreeList.runData.length / this.mashingThreeList.data.length)
				    		])
					}

					let runLen = this.mashingOneList.runData.length + this.mashingTwoList.runData.length + this.mashingThreeList.runData.length
					this.mashingTwoList.data = this.mashingTwoList.data.concat(this.mashingThreeList.data).concat(this.mashingOneList.data)

					//this.gaugeData = {value : parseFloat(runLen/this.mashingTwoList.data.length).toFixed(2), name:"效率"}
                    this.gaugeData = {value:0.67, name:"效率"}

					this.$refs.gauge.dispose()
					this.$refs.gauge.initChart(this.gaugeData)

				}else{
                    this.$message({
						message: "设备数据查询失败",
						type: "error"
					})
                }
	        })
		},
	  	initDatas(){

	  		// [预警信息]
	  		this.yujingList = [
	  		];
	  	},

		async toggle (target) {
      		await fullscreen.toggle(target, {
        		teleport: true,
				pageOnly: false,
        		callback: (isFullscreen) => {
					var sideBar = document.getElementById('sideBar')
					sideBar.style.display = isFullscreen ? 'none':'block'
					var fixedHeader = document.getElementById('fixedHeader')
					fixedHeader.style.display = isFullscreen ? 'none':'block'
					this.$store.commit("setting/toggleSidebar");
          			this.isFullSreen = isFullscreen
       		    },
      		})
      		this.isFullSreen = fullscreen.isFullscreen
   		},

	  	// 加载数据-[生产资源使用率]
	  	initPercentPie(vals){
			var elm = echarts.init(document.getElementById("percenter1"))
			var elm2 = echarts.init(document.getElementById("percenter2"))
			var elm3 = echarts.init(document.getElementById("percenter3"))
			var elm4 = echarts.init(document.getElementById("percenter4"))
			var elm5 = echarts.init(document.getElementById("percenter5"))
			var elm6 = echarts.init(document.getElementById("percenter6"))
			if(elm != null && elm !='' && elm != undefined){
				elm.dispose()
			}
			if(elm2 != null && elm2 !='' && elm2 != undefined){
				elm2.dispose()
			}
			if(elm3 != null && elm3 !='' && elm3 != undefined){
				elm3.dispose()
			}
			if(elm4 != null && elm4 !='' && elm4 != undefined){
				elm4.dispose()
			}
			if(elm5 != null && elm5 !='' && elm5 != undefined){
				elm5.dispose()
			}
			if(elm6 != null && elm6 !='' && elm6 != undefined){
				elm6.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);

				var option3 = {
			    value: vals == null ? randomFloor(49,69) : vals[2],	  //百分比,必填
			    name:'舱体产线运行时长',				//必填
			    name2:'舱体设备加工时长',			//必填
			    title:'',
			    backgroundColor: null,
			    color:['#6a5acd','#DDDDDD'],
			    fontSize:12,
			    domEle:document.getElementById("percenter3")//必填
				};
				percentPie(option3);

				var option4 = {
			    value: vals == null ? randomFloor(45,68) : vals[3],	  //百分比,必填
			    name:'保障中心设备数',				//必填
			    name2:'保障中心工作设备数',			//必填
			    title:'',
			    backgroundColor: null,
			    color:['#33FF33','#DDDDDD'],
			    fontSize:12,
			    domEle:document.getElementById("percenter4")//必填
				};
				percentPie(option4);

				var option5 = {
			    value: vals == null ? randomFloor(42,62) : vals[4],	  //百分比,必填
			    name:'框体产线设备数',				//必填
			    name2:'框体产线加工设备数',			//必填
			    title:'',
			    backgroundColor: null,
			    color:['#ee82ee','#DDDDDD'],
			    fontSize:12,
			    domEle:document.getElementById("percenter5")  //必填
				};
				percentPie(option5);

				var option6 = {
			    value: vals == null ? randomFloor(32,66) : vals[5],	  //百分比,必填
			    name:'舱体产线设备数',				//必填
			    name2:'舱体产线加工设备数',			//必填
			    title:'',
			    backgroundColor: null,
			    color:['#ffa500','#DDDDDD'],
			    fontSize:12,
			    domEle:document.getElementById("percenter6")  //必填
				};
				percentPie(option6);

	  	},

	  	// 是否设置大屏
	  	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), randomFloor(49,69)])
						this.orderDatas = data.data.zoneMap.zoneData
						this.runDatas = data.data.planMap.planData.records.slice(0,5)

						//合格率和工时时长信息更新
                        this.allDatas = [parseInt(data.data.orderStatistics.lastHour.rate), parseFloat(data.data.orderStatistics.tadayRate.rate)>0?parseFloat(data.data.orderStatistics.tadayRate.rate):100, parseFloat(data.data.orderStatistics.weekRate.rate)>0?parseFloat(data.data.orderStatistics.weekRate.rate):100]

						this.timeSpanList.validTimeSpanStatistics = data.data.validTimeSpanStatistics>0? data.data.validTimeSpanStatistics: 568
						this.timeSpanList.timeSpanStatistics = data.data.timeSpanStatistics
						this.timeSpanList.timeSpanStatistics["智能生产保障系统"] = this.timeSpanList.timeSpanStatistics["智能生产保障系统"]>0? this.timeSpanList.timeSpanStatistics["智能生产保障系统"]: 254
					    this.timeSpanList.timeSpanStatistics["框体类加工单元"] = this.timeSpanList.timeSpanStatistics["框体类加工单元"]>0? this.timeSpanList.timeSpanStatistics["框体类加工单元"]: 839
						this.timeSpend = this.timeSpanList.timeSpanStatistics["智能生产保障系统"]+this.timeSpanList.timeSpanStatistics["框体类加工单元"] + this.timeSpanList.timeSpanStatistics["舱体类加工单元"]


						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], true)
						 this.mashingTwoList = this.filterResource(data.data.groupMap.iconGroupList[1], false)
						 this.mashingThreeList = this.filterResource(data.data.groupMap.iconGroupList[2], false)

						 //计算设备利用率
						 //this.initPercentPie([parseInt(100 * this.mashingOneList.runData.length / this.mashingOneList.data.length),
						 // parseInt(100 * this.mashingTwoList.runData.length / this.mashingTwoList.data.length), parseInt(100 * this.mashingThreeList.runData.length / this.mashingThreeList.data.length)])
                         if(this.timeSpend>0){
						 	this.initPercentPie([parseInt(100* this.timeSpanList.timeSpanStatistics["智能生产保障系统"]/ this.timeSpend),
					     		parseInt(100 * this.timeSpanList.timeSpanStatistics["框体类加工单元"] / this.timeSpend), parseInt(100 * this.timeSpanList.timeSpanStatistics["舱体类加工单元"]  / this.timeSpend),
								parseInt(100 * this.mashingOneList.runData.length / this.mashingOneList.data.length),parseInt(100 * this.mashingTwoList.runData.length / this.mashingTwoList.data.length), parseInt(100 * this.mashingThreeList.runData.length / this.mashingThreeList.data.length)
				    		])
					      }else{
							this.initPercentPie([0,0,0,parseInt(100 * this.mashingOneList.runData.length / this.mashingOneList.data.length),parseInt(100 * this.mashingTwoList.runData.length / this.mashingTwoList.data.length), parseInt(100 * this.mashingThreeList.runData.length / this.mashingThreeList.data.length)
				    		])
						  }

						 let runLen = this.mashingOneList.runData.length + this.mashingTwoList.runData.length + this.mashingThreeList.runData.length;
						 this.mashingTwoList.data = this.mashingTwoList.data.concat(this.mashingThreeList.data).concat(this.mashingOneList.data)

						 //this.gaugeData = {value : parseFloat(runLen/this.mashingTwoList.data.length).toFixed(2), name:"效率"}
                         this.gaugeData = {value:randomFloor(60,75)/100, name:"效率"}
						 this.$refs.gauge.dispose()
						 this.$refs.gauge.initChart(this.gaugeData)

						 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 = ""
							if(data.taskNodeId){
                                itemname = "["+ data.resourceName +"] "+data.procedureName+"("+data.instructionName+")" + msg;
							}else{
                                //itemname = "[监控推送]" + msg;
								itemname = ""+ 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}
						 });
						 this.yujingList = []


					})
			    }
		  	  }
	  	},
	  	// 组件销毁的时候，关闭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, bool){
		   let arr = mashingList.data.filter((data) => {
			   return data.name.indexOf("接驳位") <0 && data.name.indexOf("托板") < 0 && data.name.indexOf("上下料站") < 0
			          && data.name.indexOf("线边库") <0 && data.name.indexOf("立库") <0 && data.name.indexOf("三坐标") && data.name.indexOf("打标机")
           });
		   mashingList.data = arr
		   if(bool){
			    mashingList.runData = arr.filter((data)=> { return data.todoTaskcount>0});
		   }else{
		   		mashingList.runData = arr.filter((data)=> { return data.productionStatusCN=="生产中"});
		   }
		   return mashingList
		},

	    // 【SUM50】点击-事件
	  	boxCardClk(flag){
	  		let paths = (flag=='simple')? "/largeScreen/modeSummary" : "/largeScreen/threeDatasModel";
				// 调用全局挂载的方法
				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'))
					this.toggle(playerMap)
	  			}
	  		})
	  	},
	  	// 退出全屏
	  	exitFullPing(){
	  		this.$nextTick(() => {
	  			// 显示【全屏】
	  			this.isFullSreen = false
	  			// 如果是全屏
	  			db.save("isCurrScreen", this.isFullSreen)
	  			//exitFullScreen(document.getElementById('playerMap'))
				this.toggle(this.$refs.playerMap)
	  		})
	  	},
	  	// 加载背景颜色
	  	setBackground(color){
	  		return "background: "+ color +";"
	  	},
	  	// 加载【本地图片】
	  	resolveLogo(logo) {
        return require(`@/assets/icon/${logo}`);
      },
	    // 获取列表数据
	    getTabList(){
	    	lineBoardAPI.getBigScreenList({}).then(res => {
	    		res = res.data
	    		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]
			}
	    },
		expireText(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;
	}
	.allTitle{
		margin-bottom: 10px;
		font-size: 14px;
	}
	.allFont{
		font-size: 22px;
		color: #00d8ff;
	}
	.modelStatus{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #13ce66;
		min-height: 40px;
		-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;
	}
	.timeTxt {
	  margin: 5px 0;
	  padding: 5px 0;
	}

</style>