equipmentlist.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <!-- 机器状态页面 -->
  2. <template>
  3. <!-- <view v-if="merchantList.length>1">
  4. <uni-collapse :accordion="true">
  5. <view class="titleFlag">
  6. <image class="img" src="../../static/img/red.png"></image>
  7. <font class="wenziT">红色代表机器报警</font>
  8. <image class="img" src="../../static/img/green.png"></image>
  9. <font class="wenziT">绿色代表机器正常</font>
  10. </view>
  11. <view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id">
  12. <uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
  13. <view style="padding: 20upx;background-color: aliceblue;">
  14. <view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
  15. <view v-if="merchant.equipmentList.length>0">
  16. <uni-collapse :show-animation="true">
  17. <view style="position: relative;" v-for="equipment in merchant.equipmentList" :key="equipment.id">
  18. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  19. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  20. <view style="padding: 20upx;background-color: antiquewhite;">
  21. <view class="swithBox" v-if="equipment.isSleep">
  22. <view class="swichFont">睡眠状态:机器已睡眠</view>
  23. <view class="switch">
  24. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  25. </view>
  26. </view>
  27. <view class="swithBox" v-else>
  28. <view class="swichFont">睡眠状态:未睡眠</view>
  29. <view class="switch">
  30. <switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
  31. </view>
  32. </view>
  33. <view class="line1"></view>
  34. <view class="swithBox" v-if="equipment.eqeStatus==0">
  35. <view class="swichFont">关机:已关机</view>
  36. <view class="switch">
  37. <switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
  38. </view>
  39. </view>
  40. <view class="swithBox" v-else>
  41. <view class="swichFont">关机:未关机</view>
  42. <view class="switch">
  43. <switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
  44. </view>
  45. </view>
  46. <view class="line1"></view>
  47. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  48. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  49. <view><span>炉头温度:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
  50. <view><span>柜内湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  51. <view><span>柜内温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  52. <view v-if="equipment.hasTodayAlarm">
  53. <view><span>报警内容:</span></view>
  54. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  55. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}
  56. <button v-if="alarm.isEliminate==1" style="color:#BEBEBE;" @click="eliminate(alarm.id)" class="eliminateButton">
  57. <p class="p">已消除</p>
  58. </button>
  59. <button v-if="alarm.isEliminate!=1" type="primary" @click="eliminate(alarm.id)" class="eliminateButton">
  60. <p class="p">消除</p>
  61. </button>
  62. </span></view>
  63. </view>
  64. </view>
  65. <view v-else>
  66. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
  67. {{equipment.alarmContent}}</span></view>
  68. </view>
  69. </view>
  70. </uni-collapse-item>
  71. </view>
  72. </uni-collapse>
  73. </view>
  74. </view>
  75. </uni-collapse-item>
  76. </view>
  77. </uni-collapse>
  78. </view> -->
  79. <view >
  80. <uni-collapse :show-animation="true">
  81. <view class="titleFlag">
  82. <image class="img" src="../../../static/img/red.png"></image>
  83. <font class="wenziT">{{$t('equipmentStatusList.red')}}</font>
  84. <image class="img" src="../../../static/img/green.png"></image>
  85. <font class="wenziT">{{$t('equipmentStatusList.green')}}</font>
  86. </view>
  87. <view class="titlelist" style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
  88. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  89. <uni-collapse-item :title="getEquipmentTitle(equipment)" :open="true">
  90. <!-- 睡眠 -->
  91. <view style="padding: 20upx;background-color: antiquewhite;">
  92. <view><span>{{$t('equipmentStatusList.equipmentNo')}}:</span><span>{{equipment.clientId}}</span></view>
  93. <!-- <view><span>{{$t('equipmentStatusList.area')}}:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view> -->
  94. <view><span>{{$t('equipmentStatusList.temperature')}}:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
  95. <view><span>{{$t('equipmentStatusList.humidity')}}:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  96. <view><span>{{$t('equipmentStatusList.equipmentTemperature')}}:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  97. <!-- 物料 -->
  98. <!-- <view>
  99. <span>{{$t('equipmentStatusList.whiteSugar')}}:</span><span>{{equipment.whiteSugar?equipment.whiteSugar:''}}% -- </span>
  100. <span>{{$t('equipmentStatusList.redSugar')}}:</span><span>{{equipment.redSugar?equipment.redSugar:''}}% -- </span>
  101. <span>{{$t('equipmentStatusList.yellowSugar')}}:</span><span>{{equipment.yellowSugar?equipment.yellowSugar:''}}% -- </span>
  102. <span>{{$t('equipmentStatusList.blueSugar')}}:</span><span>{{equipment.blueSugar?equipment.blueSugar:''}}% </span>
  103. </view>
  104. <view><span>{{$t('equipmentStatusList.stick')}}:</span><span>{{equipment.stick?equipment.stick:''}}% </span></view>
  105. <view>
  106. <span>{{$t('equipmentStatusList.water')}}:</span><span>{{equipment.water?equipment.water:''}}% -- </span>
  107. <span>{{$t('equipmentStatusList.wasteWater')}}:</span><span>{{equipment.wasteWater?equipment.wasteWater:''}}%</span>
  108. </view> -->
  109. <view><span>{{$t('equipmentStatusList.refreshTime')}}:</span><span>{{equipment.lastUpdateTime}}</span></view>
  110. <!-- <view><span>{{$t('equipmentStatusList.volume')}}:</span><span>{{equipment.volume?equipment.volume:''}}</span></view> -->
  111. <view class="" v-if="equipment.hasTodayAlarm">
  112. <view><span>{{$t('equipmentStatusList.alarm')}}:</span></view>
  113. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  114. <view>
  115. <span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}
  116. <button v-if="alarm.isEliminate==1" style="color:#BEBEBE;" @click="eliminate(alarm.id)" class="eliminateButton">
  117. <p class="p">{{$t('equipmentStatusList.yixiaochu')}}</p>
  118. </button>
  119. <button v-if="alarm.isEliminate!=1" type="primary" @click="eliminate(alarm.id)" class="eliminateButton">
  120. <p class="p">{{$t('equipmentStatusList.xiaochu')}}</p>
  121. </button>
  122. </span>
  123. </view>
  124. </view>
  125. </view>
  126. <view class="" v-else>
  127. <view><span>{{$t('equipmentStatusList.alarm')}}:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
  128. {{equipment.alarmContent}}</span></view>
  129. </view>
  130. </view>
  131. </uni-collapse-item>
  132. </view>
  133. </uni-collapse>
  134. </view>
  135. </template>
  136. <script>
  137. import {
  138. mapState,
  139. mapActions,
  140. mapMutations
  141. } from 'vuex'
  142. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
  143. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
  144. import uniList from '@/components/uni-list/uni-list.vue'
  145. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  146. import {
  147. dateUtils
  148. } from '@/common/util.js';
  149. export default {
  150. components: {
  151. uniCollapse,
  152. uniCollapseItem,
  153. uniList,
  154. uniListItem,
  155. },
  156. data() {
  157. return {
  158. globalUser: {},
  159. merchantList: [{
  160. equipmentList: []
  161. }],
  162. extraIcon: {
  163. color: '#4cd964',
  164. size: '22',
  165. type: 'spinner'
  166. },
  167. statusNormal: 'status-normal',
  168. statusError: 'status-error',
  169. sleepChecked: null,
  170. onffChecked: null,
  171. time: null,
  172. timeAll: {
  173. },
  174. input: 0,
  175. }
  176. },
  177. computed: {
  178. ...mapState(['loginUser']),
  179. },
  180. onPullDownRefresh() {
  181. this.getEquipmentListData();
  182. },
  183. onShow() {
  184. // this.input = this.input + 1;
  185. this.globalUser = uni.getStorageSync("globalUser");
  186. // uni.setNavigationBarTitle({
  187. // title: this.$t('equipmentStatusList.title')
  188. // });
  189. // uni.setTabBarItem({
  190. // index: 3,
  191. // text: this.$t('tabs.tab4')
  192. // });
  193. var token = uni.getStorageSync("token");
  194. if (token.length > 1) {
  195. this.getEquipmentListData();
  196. } else {
  197. uni.reLaunch({
  198. url: '../Login/Login',
  199. });
  200. }
  201. },
  202. methods: {
  203. ...mapActions('chart', ['getEquipmentListByUser']),
  204. getMerchantTitle(merchant) {
  205. return merchant.name ? merchant.name : merchant.username;
  206. },
  207. getEquipmentTitle(equipment) {
  208. return equipment.name ? equipment.name : '暂无名称';
  209. },
  210. getEquipmentListData() {
  211. this.getEquipmentListByUser(this.globalUser)
  212. .then(data => {
  213. this.merchantList = data;
  214. var listName = data[0].equipmentList;
  215. var times = new Map;
  216. if (this.input == 1) {
  217. for (var i = 0; i < listName.length; i++) {
  218. var k = listName[i].id;
  219. times.set(k, null);
  220. }
  221. this.timeAll = times;
  222. }
  223. var listId = data[0].id;
  224. if (listId != null && listId != '1') {
  225. uni.setStorageSync("listName", listName);
  226. }
  227. uni.stopPullDownRefresh();
  228. }, _ => void uni.stopPullDownRefresh());
  229. },
  230. eliminate(id) {
  231. var token = uni.getStorageSync("token");
  232. uni.request({
  233. url: this.serverurl + '/TEquipment/eliminate',
  234. data: {
  235. "id": id
  236. },
  237. method: "POST",
  238. header: {
  239. 'token': token
  240. },
  241. success: (res) => {
  242. uni.showToast({
  243. title: "发送成功",
  244. icon: 'none',
  245. duration: 1000
  246. });
  247. this.getEquipmentListData();
  248. }
  249. });
  250. },
  251. }
  252. }
  253. </script>
  254. <style>
  255. .status-css {
  256. position: absolute;
  257. width: 30upx;
  258. height: 30upx;
  259. right: 86upx;
  260. top: 30upx;
  261. border-radius: 30upx;
  262. color: "#596D83";
  263. font-size: 12upx;
  264. }
  265. .status-error {
  266. background-color: #dd524d
  267. }
  268. .status-normal {
  269. background-color: #4cd964
  270. }
  271. .baojing {
  272. display: flex;
  273. flex-direction: row;
  274. padding-left: 20upx;
  275. }
  276. .titleFlag {
  277. height: 56upx;
  278. background-color: #F8F8F8;
  279. color: #8C959F;
  280. font-size: 22upx;
  281. display: flex;
  282. flex-direction: row;
  283. }
  284. .opendoor {
  285. /* #ifdef H5 */
  286. /* #endif */
  287. padding-top: 10upx;
  288. padding-bottom: 10upx;
  289. /* text-align: center; */
  290. display: flex;
  291. flex-direction: row;
  292. }
  293. .button {
  294. /* #ifdef H5 */
  295. text-align: center;
  296. height: 50upx;
  297. weight: 20upx;
  298. /* #endif */
  299. padding-left: 15upx;
  300. /* padding-top: 2upx; */
  301. }
  302. .eliminateButton {
  303. /* #ifdef H5 */
  304. text-align: center;
  305. height: 50upx;
  306. weight: 20upx;
  307. /* #endif */
  308. padding-left: 15upx;
  309. /* padding-top: 2upx; */
  310. }
  311. .p {
  312. /* #ifdef H5 */
  313. font-size: 28upx;
  314. height: 50upx;
  315. weight: 20upx;
  316. transform: translateY(-14upx);
  317. /* text-align: center; */
  318. /* #endif */
  319. /* padding-bottom: 50upx; */
  320. text-align: center;
  321. padding-left: 13upx;
  322. }
  323. .img {
  324. padding-top: 20upx;
  325. padding-left: 30upx;
  326. width: 15upx;
  327. height: 15upx;
  328. }
  329. .wenziT {
  330. padding-top: 10upx;
  331. padding-left: 10upx;
  332. }
  333. .titlelist {
  334. color: #363D44;
  335. font-size: 16upx;
  336. font-family: "PingFang-SC-Medium";
  337. }
  338. .swithBox {
  339. display: flex;
  340. flex-direction: row;
  341. padding-bottom: 15upx;
  342. padding-top: 5upx;
  343. }
  344. .switch {
  345. width: 100upx;
  346. height: 22upx;
  347. }
  348. .switch1 {
  349. display: flex;
  350. flex-direction: row;
  351. width: 35%;
  352. height: 42upx;
  353. padding-top: 13upx;
  354. padding-left: 72upx;
  355. }
  356. .swichFont {
  357. width: 85%;
  358. padding-top: 12upx;
  359. }
  360. .swichFont1 {
  361. width: 55%;
  362. padding-top: 12upx;
  363. }
  364. .line1 {
  365. width: 100%;
  366. height: 3upx;
  367. background: #000000;
  368. }
  369. </style>