equipmentlist.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  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>{{equipment.isSleep?$t('equipmentStatusList.sleep'):$t('equipmentStatusList.unsleep')}}</span></view>
  94. <!-- <view><span>{{$t('equipmentStatusList.area')}}:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view> -->
  95. <view><span>{{equipment.eqeStatus==0?$t('equipmentStatusList.off'):$t('equipmentStatusList.on')}}</span></view>
  96. <view><span>{{$t('equipmentStatusList.temperature')}}:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}°C</span></view>
  97. <view><span>{{$t('equipmentStatusList.humidity')}}:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}%RH</span></view>
  98. <view><span>{{$t('equipmentStatusList.equipmentTemperature')}}:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}°C</span></view>
  99. <!-- 物料 -->
  100. <view>
  101. <span>{{$t('equipmentStatusList.whiteSugar')}}:</span><span>{{equipment.whiteSugar?equipment.whiteSugar:''}}% -- </span>
  102. <span>{{$t('equipmentStatusList.redSugar')}}:</span><span>{{equipment.redSugar?equipment.redSugar:''}}% -- </span>
  103. <span>{{$t('equipmentStatusList.yellowSugar')}}:</span><span>{{equipment.yellowSugar?equipment.yellowSugar:''}}% -- </span>
  104. <span>{{$t('equipmentStatusList.blueSugar')}}:</span><span>{{equipment.blueSugar?equipment.blueSugar:''}}% </span>
  105. </view>
  106. <view><span>{{$t('equipmentStatusList.stick')}}:</span><span>{{equipment.stick?equipment.stick:''}}% </span></view>
  107. <view>
  108. <span>{{$t('equipmentStatusList.water')}}:</span><span>{{equipment.water?equipment.water:''}}% -- </span>
  109. <span>{{$t('equipmentStatusList.wasteWater')}}:</span><span>{{equipment.wasteWater?equipment.wasteWater:''}}%</span>
  110. </view>
  111. <view><span>{{$t('equipmentStatusList.refreshTime')}}:</span><span>{{equipment.lastUpdateTime}}</span></view>
  112. <!-- <view><span>{{$t('equipmentStatusList.volume')}}:</span><span>{{equipment.volume?equipment.volume:''}}</span></view> -->
  113. <view class="" v-if="equipment.hasTodayAlarm">
  114. <view><span>{{$t('equipmentStatusList.alarm')}}:</span></view>
  115. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  116. <view>
  117. <span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}
  118. <button v-if="alarm.isEliminate==1" style="color:#BEBEBE;" @click="eliminate(alarm.id)" class="eliminateButton">
  119. <p class="p">{{$t('equipmentStatusList.yixiaochu')}}</p>
  120. </button>
  121. <button v-if="alarm.isEliminate!=1" type="primary" @click="eliminate(alarm.id)" class="eliminateButton">
  122. <p class="p">{{$t('equipmentStatusList.xiaochu')}}</p>
  123. </button>
  124. </span>
  125. </view>
  126. </view>
  127. </view>
  128. <view class="" v-else>
  129. <view><span>{{$t('equipmentStatusList.alarm')}}:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
  130. {{equipment.alarmContent}}</span></view>
  131. </view>
  132. </view>
  133. </uni-collapse-item>
  134. </view>
  135. </uni-collapse>
  136. </view>
  137. </template>
  138. <script>
  139. import {
  140. mapState,
  141. mapActions,
  142. mapMutations
  143. } from 'vuex'
  144. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
  145. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
  146. import uniList from '@/components/uni-list/uni-list.vue'
  147. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  148. import {
  149. dateUtils
  150. } from '@/common/util.js';
  151. export default {
  152. components: {
  153. uniCollapse,
  154. uniCollapseItem,
  155. uniList,
  156. uniListItem,
  157. },
  158. data() {
  159. return {
  160. globalUser: {},
  161. merchantList: [{
  162. equipmentList: []
  163. }],
  164. extraIcon: {
  165. color: '#4cd964',
  166. size: '22',
  167. type: 'spinner'
  168. },
  169. statusNormal: 'status-normal',
  170. statusError: 'status-error',
  171. sleepChecked: null,
  172. onffChecked: null,
  173. time: null,
  174. timeAll: {
  175. },
  176. input: 0,
  177. }
  178. },
  179. computed: {
  180. ...mapState(['loginUser']),
  181. },
  182. onPullDownRefresh() {
  183. this.getEquipmentListData();
  184. },
  185. onShow() {
  186. // this.input = this.input + 1;
  187. this.globalUser = uni.getStorageSync("globalUser");
  188. this.globalUser.todayDate = dateUtils.getCurrentDate();
  189. uni.setNavigationBarTitle({
  190. title: this.$t('user.equipmentlist')
  191. });
  192. // uni.setTabBarItem({
  193. // index: 3,
  194. // text: this.$t('tabs.tab4')
  195. // });
  196. var token = uni.getStorageSync("token");
  197. if (token.length > 1) {
  198. this.getEquipmentListData();
  199. } else {
  200. uni.reLaunch({
  201. url: '../Login/Login',
  202. });
  203. }
  204. },
  205. methods: {
  206. ...mapActions('chart', ['getEquipmentListByUser']),
  207. getMerchantTitle(merchant) {
  208. return merchant.name ? merchant.name : merchant.username;
  209. },
  210. getEquipmentTitle(equipment) {
  211. return equipment.name ? equipment.name : '暂无名称';
  212. },
  213. getEquipmentListData() {
  214. this.getEquipmentListByUser(this.globalUser)
  215. .then(data => {
  216. this.merchantList = data;
  217. var listName = data[0].equipmentList;
  218. var times = new Map;
  219. if (this.input == 1) {
  220. for (var i = 0; i < listName.length; i++) {
  221. var k = listName[i].id;
  222. times.set(k, null);
  223. }
  224. this.timeAll = times;
  225. }
  226. var listId = data[0].id;
  227. if (listId != null && listId != '1') {
  228. uni.setStorageSync("listName", listName);
  229. }
  230. uni.stopPullDownRefresh();
  231. }, _ => void uni.stopPullDownRefresh());
  232. },
  233. eliminate(id) {
  234. var token = uni.getStorageSync("token");
  235. uni.request({
  236. url: this.serverurl + '/TEquipment/eliminate',
  237. data: {
  238. "id": id
  239. },
  240. method: "POST",
  241. header: {
  242. 'token': token
  243. },
  244. success: (res) => {
  245. uni.showToast({
  246. title: "发送成功",
  247. icon: 'none',
  248. duration: 1000
  249. });
  250. this.getEquipmentListData();
  251. }
  252. });
  253. },
  254. }
  255. }
  256. </script>
  257. <style>
  258. .status-css {
  259. position: absolute;
  260. width: 30upx;
  261. height: 30upx;
  262. right: 86upx;
  263. top: 30upx;
  264. border-radius: 30upx;
  265. color: "#596D83";
  266. font-size: 12upx;
  267. }
  268. .status-error {
  269. background-color: #dd524d
  270. }
  271. .status-normal {
  272. background-color: #4cd964
  273. }
  274. .baojing {
  275. display: flex;
  276. flex-direction: row;
  277. padding-left: 20upx;
  278. }
  279. .titleFlag {
  280. height: 56upx;
  281. background-color: #F8F8F8;
  282. color: #8C959F;
  283. font-size: 22upx;
  284. display: flex;
  285. flex-direction: row;
  286. }
  287. .opendoor {
  288. /* #ifdef H5 */
  289. /* #endif */
  290. padding-top: 10upx;
  291. padding-bottom: 10upx;
  292. /* text-align: center; */
  293. display: flex;
  294. flex-direction: row;
  295. }
  296. .button {
  297. /* #ifdef H5 */
  298. text-align: center;
  299. height: 50upx;
  300. weight: 20upx;
  301. /* #endif */
  302. padding-left: 15upx;
  303. /* padding-top: 2upx; */
  304. }
  305. .eliminateButton {
  306. /* #ifdef H5 */
  307. text-align: center;
  308. height: 50upx;
  309. weight: 20upx;
  310. /* #endif */
  311. padding-left: 15upx;
  312. /* padding-top: 2upx; */
  313. }
  314. .p {
  315. /* #ifdef H5 */
  316. font-size: 28upx;
  317. height: 50upx;
  318. weight: 20upx;
  319. transform: translateY(-14upx);
  320. /* text-align: center; */
  321. /* #endif */
  322. /* padding-bottom: 50upx; */
  323. text-align: center;
  324. padding-left: 13upx;
  325. }
  326. .img {
  327. padding-top: 20upx;
  328. padding-left: 30upx;
  329. width: 15upx;
  330. height: 15upx;
  331. }
  332. .wenziT {
  333. padding-top: 10upx;
  334. padding-left: 10upx;
  335. }
  336. .titlelist {
  337. color: #363D44;
  338. font-size: 16upx;
  339. font-family: "PingFang-SC-Medium";
  340. }
  341. .swithBox {
  342. display: flex;
  343. flex-direction: row;
  344. padding-bottom: 15upx;
  345. padding-top: 5upx;
  346. }
  347. .switch {
  348. width: 100upx;
  349. height: 22upx;
  350. }
  351. .switch1 {
  352. display: flex;
  353. flex-direction: row;
  354. width: 35%;
  355. height: 42upx;
  356. padding-top: 13upx;
  357. padding-left: 72upx;
  358. }
  359. .swichFont {
  360. width: 85%;
  361. padding-top: 12upx;
  362. }
  363. .swichFont1 {
  364. width: 55%;
  365. padding-top: 12upx;
  366. }
  367. .line1 {
  368. width: 100%;
  369. height: 3upx;
  370. background: #000000;
  371. }
  372. </style>