DownloadDetail.uvue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. <template>
  2. <!-- #ifdef APP -->
  3. <scroll-view style="flex:1">
  4. <!-- #endif -->
  5. <!-- 报告基础信息 -->
  6. <view class="section">
  7. <view class="info-item">
  8. <text class="label">检验任务</text>
  9. <text class="value">{{ download.workorder}}</text>
  10. </view>
  11. <view class="info-item">
  12. <text class="label">{{ download.productcode }}</text>
  13. <text class="value">{{ download.invname }}</text>
  14. </view>
  15. </view>
  16. <view class="section">
  17. <uni-table v-for="(item,index) in taskProcessList" :key="index">
  18. <uni-tr>
  19. <uni-td class="grid-text">{{item.gxno}}</uni-td>
  20. </uni-tr>
  21. <uni-tr class="section-title" @click="enterItem(item.pdid, 0)">
  22. <uni-td class="grid-text">拍照点</uni-td>
  23. <uni-td class="grid-text">
  24. <text :class="{
  25. 'bg-green bg-text': item.photoStatus == '已完成',
  26. 'bg-yellow bg-text': item.photoCount > 0 && item.photoCount < item.photoTotal,
  27. 'bg-black bg-text': item.photoCount == 0,
  28. }">
  29. {{item.photoCount}} / {{item.photoTotal}}
  30. </text>
  31. </uni-td>
  32. <uni-td class="grid-text">{{item.photoStatus}}</uni-td>
  33. </uni-tr>
  34. <uni-tr class="section-title" @click="enterItem(item.pdid, 1)">
  35. <uni-td class="grid-text">检验记录</uni-td>
  36. <uni-td class="grid-text">
  37. <text :class="{
  38. 'bg-green bg-text': item.recordCount == item.recordTotal,
  39. 'bg-yellow bg-text': item.recordCount > 0 && item.recordCount < item.recordTotal,
  40. 'bg-black bg-text': item.recordCount == 0,
  41. }">
  42. {{item.recordCount}} / {{item.recordTotal}}
  43. </text>
  44. </uni-td>
  45. <uni-td class="grid-text"><text :class="{
  46. 'ft-red':item.recordStatus == '不合格'
  47. }">{{item.recordStatus}}</text></uni-td>
  48. </uni-tr>
  49. <uni-tr class="section-title" @click="enterItem(item.pdid, 2)">
  50. <uni-td class="grid-text">关键工序记录</uni-td>
  51. <uni-td class="grid-text">
  52. <text :class="{
  53. 'bg-green bg-text': item.keyCount == item.keyTotal,
  54. 'bg-yellow bg-text': item.keyCount > 0 && item.keyCount < item.keyTotal,
  55. 'bg-black bg-text': item.keyCount == 0,
  56. }">
  57. {{item.keyCount}} / {{item.keyTotal}}
  58. </text>
  59. </uni-td>
  60. <uni-td class="grid-text"><text :class="{
  61. 'ft-red':item.keyStatus == '不合格'
  62. }">{{item.keyStatus}}</text></uni-td>
  63. </uni-tr>
  64. </uni-table>
  65. </view>
  66. <!-- #ifdef APP -->
  67. </scroll-view>
  68. <!-- #endif -->
  69. </template>
  70. <script setup>
  71. import {
  72. ref,
  73. onMounted
  74. } from 'vue'
  75. import { getList, TaskDownload, statusDict, TaskInfo, getTaskDetail, TaskDetail } from '@/api/work';
  76. //自定义返回行为,覆盖系统默认返回按钮
  77. const backPressOptions = reactive({
  78. from: 'backbutton'
  79. } as OnBackPressOptions)
  80. onBackPress((options : OnBackPressOptions) : boolean | null => {
  81. console.log('onBackPress', options)
  82. uni.navigateTo({
  83. url: `/pages/work/download/DownloadList`,
  84. // 修改动画方向为从左到右退回
  85. animationType: 'slide-in-left', // 使用从左到右滑出的动画效果
  86. animationDuration: 300 // 动画持续时间,单位ms
  87. })
  88. // 返回true表示拦截默认返回行为
  89. return true
  90. })
  91. const titleList = [{
  92. title1: "部位", title2: "进度", title3: "状态"
  93. }];
  94. var taskProcessList = ref<TaskDetail[]>([]);
  95. var initTasks = [] as TaskDetail[]
  96. //const statusMap = ref(new Map<number, string>([[1,'未执行'],[2,'执行中'],[3,'执行完'],[4,'检验失败']]))
  97. const download = ref<TaskDownload>({
  98. pdid: 0,
  99. gxpk: '',
  100. cardno: '',
  101. productcode: '',
  102. model: '',
  103. workorder: '',
  104. invname: '',
  105. graphid: '',
  106. processno: '',
  107. gxno: '',
  108. ver: '',
  109. lastupdatetime: '',
  110. updateuser: '',
  111. uploadflag: 0,
  112. progress: ''
  113. })
  114. onLoad((options) => {
  115. const downloadId = options?.id ?? ""
  116. // 模拟数据加载,建议替换为后端接口请求
  117. // #ifdef APP-ANDROID
  118. //获取下载产品数据
  119. getList('app_task_info', 'pdid', downloadId, null, null, null).then((res : UTSJSONObject) => {
  120. console.log(res)
  121. let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
  122. if (dataList != null && dataList.length > 0) {
  123. let obj = dataList[0]
  124. if (obj != null) {
  125. let data = JSON.parse<TaskDownload>(obj.toJSONString());
  126. if (data != null) {
  127. download.value = data
  128. }
  129. }
  130. }
  131. })
  132. //获取下载产品任务数据
  133. getTaskDetail('pdid', downloadId).then((res : UTSJSONObject) => {
  134. console.log(res)
  135. let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
  136. if (dataList != null && dataList.length > 0) {
  137. dataList.forEach(item => {
  138. if (item != null) {
  139. let task = JSON.parse<TaskDetail>(item.toJSONString());
  140. if (task != null) {
  141. initTasks.push(task)
  142. }
  143. }
  144. });
  145. }
  146. taskProcessList.value = initTasks
  147. })
  148. // #endif
  149. })
  150. const goBack = () => {
  151. uni.navigateBack()
  152. }
  153. const enterItem = (id : string, type : number) => {
  154. let url = ''
  155. if (type == 0) {
  156. url = `/pages/work/download/PhotoRecord?pdid=${id}`
  157. } else if (type == 1) {
  158. url = `/pages/work/report/InspectionList?pdid=${id}`
  159. } else if (type == 2) {
  160. url = `/pages/work/process/ProcessList?pdid=${id}`
  161. }
  162. uni.navigateTo({
  163. url
  164. });
  165. }
  166. </script>
  167. <style scoped>
  168. .container {
  169. padding: 40rpx;
  170. background-color: #f5f7fa;
  171. flex: 1;
  172. box-sizing: border-box;
  173. }
  174. .banner {
  175. background: linear-gradient(135deg, #2193b0, #6dd5ed);
  176. border-radius: 24rpx;
  177. padding: 40rpx 30rpx;
  178. margin-bottom: 40rpx;
  179. box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
  180. }
  181. .banner-title {
  182. color: white;
  183. font-size: 36rpx;
  184. font-weight: bold;
  185. text-align: center;
  186. }
  187. .section {
  188. background-color: #fff;
  189. border-radius: 20rpx;
  190. padding: 30rpx;
  191. margin-bottom: 30rpx;
  192. box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
  193. }
  194. .section-title {
  195. display: flex;
  196. flex-direction: row;
  197. flex: 1;
  198. }
  199. .info-item {
  200. display: flex;
  201. justify-content: space-between;
  202. /* #ifdef APP-NVUE */
  203. font-size: 28rpx;
  204. color: #666;
  205. /* #endif */
  206. margin-bottom: 18rpx;
  207. flex-direction: row;
  208. }
  209. .section-content {
  210. font-size: 28rpx;
  211. color: #444;
  212. line-height: 1.8;
  213. white-space: normal;
  214. }
  215. /* 表格容器样式 */
  216. uni-table {
  217. width: 100%;
  218. background-color: #fff;
  219. /* 设置表格背景色 */
  220. border-radius: 8rpx;
  221. overflow: hidden;
  222. /* 去除列表样式,解决第一列前的小短横 */
  223. list-style-type: none;
  224. }
  225. /* 表格行样式 */
  226. uni-tr {
  227. width: 100%;
  228. /* #ifdef APP-ANDROID */
  229. border-bottom: 1rpx solid #f0f0f0;
  230. /* Android设备添加底边框 */
  231. /* #endif */
  232. }
  233. /* 表格单元格样式 */
  234. uni-td {
  235. /* #ifdef APP-ANDROID */
  236. border-right: 1rpx solid #f0f0f0;
  237. /* Android设备添加右边框 */
  238. /* #endif */
  239. }
  240. /* 最后一列去除右边框 */
  241. uni-tr uni-td:last-child {
  242. /* #ifdef APP-ANDROID */
  243. border-right: none;
  244. /* #endif */
  245. }
  246. /* 最后一行去除底边框 */
  247. uni-table uni-tr:last-child {
  248. /* #ifdef APP-ANDROID */
  249. border-bottom: none;
  250. /* #endif */
  251. }
  252. .grid-text {
  253. /* #ifdef APP-NVUE */
  254. font-size: 24rpx;
  255. color: #000;
  256. /* #endif */
  257. padding: 10rpx 0 10rpx 0rpx;
  258. box-sizing: border-box;
  259. margin: 10rpx 10rpx;
  260. min-width: 180rpx;
  261. }
  262. .footer-btn {
  263. margin-top: 40rpx;
  264. display: flex;
  265. justify-content: center;
  266. }
  267. .main-btn {
  268. width: 80%;
  269. padding: 28rpx 0;
  270. font-size: 30rpx;
  271. color: #fff;
  272. border: none;
  273. border-radius: 100rpx;
  274. background: linear-gradient(to right, #36d1dc, #5b86e5);
  275. box-shadow: 0 10rpx 24rpx rgba(91, 134, 229, 0.3);
  276. }
  277. .label {
  278. font-weight: bold;
  279. color: #102a43;
  280. min-width: 150rpx;
  281. margin-right: 30rpx;
  282. }
  283. .value {
  284. flex: 1;
  285. /* #ifdef APP-NVUE */
  286. white-space: nowrap;
  287. text-overflow: ellipsis;
  288. /* #endif */
  289. overflow: hidden;
  290. margin-left: 30rpx;
  291. }
  292. .my-radius {
  293. border-radius: 10rpx;
  294. }
  295. .bg-text {
  296. width: 120rpx;
  297. min-width: 100rpx;
  298. border-radius: 10rpx;
  299. text-align: center;
  300. }
  301. .bg-green {
  302. background-color: seagreen;
  303. color: #fff;
  304. }
  305. .bg-yellow {
  306. background-color: yellow;
  307. }
  308. .bg-black {
  309. background-color: #102a43;
  310. color: #fff;
  311. }
  312. .bg-red {
  313. background-color: red;
  314. color: #fff;
  315. }
  316. .ft-red {
  317. color: red;
  318. }
  319. </style>