station-test-ui/src/views/screen/preview_v1.vue

<template>
<div id="body">
  <div id="index">
    <!--顶部标题-->
    <el-row class="head-title">
      <el-col :span="1">
        <div class="grid-content title_r"></div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content title_l">
         <img class="icon_shdq"  src="../../assets/screen/icon_shdq.png">
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content title">工服鲁班® 智能装备管理平台</div>
      </el-col>
      <el-col :span="7">
        <!-- <div class="grid-content title_r">
          <img class="icon_lb"  src="../../assets/screen/icon_lb.png">
        </div> -->
      </el-col>
      <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row class="time-box-row">

      <!--时间日期栏-->
      <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
       <el-col :span="22">
        <div class="grid-content">       
          <span class="time-box fl time-box-left">
            <!-- <i class="el-icon-time" style="color:#3fd5f1;"></i>&nbsp; <span>{{date}}</span> -->
            </span>
        
          <span class="time-box fr time-box-right" ><i class="el-icon-time" style="color:#3fd5f1;"></i>&nbsp; {{date}}&nbsp;&nbsp;&nbsp;&nbsp;{{nowWeek}}</span></div>
      </el-col>
       <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
       
         

       
   

    </el-row>
    <el-row>
      <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="6">
        <!--服务螺栓 左上-->
        <div class="grid-content left-chart">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <div class="left-chart1-box">
            <div class="left-chart1-box-contnet">
              <el-date-picker
                v-model="value3"
                type="year"
                popper-class="select-box"
                placeholder="选择年">
              </el-date-picker>
            </div>
            <div class="left-chart1-box-contnet">服务螺栓:<i class="box-number">501</i>根</div>
            <div class="left-chart1-box-contnet">服务风机:<i class="box-number">1545</i>台</div>
            <div class="left-chart1-box-contnet">服务风场:<i class="box-number">501</i>个</div>
            <div class="left-chart1-box-contnet"></div>

          </div>
          <div class="left-chart1-box">
            <base-bar :options="barOptions" width="100%" height="100%" theme="shine" />
          </div>
            
        </div>
        <!--服务螺栓 左中-->
        <div class="grid-content left-chart">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <base-pie :options="pieOptions" width="100%" theme="shine" />
          
        </div>
         <!--作业动态 左下-->
        <div class="grid-content left-chart">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <table width="100%" border=0 class="task-table" style="border-collapse:collapse;border:none;">
            <tr>
                <th colspan="5" class="task-header">作业动态</th>
            </tr>
            <tr align="center">
                <th></th>
                <th>风场名称</th>
                <th>机位号</th>
                <th>工作位置</th>
                <th>操作人</th>
            </tr>
            <tr align="center" v-for="(item,index) in workData" :key="index">
              <td><span class="table-index">{{index+1}}</span></td>
              <td>测试风场1</td>
              <td>A0001B</td>
              <td>固定轴—机座</td>
              <td>员工1</td>
            </tr>
          </table>
        </div>

      </el-col>
      <el-col :span="10">
       
          <!--中间地图-->
       
              <!-- <baidu-map class="center-map" :center="center" :zoom="zoom" @ready="mapInit">
                
                <bml-marker-clusterer :averageCenter="true">
                  <bm-marker v-for="(marker,index) of windMarkers" :key="index+200" :position="{lng: marker.lng, lat: marker.lat}" :icon="{url: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/wind_32.png', size: {width: 32, height: 32}}"></bm-marker>
                </bml-marker-clusterer>
              </baidu-map> -->
          
          <div class="grid-content center-map">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <!--地图右下统计-->
            <div class="map-center-top">设备总数：<i class="box-number">999</i>件</div>
            <div class="map-right-bottom">
              <div class="center-alarm-label1" style="font-family:bold;margin-bottom:3px;padding-top:2px;">
                <div class="alarm-label-title">区域</div>
                <div class="alarm-label-value " >设备</div>
              </div>
              <div class="center-alarm-label">
                <div class="alarm-label-title">华北大区</div>
                <div class="alarm-label-value normal-value" >21</div>
              </div>
              <div class="center-alarm-label1">
                <div class="alarm-label-title">东北大区</div>
                <div class="alarm-label-value normal-value">24</div>
              </div>
              <div class="center-alarm-label">
                <div class="alarm-label-title">西北大区</div>
                <div class="alarm-label-value normal-value">24</div>
              </div>
              <div class="center-alarm-label1">
                <div class="alarm-label-title">南部大区</div>
                <div class="alarm-label-value normal-value">32</div>
              </div>
              <div class="center-alarm-label">
                <div class="alarm-label-title">中部大区</div>
                <div class="alarm-label-value normal-value">321</div>
              </div>
              <div class="center-alarm-label1">
                <div class="alarm-label-title">内蒙大区</div>
                <div class="alarm-label-value normal-value">14</div>
              </div>
              <div class="center-alarm-label">
                <div class="alarm-label-title">江苏大区</div>
                <div class="alarm-label-value normal-value">234</div>
              </div>
            </div>
             <div class="map-left-bottom">
               <div class="map-left-bottom-head">设备状态颜色</div>
               <div>  <span class="map-left-bottom-title">当天使用</span> <span class="map-left-bottom-color0"></span></div>
               <div> <span class="map-left-bottom-title">3天内使用</span> <span class="map-left-bottom-color1"></span></div>
               <div> <span class="map-left-bottom-title">静止状态</span> <span class="map-left-bottom-color2"></span></div>
            </div>
             <base-map width="100%"   :options="mapOptions" />
          </div>
           
      

          <div class="grid-content center-bottom">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <!--地图下方频繁告警区域统计-->
            <div class="center-bottom-left">
              <base-bar :options="barPlanOptions" width="100%" height="100%" theme="shine" />
            </div>
            <div class="center-bottom-right">
                <div class="center-bottom-right-box">
                   <base-pie :options="pieCenterOptions" width="100%" theme="shine" />
                </div>
                <div class="center-bottom-right-box">
                    <base-pie :options="pieStateOptions" width="100%" theme="shine" />
                </div>
                 
            </div>
            
          </div>
       
      </el-col>
      <el-col :span="6">
        <!--右边月告警曲线图-->
        <div class="grid-content right-chart">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          
          <div class="right-chart-right-box">
              <base-line :options="lineOptions" width="100%" theme="shine" />
          </div>
          <div class="right-chart-left-box">
               <base-pie :options="pieRightOptions" width="100%" theme="shine" />
          </div>
          <!-- <base-line :options="lineOptions" width="100%" theme="shine" /> -->
        </div>  

        <div class="grid-content right-chart2">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <!-- <base-pie :options="pieFaultOptions" width="100%" theme="shine" /> -->
          <div class="grid-content alarm-title">装备自检</div>
          <scroll :alarmData="alarmData" />
        </div>

        <!-- <div class="grid-content right-chart">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <base-pie :options="pieDeviceOptions" width="100%" theme="shine" />
        </div> -->
      </el-col>
      <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
     <div class="back-btn" @click="fullscreen"> <i class="el-icon-full-screen"></i> <br/> <a>{{screen_title}}</a></div>
  </div>
  </div>
 
