選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

equipmentLog.vue 7.7 KiB

2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  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>