soc_web/src/views/index.vue

<template>
  <div class="home-container">
    <!--  快捷菜单  -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <p class="card-title">快捷菜单</p>
          <panel-group />
        </el-card>
      </el-col>

      <!--  待办事项  -->
      <el-col :xs="24" :sm="12" :md="9" :lg="9">
        <el-card class="card-group">
          <p class="card-title">待办事项</p>
          <el-row v-if="dataList.length > 0" :gutter="20">
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              v-for="(v, i) in dataList"
              :key="i"
            >
              <div class="card-panel">
                <div
                  class="card-panel-icon-wrapper icon-people"
                  @click="clickNum(v)"
                >
                  <!--                  <svg-icon icon-class="example" class-name="card-panel-icon" />-->
                  <img
                    class="card-item-icon"
                    :src="require(`../assets/icons/home/${v.taskTypeText}.png`)"
                    alt=""
                  />
                  <div class="card-icon-text">
                    {{ v.taskTypeText }}
                  </div>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    {{ v.statusText }}
                  </div>
                  <span v-if="!v.nums" style="font-size: 20px">0</span>
                  <span v-else @click="clickNum(v)">
                    <count-to
                      :start-val="0"
                      :end-val="v.nums"
                      :duration="3000"
                      class="card-panel-num"
                    />
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>
          <div style="padding: 25px" v-else>
            <el-empty description="暂无数据"></el-empty>
          </div>
        </el-card>
      </el-col>

      <!--  其他  -->
      <el-col :xs="24" :sm="12" :md="15" :lg="15">
        <el-card class="chart-wrapper">
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label" class="tab_font">通知公告</span>
              <div class="tab-panel">
                <div v-if="msgsList.length > 0">
                  <div
                    class="msg-item"
                    v-for="(v, i) in msgsList"
                    :key="v.id"
                    @click="showMsg(v)"
                  >
                    <span class="item-title">{{ v.title }}</span>
                    <span class="item-time">{{ v.publishTime }}</span>
                  </div>
                </div>
                <el-empty v-else description="暂无数据"></el-empty>
              </div>
            </el-tab-pane>
            <el-tab-pane label="知识库">
              <span slot="label" class="tab_font">知识库</span>
              <div class="tab-panel">
                <div v-if="knowledgeList.length > 0">
                  <div class="msg-item" v-for="(v, i) in knowledgeList" :key="i"  @click="showKnowledgeDialog(v)">
                    <!-- <a :href="imageUrl(v.url)" target="_blank">
                      <span><i class="el-icon-document"></i>{{ v.name }}</span>
                      <span>{{ v.createTime }}</span>
                    </a> -->
                    <span class="item-title">{{ v.title }}</span>
                    <span class="item-time">{{dayjs(v.updateTime).format("YYYY-MM-DD")  }}</span>
                    <!-- <span><i class="el-icon-document"></i>{{ v.title }}</span>
                    <span>{{ v.createTime }}</span> -->
                  </div>
                </div>
                <el-empty v-else description="暂无数据"></el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!--  新闻详情  -->
    <DialogCom
      title="通知公告"
      :visible.sync="show"
      width="1000px"
      append-to-body
      @close="handleClose"
    >
      <div class="panel-box" v-if="selectMsg">
        <h2>{{ selectMsg.title }}</h2>
        <p>
          <span>发布机构：{{ selectMsg.publishOrg }}</span
          ><span style="margin-left: 20px"
            >发布日期：{{ selectMsg.publishTime }}</span
          >
        </p>
        <div class="content-box">
          <p class="text-box">{{ selectMsg.content }}</p>
          <div v-if="selectMsg.fileList && selectMsg.fileList.length > 0">
            附件：
            <ul v-if="selectMsg.fileList && selectMsg.fileList.length > 0">
              <li v-for="(v, i) in selectMsg.fileList" :key="v.url">
                <a :href="imageUrl(v.url)" target="_blank">
                  <span><i class="el-icon-document"></i>{{ v.name }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </DialogCom>


     <!--  新闻详情  -->
     <DialogCom
      title="知识库"
      :visible.sync="showKnowledge"
      width="800px"
      append-to-body
      @close="handleCloseKnowledgeDialog"
    >
      <div class="panel-box" v-if="selectKnowledge">
        <h2>{{ selectKnowledge.title }}</h2>
        <p>
          <span>发布机构：{{ selectKnowledge.orgName }}</span
          ><span style="margin-left: 20px"
            >发布日期：{{dayjs(selectKnowledge.updateTime).format("YYYY-MM-DD")  }}</span
          >
        </p>
        <div class="content-box">
          <!-- <p class="text-box"></p> -->
          <div v-if="selectKnowledge.fileObjectList && selectKnowledge.fileObjectList.length > 0">
            附件：
            <ul v-if="selectKnowledge.fileObjectList && selectKnowledge.fileObjectList.length > 0">
              <li v-for="(v, i) in selectKnowledge.fileObjectList" :key="v.url">
                <a :href="imageUrl(v.url)" target="_blank">
                  <span><i class="el-icon-document"></i>{{ v.name }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import CountTo from "vue-count-to";
import { homeData, fileList } from "@/api/login";
import { imageUrl } from "@/utils/ruoyi";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import { checkPermi } from "@/utils/permission.js";
export default {
  name: "Index",
  components: {
    PanelGroup,
    CountTo,
  },
  data() {
    return {
      pageList: [
        {
          name: "教育培训",
          path: "/core/core/edu/task",
          query: {
            status: 0,
          },
        },
        {
          name: "预案演练",
          path: "/drillTask",
          query: {
            status: "0",
          },
        },
        {
          name: "安全检查",
          path: "/safetycheck/saftask",
          query: {
            status: 1,
          },
        },
        {
          name: "出入审批",
          path: "/Introduce/core/letter/approve",
          query: {
            approveStatus: 0,
          },
        },
        {
          name: "隐患问题",
          path: "/question/list",
          query: {
            confirmStatus: 0,
          },
        },
        {
          name: "隐患整改",
          path: "/question/reform",
          query: {
            reformStatus: 10,
          },
        },
      ],
      iconList: [],
      dataList: [],
      // fileList: [],
      knowledgeList: [],
      msgsList: [],
      show: false,
      selectMsg: null,
      showKnowledge:false,
      selectKnowledge:null
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    ...mapGetters(["roleList", "isAdmin"]),
  },
  methods: {
    dayjs,
    imageUrl,
    clickNum(item) {
      let page = this.pageList.find((v) => v.name === item.taskTypeText);
      let authStr = "";
      let menuName = "";
      switch (item.taskTypeText) {
        case "安全检查": //安全检查
          authStr = "core:safetytask:list";
          menuName = "检查登记跟踪";
          break;
        case "预案演练": //
          authStr = "core:drillTask:list";
          menuName = "演练登记跟踪";
          break;
        case "教育培训": //教育培训
          authStr = "core:eduTask:list";
          menuName = "培训登记跟踪";
          break;
        case "出入审批": //
          authStr = "core:letter:approveList";
          menuName = "出入事项审批";
          break;
        case "隐患问题": //
          authStr = "question:list";
          menuName = "隐患问题清单";
          break;
        case "隐患整改": //隐患整改
          authStr = "question:reform";
          menuName = "整改情况跟踪";
          break;
      }

      if (!checkPermi([authStr])) {
        this.$alert(`您没有${menuName}的权限，请联系管理员!`, "提示");
        return;
      }

      this.$router.push({
        path: page.path,
        query: page.query,
      });
    },
    showMsg(v) {
      this.show = true;
      this.selectMsg = v;
    },

    handleClose() {
      this.show = false;
      this.selectMsg = null;
    },
    showKnowledgeDialog(v)
    {
      this.showKnowledge=true;
      this.selectKnowledge=v;
    },
    handleCloseKnowledgeDialog() {
      this.showKnowledge = false;
      this.selectKnowledge = null;
    },
    getData() {
      console.log(this.roleList, "1213");
      if (this.roleList.length > 0 && this.roleList[0] !== "ROLE_DEFAULT") {
        homeData().then((res) => {
          this.dataList = res.data;
        });
        fileList().then((res) => {
          let { index1, index2 } = res.data;
          if (index1) {
            this.msgsList = index1;
          }
          if (!index2) return;
          this.knowledgeList=index2;
          // this.fileList = index2.map((v) => {
          //   return JSON.parse(v);
          // });
          // this.fileList.forEach((v) => {
          //   v.createTime = dayjs(v.createTime).format("YYYY-MM-DD");
          // });
        });
      } else {
        if (!this.isAdmin) {
          this.$alert("请尽快联系管理员设置角色信息", "提示", {
            confirmButtonText: "确定",
          });
        }
      }
    },
  },
};
</script>
<style lang="scss">
.home-container {
  .el-card__body {
    padding: 10px 20px 10px 20px;
  }
  .card-group {
    .el-card__body {
      padding-bottom: 10px;
    }
  }
  .el-tabs {
    border-radius: 4px;
    box-shadow: none;
  }
  .el-tabs--border-card {
    border: none;
  }
  .chart-wrapper {
    .el-card__body {
      padding: 0;
    }
  }
  .card-panel-num {
    color: #1ea8e9;
  }
}
</style>
<style lang="scss" scoped>
.tab_font {
  font-size: 16px;
  font-weight: bold;
}
.home-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    margin-top: 20px;
  }
}
.card-title {
  width: 120px;
  margin: 0 0 10px 0;
  padding-left: 4px;
  color: #fff;
  line-height: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(to right, #71bfe3, #fff);
}
.card-group {
  height: 528px;
  .card-title {
    margin: 0;
  }
}
.tab-panel {
  height: 457px;
  overflow: auto;
}
//css 透明的属性=
.card-item-icon {
  width: 50px;
  height: 50px;
  &:hover {
    opacity: 0.8;
  }
}
.msg-item {
  font-size: 15px;
  padding: 0 10px;
  color: #1ea8e9;
  line-height: 39px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
  > span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
  }
  .item-title {
    flex: 0.75;
  }
  .item-time {
    flex: 0.25;
    text-align: right;
  }
}
.file-item {
  font-size: 15px;
  padding: 0 10px;
  color: #1ea8e9;
  //text-decoration:underline;
  line-height: 39px;
  > a {
    display: flex;
    justify-content: space-between;
    > i {
      width: 70%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: start;
    }
  }
  &:hover {
    text-decoration: underline;
  }
  //&:hover{
  //  background-color: #6eb9ec;
  //  color:#fff;
  //  transition: all .38s ease-out;
  //}
}
.card-group {
  margin-top: 20px;
  .card-panel {
    display: flex;
    flex: 1;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    margin: 10px 0;

    .icon-people {
      color: #40c9c6;
    }

    .card-panel-icon-wrapper {
      height: 120px;
      margin: 10px;
      margin-left: 15%;
      padding: 10px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .card-panel-icon {
      float: left;
      font-size: 44px;
    }
    .card-icon-text {
      padding-top: 8px;
      text-align: center;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 16px;
    }
    .card-panel-description {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: bold;
      margin: 10px;
      margin-right: 18%;
      .card-panel-text {
        text-align: center;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}
.panel-box {
  > h2 {
    text-align: center;
    margin-top: 0;
  }
  > p {
    font-size: 14px;
    color: #999;
    text-align: end;
  }
  .content-box {
    > p {
      text-indent: 2em;
      word-break: break-word;
      white-space: pre-wrap;
      text-align: justify;
      margin-left: 34px;
      margin-right: 34px;
      color: #777;
      max-height: 450px;
      min-height: 50px;
      overflow: auto;
      background-color: #f5f5f5;
      padding: 10px;
      line-height: 1.5;
    }
    > div {
      > ul {
        font-size: 15px;
        margin: 0;
        color: #1ea8e9;
        > li {
          align-items: center;
          list-style: none;
          margin-bottom: 4px;
        }
        > li:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>