mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/index.vue

<template>
  <div class="app-container home">
    <!-- <el-row :gutter="20"></el-row>
    <el-row :gutter="20"></el-row>
    <el-divider/>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <button @click="upload.open = true">上传文件</button>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8"></el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion> 123123</el-collapse>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body"></div>
        </el-card>
      </el-col>
    </el-row> -->
    <div class="info-content">
      <div class="header" @click="toPersonalCenter">
        <img :src="avatar" class="user-avatar" />
      </div>
      <div class="name">{{ nickName }}</div>
      <div class="tenant-name">{{ tenantName }}</div>
      <div class="date">{{ date }}</div>
      <!-- <div class="title">欢迎登录Mec OS 工业应用操作系统</div> -->
      <div class="title mt20">欢迎登录{{ title }}</div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils";
import { getToken } from "@/utils/auth";
import { mapGetters, mapState } from "vuex";

export default {
  name: "Index",
  data() {
    return {
      title: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API3 + "common/importDataInfo",
      },
      // 版本号
      version: "3.8.5",
    };
  },
  methods: {
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    goTarget(href) {
      window.open(href, "_blank");
    },

    toPersonalCenter() {
      this.$router.push("/user/profile");
    },
  },
  computed: {
    ...mapState({
      username: (state) => state.user.name,
      owner: (state) => state.user?.tenant.owner,
      tenantName: (state) => state.user?.tenant.tenantName,
      nickName: (state) => state.user?.nickName,
    }),

    ...mapGetters(["avatar"]),
    date: () => {
      return formatDate(new Date());
    },
  },
  mounted() {
    // this.title = window.sessionStorage.getItem("title") || "智能制造平台";
    this.title = window.sessionStorage.getItem("title") || "生产协同管理系统";
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  // height: 500px;
  min-height: calc(100vh - 140px);
  .info-content {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
      white-space: nowrap;
      margin-bottom: 5px;
      cursor: pointer;
      .user-avatar {
        width: 160px;
        border-radius: 50%;
      }
    }
    .name {
      font-size: 30px;
      margin-bottom: 5px;
    }
    .tenant-name {
      font-size: 20px;
    }
    .date {
      margin-bottom: 10px;
    }
    .title {
      // font-size: 16px;
      font-size: 20px;
    }
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    /* border-left: 5px solid #eee; */
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>