dvcp_v2_webapp/components/layout/AiDvWrapper/AiDvWrapper.vue

<template>
  <section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
    <dv-full-screen-container>
      <div class="viewPanel column" flex>
        <component :is="headerComponent" v-bind="{...$props,...$data}"
                   @fullscreen="handleFullScreen" @setting="e=>dialog=e" @change="e=>$emit('change',e)"/>
        <div class="fill">
          <slot/>
        </div>
      </div>
    </dv-full-screen-container>
    <ai-dialog :visible.sync="dialog" title="设置" @onConfirm="handleSetting" width="500px" class="settingDialog">
      <el-form size="mini">
        <el-form-item label="轮播频次">
          <el-input-number v-model="setting.splitViewTime" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {fullScreenContainer} from '@jiaminghi/data-view'
import AiSprite from "../../AiSprite";
import Classic from "./layout/classic";
import Vue from "vue"
import Primary from "./layout/primary";

export default {
  name: "AiDvWrapper",
  components: {Primary, Classic, AiSprite},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    title: {default: "数字乡村数据大屏"},
    views: {
      default: () => []
    },
    theme: {
      default: '0',
      type: String
    },
    value: {default: ''},
    /**
     * 布局方案:black,classic
     */
    type: {default: "black"}
  },
  computed: {
    active: {
      set(v) {
        this.$emit('change', v)
      },
      get() {
        return this.value || this.views?.[0]?.id
      }
    },
    headerComponent: v => ({
      classic: Classic,
      black: Primary
    }[v.type])
  },
  watch: {
    title: {
      immediate: true,
      handler(v) {
        v && (document.title = v)
      }
    }
  },
  data() {
    return {
      currentTime: '',
      fullscreen: false,
      dialog: false,
      setting: {splitViewTime: 0}
    }
  },
  methods: {
    handleFullScreen() {
      this.fullscreen = !this.fullscreen
      if (this.fullscreen) {
        let el = document.documentElement;
        let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
            el.mozRequestFullScreen || el.msRequestFullScreen;
        rfs.call(el)
      } else {
        let el = document;
        let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
            el.mozCancelFullScreen || el.exitFullScreen;
        cfs.call(el)
      }
    },
    handleSetting() {
      if (this.setting.timer) clearInterval(this.setting.timer)
      let count = 0
      if (this.setting?.splitViewTime > 0) {
        this.setting.timer = setInterval(() => {
          if (this.views.length > 0) {
            count++
            this.active = this.views?.[count % this.views.length]?.id
          }
        }, this.setting.splitViewTime * 1000)
      }

      this.dialog = false
    }
  },
  created() {
    setInterval(() => {
      this.currentTime = this.$moment().format("YYYY/MM/DD HH:mm:ss")
    }, 1000)
    Vue.use(fullScreenContainer)
  },
}
</script>

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

.AiDvWrapper {
  .viewPanel {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/background.png");
    padding: 0 0 20px;
    box-sizing: border-box;

    & > .fill {
      width: 100%;
      padding: 0 40px;
      box-sizing: border-box;
    }
  }

  :deep(.settingDialog ) {
    .ai-dialog {
      background: #1D2127;
      box-shadow: 0 0 4px 0 #206EFF;
      border: 1px solid #4283FF;
      color: #fff;

      .el-dialog__header {
        border-radius: 0;
        box-shadow: none;
        line-height: 28px;
        font-size: 20px;
        font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
        text-shadow: 0 0 8px #1365FF;
        background: linear-gradient(270deg, #F0F4FF 0%, #FFFFFF 51%, #F0F4FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .ai-dialog__header {
          border-bottom: none;
        }
      }

      .el-dialog__footer {
        background: inherit;
      }
    }

    .el-form {
      .el-form-item__label {
        color: #fff;
      }

      .el-input:after {
        position: absolute;
        display: block;
        right: 32px;
        top: 50%;
        content: "秒";
        transform: translateY(-50%);
        font-size: 12px;
      }

      .el-input__inner {
        background: #262C33;
        border: 1px solid #030411;
        border-radius: 0;
        color: #fff;
        text-align: start;
        position: relative;

      }

      .el-input-number__decrease, .el-input-number__increase {
        border-color: #030411;
        background: #262C33;
        color: #fff;
      }
    }
  }

  :deep(&.AiDvWrapper1) {
    .headerBottomBorder {
      display: none;
      background-image: none;

      &::before {
        display: none;
      }
    }

    .headerPane {
      align-items: initial;
      z-index: 11;
      padding-bottom: 32px;
      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/dj-title.svg");
      background-repeat: no-repeat;
      // background-size: 100% 88px;
      background-position-x: -8px;
    }

    .breatheLights {
      display: none !important;
    }

    .headerPane .headerCenter {
      height: 100%;
      line-height: 1;
      background-image: none;

      &::before {
        display: none;
      }

      .headerZone {
        height: 88px;
        background-image: none;

        span {
          top: 45%;
          font-size: 32px;
          font-family: FZZZHONGJW--GB1-0, FZZZHONGJW--GB1;
          color: #CEE1FF;
          font-weight: 600;
          line-height: 38px;
          letter-spacing: 2px;
          text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
          background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .fly {
        display: none;
      }
    }

    .rightTopBorder {
      background: none;
      box-shadow: none;

      :deep( .corner ) {
        display: none !important;
      }
    }

    .time {
      font-size: 20px;
      font-weight: 400;
      color: #FF9A02;
      line-height: 22px;
      text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
      background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .setting {
      cursor: pointer;
      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/setting.svg") !important;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .fullscreen {
      cursor: pointer;
      background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/img/fullscreen.svg") !important;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
</style>