25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 

375 satır
8.2 KiB

  1. <template>
  2. <view class="eqLog">
  3. <view class="bg"></view>
  4. <view class="tophead" :style="{height: `${CustomBar}px`}">
  5. <view class="topheads" :style="{height: `${CustomBar}px`,paddingTop: `${StatusBar}px`}">
  6. <view class="eqno">
  7. <image @click="back" class="backs" src="@/static/images/back.png" mode=""></image>
  8. <view class="middle">
  9. 设备日志
  10. </view>
  11. </view>
  12. <!-- 背景色 -->
  13. <view class="eqNo-bg"></view>
  14. </view>
  15. </view>
  16. <view class="eqNo">
  17. <view class="noInfo">
  18. <view class="left">
  19. <text style="font-weight: 500;">设备编号:{{ info.imei || '' }}</text>
  20. <text>录音说明:{{ info.recordExplain || '' }}</text>
  21. </view>
  22. <view class="right">
  23. <text>{{state(info.recording)}}</text>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="eqMain">
  28. <view class="recordingStart">
  29. <view class="items">
  30. <text>录音开启用时</text>
  31. <text class="font"
  32. :style="{color: info.recording==1?'red':'#333'}">{{info.startActionTime || 0}}min</text>
  33. </view>
  34. <view class="line"></view>
  35. <view class="items">
  36. <text>待上传文件</text>
  37. <text class="font" :style="{color: info.fileCount==0?'#333':'red'}">{{info.fileCount || 0}}个</text>
  38. </view>
  39. </view>
  40. <view class="recording">
  41. <view class="left-box">
  42. <view class="cycle"></view>
  43. <view class="point"></view>
  44. <view class="cycle"></view>
  45. </view>
  46. <view class="recordingBox">
  47. <text class="recordingBoxItem-title">录音开启</text>
  48. <view class="recordingBoxItem">
  49. <text class="left">指派人:</text>
  50. <text class="right">{{info.owenrName}}</text>
  51. </view>
  52. <view class="recordingBoxItem">
  53. <text class="left">指派时间:</text>
  54. <text class="right">{{info.assignTime}}</text>
  55. </view>
  56. <view class="recordingBoxItem">
  57. <text class="left">录音开始时间:</text>
  58. <view class="right" style="font-weight: bold;font-size: 28rpx;">
  59. <text :style="{color: info.recording==1?'red':'#333'}">
  60. {{info.recordStartTime}}
  61. </text>
  62. </view>
  63. </view>
  64. <view class="recordingBoxItem">
  65. <text class="left">设备电量:</text>
  66. <view class="right" style="font-weight: bold;font-size: 28rpx;">
  67. <text :style="{color: info.electricityStart <= 20 ?'red':'#333'}">
  68. {{info.electricityStart || ''}}
  69. </text>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="recordingBox" style="margin-top: 40rpx;">
  74. <text class="recordingBoxItem-title">录音关闭</text>
  75. <view class="recordingBoxItem">
  76. <text class="left">结束人:</text>
  77. <text class="right">{{info.userName || '--'}}</text>
  78. </view>
  79. <view class="recordingBoxItem">
  80. <text class="left">结束时间:</text>
  81. <text class="right">{{info.assignEndTime || '--'}}</text>
  82. </view>
  83. <view class="recordingBoxItem">
  84. <text class="left">录音结束时间:</text>
  85. <view class="right" style="font-weight: bold;font-size: 28rpx;">
  86. <text :style="{color: info.recording==1?'red':'#333'}">
  87. {{info.recordEndTime || '--'}}
  88. </text>
  89. </view>
  90. </view>
  91. <view class="recordingBoxItem">
  92. <text class="left">设备电量:</text>
  93. <view class="right" style="font-weight: bold;font-size: 28rpx;">
  94. <text :style="{color: info.electricityEnd <= 20 ?'red':'#333'}">
  95. {{info.electricityEnd || ''}}
  96. </text>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <view class="offlineRec">
  102. <text style="font-size:32rpx;font-weight: 700;">离线记录</text>
  103. <view class="recMain">
  104. <block v-for="(item,index) in info.offLineList" :key="index">
  105. <text>{{index+1}}、 {{item}}</text>
  106. </block>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. export default {
  114. data() {
  115. return {
  116. info: {},
  117. }
  118. },
  119. computed: {
  120. state() {
  121. return (e => {
  122. switch (e) {
  123. case 0:
  124. return "接待中";
  125. case 1:
  126. return "部分录音";
  127. default:
  128. return "完整录音";
  129. }
  130. })
  131. },
  132. },
  133. onLoad(options) {
  134. this.$u.get("/equipment/equipmentLog", {
  135. id: options.id
  136. }).then(res => {
  137. // console.log(res)
  138. this.info = res
  139. })
  140. },
  141. methods: {
  142. back() {
  143. uni.navigateBack()
  144. }
  145. }
  146. }
  147. </script>
  148. <style lang="scss">
  149. .eqLog {
  150. position: relative;
  151. width: 100vw;
  152. min-height: 100vh;
  153. background: #F8F8F8;
  154. .bg {
  155. position: absolute;
  156. top: 0;
  157. left: 0;
  158. right: 0;
  159. z-index: 0;
  160. width: 100%;
  161. height: 420rpx;
  162. background: linear-gradient(180deg, #2671E2 0%, #3B9CF4 54%, #93C8F7 100%);
  163. }
  164. .tophead {
  165. position: sticky;
  166. top: 0;
  167. z-index: 999;
  168. width: 100%;
  169. .topheads {
  170. position: relative;
  171. z-index: 1;
  172. overflow: hidden;
  173. .eqno {
  174. position: relative;
  175. z-index: 1;
  176. width: 100%;
  177. height: 100%;
  178. display: flex;
  179. align-items: center;
  180. .backs {
  181. margin-left: 24rpx;
  182. width: 48rpx;
  183. height: 48rpx;
  184. }
  185. .middle {
  186. position: absolute;
  187. left: 50%;
  188. top: 50%;
  189. transform: translate(-50%, -50%);
  190. font-size: 32rpx;
  191. color: #fff;
  192. }
  193. }
  194. .eqNo-bg {
  195. position: absolute;
  196. top: 0;
  197. left: 0;
  198. right: 0;
  199. z-index: 0;
  200. width: 100%;
  201. height: 420rpx;
  202. background: linear-gradient(180deg, #2671E2 0%, #3B9CF4 54%, #93C8F7 100%);
  203. }
  204. }
  205. }
  206. .eqNo {
  207. position: relative;
  208. z-index: 1;
  209. width: 100%;
  210. .noInfo {
  211. margin: 24rpx auto 0;
  212. padding: 24rpx;
  213. width: 690rpx;
  214. min-height: 152rpx;
  215. background: #FFFFFF;
  216. border-radius: 8rpx;
  217. display: flex;
  218. justify-content: space-between;
  219. .left {
  220. display: flex;
  221. flex-direction: column;
  222. justify-content: space-between;
  223. font-size: 32rpx;
  224. font-weight: 400;
  225. }
  226. .right {
  227. flex-shrink: 0;
  228. font-size: 32rpx;
  229. font-weight: 400;
  230. }
  231. }
  232. }
  233. .eqMain {
  234. position: relative;
  235. z-index: 1;
  236. padding: 0 30rpx;
  237. .recordingStart {
  238. margin-top: 20rpx;
  239. width: 100%;
  240. height: 164rpx;
  241. display: flex;
  242. align-items: center;
  243. border-radius: 8rpx;
  244. background: #FFFFFF;
  245. .items {
  246. flex-grow: 1;
  247. display: flex;
  248. flex-direction: column;
  249. align-items: center;
  250. justify-content: center;
  251. color: #1C1010;
  252. font-size: 30rpx;
  253. .font {
  254. margin-top: 20rpx;
  255. font-weight: 700;
  256. }
  257. }
  258. .line {
  259. width: 1rpx;
  260. height: 88rpx;
  261. background: #E0E0E0;
  262. }
  263. }
  264. .recording {
  265. position: relative;
  266. z-index: 1;
  267. margin-top: 20rpx;
  268. padding: 30rpx 30rpx 30rpx 68rpx;
  269. display: flex;
  270. flex-direction: column;
  271. background: #FFFFFF;
  272. border-radius: 8rpx;
  273. .left-box {
  274. position: absolute;
  275. left: 30rpx;
  276. top: 40rpx;
  277. width: 24rpx;
  278. height: 300rpx;
  279. display: flex;
  280. flex-direction: column;
  281. align-items: center;
  282. .cycle {
  283. width: 24rpx;
  284. height: 24rpx;
  285. flex-shrink: 0;
  286. border-radius: 50%;
  287. border: 4rpx solid #2671E2;
  288. }
  289. .point {
  290. flex-grow: 1;
  291. border-left: 5rpx dotted #2671E2;
  292. }
  293. }
  294. .recordingBox {
  295. width: 100%;
  296. display: flex;
  297. flex-direction: column;
  298. .recordingBoxItem-title {
  299. font-size: 32rpx;
  300. font-weight: 700;
  301. }
  302. .recordingBoxItem {
  303. margin-top: 24rpx;
  304. display: flex;
  305. .left {
  306. flex-shrink: 0;
  307. width: 210rpx;
  308. color: #505050;
  309. font-size: 30rpx;
  310. }
  311. .right {
  312. flex-grow: 1;
  313. font-size: 30rpx !important;
  314. overflow: hidden;
  315. text-overflow: ellipsis;
  316. white-space: nowrap;
  317. }
  318. }
  319. }
  320. }
  321. .offlineRec {
  322. margin-top: 20rpx;
  323. padding: 28rpx 24rpx;
  324. border-radius: 8rpx;
  325. background: #FFFFFF;
  326. .recMain {
  327. display: flex;
  328. flex-direction: column;
  329. text {
  330. margin: 24rpx 0;
  331. font-size: 30rpx;
  332. }
  333. }
  334. }
  335. }
  336. }
  337. </style>