thing_web/src/views/dashboard/index.vue

<template>
  <div class="dashboard-preview-index" v-if="$route.fullPath.indexOf('dashboard/index') >= 0 || $route.fullPath.indexOf('home') >= 0">
    <template v-if="dataList && dataList.length">
      <preview :visible="visible" :data-list="dataList" v-if="!visible" ref="previewRef" :layout-index="currentLayoutIndex" @change-view="changeView" :params="params" :full-path="getFullPath" />

      <design-preview-dialog v-else :visible="visible" :data-list="dataList" @change-view="changeView" ref="previewDialogRef" :params="params" :full-path="getFullPath" />

      <!--      <el-popover placement="top-start" trigger="hover" :content="`布局方式：${getLayoutString}`">
      <el-popover placement="top-start" trigger="hover" content="恢复默认布局">
        <template #reference>
          <el-button color="#fff" circle class="action-button switch" @click="changeLayout">
            <svg-icon name="swap"></svg-icon>
          </el-button>
        </template>
      </el-popover>

      <el-button color="#fff" circle class="action-button fullscreen" @click="visible = true">
        <svg-icon name="fullscreen2"></svg-icon>
      </el-button>-->
    </template>

    <el-empty description="暂无数据" class="empty" v-else />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, reactive, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
import useView from "@/hooks/useView";

import Preview from "./comp/preview.vue";
import SvgIcon from "@/components/base/svg-icon";
import DesignPreviewDialog from "./design-preview-dialog.vue";
import utilService from "../../service/utilService";
import { IObject } from "@/types/interface";

//import { useStore } from "vuex";

export default defineComponent({
  components: { Preview, DesignPreviewDialog },
  setup() {
    //const store = useStore();
    const route = useRoute();
    const state = reactive({
      getDataListURL: "dashboard/iotdashboard/list",
      visible: false,
      previewRef: null,
      params: {},
      previewDialogRef: null,
      currentLayoutIndex: 2,
      layoutMethods: ["默认", "拉伸", "保持宽高比"],
      dataForm: {
        dashboardGroupId: route.query?.id
      }
    }) as IObject;

    const doStuff = (newVal: Array<IObject>) => {
      nextTick(() => {
        if (utilService.isValidArray(newVal)) {
          console.log("init");
          state.previewRef.init(newVal);
        }
      });
    };

    watch(
      () => state.dataList,
      (newVal: Array<IObject>) => {
        doStuff(newVal);
      }
    );

    watch(
      () => state.visible,
      (newVal: boolean) => {
        !newVal && doStuff(state.dataList);
      }
    );

    const getFullPath = computed(() => route.fullPath);

    const switchFullScreen = () => {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    };
    const changeView = () => {
      if (state.visible) {
        if (state.dataList && state.dataList.length === 1 && utilService.isValidObject(state.previewDialogRef?.previewRef)) {
          const data = state.previewDialogRef.previewRef.bannerData;
          const index = state.previewDialogRef.previewRef.index;
          state.params = data[index] && data[index].dragStretch && data[index].dragStretch.params ? data[index].dragStretch.params : {};
        }
      } else {
        if (state.dataList && state.dataList.length === 1 && utilService.isValidObject(state.previewRef)) {
          const data = state.previewRef.bannerData;
          const index = state.previewRef.index;
          state.params = data[index] && data[index].dragStretch && data[index].dragStretch.params ? data[index].dragStretch.params : {};
        }
      }

      state.visible = !state.visible;

      switchFullScreen();
    };

    const getLayoutString = computed(() => {
      return state.layoutMethods[state.currentLayoutIndex];
    });

    const changeLayout = () => {
      if (state.currentLayoutIndex >= state.layoutMethods.length - 1) {
        state.currentLayoutIndex = 0;
        return;
      }

      state.currentLayoutIndex++;
    };

    return {
      changeView,
      changeLayout,
      getLayoutString,
      getFullPath,
      ...toRefs(useView(state)),
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="less">
.dashboard-preview-index {
  position: relative;
  height: 100%;

  .empty {
    height: 100%;
  }
}
</style>