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

<template>
  <div class="fle bgColor">
    <!-- 头部导航栏 -->
    <div class="tav">
      <router-link to="/NewIncident">
        <i class="iconfont icon-xinjian"></i>
        <span>新建事件</span>
      </router-link>
      <!-- <div @click="toNewIncident()">
        <i class="iconfont icon-xinjian"></i>
        <span>新建事件</span>
      </div>-->
      <router-link to="/knowList">
        <i class="iconfont icon-message"></i>
        <span>常见问题</span>
      </router-link>
      <router-link to="/guide">
        <i class="iconfont icon-fuwuzhinan"></i>
        <span>公告公示</span>
      </router-link>
      <!-- <div @click="toKnowList()">
        <i class="iconfont icon-message"></i>
        <span>常见问题</span>
      </div>
      <div @click="toGuide()">
        <i class="iconfont icon-fuwuzhinan"></i>
        <span>公告公示</span>
      </div>-->
    </div>
    <div class="bigBody">
      <!-- 统计信息 -->
      <div
        class="newStatistics"
        v-if="!newStatisticsLoading && isShowNewStatistics"
      >
        <div class="buildOrder">
          <router-link
            class="buildOrderItem"
            :to="{ path: '/main/incidentList/today' }"
            tag="div"
          >
            <div class="s_num">{{ newStatistics.createOrders }}</div>
            <div>今日建单</div>
          </router-link>
          <router-link
            class="buildOrderItem"
            :to="{ path: '/main/incidentList/todo' }"
            tag="div"
          >
            <div class="s_num">{{ newStatistics.todoOrders }}</div>
            <div>待处理</div>
          </router-link>
        </div>
        <router-link
          class="attendance"
          :to="{ path: '/main/workList' }"
          tag="div"
        >
          <div class="attendanceItem">
            <div class="s_num">{{ newStatistics.usersCount }}</div>
            <div>今日上班应到</div>
          </div>
          <div class="attendanceItem">
            <div class="s_num">{{ newStatistics.onlineCount }}</div>
            <div>今日上班实到</div>
          </div>
          <div class="attendanceItem">
            <div class="s_num">{{ newStatistics.errorCount }}</div>
            <div>今日迟到</div>
          </div>
        </router-link>
      </div>
      <!-- loading -->
      <div
        class="newStatistics loading"
        v-if="newStatisticsLoading && isShowNewStatistics"
      >
        <cube-loading :size="30"></cube-loading>
      </div>
      <!-- 最新报修 -->
      <div class="newRepair">
        <div class="titHead">
          <span class="tit">
            <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
            <span>待办事项</span>
          </span>
          <span class="link" @click="toIncidentList('todo')">
            更多
            <i class="iconfont icon-moren"></i>
          </span>
        </div>
        <div
          class="conentBox"
          v-for="item in dataList"
          :key="item.id"
          @click="toIncidentDetails(item)"
          v-if="!!dataList.length"
        >
          <!-- <div class="conentBox" v-for="v in dataList" @click="toIncidentDetails(v)" v-if="!newRapirNoData&&!newRapirLoading"> -->
          <div class="conent">
            <div class="head">
              <p>
                事件单号：{{ item.incidentsign }}
                <span
                  :class="{
                    btn: true,
                    daipingjia: item.state.name == '待评价',
                    daijiedan:
                      item.state.name == '待接单' &&
                      item.state.name == '待接单' &&
                      item.handlerUser &&
                      !item.candidateGroups,
                    daiqiangdan:
                      item.state.name == '待接单' &&
                      item.state.name == '待接单' &&
                      !item.handlerUser &&
                      item.candidateGroups,
                    chulizhong: item.state.name == '处理中',
                    yijiejue: item.state.name == '已解决',
                    yiguanbi: item.state.name == '已关闭',
                    chongxinzhipai: item.state.name == '重新指派'
                  }"
                  >{{
                    item.state.name == "待接单"
                      ? item.handlerUser && !item.candidateGroups
                        ? "待接单"
                        : "待抢单"
                      : item.state.name
                  }}</span
                >
              </p>
            </div>
            <div class="center">
              <p class="desc">
                <span class="fl">事件描述：</span>
                <span
                  class="grayFont overflowEllipsis2"
                  v-html="item.description"
                ></span>
              </p>
              <p v-if="valConfig == 1">
                报修人：
                <span class="grayFont">{{ item.requester.name }}</span>
                <span v-if="!item.contactsInformation"></span>
                <span @click.stop v-if="item.contactsInformation"
                  ><a :href="'tel:' + item.contactsInformation"
                    >(<i class="iconfont icon-shouji"></i
                    >{{ item.contactsInformation }})</a
                  ></span
                >
              </p>
              <p v-if="valConfig == 2">
                报修科室 ：
                <span class="grayFont">{{
                  item.department ? item.department.dept : ""
                }}</span>
              </p>
            </div>
            <div class="bottom">
              <span v-if="!item.place"></span>
              <span
                v-if="item.place"
                style="width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                >{{ item.place.area.area }} {{ item.place.place }}
                {{ item.houseNumber }}</span
              >
              <span>{{ item.acceptDate | timeFormat("MM-dd HH:mm") }}</span>
            </div>
          </div>
        </div>
        <!-- 无数据 -->
        <div class="wushuju" v-if="!dataList.length && !newRapirLoading">
          <img src="./../../static/images/wushuju.svg" alt />
          <p>暂无待办事项</p>
        </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 icon-moren"></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.substring(0, v.createTime.length - 5) }}
            </div>
          </div>
        </div>
        <!-- 无数据 -->
        <div class="wushuju" v-if="newNoticeNoData">
          <img src="./../../static/images/wugonggao.svg" alt />
          <p>暂无最新公告</p>
        </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";
