index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. <template>
  2. <view class="uni-container">
  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 v-if="tableData.length>0 && isLoaded" style="margin-bottom: 80rpx;">
  28. <view v-for="(item, index) in tableData" :key="index"
  29. v-if="formData.orgName === item.orgName || formData.orgId === item.orgId">
  30. <uni-card>
  31. <!-- 标题 -->
  32. <view class="titles">{{ item.microName }}</view>
  33. <!-- 简要内容 -->
  34. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  35. <text class="name-align-building">详细地址:</text>
  36. <text class="conts">{{ item.addr }}</text>
  37. </view>
  38. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  39. <text class="name-align-building">所属区县:</text>
  40. <text class="conts">{{ item.county }}</text>
  41. </view>
  42. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  43. <text class="name-align-building">负责人:</text>
  44. <text class="conts max-width">{{ item.charger }}</text>
  45. </view>
  46. <!-- 删除按钮 -->
  47. <view class="an-niu" @click.native="showModal(item)">
  48. <view class="detailDel">删除</view>
  49. </view>
  50. <view class="an-niu" @click.native="onClick(item,formData.orgName)" link><text
  51. class="detail">查看详情</text></view>
  52. <view class="an-niu" @click.native="onClickFireRun(item,formData.orgName)" link><text
  53. class="operation">运行情况</text></view>
  54. </uni-card>
  55. </view>
  56. </view>
  57. <!-- tableData为空时显示 -->
  58. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  59. <view class="text-gray" style="padding-top: 20px;" v-if="tableData == 0">
  60. <img :src="tan90" alt="暂无数据" />
  61. </view>
  62. </view>
  63. <view>
  64. <image :src="Group" @click="addClick" class="tiantupian"></image>
  65. </view>
  66. <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
  67. @select="sexSelect">
  68. </u-action-sheet>
  69. <u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
  70. showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal"></u-modal>
  71. <!-- 加载中 -->
  72. <isLodingModel></isLodingModel>
  73. </view>
  74. </view>
  75. </template>
  76. <script>
  77. var that = '';
  78. import {
  79. getOrgId,
  80. getStation,
  81. delStation,
  82. } from '@/api/fire_station/index';
  83. import config from '@/config'
  84. const baseUrlImg = config.baseUrlImg
  85. export default {
  86. data() {
  87. return {
  88. screenHeight: this.$screenHeight,
  89. wheight: '',
  90. isLoaded: false,
  91. Group: `${baseUrlImg}/checkActive/Group.png`,
  92. showOrg: false,
  93. actions: [],
  94. // 数据
  95. tableData: {},
  96. title: '是否删除该数据项?',
  97. content: '确认删除?',
  98. id: '',
  99. tan90: `${baseUrlImg}/tan90.png`,
  100. // 每页数据量
  101. pageSize: 5,
  102. // 当前页
  103. pageNo: 1,
  104. // 数据总量
  105. total: 0,
  106. // tableData数据加载中
  107. loading: false,
  108. // 初始化时搜索框的值
  109. keyword: '',
  110. // 存放orgid,orgname
  111. formData: {
  112. orgName: ''
  113. },
  114. show: false,
  115. showtimeStart: false,
  116. showtimeEnd: false
  117. };
  118. },
  119. // 在 vue页面,向起始页通过事件传递数据
  120. onLoad: function(option) {},
  121. onShow() {
  122. this.actions = []
  123. that = this;
  124. getOrgId({
  125. pageNo: this.pageNo,
  126. pageSize: this.pageSize,
  127. userId: this.$store.state.user.id
  128. }).then(response => {
  129. console.log(response, 'response');
  130. // 取到用户对应的单位名称与id
  131. response.data.map(v => {
  132. this.actions.push({
  133. id: v.dwid,
  134. name: v.orgName
  135. });
  136. });
  137. console.log(response.data, '21321312');
  138. this.formData.orgName = response.data[0].orgName ? response.data[0].orgName : '';
  139. this.formData.orgId = response.data[0].dwid;
  140. this.tableData = []
  141. this.getData();
  142. });
  143. },
  144. watch: {
  145. loading: {
  146. handler(newLength, oldLength) {
  147. this.$modal.isLoadingModel(this.loading)
  148. },
  149. immediate: true
  150. }
  151. },
  152. onReady() {},
  153. mixins: [uni.$u.mixin],
  154. methods: {
  155. search(val) {
  156. console.log(val, 'valvals');
  157. this.tableData = []
  158. this.getData(1)
  159. },
  160. // 模态框内容
  161. showModal(val) {
  162. this.show = true;
  163. this.id = val.id;
  164. },
  165. confirm() {
  166. this.show = false;
  167. delStation({
  168. id: this.id
  169. }).then(response => {
  170. this.loading = true;
  171. this.isLoaded = false
  172. this.tableData = []
  173. this.getData();
  174. // this.tableData = response.data.list;
  175. console.log(this.tableData, '获取消防站信息详细信息获取消防站信息详细信息获取消防站信息详细信息获取消防站信息详细信息');
  176. });
  177. },
  178. close() {
  179. this.show = false;
  180. console.log('close');
  181. },
  182. cancel() {
  183. this.show = false;
  184. console.log('cancel');
  185. },
  186. //查看详情
  187. addClickDetail(val) {
  188. this.isLoaded = false
  189. uni.navigateTo({
  190. url: `/pagesA/fire/fire_station/fireStation_details/fireStation_details?item=${JSON.stringify(val)}`
  191. });
  192. },
  193. // 获取数据
  194. getData() {
  195. this.loading = true;
  196. // 获取消防站信息详细信息
  197. getStation({
  198. pageNo: this.pageNo,
  199. pageSize: this.pageSize,
  200. orgId: this.formData.orgId,
  201. microName: this.keyword
  202. // userId: this.$store.state.user.id
  203. }).then(response => {
  204. this.isLoaded = true
  205. this.tableData = [...this.tableData, ...response.data.list]
  206. this.loading = false
  207. this.total = response.data.total
  208. // this.tableData = response.data.list;
  209. // console.log(this.tableData[0].id, 'ppp');
  210. // localStorage.setItem('fireId',this.tableData[0].id)
  211. });
  212. },
  213. // 传递数据
  214. onClick(val, orgName) {
  215. console.log(val.id, orgName, 'nnn');
  216. localStorage.setItem("fireId", JSON.stringify(val.id))
  217. this.isLoaded = false
  218. uni.navigateTo({
  219. url: '/pagesA/fire/fire_station/fireStation_details/fireStation_details?id=' + val.id +
  220. '&orgName=' + orgName,
  221. events: {
  222. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  223. acceptDataFromOpenedPage: function(val) {
  224. console.log(val, '打开页面传送到当前页面的数据');
  225. }
  226. },
  227. success: function(res) {
  228. // 通过eventChannel向被打开页面传送数据
  229. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  230. }
  231. });
  232. },
  233. // 删除单位消防站信息
  234. onClickDel(val) {
  235. this.id = val.id;
  236. console.log(this.id);
  237. delStation({
  238. id: this.id
  239. }).then(response => {
  240. this.loading = true;
  241. this.isLoaded = false
  242. this.tableData = []
  243. this.getData();
  244. console.log(this.tableData, '删除了');
  245. });
  246. },
  247. addClick() {
  248. this.isLoaded = false
  249. uni.navigateTo({
  250. url: `/pagesA/fire/fire_station/add_fireStation/add_fireStation?&orgName=${this.formData.orgName}&orgId=${this.formData.orgId}`
  251. });
  252. },
  253. //微型消防站运行
  254. onClickFireRun() {
  255. this.isLoaded = false
  256. uni.navigateTo({
  257. url: '/pagesA/fire/add_fireRun/fireRun'
  258. });
  259. },
  260. sexSelect(e) {
  261. this.formData.orgId = e.id;
  262. this.formData.orgName = e.name;
  263. // 获取消防站信息详细信息
  264. getStation({
  265. pageNo: this.pageNo,
  266. pageSize: this.pageSize,
  267. orgId: this.formData.orgId,
  268. userId: this.$store.state.user.id
  269. }).then(response => {
  270. this.tableData = response.data.list;
  271. });
  272. },
  273. // 隐藏键盘
  274. hideKeyboard() {
  275. uni.hideKeyboard();
  276. },
  277. //日期范围
  278. // 开始日期
  279. confirmStarttime(e) {
  280. this.showtimeStart = false;
  281. console.log(e.value, e.mode);
  282. let value = new Date(e.value);
  283. this.formData.start = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
  284. }
  285. },
  286. // 触底的事件
  287. onReachBottom() {
  288. console.log(this.loading, 'ssss');
  289. // 判断是否还有下一页数据
  290. if (this.pageNo * this.pageSize >= this.total)
  291. return uni.showToast({
  292. title: `数据加载完毕`
  293. });
  294. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  295. if (this.loading) return;
  296. this.pageNo += 1;
  297. this.getData(this.pageNo);
  298. }
  299. };
  300. </script>
  301. <style lang="scss" scoped>
  302. body {
  303. background-color: #f5f7f9;
  304. }
  305. page {
  306. background-color: #f5f7f9 !important;
  307. }
  308. /deep/ .u-tabs__wrapper[data-v-0de61367],
  309. /deep/.u-tabs__wrapper.data-v-0de61367,
  310. /deep/.u-tabs__wrapper {
  311. width: 99%;
  312. }
  313. /deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
  314. /deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
  315. /deep/.u-tabs__wrapper__nav__item {
  316. padding: 0 60rpx;
  317. }
  318. .uni-container {
  319. padding-right: 20upx;
  320. }
  321. .addInsp {
  322. width: 40px;
  323. position: fixed;
  324. right: 4px;
  325. z-index: 99999;
  326. }
  327. ::v-deep .u-icon__icon {
  328. margin-right: 0px !important;
  329. }
  330. .an-niu {
  331. float: right;
  332. text-align: center;
  333. display: flex;
  334. // margin-top: -64upx;
  335. padding-bottom: 30rpx;
  336. // margin-top: 50rpx;
  337. color: #fff;
  338. font-size: 30rpx;
  339. .detail {
  340. width: 120rpx;
  341. padding: 0 20rpx;
  342. height: 60rpx;
  343. border-radius: 60rpx;
  344. background-color: #f7c41e;
  345. margin-right: 20rpx;
  346. text-align: center;
  347. line-height: 60rpx;
  348. }
  349. .detailDel {
  350. width: 120rpx;
  351. height: 60rpx;
  352. padding: 0 20rpx;
  353. border-radius: 60rpx;
  354. background-color: #ff2e31;
  355. color: white;
  356. margin-right: 20rpx;
  357. text-align: center;
  358. line-height: 60rpx;
  359. }
  360. .operation {
  361. padding: 0 20rpx;
  362. }
  363. .solve,
  364. .operation {
  365. width: 124rpx;
  366. height: 60rpx;
  367. margin-right: 20rpx;
  368. border-radius: 60rpx;
  369. background-color: #4cb2b6;
  370. line-height: 60rpx;
  371. }
  372. /deep/ .padding-tb-sm {
  373. padding-top: 0px;
  374. padding-bottom: 10px;
  375. }
  376. .deletes {
  377. width: 124rpx;
  378. height: 60rpx;
  379. border-radius: 60rpx;
  380. background-color: red;
  381. color: #fff;
  382. line-height: 60rpx;
  383. }
  384. }
  385. /deep/.segmented-control__item--button {
  386. background-color: rgb(76, 178, 182) !important;
  387. }
  388. /deep/.segmented-control__item--button--active {
  389. background-color: #ffffff !important;
  390. }
  391. /deep/.uni-card {
  392. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  393. border-radius: 30rpx;
  394. }
  395. .tiantupian {
  396. width: 110rpx;
  397. height: 110rpx;
  398. position: fixed;
  399. right: 15px;
  400. bottom: 10rpx;
  401. }
  402. //列表样式
  403. .titles {
  404. font-weight: 600;
  405. margin-bottom: 10rpx;
  406. color: #1E293B;
  407. font-size: 30rpx;
  408. }
  409. .conts {
  410. max-width: 470rpx;
  411. display: -webkit-box;
  412. /*弹性伸缩盒子模型显示*/
  413. -webkit-box-orient: vertical;
  414. /*排列方式*/
  415. -webkit-line-clamp: 1;
  416. /*显示文本行数*/
  417. overflow: hidden;
  418. /*溢出隐藏*/
  419. color: #274647;
  420. text-overflow: ellipsis;
  421. /*不知道干嘛的*/
  422. .conts-title {
  423. margin-right: 10rpx;
  424. color: #728f90;
  425. }
  426. }
  427. .max-width {
  428. max-width: 180upx;
  429. }
  430. /deep/ .u-form-item__body__left__content__label {
  431. font-size: 28upx !important;
  432. }
  433. /deep/.u-action-sheet {
  434. overflow-y: auto;
  435. height: 1000rpx;
  436. background-color: #fff;
  437. }
  438. .example {
  439. overflow-y: auto;
  440. }
  441. </style>