mbWaterService/src/layout/components/AppMain.vue

<template>
  <section class="app-main" :style="{ paddingTop: appMainPaddingTop }">
    <!-- <el-button type="success" style="width:16%;margin-left: 0" @click="uploadRouteTable">上传路由表</el-button> -->
    <transition name="fade-transform" mode="out-in">
      <keep-alive include="Monitor">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    <el-card v-if="shuo" class="box-card">
      <div v-if="mainShow">
        <div class="title">
          {{ topic }}
        </div>
        <div class="text">
          <p class="p">{{ message }}</p>
        </div>
        <div class="block">
          <el-pagination
            style="width: 100%"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-size="pagination.size"
            layout="prev, pager, next"
            pager-count="3"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <el-button type="primary" size="small" class="btn" @click="shuo = false"
        >确 定</el-button
      >
    </el-card>
  </section>
</template>

<script>
// import { asyncRoutes } from '@/router/router.config'
import { uploadRoute } from "@/api/user";
import { getNotifications } from "@/api/dashboard";

export default {
  name: "AppMain",
  computed: {
    key() {
      return this.$route.path;
    },
    appMainPaddingTop() {
      // const path = this.$route.path
      // if (path.indexOf('dashboard') === 1 || path.indexOf('map') === 1) return '0px'
      // else return '43px'
      const tagsViewShow = this.$store.state.settings.tagsView;
      if (tagsViewShow) return "43px";
      else return "0px";
    },
  },
  data() {
    return {
      shuo: true,
      mainShow: true,
      pagination: {
        size: 1,
        current: 1,
        type: 8,
        tableName: "SCADA_HISTORY",
      },
      total: 0,
      topic: "",
      message: "",
    };
  },
  mounted() {
    this.getNotificationList();
  },
  methods: {
    handleCurrentChange(value) {
      console.log("2333", value);
      this.pagination.current = value;
      this.getNotificationListPage();
    },
    // 获取消息列表
    getNotificationListPage() {
      const data = Object.assign({}, this.pagination, this.filter);
      // console.log("lz2222222", data);
      this.mainShow = false;
      getNotifications(data).then((res) => {
        if (res.code == 1) {
          if (res.result.records.length > 0) {
            this.topic = res.result.records[0].topic;
            this.message = res.result.records[0].message;
            this.total = res.result.total;
            this.mainShow = true;
          }
        }
      });
    },
    getNotificationList() {
      const data = Object.assign({}, this.pagination, this.filter);
      // console.log("lz2222222", data);
      this.shuo = false;
      getNotifications(data).then((res) => {
        if (res.code == 1) {
          if (res.result.records.length > 0) {
            this.topic = res.result.records[0].topic;
            this.message = res.result.records[0].message;
            this.total = res.result.total;
          }
        }
      });
      this.shuo = true;
    },
    uploadRouteTable() {
      const data = {
        1: JSON.stringify({
          name: "sys",
          // value: asyncRoutes,
          type: "tofly-master",
          notes: "使用与当前系统。",
        }),
      };
      uploadRoute(JSON.stringify(data)).then((res) => {
        this.$message.success("上传成功");
      });
    },
  },
};
</script>

<style scoped>
.app-main {
  /* min-height: calc(100vh - 64px); */
  height: calc(100vh - 64px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.box-card {
  width: 300px;
  height: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.title {
  height: 40px;
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.text {
  height: 160px;
}
.p {
  margin: 0;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
}
.block {
  width: 150px;
}
.fixed-header + .app-main {
  padding-top: 43px;
}
</style>

<style lang="scss">
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
/deep/.el-pager {
  width: 100px;
}
</style>