indes.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  1. <template>
  2. <div class="fle bgColor">
  3. <!-- 头部导航栏 -->
  4. <div class="tav">
  5. <router-link to="/NewIncident">
  6. <i class="iconfont icon-xinjian"></i>
  7. <span>新建事件</span>
  8. </router-link>
  9. <!-- <div @click="toNewIncident()">
  10. <i class="iconfont icon-xinjian"></i>
  11. <span>新建事件</span>
  12. </div>-->
  13. <router-link to="/knowList" v-if="wxClQuestions == 0">
  14. <i class="iconfont icon-message"></i>
  15. <span>常见问题</span>
  16. </router-link>
  17. <a :href="wxClQuestions" v-if="wxClQuestions != 0 && wxClQuestions != -1">
  18. <i class="iconfont icon-xinjian"></i>
  19. <span>常见问题</span>
  20. </a>
  21. <router-link to="/guide">
  22. <i class="iconfont icon-fuwuzhinan"></i>
  23. <span>公告公示</span>
  24. </router-link>
  25. <a @click.prevent="scan()" v-if="incidentWithConsumable == 1">
  26. <i class="dash dash-saoyisao"></i>
  27. <span>扫一扫</span>
  28. </a>
  29. <!-- <div @click="toKnowList()">
  30. <i class="iconfont icon-message"></i>
  31. <span>常见问题</span>
  32. </div>
  33. <div @click="toGuide()">
  34. <i class="iconfont icon-fuwuzhinan"></i>
  35. <span>公告公示</span>
  36. </div>-->
  37. </div>
  38. <div class="bigBody">
  39. <!-- 统计信息 -->
  40. <div
  41. class="newStatistics"
  42. v-if="!newStatisticsLoading && isShowNewStatistics"
  43. >
  44. <div class="buildOrder">
  45. <router-link
  46. class="buildOrderItem"
  47. :to="{ path: '/main/incidentList/today' }"
  48. tag="div"
  49. >
  50. <div class="s_num">{{ newStatistics.createOrders }}</div>
  51. <div>今日建单</div>
  52. </router-link>
  53. <router-link
  54. class="buildOrderItem"
  55. :to="{ path: '/main/incidentList/todo' }"
  56. tag="div"
  57. >
  58. <div class="s_num">{{ newStatistics.todoOrders }}</div>
  59. <div>待处理</div>
  60. </router-link>
  61. </div>
  62. <div class="attendance">
  63. <router-link class="attendanceItem" :to="{ path: '/main/workList/1/0' }" tag="div">
  64. <div class="s_num">{{ newStatistics.usersCount }}</div>
  65. <div>应到</div>
  66. </router-link>
  67. <router-link class="attendanceItem" :to="{ path: '/main/workList/1/1' }" tag="div">
  68. <div class="s_num">{{ newStatistics.onlineCount }}</div>
  69. <div>实到</div>
  70. </router-link>
  71. <router-link class="attendanceItem" :to="{ path: '/main/workList/1/4' }" tag="div">
  72. <div class="s_num">{{ newStatistics.unOnlineCount }}</div>
  73. <div>未打卡</div>
  74. </router-link>
  75. <router-link class="attendanceItem" :to="{ path: '/main/workList/2/3' }" tag="div">
  76. <div class="s_num">{{newStatistics.errorOfflineCount}}</div>
  77. <div>昨日早退</div>
  78. </router-link>
  79. </div>
  80. </div>
  81. <!-- loading -->
  82. <div
  83. class="newStatistics loading"
  84. v-if="newStatisticsLoading && isShowNewStatistics"
  85. >
  86. <cube-loading :size="30"></cube-loading>
  87. </div>
  88. <!-- 最新报修 -->
  89. <div class="newRepair">
  90. <div class="titHead">
  91. <span class="tit">
  92. <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
  93. <span>待办事项</span>
  94. </span>
  95. <span class="link" @click="toIncidentList('todo')">
  96. 更多
  97. <i class="iconfont icon-moren"></i>
  98. </span>
  99. </div>
  100. <div
  101. class="conentBox"
  102. v-for="item in dataList"
  103. :key="item.id"
  104. @click="toIncidentDetails(item)"
  105. v-if="!!dataList.length"
  106. >
  107. <!-- <div class="conentBox" v-for="v in dataList" @click="toIncidentDetails(v)" v-if="!newRapirNoData&&!newRapirLoading"> -->
  108. <div class="conent">
  109. <div class="head">
  110. <p>
  111. 事件单号:{{ item.incidentsign }}
  112. <span
  113. :class="{
  114. btn: true,
  115. daipingjia: item.state.name == '待评价',
  116. daijiedan:
  117. item.state.name == '待接单' &&
  118. item.state.name == '待接单' &&
  119. item.handlerUser &&
  120. !item.candidateGroups,
  121. daiqiangdan:
  122. item.state.name == '待接单' &&
  123. item.state.name == '待接单' &&
  124. !item.handlerUser &&
  125. item.candidateGroups,
  126. chulizhong: item.state.name == '处理中',
  127. yijiejue: item.state.name == '已解决',
  128. yiguanbi: item.state.name == '已关闭',
  129. chongxinzhipai: item.state.name == '重新指派'
  130. }"
  131. >{{
  132. item.state.name == "待接单"
  133. ? item.handlerUser && !item.candidateGroups
  134. ? "待接单"
  135. : "待抢单"
  136. : item.state.name
  137. }}</span
  138. >
  139. </p>
  140. </div>
  141. <div class="center">
  142. <p class="desc">
  143. <span class="fl">事件描述:</span>
  144. <span
  145. class="grayFont overflowEllipsis2"
  146. v-html="item.description"
  147. ></span>
  148. </p>
  149. <p v-if="valConfig == 1">
  150. 报修人:
  151. <span class="grayFont">{{ item.requester.name }}</span>
  152. <span v-if="!item.contactsInformation"></span>
  153. <span @click.stop v-if="item.contactsInformation"
  154. ><a :href="'tel:' + item.contactsInformation"
  155. >(<i class="iconfont icon-shouji"></i
  156. >{{ item.contactsInformation }})</a
  157. ></span
  158. >
  159. </p>
  160. <p v-if="valConfig == 2">
  161. 报修科室 :
  162. <span class="grayFont">{{
  163. item.department ? item.department.dept : ""
  164. }}</span>
  165. </p>
  166. </div>
  167. <div class="bottom">
  168. <span v-if="!item.place"></span>
  169. <span
  170. v-if="item.place"
  171. style="width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
  172. >{{ item.place.area.area }} {{ item.place.place }}
  173. {{ item.houseNumber }}</span
  174. >
  175. <span>{{ item.acceptDate | timeFormat("MM-dd HH:mm") }}</span>
  176. </div>
  177. </div>
  178. </div>
  179. <!-- 无数据 -->
  180. <div class="wushuju" v-if="!dataList.length && !newRapirLoading">
  181. <img src="./../../static/images/wushuju.svg" alt />
  182. <p>暂无待办事项</p>
  183. </div>
  184. <!-- loading -->
  185. <div class="loading" v-if="newRapirLoading">
  186. <cube-loading :size="30"></cube-loading>
  187. </div>
  188. </div>
  189. <!-- 最新公告 -->
  190. <div class="newNotice">
  191. <div class="titHead">
  192. <span class="tit">
  193. <i class="iconfont icon-message newNoticeico"></i>
  194. <span>最新公告</span>
  195. </span>
  196. <span class="link" @click="toGuide()">
  197. 更多
  198. <i class="iconfont icon-moren"></i>
  199. </span>
  200. </div>
  201. <div class="conentBox" v-if="!newNoticeNoData && !newNoticeLoading">
  202. <div class="conent" v-for="v in noticeData" :key="v.id" @click="toGuideDetail(v)">
  203. <div class="head overflowEllipsis2">{{ v.title }}</div>
  204. <div class="cot">
  205. {{ v.createTime | timeFormat("yyyy-MM-dd HH:mm") }}
  206. </div>
  207. </div>
  208. </div>
  209. <!-- 无数据 -->
  210. <div class="wushuju" v-if="newNoticeNoData">
  211. <img src="./../../static/images/wugonggao.svg" alt />
  212. <p>暂无最新公告</p>
  213. </div>
  214. <!-- loading -->
  215. <div class="loading" v-if="newNoticeLoading">
  216. <cube-loading :size="30"></cube-loading>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. </template>
  222. <script>
  223. import { formatDate } from "./../components/js/date.js";
  224. import { SM } from "./../http/http";
  225. export default {
  226. data() {
  227. return {
  228. wxClQuestions:localStorage.getItem("wxClQuestions"),
  229. loginUser: JSON.parse(localStorage.getItem("loginUser")),
  230. incidentWithConsumable: localStorage.getItem("incidentWithConsumable"),//是否绑定耗材
  231. wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"),//是否绑定资产
  232. noticeData: "", //公告列表
  233. dataList: "", //最新报修
  234. state: "", //流程状态
  235. newRapirNoData: false, //最新报修无数据
  236. newNoticeNoData: false,
  237. newRapirLoading: true, //最新报修loading
  238. newNoticeLoading: true, //最新公告loading
  239. candidateGroups: "",
  240. valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
  241. newStatistics: {
  242. createOrders: 0, //今日建单
  243. todoOrders: 0, //处理中
  244. usersCount: 0, //今日上班应到
  245. onlineCount: 0, //今日上班实到
  246. errorCount: 0 //今日迟到
  247. }, //统计数据
  248. newStatisticsLoading: false, //统计数据Loading
  249. isShowNewStatistics: false
  250. };
  251. },
  252. methods: {
  253. scan(){
  254. // this.$router.push({name:'ScanResult',params:{data:'[{"name":"资产名称","value":"哈哈哈"},{"name":"数量","value":"12"}]'}});
  255. SM(this).then((ress1) => {
  256. this.$router.push({name:'ScanResult',params:{data:ress1}});
  257. })
  258. },
  259. // 获取公告列表数据
  260. getNoticData() {
  261. console.log(this.valConfig);
  262. // alert('公告列表')
  263. var that = this;
  264. this.$http
  265. .post("service/user/data/fetchDataList/notice", {
  266. idx: 0,
  267. sum: 3,
  268. notice: { status: 1 }
  269. })
  270. .then(function(res) {
  271. // alert(JSON.stringify(res.data))
  272. that.newNoticeLoading = false;
  273. if (res.data.list.length > 0) {
  274. that.newNoticeNoData = false;
  275. that.noticeData = res.data.list;
  276. } else {
  277. that.newNoticeNoData = true;
  278. }
  279. });
  280. },
  281. // 获取统计信息
  282. getManagerIndexInfo() {
  283. this.newStatisticsLoading = true;
  284. this.$http.post("service/bpm/data/getManagerIndexInfo", {today:true}).then(res => {
  285. this.newStatisticsLoading = false;
  286. if (res.status == 200) {
  287. this.newStatistics = res.data.data;
  288. }
  289. });
  290. },
  291. // 获取最新报修
  292. getNewRapir() {
  293. var that = this;
  294. this.$http
  295. .post("service/bpm/bpm/fetchTask/bpm_incident", {
  296. assignee: that.loginUser.id,
  297. candidateGroups: that.candidateGroups,
  298. searchType: "todo",
  299. idx: 0,
  300. sum: 2,
  301. incident: { temporary: true }
  302. })
  303. .then(function(res) {
  304. that.newRapirLoading = false;
  305. if (res.data.data.length > 0) {
  306. that.newRapirNoData = false;
  307. that.dataList = res.data.data;
  308. that.dataList[0].createTime = formatDate(
  309. new Date(that.dataList[0].createTime),
  310. "MM-dd hh:mm"
  311. );
  312. } else {
  313. that.newRapirNoData = true;
  314. }
  315. });
  316. },
  317. // toNewIncident() {
  318. // this.$router.push({ path: "/newIncident" });
  319. // },
  320. toNoticeDetails(data) {
  321. this.$router.push({
  322. name: "NoticeDetails",
  323. params: {
  324. data: JSON.stringify(data)
  325. }
  326. });
  327. },
  328. toNoticeList() {
  329. this.$router.push({ path: "/noticeList" });
  330. },
  331. toIncidentList(searchType) {
  332. this.$router.push({ path: "/main/incidentList/" + searchType });
  333. },
  334. // toKnowList() {
  335. // this.$router.push({ path: "/knowList" });
  336. // },
  337. toGuide() {
  338. this.$router.push({ path: "/guide" });
  339. },
  340. toGuideDetail(v) {
  341. this.$router.push({ name: "GuideDetail", params: { data: v } });
  342. },
  343. toIncidentDetails(data) {
  344. var name = "";
  345. if (data.state.value == "pending") {
  346. if (data.handlerUser && !data.candidateGroups) {
  347. // 指派给人 接单
  348. name = "Order";
  349. } else if (data.candidateGroups && !data.handlerUser) {
  350. // 指派给组 抢单
  351. name = "GrabSheet";
  352. }
  353. } else if (data.state.value == "reassign") {
  354. name = "AgainAssign";
  355. } else if (data.state.value == "handler") {
  356. name = "Processing";
  357. } else if (data.state.value == "resolved") {
  358. name = "Solved";
  359. } else if (data.state.value == "close") {
  360. name = "Closed";
  361. }
  362. this.$router.push({
  363. name: name,
  364. params: {
  365. data: data
  366. }
  367. });
  368. }
  369. },
  370. created() {
  371. this.isShowNewStatistics = this.loginUser.role.some(
  372. v =>
  373. v.rolecode == "incident-category-manager" ||
  374. v.rolecode == "incident manager"
  375. );
  376. var that = this;
  377. that.valConfig = JSON.parse(localStorage.getItem("valConfig")) - 0;
  378. that.loginUser.group.forEach(element => {
  379. that.candidateGroups += element.id + ",";
  380. });
  381. that.candidateGroups = that.candidateGroups.substring(
  382. 0,
  383. that.candidateGroups.length - 1
  384. );
  385. localStorage.removeItem("category");
  386. localStorage.removeItem("categoryVal");
  387. localStorage.removeItem("selectedCategoryTxt");
  388. localStorage.removeItem("model");
  389. localStorage.removeItem("modelData");
  390. localStorage.removeItem("place");
  391. localStorage.removeItem("referenceInfo");
  392. localStorage.removeItem("solution");
  393. localStorage.removeItem("order");
  394. this.getNoticData();
  395. this.getNewRapir();
  396. if (this.isShowNewStatistics) {
  397. this.getManagerIndexInfo();
  398. }
  399. },
  400. mounted() {}
  401. };
  402. </script>
  403. <style scoped lang="less">
  404. .fl {
  405. float: left;
  406. }
  407. .fr {
  408. float: right;
  409. }
  410. .bgColor {
  411. background-color: white;
  412. }
  413. .fle {
  414. display: flex;
  415. flex-direction: column;
  416. background-color: white;
  417. }
  418. .bigBody {
  419. display: flex;
  420. flex-direction: column;
  421. height: 100%;
  422. width: 100%;
  423. overflow: auto;
  424. }
  425. /* 头部导航栏 */
  426. .tav {
  427. height: 2rem;
  428. background: linear-gradient(#005395, #226ca8, #003057);
  429. display: flex;
  430. width: 100%;
  431. }
  432. .tav a {
  433. flex: 1;
  434. text-align: center;
  435. display: flex;
  436. flex-direction: column;
  437. align-items: center;
  438. justify-content: center;
  439. }
  440. .tav a i {
  441. font-size: 0.6rem;
  442. color: white;
  443. }
  444. .tav a span {
  445. font-size: 0.32rem;
  446. color: white;
  447. display: inline-block;
  448. margin-top: 0.16rem;
  449. }
  450. /* .bigBody{
  451. height: auto;
  452. } */
  453. /* tit导航 */
  454. .titHead {
  455. display: flex;
  456. justify-content: space-between;
  457. padding: 0 0.24rem;
  458. height: 0.88rem;
  459. line-height: 0.88rem;
  460. border-bottom: 0.01rem rgb(238, 238, 238) solid;
  461. }
  462. .titHead1 {
  463. height: 0.88rem;
  464. }
  465. .titHead .tit .newPapir {
  466. font-size: 0.36rem;
  467. color: #a37200;
  468. }
  469. .titHead .tit .newNoticeico {
  470. font-size: 0.36rem;
  471. color: #005395;
  472. }
  473. .titHead .tit span {
  474. display: inline-block;
  475. margin-left: 0.08rem;
  476. font-size: 0.36rem;
  477. }
  478. .titHead .link {
  479. font-size: 0.24rem;
  480. color: #999999;
  481. }
  482. .titHead .link i {
  483. font-size: 0.24rem;
  484. color: #999999;
  485. display: inline-block;
  486. margin-left: 0.08rem;
  487. }
  488. .newStatistics {
  489. border-bottom: 1px solid #eee;
  490. border-top: 0.16rem solid #eee;
  491. .s_num {
  492. font-size: 0.32rem;
  493. font-weight: bold;
  494. }
  495. .buildOrder {
  496. display: flex;
  497. .buildOrderItem {
  498. height: 1.2rem;
  499. flex: 1;
  500. display: flex;
  501. justify-content: space-around;
  502. align-items: center;
  503. flex-direction: column;
  504. border-right: 1px solid #eee;
  505. border-top: 1px solid #eee;
  506. padding: 0.2rem 0;
  507. box-sizing: border-box;
  508. &:last-of-type {
  509. border-right: 0;
  510. }
  511. }
  512. }
  513. .attendance {
  514. display: flex;
  515. .attendanceItem {
  516. height: 1.2rem;
  517. flex: 1;
  518. display: flex;
  519. justify-content: space-around;
  520. align-items: center;
  521. flex-direction: column;
  522. border-right: 1px solid #eee;
  523. border-top: 1px solid #eee;
  524. padding: 0.2rem 0;
  525. box-sizing: border-box;
  526. &:last-of-type {
  527. border-right: 0;
  528. }
  529. }
  530. }
  531. }
  532. .newRepair {
  533. border-top: 0.16rem rgb(238, 238, 238) solid;
  534. .conentBox {
  535. .conent {
  536. font-size: 0.32rem;
  537. font-weight: 400;
  538. line-height: 0.45rem;
  539. .head {
  540. border-bottom: 0.01rem solid #e6e6e6;
  541. p {
  542. padding: 0.24rem 0.48rem;
  543. .btn {
  544. float: right;
  545. }
  546. }
  547. }
  548. .center {
  549. color: #333333;
  550. border-bottom: 0.01rem solid #e6e6e6;
  551. padding: 0.24rem 0.48rem;
  552. p {
  553. &.desc {
  554. overflow: hidden;
  555. max-height: 0.88rem;
  556. }
  557. .grayFont {
  558. overflow-x: scroll;
  559. color: #666;
  560. }
  561. }
  562. }
  563. .bottom {
  564. display: flex;
  565. justify-content: space-between;
  566. align-items: center;
  567. overflow: hidden;
  568. height: 0.86rem;
  569. border-bottom: 0.01rem solid #e6e6e6;
  570. font-size: 0.24rem;
  571. color: #999;
  572. padding: 0 0.24rem 0 0.48rem;
  573. }
  574. }
  575. }
  576. }
  577. /* 最新公告 */
  578. .newNotice {
  579. border-top: 0.16rem rgb(238, 238, 238) solid;
  580. .conentBox {
  581. .conent {
  582. padding: 0.24rem 0.64rem;
  583. border-bottom: 0.01rem solid #eee;
  584. .head {
  585. font-size: 0.32rem;
  586. line-height: 0.45rem;
  587. }
  588. .cot {
  589. font-size: 0.24rem;
  590. color: #999;
  591. line-height: 0.34rem;
  592. }
  593. }
  594. }
  595. }
  596. .wushuju {
  597. text-align: center;
  598. color: #999;
  599. }
  600. .wushuju img {
  601. width: 5.12rem;
  602. height: 2.84rem;
  603. }
  604. .loading {
  605. height: 2rem;
  606. display: flex;
  607. justify-content: center;
  608. align-items: center;
  609. }
  610. </style>