zuel-itsm-3.0.2/src/views/indes.vue

<template>
  <div class="fle bgColor">
    <!-- 头部导航栏 -->
    <div class="tav">
      <router-link to="/main/wxChartList">
        <i class="iconfont dsit-wodebaoxiu"></i>
        <span>微信/web报障</span>
      </router-link>
      <router-link to="/main/recordList">
        <i class="iconfont dsit-dianhualiuyan"></i>
        <span>留言列表</span>
      </router-link>
      <a href="http://itsm.zuel.edu.cn/user/#/knowList">
        <i class="iconfont dsit-changjianwenti2"></i>
        <span>常见问题</span>
      </a>
    </div>
    <div class="bigBody">
      <!-- 最新报修 -->
      <div class="newRepair">
        <div class="titHead">
          <span class="tit">
            <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
            <span>微信/WEB待办报障</span>
          </span>
          <span class="link" @click="toRecordList()">
            更多
            <i class="iconfont dsit-xiangyou"></i>
          </span>
        </div>
        <div
          class="conentBox"
          v-for="item in dataList"
          @click="toIncidentDetails(item)"
          v-if="!!dataList.length"
        >
          <div class="conent">
            <div class="center">
              <div>
                <span class="fl">{{item.requester.name}}</span>
                <span class="fr">{{item.createTime}}</span>
              </div>
              <p class="desc">
                <span class="grayFont overflowEllipsis2" v-html="item.incidentDescription"></span>
              </p>
            </div>
          </div>
        </div>
        <!-- 无数据 -->
        <div class="wushuju" v-if="!dataList.length&&!newRapirLoading">
          <div>
            <img src="./../../static/images/quesheng.png" alt />
            <p>暂无待办报障</p>
          </div>
        </div>
        <!-- loading -->
        <div class="loading" v-if="newRapirLoading">
          <cube-loading :size="30"></cube-loading>
        </div>
      </div>
      <!-- 最新公告 -->
      <div class="newNotice">
        <div class="titHead">
          <span class="tit">
            <i class="iconfont icon-message newNoticeico"></i>
            <span>最新公告</span>
          </span>
          <span class="link" @click="toGuide()">
            更多
            <i class="iconfont dsit-xiangyou"></i>
          </span>
        </div>
        <div class="conentBox" v-if="!newNoticeNoData&&!newNoticeLoading">
          <div class="conent" v-for="v in noticeData" @click="toGuideDetail(v)">
            <div class="head overflowEllipsis2">{{v.title}}</div>
            <div class="cot">{{v.createTime}}</div>
            <!-- <div class="cot">{{v.createTime.substring(0,v.createTime.length-5)}}</div> -->
          </div>
        </div>
        <!-- 无数据 -->
        <div class="wushuju" v-if="newNoticeNoData">
          <div>
            <img src="./../../static/images/quesheng.png" alt />
            <p>暂无公告</p>
          </div>
        </div>
        <!-- loading -->
        <div class="loading" v-if="newNoticeLoading">
          <cube-loading :size="30"></cube-loading>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from "./../components/js/date.js";
import http from "../request/http";