</template>

<script>
import BasePie from "./Charts/BasePieChart";
import BaseBar from "@/components/Charts/BaseBarChart";
import BaseLine from "@/components/Charts/BaseLineChart";
import BaseMap from "@/components/Charts/BaseMapChart";
import scroll from "./scroll";
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
  name: "screen_screen",
  components: {
    BasePie,
    BaseBar,
    BaseLine,
    BaseMap,
    scroll,
    BmlMarkerClusterer
  },
  props:['date','nowWeek','workData','deviceStatusData','pieCenterOptions','pieOptions','pieRightOptions','alarmData','pieStateOptions','pieFaultOptions','pieDeviceOptions','barPlanOptions','barOptions','lineOptions','mapOptions'],
  data() {
    
    return {
      center:'中国',
      zoom:5,
      markers:[],
      isFullFlag:false,
      screen_title:'全屏',
      windMarkers:[],
      value3: new Date(new Date().toLocaleDateString()),
    }
  },
   methods: {
    //  mapInit({ BMap, map }) {
    //   this.map = map;
    //   // 初始化地图,设置中心点坐标
    //   this.map.setMapStyle({style:'dark'});
    //   map.enableScrollWheelZoom();
      

    //     for (let i = 0; i < 200; i++) {
    //       const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
    //       this.windMarkers.push(position)
    //     }
      
    // },
    fullscreen(){  
      this.isFullFlag =!this.isFullFlag
      if(this.isFullFlag){
        this.screen_title='退出'
        var el =document.getElementById('content');
        var rfs = el.requestFullScreen || 
            el.webkitRequestFullScreen || 
            el.mozRequestFullScreen || 
            el.msRequestFullScreen,
                wscript
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
            return;
        }
        if (typeof window.ActiveXObject != "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if (wscript) {
                wscript.SendKeys("{F11}");
            }
        }
			}else{
         this.screen_title='全屏'
				document.exitFullscreen();
			}
      
    },


   }
};
</script>

<style lang="scss" scoped>
@import "./index_v1.scss";
</style>