salt-lake-hospital/src/views/Index/Index.vue

<template>
  <div class="wrap">
    <div class="bg-left">
      <img class="pic" src="~assets/bg-left.png" />
    </div>
    <div class="bg-top">
      <img class="pic" src="~assets/bg-top.png" />
      <div class="animation">
        <!-- <video src="~assets/top-video.webm"></video> -->
        <video
          autoplay
          height="162"
          loop
          src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
          style="width: 100%; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%)"
        ></video>
      </div>
      <span class="bg-title">盐湖区人民医院数据看板</span>
    </div>
    <div class="bg-right">
      <img class="pic" src="~assets/bg-right.png" />
    </div>
    <div class="bg-bottom">
      <img class="pic" src="~assets/bg-bottom.png" />
    </div>
    <div class="time">{{ nowTime }}</div>
    <!--内容区-->
    <div class="content d-flex flex-column">
      <!-- 第一行 -->
      <div class="flex-2 flex-row">
        <div class="flex-1 ma-2">
          <div class="d-flex flex-column flex-1">
            <div class="d-flex flex-column flex-1">
              <div class="box-top">
                <span>急救数量统计</span>
              </div>
              <div class="flex-1 fill-width box-bottom">
                <statistics class="flex-1" />
              </div>
            </div>
            <div style="width: 100%; height: 6%"></div>
            <div class="d-flex flex-column flex-1">
              <div class="box-top">
                <span>急救时长分析</span>
              </div>
              <div class="flex-1 fill-width box-bottom">
                <duration class="flex-1" />
              </div>
            </div>
          </div>
        </div>
        <div class="flex-2 ma-2">
          <!-- <iframe src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"></iframe> -->
          <div class="bg s-pic"></div>
        </div>
        <div class="flex-1 ma-2">
          <div class="d-flex flex-column flex-1">
            <div class="d-flex flex-column flex-1">
              <div class="box-top">
                <span>振动传感器</span>
              </div>
              <div class="flex-1 fill-width box-bottom">
                <sensor class="flex-1" />
              </div>
            </div>
            <div style="width: 100%; height: 6%"></div>
            <div class="d-flex flex-column flex-1">
              <div class="box-top">
                <span>称重传感器</span>
              </div>
              <div class="flex-1 fill-width box-bottom">
                <div class="flex-1">
                  <load-cells />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第三行 -->
      <div style="width: 100%; height: 2%"></div>
      <div class="flex-1 flex-row">
        <div class="flex-1 ma-2">
          <div class="d-flex flex-column flex-1">
            <div class="box-top">
              <span>FAST ED结果</span>
            </div>
            <div class="flex-1 fill-width box-bottom">
              <fast-ed class="flex-1" />
            </div>
          </div>
        </div>
        <!-- 第二列 -->
        <div class="flex-2 ma-2">
          <div class="d-flex flex-column flex-1">
            <div class="box-top">
              <span>智慧平车面板数据</span>
            </div>
            <div class="flex-1 fill-width box-bottom">
              <panel class="flex-1" />
            </div>
          </div>
        </div>
        <!-- 第三列 -->
        <div class="flex-1 ma-2">
          <div class="d-flex flex-column flex-1">
            <div class="box-top">
              <span>RFID</span>
            </div>
            <div class="flex-1 fill-width box-bottom">
              <r-f-i-d />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Statistics from 'components/Statistics/Statistics.vue';
import Duration from 'components/Duration/Duration.vue';
import Sensor from 'components/Sensor/Sensor.vue';
import LoadCells from 'components/LoadCells/LoadCells.vue';
import RFID from 'components/RFID/RFID.vue';
import FastEd from 'components/FastEd/FastEd.vue';
import Panel from 'components/Panel/Panel.vue';
import socketMixin from '@/mixins/socket';

export default {
  name: 'Index',
  components: { Statistics, Duration, Sensor, LoadCells, RFID, FastEd, Panel },
  mixins: [socketMixin],
  data() {
    return {
      nowTime: new Date(),
      str: '',
    };
  },

  mounted() {
    this.nowTimes();
  },
  methods: {
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let data = new Date(timeStamp);
      let year = data.getFullYear();
      let month = data.getMonth() + 1 < 10 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1;
      let date = data.getDate() < 10 ? '0' + data.getDate() : data.getDate();
      let hh = data.getHours() < 10 ? '0' + data.getHours() : data.getHours();
      let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes();
      let ss = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds();
      this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },

    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
  },
};
</script>

<style lang="stylus" scoped>
.time {
  position: absolute;
  top: 2.5rem;
  left: 8rem;
  font-family: SourceHanSansCN-Medium;
  font-size: 1.5rem;
  color: #fff;
  text-align: left;
  transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
}

@media (max-width: 1500px) {
  .time {
    top: 2rem;
    left: 6rem;
    font-size: 1rem;
  }
}
</style>