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

<template>
  <div class="wrap">
    <div v-if="!showVideo">
      <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" style="position:relative">
            <iframe
              class="fill-width fill-height"
              src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"
            ></iframe>
            <!-- 地图 -->
            <shanxi-map class="sxmap" />
            <!-- 视频 -->
            <!-- <div class="s-pic">
              <img @click="showVideo = true" class="fill-width fill-height" src="~assets/aaa.png" />
            </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>
    <div v-else>
      <img class="fill-width fill-height" src="~assets/aaa.png" />
    </div>
  </div>
</template>

<script>
import socketMixin from '@/mixins/socket';
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 ShanxiMap from 'components/Map/Map.vue';

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

  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>
iframe {
  border: none !important;
}

.sxmap {
  position: absolute;
  top: -4rem;
  right: -2rem;
  z-index: 9;
  width: 19rem;
  height: 25rem;
}

.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>