You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.4 KiB
148 lines
3.4 KiB
<template>
|
|
<view class="bg-white flex flex-col px-2">
|
|
<view class="flex flex-nowrap text-xs text-gray-400 my-2">
|
|
提示:
|
|
<view v-for="(tip, tipIndex) in tips" :key="tipIndex" class="flex flex-nowrap items-center ml-3">
|
|
<view class="w-2 h-2 rounded-full mr-1" :class="tip.bg"></view>
|
|
{{ tip.value }}
|
|
</view>
|
|
</view>
|
|
<view v-if="lists && lists.length">
|
|
<view v-for="item in lists" :key="item.toolId">
|
|
<view class="flex justify-between items-center py-3 border-b">
|
|
<view class="flex flex-row items-center">
|
|
<view
|
|
class="mr-2"
|
|
:class="
|
|
item.equipmentStatus === 0
|
|
? 'text-blue-500'
|
|
: item.equipmentStatus === 1
|
|
? 'text-gray-500'
|
|
: item.equipmentStatus === 2
|
|
? 'text-red-500'
|
|
: 'text-green-500'
|
|
"
|
|
>
|
|
{{ item.code }}
|
|
</view>
|
|
<view class="flex items-center text-gray-400">
|
|
<u-icon name="wifi" :color="item.wifiStatus === 2 ? '#1890FF' : '#999999'" size="36"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-nowrap items-center">
|
|
<view class="battery-box">
|
|
<view class="battery-text u-font-10 font-light">{{ item.electricQuantity }}</view>
|
|
<view class="battery" :style="{ width: setWidth(item.electricQuantity) }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-else text="列表为空" mode="list" class="mt-10"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
lists: [],
|
|
tips: [
|
|
{
|
|
value: '开机',
|
|
bg: 'bg-blue-500',
|
|
},
|
|
{
|
|
value: '休眠',
|
|
bg: 'bg-gray-500',
|
|
},
|
|
{
|
|
value: '断电',
|
|
bg: 'bg-red-500',
|
|
},
|
|
{
|
|
value: '正常',
|
|
bg: 'bg-green-500',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
async created() {
|
|
await this.queryToolList();
|
|
},
|
|
|
|
methods: {
|
|
openBinding() {
|
|
uni.navigateToMiniProgram({
|
|
appId: 'wx1989853133e3da70',
|
|
path: '',
|
|
extraData: {},
|
|
success(res) {
|
|
// 打开成功
|
|
console.log('打开成功res: ', res);
|
|
},
|
|
});
|
|
},
|
|
|
|
setWidth(res) {
|
|
return (res * 21) / 100 + 'px';
|
|
},
|
|
|
|
/**
|
|
* 查询工具箱列表
|
|
*/
|
|
async queryToolList() {
|
|
try {
|
|
const data = await this.$u.api.queryToolList();
|
|
this.lists = data;
|
|
} catch (error) {
|
|
console.error('error: ', error);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: $uni-bg-color-grey;
|
|
}
|
|
|
|
.battery-box {
|
|
width: 26px;
|
|
height: 12px;
|
|
background: url(https://www.tall.wiki/staticrec/yanyuan/battery.png) center no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.battery-text {
|
|
width: 21px;
|
|
height: 8px;
|
|
line-height: 8px;
|
|
text-align: center;
|
|
margin: 2px 0;
|
|
position: absolute;
|
|
left: 2px;
|
|
z-index: 99;
|
|
}
|
|
|
|
.battery {
|
|
height: 8px;
|
|
margin: 2px 0;
|
|
background: #e0e0e0;
|
|
position: absolute;
|
|
left: 2px;
|
|
}
|
|
|
|
.bg-gray-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
|
|
}
|
|
|
|
.bg-green-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
|
|
}
|
|
</style>
|
|
|