Newer
Older
urbanLifeline_YanAn / src / views / order / workOrderProcessing / index.vue
@zhangzhihui zhangzhihui on 1 Nov 3 KB ui工单
  1. <template>
  2. <div class="workOrderProcessing publicContainer">
  3. <div class="orderTop">
  4. <div class="subtitle">工单统计</div>
  5. <div
  6. class="orderTitle"
  7. v-for="(item, index) in orderTitleList"
  8. :key="item.code"
  9. :class="{ active: item.code == showOrderCode }"
  10. @click="showOrderCode = item.code"
  11. >
  12. <img :src="item.icon" alt="" class="titleIcon" />
  13. <div class="titleCon">
  14. <div class="orderName">{{ item.title }}</div>
  15. <div class="orderNum" v-if="index != 0">{{ '( ' + item.num + ' )' }}</div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="orderBottom">
  20. <registerOrder v-if="showOrderCode == '001'"></registerOrder>
  21. <checkOrder v-if="showOrderCode !== '001'"></checkOrder>
  22. </div>
  23. </div>
  24. </template>
  25.  
  26. <script setup name="workOrderProcessing">
  27. import checkOrder from './components/checkOrder.vue';
  28. import registerOrder from './components/registerOrder.vue';
  29.  
  30. import gddj_icon from '@/assets/images/order/gddj_icon.png';
  31. import sl_icon from '@/assets/images/order/sl_icon.png';
  32. import tj_icon from '@/assets/images/order/tj_icon.png';
  33. import fp_icon from '@/assets/images/order/fp_icon.png';
  34. import xy_icon from '@/assets/images/order/xy_icon.png';
  35. import sb_icon from '@/assets/images/order/sb_icon.png';
  36. import hs_icon from '@/assets/images/order/hs_icon.png';
  37. import ja_icon from '@/assets/images/order/ja_icon.png';
  38. // registerOrder
  39.  
  40. const showOrderCode = ref('002');
  41. const orderTitleList = ref([
  42. {
  43. code: '001',
  44. title: '登记工单',
  45. icon: gddj_icon,
  46. num: '1',
  47. },
  48. {
  49. code: '002',
  50. title: '工单受理',
  51. icon: sl_icon,
  52. num: '0',
  53. },
  54. {
  55. code: '003',
  56. title: '工单提交',
  57. icon: tj_icon,
  58. num: '0',
  59. },
  60. {
  61. code: '004',
  62. title: '工单分派',
  63. icon: fp_icon,
  64. num: '0',
  65. },
  66. {
  67. code: '005',
  68. title: '工单响应',
  69. icon: xy_icon,
  70. num: '0',
  71. },
  72. {
  73. code: '006',
  74. title: '工单上报',
  75. icon: sb_icon,
  76. num: '0',
  77. },
  78. {
  79. code: '007',
  80. title: '工单核实',
  81. icon: hs_icon,
  82. num: '0',
  83. },
  84. {
  85. code: '008',
  86. title: '工单结案',
  87. icon: ja_icon,
  88. num: '0',
  89. },
  90. ]);
  91. </script>
  92.  
  93. <style lang="scss" scoped>
  94. .workOrderProcessing {
  95. width: 100%;
  96. height: 100%;
  97. box-sizing: border-box;
  98. background-color: #f4f4f4;
  99. // border: 1px solid red;
  100. .orderTop {
  101. width: 100%;
  102. height: 196px;
  103. position: relative;
  104. display: flex;
  105. justify-content: space-evenly;
  106. align-items: flex-end;
  107. background: url('@/assets/images/order/gdbg_img.png') no-repeat;
  108. background-size: 100% 100%;
  109. // border: 1px solid red;
  110. .subtitle {
  111. position: absolute;
  112. left: 20px;
  113. top: 20px;
  114. font-weight: bold;
  115. font-size: 17px;
  116. color: #333333;
  117. }
  118. .orderTitle {
  119. // margin-right: 30px;
  120. margin-bottom: 30px;
  121. display: flex;
  122. // flex-direction: column;
  123. align-items: center;
  124. justify-content: center;
  125. border-radius: 10px;
  126. width: 186px;
  127. height: 100px;
  128. background: #ffffff;
  129. border-radius: 5px;
  130. border: 1px solid #dededf;
  131. cursor: pointer;
  132. font-weight: bold;
  133. font-size: 18px;
  134. color: #333333;
  135. &.active {
  136. background: linear-gradient(90deg, #95bdff 0%, #f1f6ff 100%);
  137. border-radius: 5px;
  138. border: 2px solid #4285f4;
  139. }
  140. .titleIcon {
  141. width: 66px;
  142. height: 66px;
  143. margin-right: 14px;
  144. }
  145. // .orderName {
  146. // // font-size: 24px;
  147. // }
  148. // .orderNum {
  149. // // font-size: 20px;
  150. // }
  151. }
  152. }
  153. .orderBottom {
  154. // padding-top: 20px;
  155. margin-top: 20px;
  156. width: 100%;
  157. height: calc(100% - 216px);
  158. background: #ffffff;
  159. border-radius: 6px;
  160. padding: 20px;
  161. // border: 1px solid red;
  162. box-sizing: border-box;
  163. // .chooseBox {
  164. // // padding: 20px 0;
  165. // }
  166. .chooseType {
  167. margin-left: 20px;
  168. }
  169. .title {
  170. font-size: 16px;
  171. }
  172. }
  173. }
  174. </style>