You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

358 lines
7.7 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>
  65. <view class="recordingBox" style="margin-top: 40rpx;">
  66. <text class="recordingBoxItem-title">录音关闭</text>
  67. <view class="recordingBoxItem">
  68. <text class="left">结束人:</text>
  69. <text class="right">{{info.userName || '--'}}</text>
  70. </view>
  71. <view class="recordingBoxItem">
  72. <text class="left">结束时间:</text>
  73. <text class="right">{{info.assignEndTime || '--'}}</text>
  74. </view>
  75. <view class="recordingBoxItem">
  76. <text class="left">录音结束时间:</text>
  77. <view class="right" style="font-weight: bold;font-size: 28rpx;">
  78. <text :style="{color: info.recording==1?'red':'#333'}">
  79. {{info.recordEndTime || '--'}}
  80. </text>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="offlineRec">
  86. <text style="font-size:32rpx;font-weight: 700;">离线记录</text>
  87. <view class="recMain">
  88. <block v-for="(item,index) in info.offLineList" :key="index">
  89. <text>{{index+1}}、 {{item}}</text>
  90. </block>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </template>
  96. <script>
  97. export default {
  98. data() {
  99. return {
  100. info: {},
  101. }
  102. },
  103. computed: {
  104. state() {
  105. return (e => {
  106. switch (e) {
  107. case 0:
  108. return "接待中";
  109. case 1:
  110. return "部分录音";
  111. default:
  112. return "完整录音";
  113. }
  114. })
  115. },
  116. },
  117. onLoad(options) {
  118. this.$u.get("/equipment/equipmentLog", {
  119. id: options.id
  120. }).then(res => {
  121. // console.log(res)
  122. this.info = res
  123. })
  124. },
  125. methods: {
  126. back() {
  127. uni.navigateBack()
  128. }
  129. }
  130. }
  131. </script>
  132. <style lang="scss">
  133. .eqLog {
  134. position: relative;
  135. width: 100vw;
  136. min-height: 100vh;
  137. background: #F8F8F8;
  138. .bg {
  139. position: absolute;
  140. top: 0;
  141. left: 0;
  142. right: 0;
  143. z-index: 0;
  144. width: 100%;
  145. height: 420rpx;
  146. background: linear-gradient(180deg, #2671E2 0%, #3B9CF4 54%, #93C8F7 100%);
  147. }
  148. .tophead {
  149. position: sticky;
  150. top: 0;
  151. z-index: 999;
  152. width: 100%;
  153. .topheads {
  154. position: relative;
  155. z-index: 1;
  156. overflow: hidden;
  157. .eqno {
  158. position: relative;
  159. z-index: 1;
  160. width: 100%;
  161. height: 100%;
  162. display: flex;
  163. align-items: center;
  164. .backs {
  165. margin-left: 24rpx;
  166. width: 48rpx;
  167. height: 48rpx;
  168. }
  169. .middle {
  170. position: absolute;
  171. left: 50%;
  172. top: 50%;
  173. transform: translate(-50%, -50%);
  174. font-size: 32rpx;
  175. color: #fff;
  176. }
  177. }
  178. .eqNo-bg {
  179. position: absolute;
  180. top: 0;
  181. left: 0;
  182. right: 0;
  183. z-index: 0;
  184. width: 100%;
  185. height: 420rpx;
  186. background: linear-gradient(180deg, #2671E2 0%, #3B9CF4 54%, #93C8F7 100%);
  187. }
  188. }
  189. }
  190. .eqNo {
  191. position: relative;
  192. z-index: 1;
  193. width: 100%;
  194. .noInfo {
  195. margin: 24rpx auto 0;
  196. padding: 24rpx;
  197. width: 690rpx;
  198. min-height: 152rpx;
  199. background: #FFFFFF;
  200. border-radius: 8rpx;
  201. display: flex;
  202. justify-content: space-between;
  203. .left {
  204. display: flex;
  205. flex-direction: column;
  206. justify-content: space-between;
  207. font-size: 32rpx;
  208. font-weight: 400;
  209. }
  210. .right {
  211. flex-shrink: 0;
  212. font-size: 32rpx;
  213. font-weight: 400;
  214. }
  215. }
  216. }
  217. .eqMain {
  218. position: relative;
  219. z-index: 1;
  220. padding: 0 30rpx;
  221. .recordingStart {
  222. margin-top: 20rpx;
  223. width: 100%;
  224. height: 164rpx;
  225. display: flex;
  226. align-items: center;
  227. border-radius: 8rpx;
  228. background: #FFFFFF;
  229. .items {
  230. flex-grow: 1;
  231. display: flex;
  232. flex-direction: column;
  233. align-items: center;
  234. justify-content: center;
  235. color: #1C1010;
  236. font-size: 30rpx;
  237. .font {
  238. margin-top: 20rpx;
  239. font-weight: 700;
  240. }
  241. }
  242. .line {
  243. width: 1rpx;
  244. height: 88rpx;
  245. background: #E0E0E0;
  246. }
  247. }
  248. .recording {
  249. position: relative;
  250. z-index: 1;
  251. margin-top: 20rpx;
  252. padding: 30rpx 30rpx 30rpx 68rpx;
  253. display: flex;
  254. flex-direction: column;
  255. background: #FFFFFF;
  256. border-radius: 8rpx;
  257. .left-box {
  258. position: absolute;
  259. left: 30rpx;
  260. top: 40rpx;
  261. width: 24rpx;
  262. height: 300rpx;
  263. display: flex;
  264. flex-direction: column;
  265. align-items: center;
  266. .cycle {
  267. width: 24rpx;
  268. height: 24rpx;
  269. flex-shrink: 0;
  270. border-radius: 50%;
  271. border: 4rpx solid #2671E2;
  272. }
  273. .point {
  274. flex-grow: 1;
  275. border-left: 5rpx dotted #2671E2;
  276. }
  277. }
  278. .recordingBox {
  279. width: 100%;
  280. display: flex;
  281. flex-direction: column;
  282. .recordingBoxItem-title {
  283. font-size: 32rpx;
  284. font-weight: 700;
  285. }
  286. .recordingBoxItem {
  287. margin-top: 24rpx;
  288. display: flex;
  289. .left {
  290. flex-shrink: 0;
  291. width: 210rpx;
  292. color: #505050;
  293. font-size: 30rpx;
  294. }
  295. .right {
  296. flex-grow: 1;
  297. font-size: 30rpx !important;
  298. overflow: hidden;
  299. text-overflow: ellipsis;
  300. white-space: nowrap;
  301. }
  302. }
  303. }
  304. }
  305. .offlineRec {
  306. margin-top: 20rpx;
  307. padding: 28rpx 24rpx;
  308. border-radius: 8rpx;
  309. background: #FFFFFF;
  310. .recMain {
  311. display: flex;
  312. flex-direction: column;
  313. text {
  314. margin: 24rpx 0;
  315. font-size: 30rpx;
  316. }
  317. }
  318. }
  319. }
  320. }
  321. </style>