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

<template>
  <div class="fle bgColor">
    <!-- 头部导航栏 -->
    <div class="tav">
      <div @click="toRapir()">
        <i class="iconfont icon-xinjian"></i>
        <span>快速报修</span>
      </div>
      <div
        @click="toCheckNumber()"
        v-if="
          loginUser.account === 'ITIL_test2' ||
            loginUser.account === 'Z0003865' ||
            loginUser.account === 'wangyaxiang' ||
            loginUser.account === 'Z0004571'
        "
      >
        <i class="dash dash-chahao"></i>
        <span>电话查号</span>
      </div>
      <div @click="toChangePassword()">
        <i class="dash dash-xiugaimima"></i>
        <span>修改密码</span>
      </div>
      <div @click="toKnowList()" v-if="wxBxQuestions == 0">
        <i class="iconfont icon-message"></i>
        <span>常见问题</span>
      </div>
      <div v-if="wxBxQuestions != 0 && wxBxQuestions != -1">
        <a :href="wxBxQuestions">
          <i class="iconfont icon-message"></i>
          <span>常见问题</span>
        </a>
      </div>
      <div @click.prevent="scan()" v-if="wxIncidentWithCmdb == 1">
        <i class="dash dash-saoyisao"></i>
        <span>扫一扫</span>
      </div>
      <div @click="toGuide()" v-if="wxGuide == 0">
        <i class="iconfont icon-fuwuzhinan"></i>
        <span>服务指南</span>
      </div>
      <div v-if="wxGuide != 0 && wxGuide != -1">
        <a :href="wxGuide">
          <i class="iconfont icon-fuwuzhinan"></i>
          <span>服务指南</span>
        </a>
      </div>
    </div>
    <div class="bigBody">
      <!-- 最新报修 -->
      <div class="newRepair">
        <div class="titHead">
          <span class="tit"
            ><i class="iconfont icon-zuixinbaoxiu newPapir"></i
            ><span>最新报修</span></span
          >
          <span class="link" @click="toIncidentList()"
            >更多<i class="iconfont icon-moren"></i
          ></span>
        </div>
        <div
          class="conentBox"
          v-for="v in newRapirData"
          @click="toIncidentDetails(v)"
          v-if="!newRapirNoData && !newRapirLoading"
        >
          <div class="conent">
            <div class="head">
              <!-- <span>{{v.requester.name}}</span> -->
              <span>报修编号:{{ v.bxcode }}</span>
              <span>{{ v.createTime }}</span>
            </div>
            <div class="cot">
              {{ v.description }}
            </div>
          </div>
          <div class="flowChart">
            <div class="pits">
              <div :class="state != 1 ? 'yesLine' : ''"></div>
              <div :class="state != 1 && state != 2 ? 'yesLine' : ''"></div>
              <div
                :class="state != 1 && state != 2 && state != 3 ? 'yesLine' : ''"
              ></div>
              <div
                :class="
                  state != 1 && state != 2 && state != 3 && state != 4
                    ? 'yesLine'
                    : ''
                "
              ></div>

              <i class="iconfont icon-icon_weizuo shenqing no" v-if="false"></i>
              <i
                class="iconfont icon-icon_weizuo shouli no"
                v-if="state == 1"
              ></i>
              <i
                class="iconfont icon-icon_weizuo chuli no"
                v-if="state == 2 || state == 1"
              ></i>
              <i
                class="iconfont icon-icon_weizuo pingjia no"
                v-if="state == 3 || state == 2 || state == 1"
              ></i>
              <i
                class="iconfont icon-icon_weizuo wancheng no"
                v-if="state == 4 || state == 3 || state == 2 || state == 1"
              ></i>

              <i
                class="iconfont icon-icon_weizuo shenqing yes"
                v-if="state != 1"
              ></i>
              <i
                class="iconfont icon-icon_weizuo shouli yes"
                v-if="state != 1 && state != 2"
              ></i>
              <i
                class="iconfont icon-icon_weizuo chuli yes"
                v-if="state != 1 && state != 2 && state != 3"
              ></i>
              <i
                class="iconfont icon-icon_weizuo pingjia yes"
                v-if="state != 1 && state != 2 && state != 3 && state != 4"
              ></i>
              <i
                class="iconfont icon-icon_weizuo wancheng yes"
                v-if="false"
              ></i>

              <i
                class="iconfont icon-icon_zhengzaijinx shenqing now"
                v-if="state == 1"
              ></i>
              <i
                class="iconfont icon-icon_zhengzaijinx shouli now"
                v-if="state == 2"
              ></i>
              <i
                class="iconfont icon-icon_zhengzaijinx chuli now"
                v-if="state == 3"
              ></i>
              <i
                class="iconfont icon-icon_zhengzaijinx pingjia now"
                v-if="state == 4"
              ></i>
              <i
                class="iconfont icon-icon_zhengzaijinx wancheng now"
                v-if="state == 5"
              ></i>
            </div>
            <div class="words">
              <div>申请</div>
              <div>受理</div>
              <div>处理</div>
              <div>评价</div>
              <div>完成</div>
            </div>
          </div>
        </div>
        <!-- 无数据 -->
        <div class="wushuju" v-if="newRapirNoData">
          <img src="./../../static/images/wushuju.svg" alt="" />
          <div class="noDataFont">暂无数据</div>
        </div>
        <!-- loading -->
        <div class="loading" v-if="newRapirLoading">
          <cube-loading :size="30"></cube-loading>
        </div>
      </div>
      <!-- 最新公告 -->
      <div class="newNotice">
        <div class="titHead titHead1">
          <span class="tit"
            ><i class="iconfont icon-message newNoticeico"></i
            ><span>最新公告</span></span
          >
          <span class="link" @click="toNoticeList()"
            >更多<i class="iconfont icon-moren"></i
          ></span>
        </div>
        <div class="conentBox" v-if="!newNoticeNoData && !newNoticeLoading">
          <div
            class="conent"
            v-for="v in noticeData"
            @click="toNoticeDetails(v)"
          >
            <div class="head">
              <!-- <span>{{v.title}}</span> -->
              {{ v.title }}
            </div>
            <div class="cot">
              {{ v.createTime }}
            </div>
          </div>
        </div>
        <!-- 无数据 -->
        <div class="wushuju" v-if="newNoticeNoData">
          <img src="./../../static/images/wugonggao.svg" alt="" />
          <div class="noDataFont">暂无数据</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 { SM } from "./../http/http";
