yvan-window/src/component/Container/Desktop/FixWindow/Copy/index.vue

<template>
    <!-- 备份 -->
    <div
    :style="{ height: height + 'px' }"
    :class="cls" :data-id="copyDetail.id">
        <div class="v-widget-item-header"><img
                :src="copyDetail.titleImgUrl"
                class="v-widget-item-header-icon">
            <div class="v-widget-item-header-title"><span
                    class="v-widget-item-header-title-text">
                    {{copyDetail.title}}
                </span></div>
            <div class="v-widget-item-header-tools">
        <div
          class="v-widget-item-header-tool-icon minimize"
          @click="minWidgetItem"
          v-if="maxHeight"
        ></div>
        <div
          class="v-widget-item-header-tool-icon maximize"
          @click="maxWidgetItem"
          v-else
        ></div>
        <div class="v-widget-item-header-tool-icon close" @click="closeWidgetItem(copyDetail.title)"></div>
      </div>
        </div>
        <div class="v-widget-item-content">
            <div class=" x-panel sds-widget-gridpanel syno-sds-backupapp-widget-panel x-panel-noborder x-grid-panel"
                style="width: 318px;">
                <div class="x-panel-bwrap">
                    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
                        style="width: 318px; height: 168px;">
                        <div class="x-grid3" hidefocus="true"
                            style="width: 318px; height: 168px;">
                            <div class="x-grid3-viewport">
                                
                                <div class="x-grid3-scroller"
                                    style="overflow: hidden; width: 318px; height: 168px;">
                                    <div class="x-grid3-body" style="width:290px;">
                                        <div class="x-grid3-row  x-grid3-row-first"
                                            style="width:290px;" v-for="detailMessageList in copyDetail.detailMessageList" :key="detailMessageList.id">
                                            <table class="x-grid3-row-table"
                                                border="0" cellspacing="0"
                                                cellpadding="0"
                                                style="width:290px;">
                                                <tbody>
                                                    <tr>
                                                        <td class="x-grid3-col x-grid3-cell x-grid3-td-bkpstatus x-grid3-cell-first x-grid3-cell-first-visible x-grid3-cell-last-visible "
                                                            style="width: 288px;"
                                                            tabindex="0">
                                                            <div
                                                                class="x-grid3-cell-inner x-grid3-col-bkpstatus x-unselectable">
                                                                <div
                                                                    class="syno-sds-backupapp-scedule-enable">
                                                                    <div
                                                                        class="syno-sds-backupapp-scedule-icon" :class="detailMessageList.cls">
                                                                    </div>
                                                                    <div
                                                                        class="syno-sds-backupapp-scedule-content">
                                                                        <div
                                                                            class="syno-sds-backupapp-scedule-title-bar">
                                                                            <div
                                                                                class="syno-sds-backupapp-scedule-title">
                                                                                {{detailMessageList.title}}
                                                                            </div>
                                                                            <div
                                                                                class="syno-sds-backupapp-scedule-time">
                                                                                {{detailMessageList.text}}
                                                                            </div>
                                                                        </div>
                                                                        <div
                                                                            class="">
                                                                            <div
                                                                                class="syno-sds-backupapp-scedule-task">
                                                                               {{detailMessageList.text}}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div><a href="#" class="x-grid3-focus"
                                        tabindex="-1"
                                        style="left: 0px; top: 0px;"></a>
                                </div>
                                <div class="arrow-scroller">
                                    <div class="up arrow-disabled">
                                        <div class="arrow-up"></div>
                                    </div>
                                    <div class="down arrow-disabled">
                                        <div class="arrow-down"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="x-grid3-resize-marker">
                                &nbsp;</div>
                            <div class="x-grid3-resize-proxy">&nbsp;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  mounted() {
    this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
  },
  data() {
    return {
      height: 208,
      cls: "v-widget-item sds-window-v5 syno-sds-widget-item",
      maxHeight: true,
        copyDetail:{
            id: 7,
            title: '备份',
            titleImgUrl: '../../../../../public/image/index/fileCopy.png',
            detailMessageList: [
                {
                    id: 10,
                    title: '备份结果',
                    text: '--：--：--',
                    task:  ` 任务名称: 无任何备份结果`,
                    cls: 'no-result',
                },
                {
                    id: 11,
                    title: '备份计划管理',
                    text: '--：--：--',
                    task: `任务名称: 没有计划备份`,
                    cls: 'schedule-inactive',
                }
            ]
        }
    }
  },
  methods: {
    // 高度变小
    minWidgetItem() {
      this.height = 122;
      this.maxHeight = false;
    },
    // 恢复高度
    maxWidgetItem() {
      this.height = 208;
      this.maxHeight = true;
    },
    // 关闭widgetItem
    closeWidgetItem(title) {
      this.cls = "v-widget-item sds-window-v5 syno-sds-widget-item";
      this.$bus.emit("closeWidgetItem", title);
      let widgetItemArray = document.querySelectorAll(
        ".v-widget-window .v-widget-item.active"
      );      
      this.$bus.emit("changeThumbHeight", widgetItemArray.length - 1);
    },
    // 显示或隐藏本页面
    showOrHiddenWidgetItem(obj) {
      if (obj.title === this.copyDetail.title) {
        this.cls = obj.cls;
        this.height = 208
      }
    },
  },
  components:{
  },
  name:'Copy',
  

}
</script>