check_inspection.vue 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292
  1. <template>
  2. <view class="uni-container uni-container-bg">
  3. <view class="example container" :style="'height: ' + (screenHeight - 75) + 'px'">
  4. <!-- 下拉框 -->
  5. <view class="u-page__tag-item" style="margin-bottom: 26upx;width: 700upx;border-bottom: 2px solid #55cbbf;">
  6. <u-form>
  7. <u-form-item prop="orgName" @click="
  8. showOrg = true;
  9. hideKeyboard();
  10. " label="单位选择:" labelWidth="120px">
  11. <u--input border="none" disabled v-model="formData.orgName" placeholder="请选择所属单位"></u--input>
  12. <u-icon slot="right" name="arrow-down" class="danwei"></u-icon>
  13. </u-form-item>
  14. </u-form>
  15. </view>
  16. <view class="tops" v-if="!getqrcode">
  17. <view style="display: flex;flex-direction: column;">
  18. <image :src="scan" class="tupian" @click="erWeiMa"></image>
  19. <view style="margin-top: 20rpx;">设施扫码</view>
  20. </view>
  21. <!-- #ifdef H5 -->
  22. <u-popup :show="qrScanShow" mode="center" @close="qrScanClose" @open="qrScanOpen" closeable
  23. :safeAreaInsetTop="true" zoom>
  24. <view class="qr-scan-containner">
  25. <view class="qr-scan-middle">
  26. <view class="qr-scan-title">
  27. 扫码
  28. </view>
  29. <qrcode-stream class="qr-scan-view" @decode="onDecode" />
  30. </view>
  31. </view>
  32. </u-popup>
  33. <!-- <view class="qrcode" v-if="qrcodeShow">
  34. <qrcode-stream @decode="onDecode" />
  35. </view> -->
  36. <!-- #endif -->
  37. <view>
  38. <image :src="Group" @click="
  39. showMCheck = true;
  40. hideKeyboard();
  41. " class="tiantupian"></image>
  42. <view style="margin-top: 20rpx;">手动添加</view>
  43. </view>
  44. </view>
  45. <view class="cont" v-if="!getqrcode">
  46. 主动检查记录
  47. </view>
  48. <view v-if="!getqrcode" class="main-content">
  49. <uni-card v-for="(item, index) in tableData" :key="index">
  50. <view class="titles"><text class="name-align-task">检查项:</text>{{item.inspName}}
  51. <u-icon v-if="item.isdenger==1" name="warning-fill" color="#ff5647" size="28"
  52. :customStyle="{marginTop:'20px',backgroundColor:'#fff'}"></u-icon>
  53. </view>
  54. <view><text class="name-align-task">检查结果:</text>{{item.handleResult}}</view>
  55. <view class="an-niu">
  56. <text><text class="name-align-task">检查时间:</text>{{item.inspectTime}}</text>
  57. <text @click="addClickDetail(item.id)" class="detail">查看详情</text>
  58. </view>
  59. </uni-card>
  60. </view>
  61. </view>
  62. <!-- 扫码弹出层 -->
  63. <u-popup :show="maShow" :round="10" @close="maShow=false">
  64. <view v-if="insTypeData!=''">
  65. <view class="springFarm" v-for="(item,index) in insTypeData" :key="index">
  66. <view class="show-title">设备名称:{{item.fpdName}}</view>
  67. <view class="show-title">设备序列号:{{item.fpdCode}}</view>
  68. <view>
  69. <view class="show-title">设备检查项:</view>
  70. </view>
  71. <view style="display: flex;flex-direction: column;">
  72. <view class="" v-if="item.inspectResultList!=''">
  73. <uni-grid :column="3" :showBorder="false">
  74. <uni-grid-item v-for="(items,indexs) in item.inspectResultList" :key="indexs">
  75. <view class="grid-item-box">
  76. <image :src="items.subValue==1?zhengchang:moren" class="tupians"
  77. @click="normalPopup(items,indexs,index)">
  78. </image>
  79. <text class="text">{{items.subLable}}</text>
  80. </view>
  81. </uni-grid-item>
  82. </uni-grid>
  83. </view>
  84. <!-- <view class="slot-contents" v-if="show2">
  85. <textarea v-model="dangerDescribe" placeholder="请输入隐患描述内容"></textarea>
  86. </view> -->
  87. </view>
  88. <!-- ----扫码选择隐患 -->
  89. <view class="slot-contents" v-if="show2">
  90. <textarea v-model="dangerDescribe" placeholder="请输入隐患描述内容"
  91. @click="popupChoiceDangerFpd('show2')"></textarea>
  92. <u-popup :show="showPopupDanger" :round="10" @close="showPopupDanger=false">
  93. <view style="width: 90vw;overflow-y: auto;margin-bottom: 80rpx;padding:10px">
  94. <text class="text-xl">选择隐患类型:</text>
  95. <view class="" class="person-forward">
  96. <u-checkbox-group v-for="(items, indexs) in choiceDanger" :key="indexs"
  97. placement="column" v-model="items.checkedListDanger"
  98. @change="checkboxChange3(items.name,$event)" activeColor="#4CB2B6"
  99. iconSize="red">
  100. <u-checkbox :customStyle="{marginBottom: '60rpx'}" :label="items.name"
  101. :name="items.name">
  102. </u-checkbox>
  103. </u-checkbox-group>
  104. </view>
  105. <view class="flex flex-direction-row "
  106. style="position: fixed;bottom: 10px;left: 50%;transform: translate(-50%);height: 100rpx;width: 80%">
  107. <u-button shape="circle" type="primary" color="#4CB2B6" text="确定"
  108. @click="checkboxConfirm3()" customStyle="margin-right:20px;padding:0 30px">
  109. </u-button>
  110. <u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle"
  111. @click="checkboxCancel3()" customStyle="padding:0 30px">
  112. </u-button>
  113. </view>
  114. </view>
  115. </u-popup>
  116. </view>
  117. <!-- ----扫码选择隐患 -->
  118. <view class="show-title">
  119. <view class="">巡检拍照:<text style="color:#822e2e;"></text></view>
  120. <view class="">
  121. <image :src="photograph" @click="photoUpload(item)" class="tiantupian"></image>
  122. <isLodingModel></isLodingModel>
  123. </view>
  124. </view>
  125. <view class="uni-grid-wraps">
  126. <view style="position: relative;width: 180rpx;float: left;margin: 10rpx 15rpx 0 0rpx;"
  127. v-for="(items,indexs) in item.attUrl" :key="indexs">
  128. <image :src="items" style="width: 160rpx;height: 160rpx;border-radius: 30rpx;float: left;">
  129. <u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(item,indexs,index)">
  130. </u-icon>
  131. </view>
  132. </view>
  133. <view style="width: 60%;position: absolute;left:150rpx;;bottom:60rpx;z-index: 9999;">
  134. <div class="btnList" v-if="show2">
  135. <u-button shape="circle" type="primary" color="#4CB2B6" text="立即处理"
  136. customStyle="margin-right:20%" @click="checkPopupConfirmNow">
  137. </u-button>
  138. <u-button v-if="show2" shape="circle" type="primary" color="#4CB2B6" text="生成隐患"
  139. @click="checkPopupYinHuan">
  140. </u-button>
  141. </div>
  142. <div class="btnList" v-if="!show2">
  143. <u-button shape="circle" type="primary" color="#4CB2B6" text="保存"
  144. customStyle="margin-right:20%" @click="checkPopupConfirm()">
  145. </u-button>
  146. <u-button shape="circle" type="primary" color="#4CB2B6" text="取消" @click="checkPopupCancel">
  147. </u-button>
  148. </div>
  149. </view>
  150. </view>
  151. </view>
  152. <view v-else>
  153. 暂无数据
  154. </view>
  155. </u-popup>
  156. <!-- 手动添加弹出层-->
  157. <u-popup :show="manualPopup" :round="10" @close="manualPopup=false">
  158. <view v-if="checkManualData!=[]">
  159. <view class="springFarm" v-for="(item,index) in checkManualData" :key="index">
  160. <view class="show-title">检查项名称:{{item.inspName}}</view>
  161. <view>
  162. <view class="show-title">设备检查项:</view>
  163. </view>
  164. <view style="display: flex;flex-direction: column;">
  165. <view class="" v-if="item.inspectSubDOList!=''">
  166. <uni-grid :column="3" :showBorder="false">
  167. <uni-grid-item v-for="(items,indexs) in item.inspectSubDOList" :key="indexs">
  168. <view class="grid-item-box">
  169. <image :src="items.isdenger==1?zhengchang:moren" class="tupians"
  170. @click="checkPopupManual(items,indexs,index)">
  171. </image>
  172. <text class="text">{{items.subLable}}</text>
  173. </view>
  174. </uni-grid-item>
  175. </uni-grid>
  176. </view>
  177. <!-- <view class="slot-contents" v-if="showManual">
  178. <textarea v-model="dangerDescribe" placeholder="请输入隐患描述内容"></textarea>
  179. </view> -->
  180. <!-- <view class="slot-contents" @click="descript(index)">
  181. <textarea class="slot-contents" v-model="remark" placeholder="请输入描述内容"></textarea>
  182. </view> -->
  183. </view>
  184. <!-- ----扫码选择隐患 -->
  185. <view class="slot-contents" v-if="showManual">
  186. <textarea v-model="dangerDescribe" placeholder="请输入隐患描述内容"
  187. @click="popupChoiceDangerFpd('Manual')"></textarea>
  188. <u-popup :show="showPopupDanger" :round="10" @close="showPopupDanger=false">
  189. <view style="width: 90vw;overflow-y: auto;margin-bottom: 80rpx;padding:10px">
  190. <text class="text-xl">选择隐患类型:</text>
  191. <view class="" class="person-forward">
  192. <u-checkbox-group v-for="(items, indexs) in choiceDanger" :key="indexs"
  193. placement="column" v-model="items.checkedListDanger"
  194. @change="checkboxChange3(items.name,$event)" activeColor="#4CB2B6"
  195. iconSize="red">
  196. <u-checkbox :customStyle="{marginBottom: '60rpx'}" :label="items.name"
  197. :name="items.name">
  198. </u-checkbox>
  199. </u-checkbox-group>
  200. </view>
  201. <view class="flex flex-direction-row "
  202. style="position: fixed;bottom: 10px;left: 50%;transform: translate(-50%);height: 100rpx;width: 80%">
  203. <u-button shape="circle" type="primary" color="#4CB2B6" text="确定"
  204. @click="checkboxConfirm3()" customStyle="margin-right:20px;padding:0 30px">
  205. </u-button>
  206. <u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle"
  207. @click="checkboxCancel3()" customStyle="padding:0 30px">
  208. </u-button>
  209. </view>
  210. </view>
  211. </u-popup>
  212. </view>
  213. <!-- ----扫码选择隐患 -->
  214. <view class="show-title">
  215. <view class="">巡检拍照:<text style="color:#822e2e;"></text></view>
  216. <view class="">
  217. <image :src="photograph" @click="photoUpload(item)" class="tiantupian"></image> <!-- 加载中 -->
  218. <isLodingModel></isLodingModel>
  219. </view>
  220. </view>
  221. <view class="uni-grid-wraps">
  222. <view style="position: relative;width: 180rpx;float: left;margin: 10rpx 15rpx 0 0rpx;"
  223. v-for="(items,indexs) in item.attUrl" :key="indexs">
  224. <image :src="items" style="width: 160rpx;height: 160rpx;border-radius: 30rpx;float: left;">
  225. <u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(item,indexs,index)">
  226. </u-icon>
  227. </view>
  228. </view>
  229. <view style="width: 60%;position: absolute;left:150rpx;;bottom:60rpx;z-index: 9999;">
  230. <div class="btnList" v-if="showManual">
  231. <u-button shape="circle" type="primary" color="#4CB2B6" text="立即处理"
  232. customStyle="margin-right:20%" @click="checkPopupConfirmNow">
  233. </u-button>
  234. <u-button v-if="showManual" shape="circle" type="primary" color="#4CB2B6" text="生成隐患"
  235. @click="checkPopupYinHuan">
  236. </u-button>
  237. </div>
  238. <div class="btnList" v-if="!showManual">
  239. <u-button shape="circle" type="primary" color="#4CB2B6" text="保存"
  240. customStyle="margin-right:20%" @click="checkPopupConfirm()">
  241. </u-button>
  242. <u-button shape="circle" type="primary" color="#4CB2B6" text="取消" @click="checkPopupCancel">
  243. </u-button>
  244. </div>
  245. </view>
  246. </view>
  247. </view>
  248. <view v-else>
  249. 暂无数据
  250. </view>
  251. </u-popup>
  252. <u-modal :show="show5" title="请输入处理结果" @confirm="descriptFpd" @cancel="show5 = false">
  253. <view class="slot-content jieguo">
  254. <textarea v-model="handleResult" placeholder="请输入" />
  255. </view>
  256. </u-modal>
  257. <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false" @select="sexSelect">
  258. </u-action-sheet>
  259. <u-action-sheet :show="showMCheck" :actions="actionsManual" title="请选择检查项" @close="showMCheck = false">
  260. <view style="margin-bottom: 20rpx;">
  261. <view class="manual-hand">
  262. 手动输入设施编码:
  263. </view>
  264. <view class="manual-hand-item">
  265. <u--input placeholder="请输入设施编号" v-model="manualValue" class="manual-hand-input"></u--input>
  266. <u-button shape="circle" type="primary" color="#4CB2B6" text="确认"
  267. customStyle="width:120rpx;margin-left:2%" @click="manualHandConfirm()">
  268. </u-button>
  269. </view>
  270. </view>
  271. <hr>
  272. <view class="manual-hand">
  273. 选择检查项大类:
  274. </view>
  275. <view v-for="(item,index) in actionsManual" :key="index" @click="SelectMCheck(item)" class="manual">
  276. {{item.name}}
  277. </view>
  278. </u-action-sheet>
  279. </view>
  280. </template>
  281. <script>
  282. // #ifdef H5
  283. import {
  284. QrcodeStream
  285. } from 'vue-qrcode-reader'
  286. // #endif
  287. import {
  288. getInspect, //获取主动检查列表
  289. inspTypeList,
  290. createInspect, //创建主动检查
  291. getInspectInfo, //手动添加的检查项列表
  292. getFpd //根据编码获取设施信息
  293. } from "@/api/check_active";
  294. import loadImage from 'blueimp-load-image';
  295. import {
  296. getAccessToken
  297. } from '@/utils/auth'
  298. import config from '@/config'
  299. import store from "@/store"
  300. const baseUrl = config.baseUrl
  301. const baseUrlImg = config.baseUrlImg
  302. import {
  303. getOrgId //获取orgId
  304. } from '@/api/fire_device';
  305. import {
  306. shijianc
  307. } from '@/utils/common.js'
  308. //隐患弹框--
  309. import {
  310. DICT_TYPE,
  311. getDictDatas
  312. } from '@/utils/dict';
  313. //隐患弹框--
  314. let that = '';
  315. export default {
  316. components: {
  317. // #ifdef H5
  318. QrcodeStream
  319. // #endif
  320. },
  321. data() {
  322. return {
  323. screenHeight: this.$screenHeight,
  324. // ----扫码选择隐患
  325. showPopupDanger: false,
  326. choiceDanger: getDictDatas(DICT_TYPE.DANGER_TYPE),
  327. checkedPopupDanger: [], //
  328. // ----扫码选择隐患
  329. manualValue: '', //手动输入的设施编号
  330. manualPopup: false,
  331. scan: `${baseUrlImg}/checkActive/scan.png`,
  332. // 是否开启扫描
  333. qrScanShow: false,
  334. Group: `${baseUrlImg}/checkActive/Group2.png`,
  335. erWeiMaShu: '', //二维码内容对象
  336. tableData: [],
  337. loading: false,
  338. saveImplement: {
  339. attUrl: [],
  340. dangerDescribe: "", //隐患描述
  341. fpdId: "",
  342. fpdResultCreateReqVOList: [], //传的当前事件
  343. hisResultCreateReqVOList: [], //手动检查
  344. handleMethod: "", //处理方式
  345. handleResult: "", //处理结果描述
  346. handleTime: '',
  347. inspectTime: '',
  348. imgUrl1: "",
  349. imgUrl2: "",
  350. imgUrl3: "",
  351. orgId: 0,
  352. taskId: 0,
  353. broadId: 0,
  354. remark: "", //附加描述
  355. isdenger: 0,
  356. },
  357. maShow: false, //扫码后弹框是否展示
  358. manualCheck: false, //手动检查弹框是否显示
  359. actionsManual: [], //手动检查弹框数据
  360. ManualData: [], //手动检查弹框完整数据
  361. checkManualData: [], //手动检查选中的一条检查项数据
  362. showManual: false, //手动检查是否显示描述
  363. showMCheck: false,
  364. insTypeData: '', //扫二维码后出现的消防列表数据内容
  365. moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
  366. zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
  367. show5: false,
  368. remark: '',
  369. photograph: `${baseUrlImg}/checkActive/photograph.png`,
  370. show2: false,
  371. handleResult: '',
  372. dangerDescribe: '',
  373. showOrg: false,
  374. actions: [],
  375. // 每页数据量
  376. pageSize: 10,
  377. // 当前页
  378. pageNo: 1,
  379. // 数据总量
  380. total: 0,
  381. formData: {
  382. orgName: '',
  383. orgId: ''
  384. },
  385. getqrcode: false,
  386. qrcodeShow: false, //h5端扫码是否显示
  387. }
  388. },
  389. watch: {
  390. loading: {
  391. handler(newLength, oldLength) {
  392. this.$modal.isLoadingModel(this.loading)
  393. },
  394. immediate: true
  395. }
  396. },
  397. onShow() {
  398. this.choiceDanger.map(i => {
  399. i.name = i.label;
  400. i.id = i.value;
  401. });
  402. this.tableData = []
  403. this.actions = []
  404. that = this;
  405. getOrgId({
  406. pageNo: this.pageNo,
  407. pageSize: this.pageSize,
  408. userId: this.$store.state.user.id
  409. }).then(response => {
  410. // 取到用户对应的单位名称与id
  411. response.data.map(v => {
  412. this.actions.push({
  413. id: v.dwid,
  414. name: v.orgName
  415. });
  416. });
  417. this.formData.orgName = response.data.length > 0 ? response.data[0].orgName : '' //默认
  418. this.formData.orgId = response.data.length > 0 ? response.data[0].dwid : ''
  419. });
  420. this.getData(1)
  421. this.getInspect()
  422. },
  423. methods: {
  424. // ----扫码选择隐患
  425. popupChoiceDangerFpd(type) {
  426. this.checkedPopupDanger = this.dangerDescribe.split(',')
  427. if (this.checkedPopupDanger.includes('其他')) {
  428. this.showPopupDanger = false
  429. } else {
  430. this.showPopupDanger = true
  431. this.$forceUpdate()
  432. }
  433. this.choiceDanger.map((i, indexs) => { //选中的回显
  434. i.checkedListDanger = []
  435. this.checkedPopupDanger.map(v => {
  436. if (i.name == v) {
  437. this.choiceDanger[indexs].checkedListDanger.push(v)
  438. }
  439. })
  440. })
  441. },
  442. checkboxConfirm3(index) {
  443. this.dangerDescribe = this.checkedPopupDanger.toString()
  444. this.showPopupDanger = false
  445. this.$forceUpdate()
  446. },
  447. checkboxCancel3(index) {
  448. this.showPopupDanger = false
  449. this.checkedPopupDanger = []
  450. this.$forceUpdate()
  451. },
  452. checkboxChange3(i, n) { //勾选的事件
  453. if (i && n.length != 0) {
  454. this.checkedPopupDanger.push(i)
  455. } else if (i && n.length == 0) {
  456. this.checkedPopupDanger = this.checkedPopupDanger.filter(item => item != i)
  457. }
  458. },
  459. // ----扫码选择隐患
  460. qrScanOpen() {},
  461. async getInspect() {
  462. const res = await getInspectInfo({pageNo:1,pageSize:100})
  463. this.ManualData = res.data.list
  464. this.actionsManual = res.data.list.filter(obj => obj.inspType !== 'fpd').map(obj => {
  465. return {
  466. id: obj.id,
  467. name: obj.inspName
  468. };
  469. })
  470. },
  471. closeImage(item, val, k) { //删除图片---5.25新加--未验证
  472. if (this.manualPopup) { //手动检查
  473. this.checkManualData[0].attUrl.splice(val, 1)
  474. } else { //扫码添加
  475. console.log(item, 'iii');
  476. if (item.fpdType) {
  477. this.insTypeData[k].attUrl.splice(val, 1)
  478. }
  479. // this.tableData[k].attUrl.splice(val, 1)
  480. }
  481. that.$forceUpdate();
  482. },
  483. sexSelect(e) { //单位
  484. this.formData.orgId = e.id;
  485. this.formData.orgName = e.name;
  486. this.tableData = []
  487. this.getData(1)
  488. },
  489. manualHandConfirm() { //手动输入编号确认
  490. console.log(this.manualValue, 'manualValue');
  491. var that = this
  492. getFpd({
  493. fpdCode: this.manualValue
  494. }).then(res => {
  495. if (res.data.list.length > 0) {
  496. inspTypeList({
  497. id: res.data.list[0].id,
  498. fpdCode: this.manualValue
  499. }).then(reponse => {
  500. that.showMCheck = false
  501. that.maShow = true
  502. that.show2 = false
  503. this.manualValue = ''
  504. that.insTypeData = reponse.data.records
  505. that.insTypeData.map(i => i.attUrl = [])
  506. })
  507. } else {
  508. this.$modal.msg('不存在该设备编码,请确认是否输入正确')
  509. }
  510. })
  511. },
  512. SelectMCheck(e) { //手动选择
  513. this.reselt()
  514. this.checkManualData = this.ManualData.filter(ManualDataItem => {
  515. return ManualDataItem.id == e.id
  516. })
  517. this.showMCheck = false
  518. this.manualPopup = true
  519. this.checkManualData.map(i => {
  520. i.inspectSubDOList.map(v => {
  521. v.isdenger = 0
  522. })
  523. i.isdenger = i.isdenger
  524. i.remark = ''
  525. i.attUrl = []
  526. i.handleMethod = ''
  527. i.handleResult = ''
  528. i.handleTime = ''
  529. i.inspectTime = ''
  530. })
  531. this.remark = ''
  532. console.log(this.checkManualData, 'checkManualData=========', this.ManualData);
  533. },
  534. checkPopupManual(items, indexs, index) { //手动选择
  535. this.checkManualData[0].inspectSubDOList.map(i => {
  536. console.log(i, 'itemtiiejteioti', items);
  537. if (i.id == items.id) {
  538. i.isdenger = i.isdenger === 1 ? 0 : 1;
  539. this.showManual = i.isdenger === 1 ? true : false;
  540. } else {
  541. i.isdenger = 0
  542. this.showManual = false
  543. }
  544. })
  545. this.$forceUpdate()
  546. console.log(this.checkManualData, '1111111111', this.showManual);
  547. },
  548. descript(index) { //隐患描述点击确认
  549. // this.show2 = false
  550. },
  551. getData(pageNo) {
  552. this.loading = true
  553. const id = this.$store.state.user.id
  554. getInspect({
  555. pageNo: pageNo,
  556. pageSize: this.pageSize,
  557. userId: id,
  558. orgId: this.formData.orgId
  559. }).then(response => {
  560. this.loading = false
  561. this.tableData = [...this.tableData, ...response.data.list]
  562. // this.tableData = response.data.list
  563. this.total = response.data.total
  564. })
  565. },
  566. //小程序端扫码
  567. erWeiMa() {
  568. // #ifdef H5
  569. this.qrScanShow = true
  570. // #endif
  571. // #ifdef MP-WEIXIN
  572. var that = this
  573. this.remark = ''
  574. // 只允许从相机扫码
  575. uni.scanCode({
  576. onlyFromCamera: true, //只允许从相机扫码
  577. success: function(res) {
  578. if (res.errMsg == "scanCode:ok") {
  579. console.log('条码内容:' + res.result, JSON.parse(res.result));
  580. let result = JSON.parse(res.result)
  581. console.log('条码内容:', JSON.parse(res.result));
  582. inspTypeList(JSON.parse(res.result)).then(reponse => {
  583. console.log(reponse, 'reponsesssssssssssssss');
  584. if (reponse.code == 0) {
  585. that.maShow = true
  586. that.show2 = false
  587. that.insTypeData = reponse.data.records
  588. that.insTypeData.map(i => {
  589. i.remark = ''
  590. i.attUrl = []
  591. i.handleMethod = ''
  592. i.handleResult = ''
  593. i.handleTime = ''
  594. i.inspectTime = ''
  595. })
  596. }
  597. })
  598. setTimeout(() => {
  599. that.$modal.msgSuccess('扫码成功')
  600. }, 200)
  601. }
  602. },
  603. fail: () => {
  604. that.$modal.msgError('未识别到二维码,请重新尝试!')
  605. }
  606. })
  607. // #endif
  608. },
  609. // #ifdef H5
  610. // 扫码成功后执行函数
  611. onDecode(qrcodeVal) {
  612. this.$modal.msgSuccess('扫码成功', qrcodeVal)
  613. this.qrcodeResault = qrcodeVal
  614. this.qrScanShow = false
  615. let result = JSON.parse(qrcodeVal)
  616. var that = this
  617. inspTypeList(JSON.parse(qrcodeVal)).then(reponse => {
  618. console.log(reponse, 'qrcodeVal');
  619. if (reponse.code == 0) {
  620. that.maShow = true
  621. that.show2 = false
  622. that.insTypeData = reponse.data.records
  623. that.insTypeData.map(i => i.attUrl = [])
  624. }
  625. })
  626. setTimeout(() => {
  627. that.$modal.msgSuccess('扫码成功')
  628. }, 200)
  629. },
  630. // 点击关闭按钮
  631. qrScanClose() {
  632. this.qrScanShow = false
  633. },
  634. onInit(promise) { //未使用
  635. promise
  636. .then(console.log)
  637. .catch(console.error)
  638. },
  639. // #endif
  640. descriptFpd() { //隐患描述点击确认
  641. this.show5 = false
  642. this.handleResult = this.handleResult
  643. if (this.manualPopup) {
  644. this.checkManualData[0].handleResult = this.handleResult
  645. }
  646. this.checkPopupConfirm()
  647. // this.maShow=false
  648. },
  649. checkPopupConfirmNow() {
  650. this.show5 = true
  651. this.handleMethod = "立即处理" //立即整改
  652. console.log(this.checkManualData, 'this.checkManualData');
  653. if (this.manualPopup) {
  654. this.checkManualData[0].handleMethod = "立即处理"
  655. }
  656. },
  657. checkPopupYinHuan() {
  658. this.handleMethod = "生成隐患" //生成隐患
  659. this.handleResult = "不正常"
  660. console.log(this.checkManualData, 'this.checkManualData[this.checkManualData[');
  661. if (this.manualPopup) { //手动检查
  662. this.checkManualData[0].handleMethod = "生成隐患"
  663. this.checkManualData[0].handleResult = "不正常"
  664. }
  665. this.checkPopupConfirm()
  666. },
  667. photoUpload(val) {
  668. let pictures = [];
  669. let that = this;
  670. uni.chooseImage({
  671. sourceType: ['camera'], //实现拍照
  672. count: 3,
  673. sizeType: ['original', 'compressed'],
  674. // sourceType: ['album','camera'], //打开系统相册
  675. success(res) {
  676. that.loading = true
  677. if (Array.isArray(res.tempFilePaths)) { //从相册选择有三张的情况
  678. res.tempFilePaths.forEach(item => {
  679. loadImage(
  680. item,
  681. function(canvas) {
  682. canvas.toBlob(function(blob) {
  683. // 压缩后的 Blob 对象
  684. const compressedFile = blob;
  685. // 将压缩后的文件 `compressedFile` 转换为临时URL
  686. const fileUrl = URL.createObjectURL(
  687. compressedFile);
  688. uni.uploadFile({
  689. url: baseUrl +
  690. '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
  691. filePath: item,
  692. name: 'file',
  693. header: {
  694. "Authorization": 'Bearer ' +
  695. getAccessToken(),
  696. }, //请求token
  697. success: (res) => {
  698. let imgUrl = JSON.parse(res
  699. .data)
  700. that.loading = false
  701. //消防设备外(扫一扫下方)展示的图片
  702. //弹出层的消防设备展示的图片
  703. if (that.manualPopup) { //手动检查
  704. that.checkManualData.map(
  705. i => {
  706. i.attUrl.push(
  707. imgUrl
  708. .data)
  709. })
  710. } else { //扫码添加
  711. that.insTypeData.map((i,
  712. index) => {
  713. if (val.id == i
  714. .id) {
  715. i.attUrl
  716. .push(
  717. imgUrl
  718. .data
  719. )
  720. }
  721. })
  722. }
  723. that.$forceUpdate();
  724. // // 返回的url
  725. },
  726. fail: () => {
  727. that.loading = false
  728. console.log("err");
  729. }
  730. })
  731. // 上传完毕后,释放临时URL
  732. URL.revokeObjectURL(fileUrl);
  733. }, 'image/jpeg', 0.6); // 设置压缩后的图片格式为 JPEG,压缩质量为 0.6
  734. }, {
  735. canvas: true,
  736. maxWidth: 800
  737. } // 设置最大宽度为 800px
  738. );
  739. })
  740. }
  741. }
  742. })
  743. },
  744. // 消防设备扫码
  745. normalPopup(items, indexs, index) {
  746. // this.insTypeData.map(k => {
  747. // k.attUrl = []
  748. // })
  749. this.insTypeData[index].inspectResultList.map(k => {
  750. if (k.isNormal == 1) this.nnorNormalValue = k.id
  751. if (this.insTypeData[index].inspectResultList[indexs].isNormal != 1 && this
  752. .insTypeData[index]
  753. .inspectResultList[indexs].subValue != 1) {
  754. // this.show5 = true
  755. this.show2 = true
  756. }
  757. })
  758. let tableItem = this.insTypeData[index].inspectResultList[indexs]
  759. let ALLinspectResultList = this.insTypeData[index].inspectResultList
  760. let YesinspectResultList = []
  761. let NorinspectResultList = []
  762. var Y = ALLinspectResultList.filter(i => i.id == this.nnorNormalValue)
  763. var N = ALLinspectResultList.filter(i => i.id != this.nnorNormalValue)
  764. N.map(n => {
  765. NorinspectResultList.push(n.subValue)
  766. })
  767. Y.map(y => {
  768. YesinspectResultList.push(y.subValue)
  769. })
  770. // items.isdenger = 0 ? 1 : 0
  771. if (NorinspectResultList.includes(1)) { //如果互斥的数组存在true normal!=1的数组
  772. if (tableItem.id == this.nnorNormalValue) {
  773. this.insTypeData[index].inspectResultList.map((i, kindex) => {
  774. if (i.id != this.nnorNormalValue) {
  775. i.subValue = 0
  776. this.show2 = false
  777. } else {
  778. i.subValue = 1
  779. }
  780. })
  781. } else {
  782. items.subValue = items.subValue == 0 ? 1 : 0
  783. this.show2 = false
  784. }
  785. } else {
  786. if (tableItem.id == this.nnorNormalValue) {
  787. items.subValue = items.subValue == 0 ? 1 : 0
  788. } else {
  789. // if (YesinspectResultList.includes(true)) { //是否存在第一份
  790. this.insTypeData[index].inspectResultList.map((i, kindex) => {
  791. if (i.id == this.nnorNormalValue) {
  792. i.subValue = 0
  793. }
  794. })
  795. // }
  796. items.subValue = items.subValue == 0 ? 1 : 0
  797. }
  798. }
  799. },
  800. checkPopupConfirm() { //弹出得到的那一条数据insTypeData的id 弹出保存
  801. if (this.manualPopup) { //手动检查
  802. this.saveImplement = this.checkManualData[0]
  803. this.saveImplement.hisResultCreateReqVOList = this.checkManualData[0].inspectSubDOList
  804. this.saveImplement.dangerDescribe = this.dangerDescribe
  805. this.saveImplement.handleTime = shijianc(new Date().getTime())
  806. this.saveImplement.inspectTime = shijianc(new Date().getTime())
  807. this.saveImplement.remark = this.remark
  808. this.saveImplement.imgUrl1 = this.checkManualData[0].attUrl[0] ? this.checkManualData[0].attUrl[0] :
  809. "";
  810. this.saveImplement.imgUrl2 = this.checkManualData[0].attUrl[1] ? this.checkManualData[0].attUrl[1] :
  811. "";
  812. this.saveImplement.imgUrl3 = this.checkManualData[0].attUrl[2] ? this.checkManualData[0].attUrl[2] :
  813. "";
  814. console.log(this.saveImplement, this.checkManualData, 'this.saveImplement===');
  815. this.saveImplement.hisResultCreateReqVOList.map(z => {
  816. z.resLable = z.subLable
  817. z.resValue = z.isdenger
  818. })
  819. this.saveImplement.inspId = this.saveImplement.id
  820. this.saveImplement.inspectSubDOList.map(i => {
  821. if (i.isdenger == 1 && i.isNormal == 0) { //必传参数,只有该检查项正常为0,那么isdenger==1
  822. this.saveImplement.isdenger = 1
  823. } else {
  824. this.saveImplement.isdenger = 0
  825. }
  826. })
  827. this.saveImplement.orgId = this.formData.orgId
  828. if (!this.saveImplement.dangerDescribe && this.saveImplement.isdenger == 1) return that.$modal
  829. .msgError('请填写隐患描述');
  830. console.log(this.saveImplement, 'this.saveImplement===');
  831. this.baocun(this.saveImplement)
  832. } else { //设施扫码
  833. //this.insTypeData[0]扫二维码后点击出现的一条消防列表数据内容 this.newInsTypeData的多条数据列表
  834. let arr = []
  835. console.log('aaaaaaaaaaaaaa', this.insTypeData);
  836. let normalArr = 0
  837. this.insTypeData[0].inspectResultList.map((i, index) => {
  838. arr.push(i.subValue)
  839. if (i.isNormal == 1) {
  840. normalArr = index //找到正常的所在的index
  841. }
  842. })
  843. if (arr.includes(1)) { //包含了证明勾选了
  844. this.insTypeData.map(i => {
  845. })
  846. this.saveImplement = this.insTypeData
  847. this.saveImplement.map(i => {
  848. i.handleTime = shijianc(new Date().getTime())
  849. i.inspectTime = shijianc(new Date().getTime())
  850. i.orgId = this.formData.orgId
  851. i.dangerDescribe = this.dangerDescribe
  852. i.handleMethod = this.handleMethod
  853. i.remark = this.remark
  854. i.handleResult = this.handleResult
  855. i.fpdId = i.id
  856. i.inspType = "fpd"
  857. i.imgUrl1 = i.attUrl[0] ? i.attUrl[0] : ""
  858. i.imgUrl2 = i.attUrl[1] ? i.attUrl[1] : ""
  859. i.imgUrl3 = i.attUrl[2] ? i.attUrl[2] : ""
  860. i.inspName = i.fpdName
  861. i.inspCode = i.fpdCode
  862. i.inspId = i.id
  863. i.fpdResultCreateReqVOList = i.inspectResultList
  864. i.fpdResultCreateReqVOList.map(z => {
  865. z.broadId = 0
  866. z.fpdId = z.id
  867. z.resLable = z.subLable
  868. z.resValue = z.subValue
  869. z.status = 0
  870. if (z.subValue == 1 && z.isNormal ==
  871. 0) { //必传参数,只有该检查项正常为0,那么isdenger==1
  872. i.isdenger = 1
  873. } else {
  874. i.isdenger = 0
  875. }
  876. })
  877. })
  878. console.log(this.saveImplement, 'this.saveImplement[0]this.saveImplement[0]');
  879. if (!this.saveImplement[0].dangerDescribe && this.saveImplement[0].isdenger == 1) return that
  880. .$modal.msgError('请填写隐患描述');
  881. this.baocun(this.saveImplement[0])
  882. // ----扫码选择隐患
  883. this.description2 = ''
  884. this.show2 = false
  885. } else {
  886. that.$modal.alert('请勾选检查结果')
  887. }
  888. }
  889. },
  890. baocun(val) {
  891. createInspect(JSON.stringify(val)).then(response => {
  892. if (response.data) {
  893. uni.showToast({
  894. title: '提交成功',
  895. icon: 'none',
  896. duration: 2000
  897. })
  898. this.tableData = []
  899. this.getData(1)
  900. this.reselt()
  901. console.log(this.checkManualData, '===================');
  902. this.$forceUpdate()
  903. } else {
  904. this.$modal.msgError('提交失败')
  905. }
  906. })
  907. this.maShow = false
  908. this.manualPopup = false
  909. },
  910. reselt() {
  911. this.dangerDescribe = ''
  912. this.handleResult = ''
  913. this.saveImplement = { //重置
  914. attUrl: [],
  915. dangerDescribe: "", //隐患描述
  916. fpdId: "",
  917. fpdResultCreateReqVOList: [], //传的当前事件
  918. hisResultCreateReqVOList: [],
  919. handleMethod: "", //处理方式
  920. handleResult: "", //处理结果描述
  921. handleTime: "",
  922. inspectTime: "",
  923. imgUrl1: "",
  924. imgUrl2: "",
  925. imgUrl3: "",
  926. orgId: 0,
  927. taskId: 0,
  928. broadId: 0,
  929. remark: "", //附加描述
  930. isdenger: 0,
  931. }
  932. this.checkManualData = [{ //重置
  933. attUrl: [],
  934. dangerDescribe: "", //隐患描述
  935. fpdId: "",
  936. fpdResultCreateReqVOList: [], //传的当前事件
  937. hisResultCreateReqVOList: [],
  938. handleMethod: "", //处理方式
  939. handleResult: "", //处理结果描述
  940. handleTime: "",
  941. inspectTime: "",
  942. imgUrl1: "",
  943. imgUrl2: "",
  944. imgUrl3: "",
  945. orgId: 0,
  946. taskId: 0,
  947. broadId: 0,
  948. remark: "", //附加描述
  949. isdenger: 0,
  950. }]
  951. },
  952. checkPopupCancel() {
  953. this.maShow = false
  954. this.showManual = false
  955. this.manualPopup = false
  956. },
  957. // 隐藏键盘
  958. hideKeyboard() {
  959. uni.hideKeyboard();
  960. },
  961. addClick() {
  962. this.manualCheck = true
  963. },
  964. addClickDetail(val) {
  965. uni.navigateTo({
  966. url: `/pagesA/fire/check_inspection/inspect_detail/inspect_detail?id=${val}`,
  967. success: function(res) {
  968. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  969. }
  970. })
  971. },
  972. },
  973. // 触底的事件
  974. onReachBottom() {
  975. // 判断是否还有下一页数据
  976. if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
  977. title: `数据加载完毕`
  978. })
  979. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  980. if (this.loading) return
  981. this.pageNo += 1
  982. this.getData(this.pageNo)
  983. },
  984. }
  985. </script>
  986. <style>
  987. page {
  988. background-color: #F5F7F9;
  989. }
  990. </style>
  991. <style lang="scss" scoped>
  992. page {
  993. background-color: #F5F7F9 !important;
  994. }
  995. .tops {
  996. display: flex;
  997. justify-content: space-between;
  998. width: 80%;
  999. margin: 50rpx 10%;
  1000. // 二维码扫描相关样式
  1001. .qr-scan-containner {
  1002. max-width: 600rpx;
  1003. display: flex;
  1004. flex-direction: column;
  1005. justify-content: center;
  1006. align-items: center;
  1007. align-content: center;
  1008. background-color: transparent;
  1009. .qr-scan-middle {
  1010. .qr-scan-title {
  1011. font-size: 30rpx;
  1012. text-align: center;
  1013. padding: 20rpx 0;
  1014. }
  1015. max-width: 100%;
  1016. }
  1017. }
  1018. }
  1019. .tupian {
  1020. width: 95rpx;
  1021. height: 95rpx;
  1022. }
  1023. .tupians {
  1024. width: 45rpx;
  1025. height: 45rpx;
  1026. }
  1027. .tiantupian {
  1028. width: 95rpx;
  1029. height: 95rpx;
  1030. }
  1031. .cont {
  1032. font-size: 16px;
  1033. color: #4CB2B6;
  1034. margin-bottom: 30rpx;
  1035. }
  1036. .text {
  1037. text-align: center;
  1038. color: #000;
  1039. font-size: 26rpx;
  1040. margin-left: 20rpx;
  1041. }
  1042. .text2 {
  1043. text-align: center;
  1044. color: #000;
  1045. font-size: 22rpx;
  1046. margin-top: 10rpx;
  1047. }
  1048. ::v-deep .u-icon__icon {
  1049. margin-right: 0px !important;
  1050. }
  1051. .child {
  1052. margin: 20rpx 0 0 20rpx;
  1053. border-radius: 10rpx;
  1054. .child-new {
  1055. display: flex;
  1056. .child-new-item {
  1057. width: 30%;
  1058. margin-top: 25%;
  1059. transform: translateY(-50px);
  1060. }
  1061. .child-result {
  1062. /deep/.data-v-525ecd67 {
  1063. // width: 130rpx;
  1064. height: 100rpx;
  1065. }
  1066. }
  1067. }
  1068. }
  1069. .titles {
  1070. padding: 20rpx 0;
  1071. color: #383838;
  1072. }
  1073. .grid-item-box {
  1074. display: flex;
  1075. align-items: center;
  1076. justify-content: center;
  1077. padding: 15px 0;
  1078. }
  1079. /deep/ .uni-grid-item {
  1080. height: 140rpx !important;
  1081. }
  1082. /deep/.uni-textarea-textarea {
  1083. border: 1px solid #4CB2B6;
  1084. border-radius: 16rpx;
  1085. }
  1086. .btnList {
  1087. display: flex
  1088. }
  1089. .main-content {
  1090. /deep/.u-icon--right[data-v-172979f2],
  1091. /deep/.u-icon--right.data-v-172979f2,
  1092. .u-icon--right {
  1093. // background-color: #f8f8f8;
  1094. border-radius: 5rpx;
  1095. position: absolute;
  1096. top: -14rpx;
  1097. right: 14rpx;
  1098. }
  1099. }
  1100. /deep/.danwei.u-icon--right[data-v-172979f2],
  1101. /deep/.danwei.u-icon--right.data-v-172979f2,
  1102. .danwei.u-icon--right {
  1103. top: 58rpx !important;
  1104. right: 58rpx !important;
  1105. }
  1106. .uni-grid-wraps {
  1107. margin-left: 60rpx;
  1108. margin-bottom: 200rpx;
  1109. }
  1110. /deep/.u-slide-up-enter-active[data-v-39e33bf2],
  1111. /deep/.u-slide-up-enter-active.data-v-39e33bf2,
  1112. .u-slide-up-enter-active {
  1113. height: 90% !important;
  1114. overflow-y: auto;
  1115. }
  1116. .springFarm {
  1117. margin-left: 40rpx;
  1118. }
  1119. .show-title {
  1120. font-size: 32rpx;
  1121. color: #383838;
  1122. margin: 40rpx 0;
  1123. }
  1124. /deep/.u-modal {
  1125. border: 1px solid #4CB2B6 !important;
  1126. }
  1127. .slot-contents {
  1128. // margin-left: 40rpx;
  1129. margin-bottom: 20rpx;
  1130. border-radius: 1px solid #E5E5E5 !important;
  1131. // background-color: #F0F2F3 !important;
  1132. }
  1133. /deep/ .slot-contents .uni-textarea-textarea {
  1134. border: 1px solid #4CB2B6 !important;
  1135. // background-color: #F0F2F3 !important;
  1136. }
  1137. .jieguo {
  1138. /deep/.uni-textarea-textarea {
  1139. border: none !important
  1140. }
  1141. }
  1142. /deep/ .uni-textarea-placeholder {
  1143. color: #a4a8ab;
  1144. margin-top: 20rpx;
  1145. margin-left: 30rpx;
  1146. }
  1147. .detail {
  1148. // width: 72px;
  1149. // height: 60rpx;
  1150. float: right;
  1151. border-radius: 30px;
  1152. background-color: #F7C41E;
  1153. margin-right: 20rpx;
  1154. text-align: center;
  1155. // line-height: 60rpx;
  1156. padding: 3rpx 15rpx;
  1157. }
  1158. .an-niu {
  1159. display: flex;
  1160. justify-content: space-between;
  1161. }
  1162. /deep/.u-input {
  1163. padding: 4px !important;
  1164. }
  1165. /deep/.canvasBox {
  1166. .box {
  1167. width: 600rpx;
  1168. /* 设置扫码容器宽度 */
  1169. height: 600rpx;
  1170. /* 设置扫码容器高度 */
  1171. }
  1172. }
  1173. .manual {
  1174. font-size: 16px;
  1175. padding: 25rpx 0;
  1176. overflow-y: auto;
  1177. }
  1178. .manual-hand {
  1179. margin-left: 30rpx;
  1180. display: flex;
  1181. font-size: 18px;
  1182. color: #30746b;
  1183. margin: 20rpx;
  1184. }
  1185. .manual-hand-item {
  1186. display: flex;
  1187. width: 90%;
  1188. justify-content: space-between;
  1189. margin-left: 3%;
  1190. /deep/.u-input {
  1191. border: 1px solid #726f74 !important;
  1192. }
  1193. }
  1194. //隐患弹框
  1195. /deep/.u-popup__content {
  1196. overflow-y: auto;
  1197. height: 90vh;
  1198. }
  1199. .text-xl {
  1200. font-size: 18px;
  1201. font-weight: 600;
  1202. }
  1203. .person-forward {
  1204. padding-top: 40rpx;
  1205. display: flex;
  1206. flex-direction: column;
  1207. flex-wrap: wrap;
  1208. overflow-y: auto;
  1209. margin-bottom: 100rpx;
  1210. }
  1211. .example {
  1212. overflow-y: auto;
  1213. }
  1214. /deep/.u-action-sheet {
  1215. overflow-y: auto;
  1216. }
  1217. </style>