life_water.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <template>
  2. <view>
  3. <view v-for="(item,index) in data.cabinet" :key="index">
  4. <view class="title">
  5. <view class="icon">
  6. <image src="../icon/canshu.png" mode=""></image>
  7. </view>
  8. <view class="text">{{item.title}}</view>
  9. </view>
  10. <!-- 水泵 -->
  11. <view class="pump_list">
  12. <view class="pump" v-for="(item_2,index_2) in item.data" :key="index_2">
  13. <view class="icon" v-if="item_2.state == 1">
  14. <image src="../icon/water_pump_kai.jpg" mode=""></image>
  15. </view>
  16. <view class="icon" v-else>
  17. <image src="../icon/water_pump.png" mode=""></image>
  18. </view>
  19. <view class="name">{{item_2.name}}</view>
  20. <view class="state">
  21. <view class="label">状态</view>
  22. <!-- 1-开 2-关 -->
  23. <view class="value value_1" v-if="item_2.state == 1"></view>
  24. <view class="value value_2" v-else></view>
  25. </view>
  26. <view class="list">
  27. <view class="state" v-for="(item_3,index_3) in item_2.state_list" :key="index_3">
  28. <view class="label">{{item_3.name}}</view>
  29. <!-- 1-开 2-关 -->
  30. <view class="value value_1" v-if="item_3.state == 1"></view>
  31. <view class="value value_2" v-else></view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 状态 -->
  38. <view class="state_list" v-if="data.state_list">
  39. <view class="title">
  40. <view class="icon">
  41. <image src="../icon/canshu.png" mode=""></image>
  42. </view>
  43. <view class="text">状态</view>
  44. </view>
  45. <view class="list">
  46. <view class="state" v-for="(item,index) in data.state_list" :key="index">
  47. <view class="label">{{item.label}}</view>
  48. <!-- 1-开 2-关 -->
  49. <view class="value value_1" v-if="item.state == 1"></view>
  50. <view class="value value_2" v-if="item.state == 2"></view>
  51. </view>
  52. </view>
  53. </view>
  54. <!-- 控制参数 -->
  55. <view class="parameter" v-if="data.parameter">
  56. <view class="title">
  57. <view class="icon">
  58. <image src="../icon/canshu.png" mode=""></image>
  59. </view>
  60. <view class="text">控制参数</view>
  61. </view>
  62. <view class="list">
  63. <view class="item" v-for="(item_2,index_2) in data.parameter" :key="index_2"
  64. @click="show_state(item_2)">
  65. <view class="label">{{item_2.label}}</view>
  66. <view class="value">{{item_2.state}}</view>
  67. <view class="unit">{{item_2.unit}}</view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. </template>
  73. <script>
  74. import data from "./life_water.json"
  75. export default {
  76. data() {
  77. return {
  78. mine_code: "",
  79. system_type: "",
  80. // 数据刷新定时器
  81. data_timer: {},
  82. data: null
  83. };
  84. },
  85. onLoad(option) {
  86. this.data = data
  87. console.log(this.data)
  88. uni.setNavigationBarTitle({
  89. title: option.name
  90. })
  91. this.mine_code = option.mine_code
  92. this.system_type = option.system_type
  93. // this.get_data()
  94. // this.data_timer = setInterval(() => {
  95. // this.get_data()
  96. // }, 5000)
  97. },
  98. methods: {
  99. show_item(item) {
  100. uni.showToast({
  101. icon: "none",
  102. title: item.label + " " + item.value + " " + item.unit
  103. })
  104. },
  105. get_data() {
  106. this.$api.unified_automation_system({
  107. mine_code: 'renjiazhuang',
  108. system_type: this.system_type
  109. }).then((res) => {
  110. console.log(res)
  111. this.data = res.data
  112. })
  113. }
  114. }
  115. }
  116. </script>
  117. <style lang="scss">
  118. page {
  119. background-color: #0B163B;
  120. box-sizing: border-box;
  121. padding: 30rpx 10rpx;
  122. }
  123. .title {
  124. margin: 0 auto;
  125. margin-bottom: 50rpx;
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. width: 290rpx;
  130. height: 60rpx;
  131. background-image: url(../icon/border.png);
  132. background-size: 100% 100%;
  133. background-repeat: no-repeat;
  134. .icon {
  135. margin-right: 10rpx;
  136. image {
  137. width: 30rpx;
  138. height: 30rpx;
  139. }
  140. }
  141. .text {
  142. color: #00FFF6;
  143. font-size: 30rpx;
  144. }
  145. }
  146. .pump_list {
  147. margin-top: 20rpx;
  148. display: flex;
  149. flex-wrap: wrap;
  150. justify-content: space-between;
  151. .pump {
  152. margin-bottom: 40rpx;
  153. width: 360rpx;
  154. .icon {
  155. text-align: center;
  156. image {
  157. width: 164rpx;
  158. height: 138rpx;
  159. }
  160. }
  161. .name {
  162. margin-top: 20rpx;
  163. text-align: center;
  164. color: #DEF1FF;
  165. font-size: 34rpx;
  166. font-weight: 700;
  167. }
  168. .state {
  169. margin-top: 10rpx;
  170. height: 60rpx;
  171. display: flex;
  172. align-items: center;
  173. justify-content: center;
  174. .label {
  175. color: #4CB1FF;
  176. font-size: 28rpx;
  177. }
  178. .value {
  179. margin-left: 20rpx;
  180. width: 40rpx;
  181. height: 40rpx;
  182. border-radius: 50%;
  183. }
  184. .value_1 {
  185. background-color: #00FF00;
  186. }
  187. .value_2 {
  188. background-color: #DCDCDC;
  189. }
  190. }
  191. .list{
  192. overflow: hidden;
  193. .state{
  194. box-sizing: border-box;
  195. float: left;
  196. width: 350rpx;
  197. height: 70rpx;
  198. display: flex;
  199. align-items: center;
  200. .label {
  201. width: 160rpx;
  202. color: #4CB1FF;
  203. font-size: 28rpx;
  204. text-overflow: ellipsis;
  205. white-space: nowrap;
  206. overflow: hidden;
  207. }
  208. .value {
  209. margin-left: 20rpx;
  210. width: 40rpx;
  211. height: 40rpx;
  212. border-radius: 50%;
  213. }
  214. .value_1 {
  215. background-color: #00FF00;
  216. }
  217. .value_2 {
  218. background-color: #DCDCDC;
  219. }
  220. }
  221. }
  222. }
  223. .pump:nth-child(Odd) {
  224. border-right: 2rpx solid;
  225. border-image: linear-gradient(#0B163B, #00B7F5, #0B163B) 10;
  226. }
  227. }
  228. .state_list{
  229. margin-top: 40rpx;
  230. .title {
  231. margin: 20rpx auto;
  232. display: flex;
  233. justify-content: center;
  234. align-items: center;
  235. width: 230rpx;
  236. height: 60rpx;
  237. background-image: url(../icon/border.png);
  238. background-size: 100% 100%;
  239. background-repeat: no-repeat;
  240. .icon {
  241. margin-right: 20rpx;
  242. image {
  243. width: 30rpx;
  244. height: 30rpx;
  245. }
  246. }
  247. .text {
  248. color: #00FFF6;
  249. font-size: 30rpx;
  250. }
  251. }
  252. .list{
  253. margin: 0 auto;
  254. width: 700rpx;
  255. overflow: hidden;
  256. display: flex;
  257. flex-wrap: wrap;
  258. justify-content: space-between;
  259. .state{
  260. box-sizing: border-box;
  261. width: 350rpx;
  262. height: 70rpx;
  263. display: flex;
  264. align-items: center;
  265. .label {
  266. width: 240rpx;
  267. color: #4CB1FF;
  268. font-size: 28rpx;
  269. text-align: justify;
  270. text-align-last: justify;
  271. text-overflow: ellipsis;
  272. white-space: nowrap;
  273. overflow: hidden;
  274. }
  275. .value {
  276. margin-left: 20rpx;
  277. width: 40rpx;
  278. height: 40rpx;
  279. border-radius: 50%;
  280. }
  281. .value_1 {
  282. background-color: #00FF00;
  283. }
  284. .value_2 {
  285. background-color: #DCDCDC;
  286. }
  287. }
  288. }
  289. }
  290. .parameter {
  291. box-sizing: border-box;
  292. margin-top: 40rpx;
  293. .title {
  294. margin: 0 auto;
  295. display: flex;
  296. justify-content: center;
  297. align-items: center;
  298. width: 230rpx;
  299. height: 60rpx;
  300. background-image: url(../icon/border.png);
  301. background-size: 100% 100%;
  302. background-repeat: no-repeat;
  303. .icon {
  304. margin-right: 20rpx;
  305. image {
  306. width: 30rpx;
  307. height: 30rpx;
  308. }
  309. }
  310. .text {
  311. color: #00FFF6;
  312. font-size: 30rpx;
  313. }
  314. }
  315. .list {
  316. margin-left: 20rpx;
  317. margin-top: 40rpx;
  318. .item {
  319. height: 60rpx;
  320. display: flex;
  321. color: #4CB1FF;
  322. font-size: 28rpx;
  323. .label {
  324. width: 200rpx;
  325. text-overflow: ellipsis;
  326. white-space: nowrap;
  327. overflow: hidden;
  328. }
  329. .value {
  330. margin: 0 20rpx;
  331. width: 200rpx;
  332. height: 40rpx;
  333. box-sizing: border-box;
  334. padding: 0 10rpx;
  335. background: rgba(0, 4, 15, 0.36);
  336. border: 2rpx solid #3D55A5;
  337. color: #FFF600;
  338. font-size: 24rpx;
  339. text-overflow: ellipsis;
  340. white-space: nowrap;
  341. overflow: hidden;
  342. }
  343. .unit {
  344. width: 100rpx;
  345. }
  346. }
  347. }
  348. }
  349. </style>