export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      noticeData: "", //公告列表
      dataList: "", //最新报修
      state: "", //流程状态
      newRapirNoData: false, //最新报修无数据
      newNoticeNoData: false,
      newRapirLoading: true, //最新报修loading
      newNoticeLoading: true, //最新公告loading
      candidateGroups: ""
    };
  },
  methods: {
    // 获取公告列表数据
    getNoticData() {
      // alert('公告列表')
      var that = this;
      http.bpmFetchDataList('notice',{
          idx: 0,
          sum: 4
        })
        .then(function(res) {
          // alert(JSON.stringify(res.data))
          that.newNoticeLoading = false;
          if (res.data.list&&res.data.list.length > 0) {
            that.newNoticeNoData = false;
            that.noticeData = res.data.list;
          } else {
            that.newNoticeNoData = true;
          }
        });
    },
    // 获取最新报修
    getNewRapir() {
      var that = this;
      http.bpmFetchDataList('wxincident',{
          wxincident: { state: "未转换" },
          idx: 0,
          sum: 2
        })
        .then(function(res) {
          that.newRapirLoading = false;
          if (res.data.list.length > 0) {
            that.newRapirNoData = false;
            that.dataList = res.data.list;
          } else {
            that.newRapirNoData = true;
          }
        });
    },
    toRecordList() {
      this.$router.push({
        name: "WxChartList"
      });
    },
    // toKnowList() {
    //   this.$router.push({ path: "/knowList" });
    // },
    toGuide() {
      this.$router.push({ path: "/guide" });
    },
    toGuideDetail(v) {
      this.$router.push({ name: "GuideDetail", params: { data: v } });
    },
    // 微信/WEB报障详情
    toIncidentDetails(data) {
      this.$router.push({
        name: "WxChartDetail",
        params: {
          data: data
        }
      });
    }
  },
  created() {
    var that = this;
    that.loginUser.group.forEach(element => {
      that.candidateGroups += element.id + ",";
    });
    that.candidateGroups = that.candidateGroups.substring(
      0,
      that.candidateGroups.length - 1
    );
    // localStorage.removeItem("category");
    // localStorage.removeItem("model");
    // localStorage.removeItem("modelData");
    // localStorage.removeItem("place");
    // localStorage.removeItem("referenceInfo");
    // localStorage.removeItem("solution");
    // localStorage.removeItem("order");
    this.getNoticData();
    this.getNewRapir();
  },
  mounted() {}
};
</script>
<style scoped lang="less">
.fl {
  float: left;
}
.fr {
  float: right;
}
.bgColor {
  background-color: white;
}
.fle {
  display: flex;
  flex-direction: column;
  background-color: white;
}
.grayFont {
  color: #666;
}
.bigBody {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
/* 头部导航栏 */
.tav {
  background: url(../../static/images/bg-top.png) no-repeat;
  display: flex;
  width: 100%;
  background-size: cover;
}
.tav a {
  height: 2.28rem;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tav a i {
  font-size: 0.6rem;
  color: white;
}
.tav a span {
  font-size: 0.32rem;
  color: white;
  display: inline-block;
  margin-top: 0.16rem;
}
/* .bigBody{
    height: auto;
} */
/* tit导航 */
.titHead {
  display: flex;
  justify-content: space-between;
  padding: 0 0.24rem;
  height: 0.88rem;
  line-height: 0.88rem;
  border-bottom: 0.01rem rgb(238, 238, 238) solid;
}
.titHead1 {
  height: 0.88rem;
}
.titHead .tit .newPapir {
  font-size: 0.36rem;
  color: #a37200;
}
.titHead .tit .newNoticeico {
  font-size: 0.36rem;
  color: #005395;
}
.titHead .tit span {
  display: inline-block;
  margin-left: 0.08rem;
  font-size: 0.36rem;
}
.titHead .link {
  font-size: 0.24rem;
  color: #999999;
}
.titHead .link i {
  font-size: 0.24rem;
  color: #999999;
  display: inline-block;
  margin-left: 0.08rem;
}

.newRepair {
  border-top: 0.16rem rgb(238, 238, 238) solid;
  .conentBox {
    .conent {
      font-size: 0.28rem;
      font-weight: 400;
      line-height: 0.45rem;
      .center {
        color: #333333;
        border-bottom: 0.01rem solid #e6e6e6;
        padding: 0.24rem 0.48rem;
        div {
          display: inline-block;
          width: 100%;
          .fl {
            font-size: 0.3rem;
          }
          .fr {
            color: #999;
          }
        }
        p {
          &.desc {
            overflow: hidden;
            max-height: 0.88rem;
          }
          .grayFont {
            overflow-x: scroll;
            color: #666;
          }
        }
      }
    }
  }
}
/* 最新公告 */
.newNotice {
  border-top: 0.16rem rgb(238, 238, 238) solid;
  .conentBox {
    .conent {
      padding: 0.24rem 0.64rem;
      border-bottom: 0.01rem solid #eee;
      .head {
        font-size: 0.28rem;
        line-height: 0.45rem;
      }
      .cot {
        font-size: 0.24rem;
        color: #999;
        line-height: 0.34rem;
      }
    }
  }
}

.wushuju {
  text-align: center;
  color: #999;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wushuju img {
  height: 1.68rem;
}
.loading {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>