wps/wps-ui/src/views/largeScreenPage/index.vue

<template>
  <div style="height:calc(100vh);width:100%;background: #000">
    <div class="page largeScreeanHomePage">
      <div class="timeBox">{{ time }}</div>
      <div class="topTiltle">
        <span class="title">风压管理平台</span>
        <!--        <img-->
        <!--          class="titleImg"-->
        <!--          referrerpolicy="no-referrer"-->
        <!--          src="../../assets/largeScreenImg/index/heilongjiangshengfengziyuangaikuang.png"-->
        <!--        />-->
      </div>
      <div class="btuGroup">
        <div class="topBtu topRightBtu" @click="push()">
          <span class="btuText">后台管理</span>
        </div>
      </div>
      <div class="myMain-container">
        <!--      环境检测仪  -->
        <div class="main-left">

          <div class="mainBg eqBox" v-for="item in eqData">
            <div class="subtitleDiv" @click="clickWeatherLook(item)">
              <span class="subtitle">{{ item.weatherLookName }}</span>
            </div>
            <div class="eqContainer">
              <div class="imgBox">
                <img src="../../../public/img/FXY.png"/>
              </div>
              <div class="contentBox">
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xinghao"></use>
                  </svg>
                  <span class="header-title">型号：</span> <span>{{ item.modelNumber }}</span>
                </div>
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jingweidu"></use>
                  </svg>
                  <span class="header-title">经纬度：</span> <span>{{ item.longitude }} , {{ item.latitude }}</span>
                </div>
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wendu"></use>
                  </svg>
                  <span class="header-title">温度：</span> {{item.t}} °
                </div>
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shidu-copy"></use>
                  </svg>
                  <span class="header-title">湿度：</span>  {{item.rh}} %rh
                </div>
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-YaQiang"></use>
                  </svg>
                  <span class="header-title">压强：</span> {{item.pa}} Pa
                </div>
              </div>
            </div>
          </div>

        </div>

        <!--      实时监控  -->
        <div class="main-right">
          <div class="mainBg rightBg">
            <div class="decoration">
              <dv-decoration-12 class="ddv12"/>
            </div>

            <div class="rightTitleBox">
              <div class="rightTitleBg rightTitleContent">
                <span>实时监控</span>
              </div>
            </div>
            <!--       右侧主体     -->
            <div class="right-main-container">
              <!--      主体上方        -->
              <div style="height: 40%">
                <div class="rightSubtitle">通道信息</div>
                <div class="tableDiv">
                  <el-table
                    :header-cell-style="{'background-color':'transparent',color:'#fff'}"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                      prop="tunnelName" align="center"
                      label="通道名称"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="address" align="center"
                      label="地址"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="status" align="center"
                      label="通道状态">
                      <template slot-scope="scope">
                        <svg class="icon" aria-hidden="true" v-if="scope.row.status === '1'">
                          <use xlink:href="#icon-zhengchang"></use>
                        </svg>
                        <svg class="icon" aria-hidden="true" v-else>
                          <use xlink:href="#icon-lianjieduankai"></use>
                        </svg>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <!--主体下方-->
              <div style="height: 60%">
                <div class="rightSubtitle">实时风速风向折线图</div>
                <div id="wswdChart"/>
              </div>

            </div>

          </div>
        </div>

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

</template>

<script>
import {list} from "@/api/biz/dataQuery/weatherLook";
import '../../assets/icons/iconfont'
import {selectHomePage,selectHomePageByPTR} from "@/api/biz/dataQuery/environmentalData";
import {homepageTunnelInfo} from "@/api/biz/dataQuery/tunnelInfo";
import {dateFormat} from "@/utils/dateTimeFormat";

