processedDetail1.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <template>
  2. <view class="dealDetail">
  3. <view class="timeBox flex justify-between align-top padding-sm " style="height:auto;">
  4. <view >
  5. <view>发生时间:{{detailMessage.time}}</view>
  6. <view v-if="handling_status!=0">告警历时:{{detailMessage.duration}}</view>
  7. <view v-if="handling_status!=0">关联告警:{{detailMessage.handlerTime}}</view>
  8. <view v-if="handling_status!=0" style="color:#4074E7">
  9. 【{{detailMessage.route_name}}】设备低压-{{detailMessage.digitalValue=='1'?'动作':'复归'}}</view>
  10. </view>
  11. <button v-if="handling_status==0" class="cu-btn radius bg-red sm margin-top-sm">未处理</button>
  12. <button v-if="handling_status==1" class="cu-btn radius bg-green sm margin-top-sm">已处理</button>
  13. <button v-if="handling_status==2" class="cu-btn radius bg-orange sm margin-top-sm">待确认</button>
  14. <button v-if="handling_status==3" class="cu-btn radius bg-blue sm margin-top-sm">自动恢复</button>
  15. <button v-if="handling_status==4" class="cu-btn radius bg-gray sm margin-top-sm">过期失效</button>
  16. </view>
  17. <view>
  18. <!-- 基本信息start -->
  19. <view class="basic-info dealDetail">
  20. <view class="info-tit margin-left-xs">
  21. <text class="cuIcon-titles margin-right-xs"></text>
  22. 基本信息
  23. </view>
  24. <view class="info-content">
  25. <view class="info-one-info ">
  26. <text>站点名称:</text>
  27. <text>{{detailMessage.siteName}}</text>
  28. </view>
  29. <view class="info-one-info ">
  30. <text>新区展示:</text>
  31. <text>{{detailMessage.platform_area_name}}</text>
  32. </view>
  33. <view>
  34. <text>新线名称:</text>
  35. <text>{{detailMessage.deviceName}}</text>
  36. </view>
  37. <view>
  38. <text>警告信息:</text>
  39. <text>{{detailMessage.measValue}}</text>
  40. </view>
  41. <view>
  42. <text>警告状态:</text>
  43. <text>{{detailMessage.digitalValue=='1'?'动作':'复归'}}</text>
  44. </view>
  45. <view>
  46. <text>采集终端:</text>
  47. <text>{{detailMessage.deviceCode}}</text>
  48. </view>
  49. <view>
  50. <text>站点地址:</text>
  51. <text>{{detailMessage.address}}<i class="icon iconfont map"
  52. @click="mapLocation()">&#xe612;</i></text>
  53. </view>
  54. <view>
  55. <text>联系人:</text>
  56. <text>{{detailMessage.userName}}</text>
  57. </view>
  58. <view>
  59. <text>联系方式:</text>
  60. <text>{{detailMessage.phone}}<i class="phone icon iconfont"
  61. @click="submit()">&#xe61d;</i></text>
  62. </view>
  63. <view>
  64. <text>运行数据:</text>
  65. <text class="checkMore" @tap="goOpeDataDetail(detailMessage)">点击查看</text>
  66. </view>
  67. <view>
  68. <text>视频:</text>
  69. <text class="checkMore" @tap="goVideoDetail">点击查看</text>
  70. </view>
  71. <view>
  72. <text>现场档案:</text>
  73. <text class="checkMore" @tap="goArchiveDetail">点击查看</text>
  74. </view>
  75. </view>
  76. </view>
  77. <!-- 基本信息end -->
  78. <!-- 处理信息start -->
  79. <view class="processStatus" v-if="handling_status!=0">
  80. <view class="info-tit margin-left-xs">
  81. <text class="cuIcon-titles margin-right-xs"></text>
  82. 处理信息
  83. </view>
  84. <view class="info-content">
  85. <view>
  86. <text>处理人:</text>
  87. <text>{{detailMessage.handler}}</text>
  88. </view>
  89. <view>
  90. <text>处理时间:</text>
  91. <text>{{detailMessage.handlerTime}}</text>
  92. </view>
  93. <view>
  94. <text>处理内容:</text>
  95. <text>{{detailMessage.handlerContent}}</text>
  96. </view>
  97. </view>
  98. </view>
  99. <!-- 处理状态end -->
  100. <!-- 处理状态start -->
  101. <view class="processStatus" v-if="this.handling_status==2||this.handling_status==0">
  102. <view class="info-tit margin-left-xs">
  103. <text class="cuIcon-titles margin-right-xs"></text>
  104. 处理内容
  105. </view>
  106. <view class="padding-lr padding-bottom-lg">
  107. <form action="">
  108. <view class="cu-form-group">
  109. <textarea class="JTxtArea lg" v-model="msg" placeholder="备注信息,最多可输入50个字..." :maxlength="50"
  110. :data-maxnum="reason.length+'/50'" auto-height></textarea>
  111. </view>
  112. <view class="btn-area">
  113. <button class="bg-blue round missReport margin-top" @click="powerSubmit()">告警确认 </button>
  114. </view>
  115. </form>
  116. </view>
  117. </view>
  118. <!-- 处理状态end -->
  119. </view>
  120. </view>
  121. </view>
  122. </template>
  123. <script>
  124. //引入js sdk的封装
  125. import * as jwx from '../../util/jssdk.js'
  126. export default {
  127. data() {
  128. return {
  129. msg: '',
  130. reason: '',
  131. radio: 'A',
  132. radio: 'B',
  133. modalName: null,
  134. type: '0',
  135. detailMessage: {},
  136. handling_status: 0
  137. }
  138. },
  139. mounted(){
  140. document.querySelector('.uni-page-head-hd').style.display = 'none'
  141. },
  142. onLoad: function(option) {
  143. this.handling_status = option.handling_status;
  144. this.type = option.type;
  145. this.companyCode = option.companyCode;
  146. this.processingStatus = option.handling_status;
  147. this.alarmId = option.id;
  148. if (option.handling_status!=0) {
  149. uni.setNavigationBarTitle({
  150. title: '已处理'
  151. });
  152. } else {
  153. uni.setNavigationBarTitle({
  154. title: '未处理'
  155. });
  156. }
  157. this.getUnProcessDetail({
  158. "companyCode": option.companyCode,
  159. "processingStatus": option.handling_status,
  160. "alarmId": option.id
  161. })
  162. },
  163. methods: {
  164. powerSubmit() {
  165. if (!this.msg) {
  166. uni.showToast({
  167. title: "请输入处理内容",
  168. icon: "none"
  169. });
  170. } else {
  171. this.powerSubmitRes({
  172. "type": 1,
  173. "deviceCode": this.detailMessage.deviceCode,
  174. "companyCode": this.companyCode,
  175. "id": this.detailMessage.id,
  176. "handlerContent": this.msg
  177. })
  178. }
  179. },
  180. async powerSubmitRes(params = {}) {
  181. const res = await this.$myRequest({
  182. url: 'IntegratedAlarm/setAlarmHandle',
  183. data: params
  184. })
  185. if (res.data.flag) {
  186. uni.showToast({
  187. title: "提交成功",
  188. });
  189. }
  190. setTimeout(() => {
  191. uni.navigateTo({
  192. url: '/pages/processList/processList?companyCode=' + this.companyCode +
  193. '&type=' + this.type + '',
  194. });
  195. }, 1000);
  196. },
  197. async getUnProcessDetail(ming = {}) {
  198. const res = await this.$myRequest({
  199. url: 'IntegratedAlarm/getPowerAlarmDetails',
  200. data: ming
  201. })
  202. console.log(res.data.data[0]);
  203. this.detailMessage = res.data.data[0]
  204. },
  205. async getVideoDetail(ming = {}) {
  206. const res = await this.$myRequest({
  207. url: 'IntegratedAlarm/getVideoAlarmDetails',
  208. data: ming
  209. })
  210. console.log(res.data.data[0]);
  211. this.detailMessage2 = res.data.data[0]
  212. },
  213. submit() {
  214. uni.makePhoneCall({
  215. phoneNumber: this.detailMessage.phone
  216. });
  217. },
  218. mapLocation() {
  219. console.log(this.detailMessage)
  220. // 微信公众号导航
  221. jwx.configWeiXin(jweixin => {
  222. let shareInfo = {
  223. latitude: parseFloat(this.detailMessage.latitude), // 纬度,浮点数,范围为90 ~ -90
  224. longitude: parseFloat(this.detailMessage.longitude), // 经度,浮点数,范围为180 ~ -180。
  225. name: this.detailMessage.siteName, // 位置名
  226. address: this.detailMessage.address, // 地址详情说明
  227. scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
  228. };
  229. jweixin.openLocation(shareInfo);
  230. });
  231. },
  232. // 页面跳转
  233. goOpeDataDetail(detailMessage) {
  234. uni.navigateTo({
  235. url: '/pages/unprocessDetail/opeDataDetail/opeDataDetail?companyCode=' + this.companyCode +
  236. '&deviceCode=' + detailMessage.deviceCode + '&deviceType=' + this.type + '',
  237. success: res => {},
  238. fail: () => {},
  239. complete: () => {}
  240. });
  241. },
  242. goVideoDetail() {
  243. uni.navigateTo({
  244. url: '/pages/videoList/videoList?deviceType=2&companyCode=' + this.detailMessage.siteId + '',
  245. success: res => {},
  246. fail: () => {},
  247. complete: () => {}
  248. });
  249. },
  250. goArchiveDetail() {
  251. uni.navigateTo({
  252. url: '/pages/siteArchive/archiveDetail/archiveDetail?siteId=' + this.detailMessage.siteId,
  253. success: res => {},
  254. fail: () => {},
  255. complete: () => {}
  256. });
  257. },
  258. RadioChange(e) {
  259. this.radio = e.detail.value
  260. },
  261. textareaAInput(e) {
  262. this.textareaAValue = e.detail.value
  263. },
  264. // textarea
  265. inputReason(e) {
  266. this.reason = e.detail.value;
  267. }
  268. }
  269. }
  270. </script>
  271. <style lang="scss">
  272. .timeBox {
  273. height: 88rpx;
  274. background: #EFF4FF;
  275. line-height: 88rpx;
  276. .time {
  277. color: #333
  278. }
  279. }
  280. .info-tit {
  281. color: #4074E7;
  282. line-height: 90rpx;
  283. height: 90rpx;
  284. }
  285. // 基本信息
  286. .info-content>view {
  287. margin-left: 24rpx;
  288. border-bottom: 1px solid #EDEDED;
  289. line-height: 92rpx;
  290. color: #666;
  291. }
  292. .info-content view text:first-child {
  293. width: 160rpx;
  294. display: inline-block
  295. }
  296. /* // 处理内容 */
  297. .cu-form-group {
  298. background: #f5f5f5;
  299. }
  300. .processStatus {
  301. textarea {
  302. background: #F5F5F5;
  303. color: #999999;
  304. }
  305. }
  306. // textarea
  307. .JTxtArea {
  308. position: relative;
  309. &.sm {
  310. min-height: 60rpx;
  311. }
  312. &.lg {
  313. min-height: 100rpx;
  314. }
  315. &:after {
  316. content: attr(data-maxnum);
  317. position: absolute;
  318. right: 10rpx;
  319. bottom: 0px;
  320. }
  321. }
  322. </style>