AI销管
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.

equipmentLog.vue 7.3 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  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>{{state(info.recording)}}</text>
  21. </view>
  22. <view class="right">
  23. <text>录音说明:{{ info.recordExplain || '' }}</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. case 2:
  112. return "无录音";
  113. default:
  114. return "完整录音";
  115. }
  116. })
  117. },
  118. },
  119. onLoad(options) {
  120. this.$u.get("/equipment/equipmentLog", {
  121. id: options.id
  122. }).then(res => {
  123. // console.log(res)
  124. this.info = res
  125. })
  126. },
  127. methods: {
  128. back() {
  129. uni.navigateBack()
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss">
  135. .eqLog {
  136. position: relative;
  137. width: 100vw;
  138. min-height: 100vh;
  139. background: #F8F8F8;
  140. .bg {
  141. position: absolute;
  142. top: 0;
  143. left: 0;
  144. right: 0;
  145. z-index: 0;
  146. width: 100%;
  147. height: 420rpx;
  148. background: linear-gradient(180deg, #2671E2 0%, #3B9CF4 54%, #93C8F7 100%);
  149. }
  150. .tophead {
  151. position: sticky;
  152. top: 0;
  153. z-index: 999;
  154. width: 100%;
  155. .topheads {
  156. position: relative;
  157. z-index: 1;
  158. overflow: hidden;
  159. .eqno {
  160. position: relative;
  161. z-index: 1;
  162. width: 100%;
  163. height: 100%;
  164. display: flex;
  165. align-items: center;
  166. .backs {
  167. margin-left: 24rpx;
  168. width: 48rpx;
  169. height: 48rpx;
  170. }
  171. .middle {
  172. position: absolute;
  173. left: 50%;
  174. top: 50%;
  175. transform: translate(-50%, -50%);
  176. font-size: 32rpx;
  177. color: #fff;
  178. }
  179. }
  180. .eqNo-bg {
  181. position: absolute;
  182. top: 0;
  183. left: 0;
  184. right: 0;
  185. z-index: 0;
  186. width: 100%;
  187. height: 420rpx;
  188. background: linear-gradient(180deg, #2671E2 0%, #3B9CF4 54%, #93C8F7 100%);
  189. }
  190. }
  191. }
  192. .eqNo {
  193. position: relative;
  194. z-index: 1;
  195. width: 100%;
  196. .noInfo {
  197. margin: 24rpx auto 0;
  198. padding: 24rpx;
  199. width: 690rpx;
  200. min-height: 152rpx;
  201. background: #FFFFFF;
  202. border-radius: 8rpx;
  203. display: flex;
  204. flex-direction: column;
  205. .left {
  206. width: 100%;
  207. display: flex;
  208. justify-content: space-between;
  209. font-size: 32rpx;
  210. font-weight: 400;
  211. }
  212. .right {
  213. width: 100%;
  214. font-size: 32rpx;
  215. font-weight: 400;
  216. }
  217. }
  218. }
  219. .eqMain {
  220. position: relative;
  221. z-index: 1;
  222. padding: 0 30rpx;
  223. .recordingStart {
  224. margin-top: 20rpx;
  225. width: 100%;
  226. height: 164rpx;
  227. display: flex;
  228. align-items: center;
  229. border-radius: 8rpx;
  230. background: #FFFFFF;
  231. .items {
  232. flex-grow: 1;
  233. display: flex;
  234. flex-direction: column;
  235. align-items: center;
  236. justify-content: center;
  237. color: #1C1010;
  238. font-size: 30rpx;
  239. .font {
  240. margin-top: 20rpx;
  241. font-weight: 700;
  242. }
  243. }
  244. .line {
  245. width: 1rpx;
  246. height: 88rpx;
  247. background: #E0E0E0;
  248. }
  249. }
  250. .recording {
  251. position: relative;
  252. z-index: 1;
  253. margin-top: 20rpx;
  254. padding: 30rpx 30rpx 30rpx 68rpx;
  255. display: flex;
  256. flex-direction: column;
  257. background: #FFFFFF;
  258. border-radius: 8rpx;
  259. .left-box {
  260. position: absolute;
  261. left: 30rpx;
  262. top: 40rpx;
  263. width: 24rpx;
  264. height: 300rpx;
  265. display: flex;
  266. flex-direction: column;
  267. align-items: center;
  268. .cycle {
  269. width: 24rpx;
  270. height: 24rpx;
  271. flex-shrink: 0;
  272. border-radius: 50%;
  273. border: 4rpx solid #2671E2;
  274. }
  275. .point {
  276. flex-grow: 1;
  277. border-left: 5rpx dotted #2671E2;
  278. }
  279. }
  280. .recordingBox {
  281. width: 100%;
  282. display: flex;
  283. flex-direction: column;
  284. .recordingBoxItem-title {
  285. font-size: 32rpx;
  286. font-weight: 700;
  287. }
  288. .recordingBoxItem {
  289. margin-top: 24rpx;
  290. display: flex;
  291. .left {
  292. flex-shrink: 0;
  293. width: 210rpx;
  294. color: #505050;
  295. font-size: 30rpx;
  296. }
  297. .right {
  298. flex-grow: 1;
  299. font-size: 30rpx !important;
  300. overflow: hidden;
  301. text-overflow: ellipsis;
  302. white-space: nowrap;
  303. }
  304. }
  305. }
  306. }
  307. .offlineRec {
  308. margin-top: 20rpx;
  309. padding: 28rpx 24rpx;
  310. border-radius: 8rpx;
  311. background: #FFFFFF;
  312. .recMain {
  313. display: flex;
  314. flex-direction: column;
  315. text {
  316. margin: 24rpx 0;
  317. font-size: 30rpx;
  318. }
  319. }
  320. }
  321. }
  322. }
  323. </style>