Newer
Older
urbanLifeline_YanAn / src / views / order / workOrderProcessing / index.vue
@zhangzhihui zhangzhihui on 24 Dec 6 KB 考核
  1. <template>
  2. <div class="workOrderProcessing publicContainer">
  3. <div class="orderTop">
  4. <div class="subtitle">
  5. 工单统计 <el-icon @click="refreshOrder" class="btn" :class="is_refresh ? 'goRefresh' : ''"><Refresh /></el-icon>
  6. </div>
  7. <div
  8. class="orderTitle"
  9. v-for="(item, index) in orderList"
  10. :key="item.code"
  11. :class="{ active: item.value == showOrderCode }"
  12. @click="changeOrder(item)"
  13. >
  14. <img :src="item.icon" alt="" class="titleIcon" />
  15. <div class="titleCon">
  16. <div class="orderName">{{ item.title }}</div>
  17. <div class="orderNum" v-if="index != 0">{{ '( ' + (item.num || 0) + ' )' }}</div>
  18. </div>
  19. </div>
  20. </div>
  21. <div class="orderBottom">
  22. <registerOrder v-if="showOrderCode == 'launch'"></registerOrder>
  23. <checkOrder v-if="showOrderCode !== 'launch'" :status="showOrderCode" ref="checkOrderRef"></checkOrder>
  24. </div>
  25. </div>
  26. </template>
  27.  
  28. <script setup name="workOrderProcessing">
  29. import checkOrder from './components/checkOrder.vue';
  30. import registerOrder from './components/registerOrder.vue';
  31. import bus from '@/bus';
  32. import { groupCount } from '@/api/order';
  33.  
  34. import gddj_icon from '@/assets/images/order/gddj_icon.png';
  35. import sl_icon from '@/assets/images/order/sl_icon.png';
  36. import tj_icon from '@/assets/images/order/tj_icon.png';
  37. import fp_icon from '@/assets/images/order/fp_icon.png';
  38. import xy_icon from '@/assets/images/order/xy_icon.png';
  39. import sb_icon from '@/assets/images/order/sb_icon.png';
  40. import hs_icon from '@/assets/images/order/hs_icon.png';
  41. import ja_icon from '@/assets/images/order/ja_icon.png';
  42. // registerOrder
  43.  
  44. const checkOrderRef = ref(null);
  45.  
  46. const timeId = null;
  47. const showOrderCode = ref('reassign');
  48. const is_refresh = ref(false);
  49. const orderList = ref([
  50. {
  51. code: 'register',
  52. title: '登记工单',
  53. icon: gddj_icon,
  54. value: 'launch',
  55. num: null,
  56. },
  57. ]);
  58. const orderTitleList = ref([
  59. {
  60. code: 'register',
  61. title: '登记工单',
  62. icon: gddj_icon,
  63. value: 'launch',
  64. num: null,
  65. },
  66. {
  67. code: 'reassign',
  68. title: '二次分配',
  69. icon: sl_icon,
  70. value: 'reassign',
  71. num: null,
  72. },
  73. {
  74. code: 'submit',
  75. title: '工单提交',
  76. icon: tj_icon,
  77. value: 'submit',
  78. num: null,
  79. },
  80. {
  81. code: 'assign',
  82. title: '工单分派',
  83. icon: fp_icon,
  84. value: 'assign',
  85. num: null,
  86. },
  87. {
  88. code: 'response',
  89. title: '工单响应',
  90. icon: xy_icon,
  91. value: 'response',
  92. num: null,
  93. },
  94. {
  95. code: 'report',
  96. title: '工单上报',
  97. icon: sb_icon,
  98. value: 'report',
  99. num: null,
  100. },
  101. {
  102. code: 'check',
  103. title: '工单核实',
  104. icon: hs_icon,
  105. value: 'check',
  106. num: null,
  107. },
  108. // {
  109. // code: 'complete',
  110. // title: '工单结案',
  111. // icon: ja_icon,
  112. // value: 'complete',
  113. // num: null,
  114. // },
  115. ]);
  116.  
  117. const changeOrder = item => {
  118. // debugger;
  119. showOrderCode.value = item.value;
  120. // console.log('changeOrder');
  121. };
  122.  
  123. const getOrderList = () => {
  124. groupCount({ queryScope: 'todo' }).then(res => {
  125. // console.log(res);
  126. orderList.value = orderTitleList.value
  127. .filter(item => {
  128. return res.data.hasOwnProperty(item.code);
  129. })
  130. .map(item => {
  131. return {
  132. ...item,
  133. num: res.data[item.code] || 0,
  134. };
  135. });
  136. });
  137. };
  138.  
  139. const refreshOrder = () => {
  140. if (is_refresh.value) return;
  141. is_refresh.value = true;
  142. getOrderList();
  143. checkOrderRef.value.getList();
  144. timeId = setTimeout(() => {
  145. is_refresh.value = false;
  146. }, 1000); // 动画持续时间与CSS中的相同
  147. };
  148.  
  149. onMounted(() => {
  150. getOrderList();
  151. bus.on('orderTitleList', () => {
  152. getOrderList();
  153. });
  154. });
  155. onBeforeUnmount(() => {
  156. bus.off('orderTitleList');
  157. if (timeId) {
  158. clearInterval(timeId);
  159. timeId = null;
  160. }
  161. });
  162. </script>
  163.  
  164. <style lang="scss" scoped>
  165. .workOrderProcessing {
  166. width: 100%;
  167. height: 100%;
  168. box-sizing: border-box;
  169. background-color: #f4f4f4;
  170. // border: 1px solid red;
  171. .orderTop {
  172. width: 100%;
  173. height: 196px;
  174. position: relative;
  175. display: flex;
  176. // justify-content: space-evenly;
  177. align-items: flex-end;
  178. background: url('@/assets/images/order/gdbg_img.png') no-repeat;
  179. background-size: 100% 100%;
  180. // border: 1px solid red;
  181. .subtitle {
  182. position: absolute;
  183. left: 20px;
  184. top: 20px;
  185. font-weight: bold;
  186. font-size: 17px;
  187. color: #333333;
  188. display: flex;
  189. align-items: center;
  190. .btn {
  191. margin-left: 10px;
  192. cursor: pointer;
  193. }
  194. .goRefresh {
  195. animation: spin 1s linear forwards;
  196. }
  197. }
  198. .orderTitle {
  199. // margin-right: 30px;
  200. // background-color: red;
  201. // z-index: 999999;
  202. position: relative;
  203. margin-bottom: 30px;
  204. margin-left: 20px;
  205. display: flex;
  206. // flex-direction: column;
  207. align-items: center;
  208. justify-content: center;
  209. border-radius: 10px;
  210. width: 186px;
  211. height: 100px;
  212. background: #ffffff;
  213. // background-color: red;
  214. border-radius: 5px;
  215. border: 1px solid #dededf;
  216. cursor: pointer;
  217. font-weight: bold;
  218. font-size: 18px;
  219. color: #333333;
  220. &.active {
  221. background: linear-gradient(90deg, #95bdff 0%, #f1f6ff 100%);
  222. border-radius: 5px;
  223. border: 2px solid #4285f4;
  224. }
  225. .titleIcon {
  226. width: 66px;
  227. height: 66px;
  228. margin-right: 14px;
  229. }
  230. // .orderName {
  231. // // font-size: 24px;
  232. // }
  233. // .orderNum {
  234. // // font-size: 20px;
  235. // }
  236. }
  237. }
  238. .orderBottom {
  239. // padding-top: 20px;
  240. margin-top: 20px;
  241. width: 100%;
  242. height: calc(100% - 216px);
  243. background: #ffffff;
  244. border-radius: 6px;
  245. padding: 10px 20px;
  246. // border: 1px solid red;
  247. box-sizing: border-box;
  248. // .chooseBox {
  249. // // padding: 20px 0;
  250. // }
  251. .chooseType {
  252. margin-left: 20px;
  253. }
  254. .title {
  255. font-size: 16px;
  256. }
  257. }
  258. }
  259.  
  260. @keyframes spin {
  261. from {
  262. transform: rotate(0deg);
  263. }
  264. to {
  265. transform: rotate(360deg);
  266. }
  267. }
  268. </style>