DownloadDetail.uvue 7.5 KB

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