export default {
  name: "index",
  data() {
    return {
      time: null,
      wsTime: null,
      tunnelTime:null,
      eqData: [],
      eqNo: '',
      eqName: '',
      //时间控件 当天的零点到23:59:59
      dataTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1000],
      timeList:[],
      // ptrData:{1001:{pa: 0, t: 28, rh: 66.5}}
      ptrData:[],
      tableData:[
        {tunnelName:'通道1',address:'192.168.10.226:505',status:'1'},
        {tunnelName:'通道1',address:'192.168.10.226:505',status:'1'},
        {tunnelName:'通道1',address:'192.168.10.226:505',status:'1'},
        {tunnelName:'通道1',address:'192.168.10.226:505',status:'0'},
      ],
      charts:null
    }
  },
  destroyed() {
    this.charts = null
    clearInterval(this.timer)
    this.timer = null
    clearInterval(this.wsTime)
    this.wsTime = null
    clearInterval(this.tunnelTime)
    this.tunnelTime = null
  },
  mounted() {
    this.getTimeArray()
    this.formatTime()
    this.timer = setInterval(this.formatTime, 1000 * 60)
    this.init()
  },
  methods: {
    init(){
      this.getWeatherLookInfo()
      this.wsTime = setInterval(this.getWeatherLookInfo, 1000 * 60 * 10)
      this.getTunnelInfo()
      this.tunnelTime = setInterval(this.getWeatherLookInfo, 1000 * 60 * 10)
    },
    getWeatherLookInfo() {
      selectHomePageByPTR().then(res => {
        // this.eqData = res.rows
        this.eqData = res.data
        this.eqNo = this.eqData[0].weatherLookNo
        this.eqName = this.eqData[0].weatherLookName
        this.getWindData()
      }).catch(err => {
        console.log('首页获取环境监测仪信息异常：' + err)
      })
    },
    getWindData() {
      selectHomePage({weatherLookNo: this.eqNo}).then(res => {
        let ws = res.data.wsList
        let wd = res.data.wdList
        this.draw(this.timeList, ws, wd, this.eqName)
      }).catch(err => {
        console.log('首页获取风数据异常：' + err)
      })
    },
    getTunnelInfo(){
      homepageTunnelInfo().then(res=>{
        this.tableData= res.data
      }).catch(err=>{
        console.log('获取通道信息异常：'+err)
      })
    },
    clickWeatherLook(value) {
      this.eqNo = value.weatherLookNo
      this.eqName = value.weatherLookName
      clearInterval(this.wsTime)
      this.getWindData()
      this.wsTime = setInterval(this.getWindData, 1000 * 60 * 10)
    },
    draw(time, ws, wd, name) {
      if(this.charts == null){
        this.charts = this.$echarts.init(document.getElementById('wswdChart'));
      }

      let option = {
        title: {
          text: name + '数据',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: 70,
          bottom: 70
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['风速', '风向'],
          textStyle: {
            color: '#fff'
          }
        },
        dataZoom: [
          {
            show: false,
            realtime: true,
          },
          {
            type: 'inside',
            realtime: true,
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: false, lineStyle: {color: '#fff'}},
            axisLabel: {color: '#fff'},
            data: time
          }],
        yAxis: [
          {
            name: '风速(m/s)',
            type: 'value',
            axisLabel: {color: '#fff'},
            axisLine: {show: true},
            nameTextStyle: {
              color: '#fff'
            }
          },
          {
            name: '风向(°)',
            alignTicks: true,
            axisLabel: {color: '#fff'},
            axisLine: {show: true},
            nameTextStyle: {
              color: '#fff'
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '风速',
            type: 'line',
            data: ws
          },
          {
            name: '风向',
            type: 'line',
            yAxisIndex: 1,
            data: wd
          }
        ]
      };
      option && this.charts.setOption(option,true);
    },
    push() {
      this.$router.push({path: "/dataQuery/weatherStationInfo"})
    },
    /*时间格式化*/
    formatTime() {
      this.time = ''
      let date = new Date()
      let year = date.getFullYear();                // 年
      let month = date.getMonth() + 1;        // 月
      let day = date.getDate();
      let hour = date.getHours();                   // 获取当前小时数(0-23)
      let minutes = date.getMinutes();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      if (minutes < 10) minutes = "0" + minutes;
      this.time = year + "-" + month + "-" + day + " " + hour + ' : ' + minutes;
    },
    /*获取当天每十分钟一个点的时间集合*/
    getTimeArray(){
      let timeList = []
      for(let i = this.dataTime[0];i<=this.dataTime[1];i+=60*1000*10){
        timeList.push(dateFormat(new Date(i)))
      }
      this.timeList = timeList
    }
  }
}
</script>

