index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. <template>
  2. <view class="uni-container uni-container-bg">
  3. <view class="example container">
  4. <!-- 搜索框 -->
  5. <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
  6. <uni-col :span="24">
  7. <view class="u-page__tag-item">
  8. <u-search placeholder="请输入消防设施名称" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="keyword"
  9. :show-action="true" @custom="search"></u-search>
  10. </view>
  11. </uni-col>
  12. </uni-row>
  13. <!-- 下拉框 -->
  14. <view class="u-page__tag-item"
  15. style="margin-bottom: 26upx;width: 700upx;border-bottom: 2px solid #55cbbf;background-color: #f5f7fa;">
  16. <u-form>
  17. <u-form-item prop="orgName" @click="
  18. showOrg = true;
  19. hideKeyboard();
  20. " label="单位选择:" labelWidth="100px">
  21. <u--input border="none" disabled v-model="formData.orgName" placeholder="请选择所属单位"></u--input>
  22. <u-icon slot="right" name="arrow-down"></u-icon>
  23. </u-form-item>
  24. </u-form>
  25. </view>
  26. <!-- 卡片栏 -->
  27. <view class="" v-if="tableData.length>0 && isLoaded" style="margin-bottom: 90rpx;">
  28. <uni-card v-for="(item, index) in tableData" :isFull="true">
  29. <!-- :thumbnail="qr&ids==item.id?item.fpdQcode:''" :key="index"
  30. :title="item.fpdName"
  31. :sub-title="'设施编号:' + item.fpdCode" :extra="'设施类别:' + item.fpdTypeName"-->
  32. <!-- @click="saveQRCodeToLocal(qr&ids==item.id?item.fpdQcode:'')" -->
  33. <!-- @click.native="previewQRCode(qr&ids==item.id?item.fpdQcode:'')" -->
  34. <!-- 标题 -->
  35. <template #title>
  36. <view class="nav-title">
  37. <view @click="saveQRCodeToLocal(qr&ids==item.id?item.fpdQcode:'')" v-if="qr && ids == item.id">
  38. <img :src="qr && ids == item.id ? item.fpdQcode : ''"
  39. style="with:100rpx;height:100rpx;margin-top:10rpx" v-if="qr && ids == item.id">
  40. </view>
  41. <view class="">
  42. <view class="title-fpdname">
  43. {{item.fpdName}}
  44. </view>
  45. <view class="title-fpdcode">
  46. {{`设施编号:${item.fpdCode}`}}
  47. </view>
  48. </view>
  49. <view class="">
  50. {{`设施类别:${item.fpdTypeName?item.fpdTypeName:''}`}}
  51. </view>
  52. </view>
  53. </template>
  54. <view class="titles">{{ item.buildingName }}</view>
  55. <!-- 简要内容 -->
  56. <!-- <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  57. <text>设备状态:</text>
  58. <text v-if="item.fpdStatus==0" class="conts">正常</text>
  59. <text v-if="item.fpdStatus==1" class="conts">有问题</text>
  60. </view> -->
  61. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  62. <text>所在位置:</text>
  63. <text class="conts">{{ item.fpdLocal }}</text>
  64. </view>
  65. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  66. <text>所属建筑:</text>
  67. <text class="conts">{{ item.buildingId }}</text>
  68. </view>
  69. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  70. <text>所属单位:</text>
  71. <text class="conts max-width">{{ item.orgDO.orgName }}</text>
  72. </view>
  73. <!-- 删除按钮 -->
  74. <view class="an-niu" @click="showModal(item)" style="z-index:99">
  75. <!-- @click.native="onClickDel(item)" -->
  76. <view class="detailDel">删除</view>
  77. </view>
  78. <view class="an-niu" @click="onClick(item, formData.orgName)" link>
  79. <text class="detail">编辑</text>
  80. </view>
  81. <view class="an-niu" link>
  82. <text class="detail" @click.native="anniuQR(item.fpdQcode,item.id)">生成二维码</text>
  83. </view>
  84. <!-- <view class="an-niu" @click.stop="saveQRCodeToLocal(item.fpdQcode)" link>
  85. <text class="detail">保存图片</text>
  86. </view> -->
  87. </uni-card>
  88. </view>
  89. <!-- tableData为空时显示 -->
  90. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  91. <view class="text-gray" style="padding-top: 20px;" v-if="tableData == 0">
  92. <img :src="tan90" alt="暂无数据" />
  93. </view>
  94. </view>
  95. <view>
  96. <image :src="Group" @click="addClick" class="tiantupian"></image>
  97. </view>
  98. <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
  99. @select="">
  100. </u-action-sheet>
  101. <!-- <u-modal
  102. :show="show"
  103. @confirm="confirm"
  104. @cancel="cancel"
  105. @close="close"
  106. asyncClose
  107. closeOnClickOverlay
  108. showCancelButton
  109. confirmColor="red"
  110. :title="title"
  111. :content="content"
  112. ref="uModal"
  113. ></u-modal> -->
  114. <u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
  115. showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal" :asyncClose="true">
  116. </u-modal>
  117. <!-- 加载中 -->
  118. <isLodingModel></isLodingModel>
  119. </view>
  120. </view>
  121. </template>
  122. <script>
  123. var that = '';
  124. import {
  125. getDevice, //获取消防设施列表
  126. delDevice, //删除
  127. getOrgId //获取orgId
  128. } from '@/api/fire_device';
  129. import config from '@/config'
  130. import {
  131. DICT_TYPE,
  132. getDictDatas
  133. } from '@/utils/dict';
  134. import {
  135. getArc, //获取建筑信息列表
  136. } from '@/api/architecture';
  137. const baseUrlImg = config.baseUrlImg
  138. export default {
  139. data() {
  140. return {
  141. typeDict: getDictDatas(DICT_TYPE.FPD_TYPE),
  142. screenHeight: this.$screenHeight,
  143. isLoaded: false,
  144. Group: `${baseUrlImg}/checkActive/Group.png`,
  145. showOrg: false,
  146. actions: [],
  147. orgId: '',
  148. // 数据
  149. tableData: [],
  150. title: '是否删除该数据项?',
  151. content: '确认删除?',
  152. id: '',
  153. tan90: `${baseUrlImg}/tan90.png`,
  154. // 每页数据量
  155. pageSize: 10,
  156. FPDstatus: '',
  157. // 当前页
  158. pageNo: 1,
  159. // 数据总量
  160. total: 0,
  161. // tableData数据加载中
  162. loading: false,
  163. // 初始化时搜索框的值
  164. keyword: '',
  165. qr: false, //二维码是否展示
  166. ids: '', //点击生成的是哪个二维码
  167. // 开始时间与结束时间
  168. formData: {
  169. orgName: '',
  170. fpdStatusValue: ''
  171. },
  172. show: false,
  173. showtimeStart: false,
  174. showtimeEnd: false,
  175. buildingData:[]
  176. };
  177. },
  178. // 在 vue页面,向起始页通过事件传递数据
  179. onLoad: function(option) {
  180. that = this;
  181. },
  182. onShow() {
  183. this.buildingData = []
  184. getArc({
  185. pageNo: 1,
  186. pageSize: 100,
  187. orgId: this.formData.orgId,
  188. }).then(response => {
  189. response.data?.records.map(v => {
  190. this.buildingData.push({
  191. id: v.id,
  192. name: v.buildingName
  193. });
  194. });
  195. });
  196. this.actions = []
  197. getOrgId({
  198. pageNo: this.pageNo,
  199. pageSize: this.pageSize,
  200. userId: this.$store.state.user.id
  201. }).then(response => {
  202. // 取到用户对应的单位名称与id
  203. response.data.map(v => {
  204. this.actions.push({
  205. id: v.dwid,
  206. name: v.orgName
  207. });
  208. });
  209. this.formData.orgName = response.data[0].orgName;
  210. this.formData.orgId = response.data[0].dwid;
  211. this.tableData = []
  212. this.getData();
  213. }).catch(err => {
  214. this.loading = false
  215. this.$modal.msg(err)
  216. })
  217. // this.tableData={}
  218. // this.getData();
  219. },
  220. watch: {
  221. loading: {
  222. handler(newLength, oldLength) {
  223. this.$modal.isLoadingModel(this.loading)
  224. },
  225. immediate: true
  226. }
  227. },
  228. mixins: [uni.$u.mixin],
  229. methods: {
  230. search(val) {
  231. this.isLoaded = false
  232. this.loading = true
  233. this.tableData = []
  234. this.getData()
  235. },
  236. async saveQRCodeToLocal(qrCodeUrl) {
  237. uni.previewImage({
  238. current: qrCodeUrl,
  239. urls: [qrCodeUrl],
  240. width: 50, // 设置预览图片的宽度
  241. height: 50, // 设置预览图片的高度
  242. });
  243. const authSetting = await uni.getSetting();
  244. if (authSetting[1].authSetting['scope.writePhotosAlbum'] === false) {
  245. uni.showModal({
  246. title: '提示',
  247. content: '请开启相册权限以保存二维码',
  248. success: res => {
  249. if (res.confirm) {
  250. uni.openSetting();
  251. }
  252. },
  253. });
  254. return;
  255. }
  256. const tempFilePath = qrCodeUrl
  257. uni.showLoading({
  258. title: '正在保存',
  259. });
  260. uni.saveImageToPhotosAlbum({
  261. filePath: tempFilePath,
  262. success: () => {
  263. uni.showToast({
  264. title: '保存成功',
  265. icon: 'success',
  266. });
  267. },
  268. fail: () => {
  269. uni.showToast({
  270. title: '保存失败,请重试',
  271. icon: 'none',
  272. });
  273. },
  274. complete: () => {
  275. uni.hideLoading();
  276. },
  277. });
  278. },
  279. // previewQRCode(qrCodeUrl) {
  280. // console.log(qrCodeUrl, 'qrCodeUrlqrCodeUrl');
  281. // uni.previewImage({
  282. // current: qrCodeUrl,
  283. // urls: [qrCodeUrl],
  284. // width: 50, // 设置预览图片的宽度
  285. // height: 50, // 设置预览图片的高度
  286. // });
  287. // },
  288. anniuQR(qrCodeUrl, valid) { //生成二维码
  289. this.ids = valid
  290. this.qr = true
  291. uni.previewImage({
  292. urls: [qrCodeUrl],
  293. });
  294. },
  295. // 模态框内容
  296. showModal(val) {
  297. this.show = true;
  298. this.id = val.id;
  299. },
  300. confirm() {
  301. this.show = false;
  302. delDevice({
  303. id: this.id
  304. }).then(response => {
  305. this.isLoaded = false
  306. this.tableData = []
  307. this.getData();
  308. // this.tableData = response.data;
  309. });
  310. },
  311. close() {
  312. this.show = false;
  313. },
  314. cancel() {
  315. this.show = false;
  316. },
  317. // 编辑
  318. addClickDetail(val) {
  319. uni.navigateTo({
  320. url: `/pagesA/fire/fire_device/edit_device/edit_device?item=${JSON.stringify(val)}`
  321. });
  322. },
  323. // 获取数据
  324. getData(pageNo) {
  325. this.loading = true;
  326. // 获取设施信息详细信息
  327. getDevice({
  328. pageNo: this.pageNo,
  329. pageSize: this.pageSize,
  330. orgId: this.formData.orgId,
  331. fpdName: this.keyword
  332. }).then(response => {
  333. this.isLoaded = true
  334. this.tableData = [...this.tableData, ...response.data.records]
  335. this.loading = false
  336. this.total=response.data.total
  337. // this.tableData = response.data.records;
  338. // 根据返回值,显示记录类型的中文名称
  339. this.tableData.map(i => {
  340. this.typeDict.map(k=>{
  341. if(i.fpdType==k.value){
  342. i.fpdTypeName=k.label
  343. }
  344. })
  345. })
  346. }).catch(err => {
  347. this.loading = false
  348. this.$modal.msg(err)
  349. })
  350. },
  351. sexSelect(e) {
  352. this.formData.orgId = e.id;
  353. this.formData.orgName = e.name;
  354. // 获取培训演练信息详细信息
  355. getDevice({
  356. pageNo: this.pageNo,
  357. pageSize: this.pageSize,
  358. orgId: this.formData.orgId
  359. }).then(response => {
  360. this.tableData = response.data.list;
  361. });
  362. this.$$forceUpdate()
  363. },
  364. // 传递数据
  365. onClick(val, orgName) {
  366. this.isLoaded = false
  367. uni.navigateTo({
  368. url: `/pagesA/fire/fire_device/edit_device/edit_device?id=${val.id}&orgName=${orgName}&buildingData=${JSON.stringify(this.buildingData)}`,
  369. events: {
  370. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  371. acceptDataFromOpenedPage: function(val) {
  372. }
  373. },
  374. success: function(res) {
  375. // 通过eventChannel向被打开页面传送数据
  376. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  377. }
  378. });
  379. },
  380. // 删除
  381. onClickDel(val) {
  382. this.id = val.id;
  383. delDevice({
  384. id: this.id
  385. }).then(response => {
  386. this.loading = true;
  387. this.isLoaded = false
  388. this.tableData = []
  389. this.getData();
  390. });
  391. },
  392. addClick() {
  393. this.isLoaded = false
  394. uni.navigateTo({
  395. url: `/pagesA/fire/fire_device/add_device/add_device?&orgName=${this.formData.orgName}&orgId=${this.formData.orgId}`,
  396. });
  397. },
  398. // 隐藏键盘
  399. hideKeyboard() {
  400. uni.hideKeyboard();
  401. },
  402. },
  403. // 触底的事件
  404. onReachBottom() {
  405. // 判断是否还有下一页数据
  406. if (this.pageNo * this.pageSize >= this.total)
  407. return uni.showToast({
  408. title: `数据加载完毕`
  409. });
  410. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  411. if (this.loading) return;
  412. this.pageNo += 1;
  413. this.getData(this.pageNo);
  414. }
  415. };
  416. </script>
  417. <style lang="scss" scoped>
  418. body {
  419. background-color: #f5f7f9;
  420. }
  421. page {
  422. background-color: #f5f7f9;
  423. }
  424. /deep/ .u-tabs__wrapper[data-v-0de61367],
  425. .u-tabs__wrapper.data-v-0de61367,
  426. /deep/.u-tabs__wrapper {
  427. width: 99%;
  428. }
  429. /deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
  430. /deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
  431. /deep/.u-tabs__wrapper__nav__item {
  432. padding: 0 60rpx;
  433. }
  434. .uni-container {
  435. height: 100vh;
  436. padding-right: 20upx;
  437. }
  438. .addInsp {
  439. width: 40px;
  440. position: fixed;
  441. right: 4px;
  442. z-index: 99999;
  443. }
  444. ::v-deep .u-icon__icon {
  445. margin-right: 0px !important;
  446. }
  447. .an-niu {
  448. float: right;
  449. font-size: 10px;
  450. text-align: center;
  451. display: flex;
  452. margin-top: 20upx;
  453. padding-bottom: 30rpx;
  454. // margin-top: 50rpx;
  455. color: #fff;
  456. .detail {
  457. padding: 0 40rpx;
  458. height: 60rpx;
  459. border-radius: 30px;
  460. background-color: #4cb2b6;
  461. margin-right: 20rpx;
  462. text-align: center;
  463. line-height: 60rpx;
  464. }
  465. .detailDel {
  466. padding: 0 40rpx;
  467. height: 60rpx;
  468. border-radius: 30px;
  469. background-color: #ff2e31;
  470. color: white;
  471. margin-right: 20rpx;
  472. text-align: center;
  473. line-height: 60rpx;
  474. font-size: 30upx;
  475. }
  476. .solve {
  477. width: 62px;
  478. height: 60rpx;
  479. margin-right: 20rpx;
  480. border-radius: 30px;
  481. background-color: #4cb2b6;
  482. line-height: 60rpx;
  483. }
  484. .deletes {
  485. width: 62px;
  486. height: 60rpx;
  487. border-radius: 60rpx;
  488. background-color: red;
  489. color: #fff;
  490. line-height: 60rpx;
  491. }
  492. }
  493. /deep/.segmented-control__item--button {
  494. background-color: rgb(76, 178, 182) !important;
  495. }
  496. /deep/.segmented-control__item--button--active {
  497. background-color: #ffffff !important;
  498. }
  499. /deep/.uni-card {
  500. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  501. border-radius: 30rpx;
  502. }
  503. .tiantupian {
  504. width: 110rpx;
  505. height: 110rpx;
  506. position: fixed;
  507. right: 15px;
  508. bottom: 10rpx;
  509. }
  510. // 控制二维码缩略图大小
  511. /deep/ .uni-card .uni-card__header .uni-card__header-avatar {
  512. width: 65px;
  513. height: 65px;
  514. overflow: hidden;
  515. border-radius: 5px;
  516. margin-right: 10px;
  517. }
  518. /deep/ .uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
  519. flex: 1;
  520. width: 65px;
  521. height: 65px;
  522. }
  523. //列表样式
  524. .titles {
  525. font-weight: 600;
  526. margin-bottom: 10rpx;
  527. color: black;
  528. font-size: 32rpx;
  529. }
  530. .conts {
  531. max-width: 470rpx;
  532. display: -webkit-box;
  533. /*弹性伸缩盒子模型显示*/
  534. -webkit-box-orient: vertical;
  535. /*排列方式*/
  536. -webkit-line-clamp: 1;
  537. /*显示文本行数*/
  538. overflow: hidden;
  539. /*溢出隐藏*/
  540. color: #274647;
  541. text-overflow: ellipsis;
  542. /*不知道干嘛的*/
  543. .conts-title {
  544. margin-right: 10rpx;
  545. color: #728f90;
  546. }
  547. }
  548. .max-width {
  549. max-width: 180upx;
  550. }
  551. /deep/ .u-form-item__body__left__content__label {
  552. font-size: 28upx !important;
  553. }
  554. .nav-title {
  555. display: flex;
  556. align-items: center;
  557. justify-content: space-between;
  558. color: #728f90;
  559. border-bottom: 1px solid #DCDCDC;
  560. ;
  561. padding-bottom: 20rpx;
  562. .title-fpdname {
  563. color: #000;
  564. }
  565. .title-fpdcode {
  566. margin-top: 10rpx
  567. }
  568. }
  569. .example{
  570. overflow-y: auto;
  571. }
  572. /deep/.u-action-sheet {
  573. overflow-y: auto;
  574. height: 1000rpx;
  575. background-color: #fff;
  576. }
  577. </style>