index.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <view>
  3. <image :src="worktop" style="height: 340rpx;width: 90%;margin-left: 40rpx;"></image>
  4. <!-- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
  5. activeColor="#4cd964"></uni-segmented-control>
  6. <view v-if="current === 0"> -->
  7. <view class="grid-body">
  8. <uni-card :border="false">
  9. <uni-section title="事件中心" type="line" titleFontSize='18px'>
  10. <uni-grid :column="3" :showBorder="false" @change="changeGrid">
  11. <uni-grid-item v-for="(item, index) in urlList1" :key="index">
  12. <view class="example-body">
  13. <view class="grid-item-box" @click="handleToInfo(item.menuUrl,item.menuName)">
  14. <image :src="urlIconTran(item.menuIcon)" class="tubiao"></image>
  15. <text class="text">{{ item.menuName }}</text>
  16. <u-badge v-if="item.menuName == '指令'&&unread != 0" :value="unread" type="error"
  17. class="huibiao"></u-badge>
  18. </view>
  19. </view>
  20. </uni-grid-item>
  21. </uni-grid>
  22. </uni-section>
  23. <uni-section title="管理中心" type="line" titleFontSize='18px'>
  24. <uni-grid :column="3" :showBorder="false" @change="changeGrid">
  25. <uni-grid-item v-for="(item, index1) in urlList" :key="index1">
  26. <view class="example-body">
  27. <view class="grid-item-box" @click="handleToInfo(item.menuUrl,item.menuName)">
  28. <image :src="urlIconTran(item.menuIcon)" class="tubiao"></image>
  29. <text class="text">{{ item.menuName }}</text>
  30. <u-badge v-if="item.menuName == '指令'&&unread != 0" :value="unread" type="error"
  31. class="huibiao"></u-badge>
  32. </view>
  33. </view>
  34. </uni-grid-item>
  35. </uni-grid>
  36. </uni-section>
  37. <uni-section title="乡镇消防工作档案" type="line" titleFontSize='18px'
  38. v-if="urlList2.length&&urlList2.length>0">
  39. <uni-grid :column="3" :showBorder="false" @change="changeGrid">
  40. <uni-grid-item v-for="(item, index) in urlList2" :key="index">
  41. <view class="example-body">
  42. <view class="grid-item-box" @click="handleToInfo(item.menuUrl,item.menuName)">
  43. <image :src="urlIconTran(item.menuIcon)" class="tubiao"></image>
  44. <text class="text">{{ item.menuName }}</text>
  45. <u-badge v-if="item.menuName == '指令'&&unread != 0" :value="unread" type="error"
  46. class="huibiao"></u-badge>
  47. </view>
  48. </view>
  49. </uni-grid-item>
  50. </uni-grid>
  51. </uni-section>
  52. </uni-card>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import storage from '@/utils/storage';
  58. import {
  59. getNoticeList, // 通知公告列表
  60. getNoticeReadData //指令未读的数量
  61. } from '@/api/notice';
  62. import {
  63. getMenusByUser
  64. } from '@/api/login';
  65. import config from '@/config'
  66. const baseUrlImg = config.baseUrlImg
  67. export default {
  68. data() {
  69. return {
  70. urls: baseUrlImg,
  71. roles: this.$store.state.user.roles,
  72. current: 0,
  73. swiperDotIndex: 0,
  74. worktop: `${baseUrlImg}/working/worktop.png`, //图片
  75. zhudongjiancha: `${baseUrlImg}/working/zhudongjiancha.png`,
  76. yinhuanguanli: `${baseUrlImg}/working/yinhuanguanli.png`,
  77. user_business: `${baseUrlImg}/working/user_business.png`,
  78. tabler_clock_edit: `${baseUrlImg}/working/tabler_clock_edit.png`,
  79. tabler_chart_histogram: `${baseUrlImg}/working/tabler_chart_histogram.png`,
  80. outline_trumpet: `${baseUrlImg}/working/outline_trumpet.png`,
  81. outline_permissions: `${baseUrlImg}/working/outline_permissions.png`,
  82. meirixuncha: `${baseUrlImg}/working/big1.png`,
  83. fire_extinguishe: `${baseUrlImg}/working/weixingxiaofang.png`,
  84. unit_info: `${baseUrlImg}/working/danweixinxi.png`,
  85. zhilin: `${baseUrlImg}/working/zhilin.png`,
  86. unit_arc: `${baseUrlImg}/working/danweijianzhu.png`,
  87. xiaofangsheshi: `${baseUrlImg}/working/xiaofangsheshi.png`,
  88. renyuan: `${baseUrlImg}/working/renyuan.png`,
  89. drill: `${baseUrlImg}/working/drill.png`,
  90. archive: `${baseUrlImg}/working/gongzuodangan.png`,
  91. items: ['事件中心', '管理中心'],
  92. current: 0,
  93. urlList: [],
  94. urlList1: [],
  95. unread: 0, //未读数量
  96. urlList2: []
  97. };
  98. },
  99. onLoad() {
  100. },
  101. onShow() {
  102. this.urlList = []
  103. this.urlList1 = []
  104. this.urlList2 = []
  105. this.getData()
  106. this.getMenu();
  107. },
  108. methods: {
  109. getData() {
  110. getNoticeReadData({
  111. userId: this.$store.state.user.id
  112. }).then(response => {
  113. this.unread = response.data
  114. console.log(this.unread, 'this.unread');
  115. })
  116. },
  117. getMenu() {
  118. console.log('this.$store.state.user.id: ', this.$store.state.user.id);
  119. getMenusByUser({
  120. id: this.$store.state.user.id
  121. }).then(response => {
  122. console.log(response.data, 'dddd');
  123. response.data.map(i => {
  124. if (i.menuSort.toString().startsWith("1")) {
  125. this.urlList1.push(i);
  126. this.urlList1 = this.urlList1.sort((a, b) => a.menuSort - b.menuSort);
  127. } else if (i.menuSort.toString().startsWith("2")) {
  128. this.urlList.push(i);
  129. this.urlList = this.urlList.sort((a, b) => a.menuSort - b.menuSort);
  130. } else if (i.menuSort.toString().startsWith("3")) {
  131. this.urlList2.push(i);
  132. this.urlList2 = this.urlList2.sort((a, b) => a.menuSort - b.menuSort);
  133. }
  134. });
  135. console.log(this.urlList2, 'asdbj', this.urlList);
  136. });
  137. },
  138. urlIconTran(val) {
  139. if (val == 'outline_permissions') {
  140. return this.outline_permissions;
  141. } else if (val == 'meirixuncha') {
  142. return this.meirixuncha;
  143. } else if (val == 'zhudongjiancha') {
  144. return this.zhudongjiancha;
  145. } else if (val == 'check_inspection') {
  146. return this.zhudongjiancha;
  147. } else if (val == 'yinhuanfucha') {
  148. return this.yinhuanguanli
  149. } else if (val == 'tabler_clock_edit') {
  150. return this.tabler_clock_edit;
  151. } else if (val == 'outline_trumpet') {
  152. return this.outline_trumpet;
  153. } else if (val == 'outline_trumpet') {
  154. return this.outline_trumpet;
  155. } else if (val == 'yinhuanguanli') {
  156. return this.yinhuanguanli;
  157. } else if (val == 'user_business') {
  158. return this.user_business;
  159. } else if (val == 'fire_extinguishe') {
  160. return this.fire_extinguishe;
  161. } else if (val == 'unit_info') {
  162. return this.unit_info;
  163. } else if (val == 'unit_arc') {
  164. return this.unit_arc;
  165. } else if (val == 'drill') {
  166. return this.drill;
  167. } else if (val == 'xiaofangsheshi') {
  168. return this.xiaofangsheshi;
  169. } else if (val == 'archive') {
  170. return this.archive;
  171. } else if (val == 'renyuan') {
  172. return this.renyuan;
  173. } else if (val == 'tabler_chart_histogram') {
  174. return this.tabler_chart_histogram;
  175. } else if (val == 'zhilin') {
  176. return this.zhilin;
  177. } else if (val == 'zlgztzs_icon') {
  178. return this.renyuan
  179. } else if (val == 'fire_inspetItem') {
  180. return this.archive;
  181. } else if (val == 'fireWork') {
  182. return this.archive;
  183. } else if (val == 'fireSpecial') {
  184. return this.archive;
  185. }
  186. },
  187. // 顶部个人信息跳转
  188. onClick() {
  189. uni.switchTab({
  190. url: '/pages/mine/index'
  191. });
  192. },
  193. changeGrid(e) {},
  194. // 根据不同的url,进行页面的跳转
  195. handleToInfo(url, name) {
  196. this.$tab.navigateTo(url);
  197. console.log(this.$store, this.$store.state.user, this.$store.getters, 'sdddddddddddd', url);
  198. },
  199. // 分段器点击 事件中心、管理中心转换
  200. onClickItem(e) {
  201. if (this.current != e.currentIndex) {
  202. this.current = e.currentIndex;
  203. }
  204. }
  205. }
  206. };
  207. </script>
  208. <style lang="scss" scoped>
  209. /* #ifndef APP-NVUE */
  210. page {
  211. display: flex;
  212. flex-direction: column;
  213. box-sizing: border-box;
  214. min-height: 100%;
  215. height: auto;
  216. }
  217. .tubiao {
  218. width: 142upx;
  219. height: 142upx;
  220. }
  221. view {
  222. font-size: 14px;
  223. line-height: inherit;
  224. }
  225. .tabIcon {
  226. color: white;
  227. }
  228. /* #endif */
  229. .text {
  230. text-align: center;
  231. color: #000;
  232. font-size: 26rpx;
  233. margin-top: -18upx;
  234. // margin-top: 10rpx;
  235. }
  236. .grid-item-box {
  237. position: relative;
  238. flex: 1;
  239. /* #ifndef APP-NVUE */
  240. display: flex;
  241. /* #endif */
  242. flex-direction: column;
  243. align-items: center;
  244. justify-content: center;
  245. padding: 15px 0;
  246. }
  247. // 按钮样式
  248. button {
  249. width: 132rpx;
  250. height: 52rpx;
  251. border-radius: 50rpx;
  252. background-color: #f7d1dc;
  253. border-color: #d51a52;
  254. color: #d51a52;
  255. font-size: 25rpx;
  256. border: 3rpx solid;
  257. font-weight: bold;
  258. padding: 0;
  259. margin-left: 70rpx;
  260. }
  261. ::v-deep .u-navbar__content {
  262. // background-color: #4cb2b6 !important;
  263. }
  264. .container {
  265. height: 140vh;
  266. // height: 100vh;
  267. background-color: #fff;
  268. }
  269. // 修改分段器默认样式
  270. ::v-deep .segmented-control {
  271. border-bottom: 1px solid #e5e5e5;
  272. }
  273. ::v-deep .segmented-control__text {
  274. color: #4cb2b6 !important;
  275. }
  276. ::v-deep .segmented-control__text span {
  277. color: #3d3d3d !important;
  278. }
  279. ::v-deep .segmented-control__item--text {
  280. padding: 8px 0;
  281. }
  282. //徽标
  283. // /deep/.u-page__tag-item {
  284. // margin-right: 40px;
  285. // margin-top: 0 !important;
  286. // }
  287. /deep/.u-badge[data-v-662d25bf] {}
  288. .huibiao,
  289. /deep/.u-badge--error.data-v-662d25bf,
  290. /deep/.u-badge--error {
  291. position: absolute;
  292. right: 56rpx;
  293. top: 46rpx;
  294. }
  295. </style>