<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.largeScreeanHomePage {
  width: 100%;
  height: calc(100vh);
  background: url(../../../public/img/bg.png) -3px -1px no-repeat;
  background-size: 100% 100%;
  color: white;
}

.topTiltle {
  width: 100%;
  height: 5.5%;
  background: url(../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.title {
  width: 17%;
  height: 100%;
  text-align: center;
  margin-top: .2%;
  font-size: 30px;
  font-weight: 800;
  background-image: linear-gradient(
    360deg,
    rgba(178, 204, 252, 1) 0,
    rgba(178, 204, 252, 1) 0,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.timeBox {
  position: absolute;
  left: 2%;
  top: 0;
  font-size: 20px;
  line-height: 40px;
  font-family: timeFont !important;
}

.page {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  box-shadow: inset 0px -20px 550px 200px rgb(50, 93, 246, 0.1);
}

.btuGroup {
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  width: 10%;
  height: 5.5%;
  display: flex;
  font-size: 18px;
}

.topBtu {
  height: 100%;
  margin-top: -1.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.topRightBtu {
  background: url(../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

/**/
.myMain-container {
  margin-top: .5%;
  width: 100%;
  height: calc(93vh);
  display: flex;
  justify-content: space-around;
}

.main-left {
  width: 66%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: stretch;
}

.main-right {
  width: 33%;
}

.mainBg {
  background: url(../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
  background-size: 100% 110%;
  padding: 1%;
}

.rightTitleBg {
  height: 40px;
  width: 150px;
  background: url(../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
  background-size: 100% 110%;
  padding: 1%;

}

.rightTitleContent {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.eqBox {
  width: 49%;
  height: 49%;
}

.rightBg {
  height: 99%;
  width: 98.5%;
}

.subtitleDiv {
  background: url(../../assets/largeScreenImg/resourcesInfo/rightTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 1%;
}

.subtitle {
  position: relative;
  left: 8%;
  font-size: 20px;
  line-height: 20px;
}

.eqContainer {
  width: 100%;
  height: 90%;
  display: flex;
  justify-content: space-around;
}

.imgBox {
  width: 40%;
  height: 90%;
  display: grid;
  place-items: center;
}

.contentBox {
  width: 60%;
  height: 70%;
  font-size: 18px;
  position: relative;
  top: 10%;
  display: grid;
}

.contentBox div {
  line-height: 30px;
  display: flex;
  align-items: center;
}

.header-title {
  margin-left: 3%;
  width: 80px;
}

.decoration {
  height: 80px;
  width: 100px;
  overflow: hidden;
  position: fixed;
  right: 1%;
}

.ddv12 {
  width: 150px;
  height: 150px;
  position: relative;
  top: -40%;
  left: -20%;
}

.right-main-container {
  display: flex;
  flex-direction: column;
  height: 95%;
  justify-content: space-between;
}

.rightSubtitle {
  margin: 2% 1%;
  width: 40%;
  background: url(../../assets/largeScreenImg/zaiyunAndqianqi/branckTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 1%;
}

#wswdChart {
  width: 100%;
  height: calc(50vh);
}

.tableDiv /deep/  .el-table, .el-table__expanded-cell {
  background-color: transparent;
}

.tableDiv /deep/ .el-table tr {
  background-color: transparent!important;
}
.tableDiv /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
  color: #fff;
  background-color: transparent;
}
.tableDiv /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent;
}
.tableDiv /deep/.el-table--medium .el-table__cell {
  padding: 9px 0;
}
</style>