export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      noticeData: "", //公告列表
      dataList: "", //最新报修
      state: "", //流程状态
      newRapirNoData: false, //最新报修无数据
      newNoticeNoData: false,
      newRapirLoading: true, //最新报修loading
      newNoticeLoading: true, //最新公告loading
      candidateGroups: "",
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      newStatistics: {
        createOrders: 0, //今日建单
        todoOrders: 0, //处理中
        usersCount: 0, //今日上班应到
        onlineCount: 0, //今日上班实到
        errorCount: 0 //今日迟到
      }, //统计数据
      newStatisticsLoading: false, //统计数据Loading
      isShowNewStatistics: false
    };
  },
  methods: {
    // 获取公告列表数据
    getNoticData() {
      console.log(this.valConfig);
      // alert('公告列表')
      var that = this;
      this.$http
        .post("service/user/data/fetchDataList/notice", {
          idx: 0,
          sum: 3,
          notice: { status: 1 }
        })
        .then(function(res) {
          // alert(JSON.stringify(res.data))
          that.newNoticeLoading = false;
          if (res.data.list.length > 0) {
            that.newNoticeNoData = false;
            that.noticeData = res.data.list;
          } else {
            that.newNoticeNoData = true;
          }
        });
    },
    // 获取统计信息
    getManagerIndexInfo() {
      this.newStatisticsLoading = true;
      this.$http.post("service/bpm/data/getManagerIndexInfo", {}).then(res => {
        this.newStatisticsLoading = false;
        if (res.status == 200) {
          this.newStatistics = res.data.data;
        }
      });
    },
    // 获取最新报修
    getNewRapir() {
      var that = this;
      this.$http
        .post("service/bpm/bpm/fetchTask/bpm_incident", {
          assignee: that.loginUser.id,
          candidateGroups: that.candidateGroups,
          searchType: "todo",
          idx: 0,
          sum: 2,
          incident: { temporary: true }
        })
        .then(function(res) {
          that.newRapirLoading = false;
          if (res.data.data.length > 0) {
            that.newRapirNoData = false;
            that.dataList = res.data.data;
            that.dataList[0].createTime = formatDate(
              new Date(that.dataList[0].createTime),
              "MM-dd hh:mm"
            );
          } else {
            that.newRapirNoData = true;
          }
        });
    },
    // toNewIncident() {
    //   this.$router.push({ path: "/newIncident" });
    // },
    toNoticeDetails(data) {
      this.$router.push({
        name: "NoticeDetails",
        params: {
          data: JSON.stringify(data)
        }
      });
    },
    toNoticeList() {
      this.$router.push({ path: "/noticeList" });
    },
    toIncidentList(searchType) {
      this.$router.push({
        name: "IncidentList",
        params: {
          searchType: searchType
        }
      });
    },
    // toKnowList() {
    //   this.$router.push({ path: "/knowList" });
    // },
    toGuide() {
      this.$router.push({ path: "/guide" });
    },
    toGuideDetail(v) {
      this.$router.push({ name: "GuideDetail", params: { data: v } });
    },
    toIncidentDetails(data) {
      var name = "";
      if (data.state.value == "pending") {
        if (data.handlerUser && !data.candidateGroups) {
          // 指派给人 接单
          name = "Order";
        } else if (data.candidateGroups && !data.handlerUser) {
          // 指派给组 抢单
          name = "GrabSheet";
        }
      } else if (data.state.value == "reassign") {
        name = "AgainAssign";
      } else if (data.state.value == "handler") {
        name = "Processing";
      } else if (data.state.value == "resolved") {
        name = "Solved";
      } else if (data.state.value == "close") {
        name = "Closed";
      }
      this.$router.push({
        name: name,
        params: {
          data: data
        }
      });
    }
  },
  created() {
    this.isShowNewStatistics = this.loginUser.role.some(
      v =>
        v.rolecode == "incident-category-manager" ||
        v.rolecode == "incident manager"
    );
    var that = this;
    that.valConfig = JSON.parse(localStorage.getItem("valConfig")) - 0;
    that.loginUser.group.forEach(element => {
      that.candidateGroups += element.id + ",";
    });
    that.candidateGroups = that.candidateGroups.substring(
      0,
      that.candidateGroups.length - 1
    );
    localStorage.removeItem("category");
    localStorage.removeItem("categoryVal");
    localStorage.removeItem("selectedCategoryTxt");
    localStorage.removeItem("model");
    localStorage.removeItem("modelData");
    localStorage.removeItem("place");
    localStorage.removeItem("referenceInfo");
    localStorage.removeItem("solution");
    localStorage.removeItem("order");
    this.getNoticData();
    this.getNewRapir();
    if (this.isShowNewStatistics) {
      this.getManagerIndexInfo();
    }
  },
  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;
}
.bigBody {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
}
/* 头部导航栏 */
.tav {
  height: 2rem;
  background: linear-gradient(#005395, #226ca8, #003057);
  display: flex;
  width: 100%;
}
.tav a {
  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;
}
.newStatistics {
  border-bottom: 1px solid #eee;
  border-top: 0.16rem solid #eee;
  .s_num {
    font-size: 0.32rem;
    font-weight: bold;
  }
  .buildOrder {
    display: flex;
    .buildOrderItem {
      height: 1.2rem;
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      border-right: 1px solid #eee;
      border-top: 1px solid #eee;
      padding: 0.2rem 0;
      box-sizing: border-box;
      &:last-of-type {
        border-right: 0;
      }
    }
  }
  .attendance {
    display: flex;
    .attendanceItem {
      height: 1.2rem;
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      border-right: 1px solid #eee;
      border-top: 1px solid #eee;
      padding: 0.2rem 0;
      box-sizing: border-box;
      &:last-of-type {
        border-right: 0;
      }
    }
  }
}
.newRepair {
  border-top: 0.16rem rgb(238, 238, 238) solid;
  .conentBox {
    .conent {
      font-size: 0.32rem;
      font-weight: 400;
      line-height: 0.45rem;
      .head {
        border-bottom: 0.01rem solid #e6e6e6;
        p {
          padding: 0.24rem 0.48rem;
          .btn {
            float: right;
          }
        }
      }
      .center {
        color: #333333;
        border-bottom: 0.01rem solid #e6e6e6;
        padding: 0.24rem 0.48rem;
        p {
          &.desc {
            overflow: hidden;
            max-height: 0.88rem;
          }
          .grayFont {
            overflow-x: scroll;
            color: #666;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        height: 0.86rem;
        border-bottom: 0.01rem solid #e6e6e6;
        font-size: 0.24rem;
        color: #999;
        padding: 0 0.24rem 0 0.48rem;
      }
    }
  }
}

/* 最新公告 */
.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.32rem;
        line-height: 0.45rem;
      }
      .cot {
        font-size: 0.24rem;
        color: #999;
        line-height: 0.34rem;
      }
    }
  }
}

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