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