Task.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <view class="content">
  3. <cu-custom bgColor="bg-blacks" :isBack="false">
  4. <block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block>
  5. <block slot="right">
  6. <view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
  7. <view class="cu-tag looknumber" style="margin-top: -2%;">
  8. <block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
  9. </view>
  10. </view>
  11. </block>
  12. <block slot="right"></block>
  13. <block slot="content">{{ address }}</block>
  14. <block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block>
  15. </cu-custom>
  16. <!-- 抽屉组件 -->
  17. <div><drawer ref="drawer"></drawer></div>
  18. <div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div>
  19. <!-- 任务组件 -->
  20. <view class="taskcard solid">
  21. <view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务一</view></view>
  22. <view class="taskcontent solids-bottom flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
  23. <view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
  24. </view>
  25. <view class="taskbutton align-center padding">
  26. <button class="cu-btn ">确认</button>
  27. <button class="cu-btn ">取消</button>
  28. </view>
  29. </view>
  30. <!-- 任务组件 -->
  31. <view class="taskcard solid">
  32. <view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务二</view></view>
  33. <view class="taskcontent solids-bottom flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
  34. <view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
  35. </view>
  36. <view class="taskbutton align-center padding">
  37. <button class="cu-btn ">确认</button>
  38. <button class="cu-btn ">取消</button>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import res from '../../common/data.json';
  45. import drawer from '../../components/drawer/threeLineDrawer.vue';
  46. import plusDrawer from '../../components/drawer/plusDrawer.vue';
  47. export default {
  48. components: {
  49. drawer: drawer,
  50. plusDrawer: plusDrawer
  51. },
  52. data: function() {
  53. return {
  54. taskName: '任务',
  55. badge: 22,
  56. inconList: ['form', 'favor', 'question', 'edit'],
  57. modalName: null,
  58. address: '宁夏新能源公司',
  59. drawerList: [
  60. {
  61. name: '首页'
  62. },
  63. {
  64. name: '状态监视'
  65. },
  66. {
  67. name: '矩阵监视'
  68. },
  69. {
  70. name: '风场监视'
  71. },
  72. {
  73. name: '人员监视'
  74. }
  75. ],
  76. plusDrawerList: [
  77. {
  78. name: '宁夏新能源公司',
  79. windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
  80. },
  81. {
  82. name: '牛首山风电场',
  83. windPowerStationId: 'NSS_FDC'
  84. },
  85. {
  86. name: '香山风电场',
  87. windPowerStationId: 'XS_FDC'
  88. },
  89. {
  90. name: '石板泉风电场',
  91. windPowerStationId: 'SBQ_FDC'
  92. },
  93. {
  94. name: '青山风电场',
  95. windPowerStationId: 'QS_FDC'
  96. },
  97. {
  98. name: '麻黄山风电场',
  99. windPowerStationId: 'MHS_FDC'
  100. }
  101. ]
  102. };
  103. },
  104. onHide() {
  105. this.$refs.drawer.closeDrawer();
  106. this.hideModal();
  107. },
  108. onShow() {
  109. this.windPowerStationId = uni.getStorageSync('windPowerStationId');
  110. this.address = this.getWindPowerStationNameToSessionStorage();
  111. },
  112. methods: {
  113. openDrawer: function() {
  114. this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
  115. },
  116. closeDrawer: function() {
  117. this.drawerIsShow = false;
  118. },
  119. pushWindPowerStationNameToSessionStorage(windpowerstationName) {
  120. uni.setStorageSync('windpowerstationName', windpowerstationName);
  121. //sessionStorage.setItem('windpowerstationName', windpowerstationName);
  122. //alert("v"+ sessionStorage.getItem("windpowerstationName"));
  123. //this.common.goback('/pages/index/Index');
  124. },
  125. getWindPowerStationNameToSessionStorage() {
  126. uni.getStorageSync('windpowerstationName');
  127. return uni.getStorageSync('windpowerstationName');
  128. },
  129. openDrawer: function() {
  130. this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
  131. },
  132. showModal(e) {
  133. this.modalName = e.currentTarget.dataset.target;
  134. this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
  135. },
  136. hideModal() {
  137. this.modalName = null;
  138. this.$refs.plusDrawer.hideModal(this.modalName);
  139. }
  140. }
  141. };
  142. </script>
  143. <style>
  144. body {
  145. font-family: '方正兰亭细黑_GBK';
  146. font-size: 20px;
  147. color: silver;
  148. background: #fff;
  149. }
  150. @font-face {
  151. font-family: '方正兰亭细黑_GBK';
  152. src: url(../../static/fzltxh.TTF);
  153. }
  154. page {
  155. background-color: #1f1f1f;
  156. font-family: '方正兰亭细黑_GBK';
  157. overflow-x: hidden;
  158. }
  159. .top {
  160. width: 100%;
  161. height: 130upx;
  162. padding-top: 5upx;
  163. background-color: #1f1f1f;
  164. position: fixed;
  165. top: 0px;
  166. left: 0px;
  167. z-index: 100;
  168. }
  169. .threeLine {
  170. width: 50px;
  171. height: 45px;
  172. float: left;
  173. }
  174. .text {
  175. width: calc(100% - 100px);
  176. height: 45px;
  177. float: left;
  178. user-select: text;
  179. -webkit-user-select: text;
  180. -moz-user-select: text;
  181. -ms-user-select: text;
  182. color: silver;
  183. line-height: 45px;
  184. margin-top: 11px;
  185. font-size: 18px;
  186. }
  187. .notice {
  188. width: 50px;
  189. height: 45px;
  190. float: left;
  191. }
  192. .plus {
  193. width: 30px;
  194. height: 45px;
  195. float: right;
  196. color: white;
  197. font-size: 35px;
  198. line-height: 45px;
  199. text-align: right;
  200. margin-right: 2.5%;
  201. }
  202. .textWindpowerstation {
  203. width: 180px;
  204. height: 45px;
  205. float: left;
  206. text-align: center;
  207. margin-left: 18px;
  208. }
  209. .taskcard {
  210. margin-left: 10%;
  211. width: 80%;
  212. height: 200px;
  213. margin-top: 3%;
  214. border:2px solid white;
  215. }
  216. .tasktab {
  217. height: 30px;
  218. width: 100%;
  219. margin-left: 3%;
  220. margin-top: 3%;
  221. }
  222. .taskcontent {
  223. height: 100px;
  224. }
  225. .taskbutton {
  226. width: 100%;
  227. height: 50px;
  228. }
  229. .cu-tag {
  230. float: left;
  231. }
  232. .solids-bottom::after {
  233. border-bottom: 0px solid #eee;
  234. }
  235. .cu-btn {
  236. float: right;
  237. margin-left: 3px;
  238. }
  239. </style>