export default {
  data() {
    return {
      wxBxQuestions: localStorage.getItem("wxBxQuestions"), //微信报修常见问题链接
      wxGuide: localStorage.getItem("wxGuide"), //微信报修服务指南链接
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
      noticeData: "", //公告列表
      newRapirData: "", //最新报修
      state: "", //流程状态
      newRapirNoData: false, //最新报修无数据
      newNoticeNoData: false,
      newRapirLoading: true, //最新报修loading
      newNoticeLoading: true //最新公告loading
    };
  },
  methods: {
    scan() {
      SM(this).then(ress1 => {
        this.$router.push({ name: "Repair", params: { data: ress1 } });
      });
    },
    // 获取公告列表数据
    getNoticData() {
      var that = this;
      this.$http
        .post("service/user/data/fetchDataList/notice", {
          idx: 0,
          sum: 3,
          notice: {
            status: 1
          }
        })
        .then(function(res) {
          that.newNoticeLoading = false;
          if (res.data.list.length > 0) {
            that.newNoticeNoData = false;
            that.noticeData = res.data.list;
          } else {
            that.newNoticeNoData = true;
          }
        });
    },
    // 获取最新报修
    getNewRapir() {
      var that = this;
      this.$http
        .post("service/apply/bpm/fetchServiceTasks", {
          assignee: that.loginUser.account,
          idx: 0,
          sum: 1
        })
        .then(function(res) {
          that.newRapirLoading = false;
          if (res.data.data.length > 0) {
            that.newRapirNoData = false;
            that.newRapirData = res.data.data;
            that.newRapirData[0].createTime = formatDate(
              new Date(that.newRapirData[0].createTime),
              "MM-dd hh:mm"
            );
            if (
              that.newRapirData[0].state.name == "未受理" ||
              that.newRapirData[0].state.name == "未受理"
            ) {
              that.state = 1;
            } else if (that.newRapirData[0].state.name == "已受理") {
              that.state = 2;
            } else if (that.newRapirData[0].state.name == "处理中") {
              that.state = 3;
            } else if (that.newRapirData[0].state.name == "待评价") {
              that.state = 4;
            } else if (that.newRapirData[0].state.name == "已解决") {
              that.state = 5;
            } else {
              that.state = 5;
            }
            if (
              that.newRapirData[0].incident.state &&
              that.newRapirData[0].incident.state.name
            ) {
              if (that.newRapirData[0].incident.state.name == "待接单") {
                that.state = 3;
              } else if (that.newRapirData[0].incident.state.name == "处理中") {
                that.state = 3;
              }
            }
            console.log(that.state);
          } else {
            that.newRapirNoData = true;
          }
        });
    },
    toRapir() {
      this.$router.push({ name: "Repair", params: { data: "" } });
    },
    toNoticeDetails(data) {
      this.$router.push({
        name: "NoticeDetails",
        params: {
          data: JSON.stringify(data)
        }
      });
      // this.$router.push({
      //     name:'NoticeDetails',
      //     params:{
      //         data:data
      //     }
      // })
    },
    toNoticeList() {
      this.$router.push({ path: "/noticeList" });
    },
    toIncidentList() {
      this.$router.push({ path: "/main/incidentList" });
    },
    toKnowList() {
      this.$router.push({ path: "/knowList" });
    },
    toCheckNumber() {
      this.$router.push({ path: "/checkNumber" });
    },
    toChangePassword() {
      this.$router.push({ path: "/changePassword" });
    },
    toGuide() {
      this.$router.push({ path: "/guide" });
    },
    toIncidentDetails(data) {
      this.$router.push({
        name: "IncidentDetails",
        params: {
          data: JSON.stringify(data)
        }
      });
    }
  },
  created() {
    this.getNoticData(), this.getNewRapir();
  },
  mounted() {}
};
</script>
<style scoped>
.bgColor {
  background-color: white;
}
.fle {
  display: flex;
  flex-direction: column;
  background-color: white;
}
.bigBody {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
/* 头部导航栏 */
.tav {
  height: 2rem;
  background: linear-gradient(#005395, #226ca8, #003057);
  display: flex;
  width: 100%;
}
.tav div {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tav div i {
  font-size: 0.6rem;
  color: white;
}
.tav div 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: 1rem;
}
.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;
}
.newRepair .conentBox {
  padding: 0 0.16rem;
  height: auto;
}
.newRepair .conentBox .conent {
  padding: 0.24rem 0.48rem;
}
.newRepair .conentBox .conent .head {
  height: 0.45rem;
  line-height: 0.45rem;
}
.newRepair .conentBox .conent .head span:nth-child(1) {
  float: left;
  font-size: 0.32rem;
  font-weight: 400;
  color: #333333;
}
.newRepair .conentBox .conent .head span:nth-child(2) {
  float: right;
  font-size: 0.23rem;
  color: #999999;
}
.newRepair .conentBox .conent .cot {
  font-size: 0.28rem;
  color: #666666;
  line-height: 0.39rem;
  margin-top: 0.08rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
}
.newRepair .conentBox .flowChart {
  border-top: 0.01rem rgb(238, 238, 238) solid;
  padding: 0.24rem 0;
}
.newRepair .conentBox .flowChart .pits {
  display: flex;
  margin-top: 0.24rem;
  padding: 0 10%;
  position: relative;
}
.newRepair .conentBox .flowChart .pits i {
  font-size: 0.3rem;
}
.newRepair .conentBox .flowChart .pits div {
  border-top: 0.03rem rgb(224, 222, 222) solid;
  flex: 1;
}
.newRepair .conentBox .flowChart .pits .yesLine {
  border-top: 0.03rem rgb(1, 85, 157) solid;
}
.newRepair .conentBox .flowChart .pits .no {
  color: #cccccc;
}
.newRepair .conentBox .flowChart .pits .yes {
  color: #005359;
}
.newRepair .conentBox .flowChart .pits .now {
  color: #48a843;
}
.newRepair .conentBox .flowChart .pits .shenqing {
  position: absolute;
  left: 8%;
  top: -0.12rem;
}
.newRepair .conentBox .flowChart .pits .shouli {
  position: absolute;
  left: 28%;
  top: -0.12rem;
}
.newRepair .conentBox .flowChart .pits .chuli {
  position: absolute;
  left: 48%;
  top: -0.12rem;
}
.newRepair .conentBox .flowChart .pits .pingjia {
  position: absolute;
  left: 68%;
  top: -0.12rem;
}
.newRepair .conentBox .flowChart .pits .wancheng {
  position: absolute;
  left: 88%;
  top: -0.12rem;
}
.newRepair .conentBox .flowChart .words {
  display: flex;
  margin-top: 0.3rem;
}
.newRepair .conentBox .flowChart .words div {
  flex: 1;
  font-size: 0.32rem;
  text-align: center;
  color: #333333;
}
/* 最新公告 */
.newNotice {
  border-top: 0.16rem rgb(238, 238, 238) solid;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.newNotice .conentBox {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
.newNotice .conentBox .conent {
  padding: 0.24rem 0.64rem;
  border-bottom: 0.01rem rgb(238, 238, 238) solid;
}
.newNotice .conentBox .conent .head {
  line-height: 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  font-size: 0.32rem;
}
/* .newNotice .conentBox .conent .head span{
    font-size: .32rem;
} */
.newNotice .conentBox .conent .cot {
  font-size: 0.24rem;
  color: #999999;
  line-height: 0.34rem;
  margin-top: 0.08rem;
}
.wushuju {
  text-align: center;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
.loading {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>