<template>
  <view>
    <view class="flex">
      <view>
        <image class="w-120rpx h-120rpx" src="@/static/img/01.png"></image>
      </view>
      <view class="ml-16rpx">
        <view class="flex items-center">
          <view class="w-16rpx h-16rpx bg-hex-76E9F0"></view>
          <view class="ml-10rpx">在线</view>
          <view class="ml-10rpx text-32rpx">{{ data.value[0] }}</view>
        </view>
        <view class="flex items-center">
          <view class="w-16rpx h-16rpx bg-hex-F7B379"></view>
          <view class="ml-10rpx">离线</view>
          <view class="ml-10rpx text-32rpx">{{ data.value[1] }}</view>
        </view>
        <view class="flex items-center">
          <view class="w-16rpx h-16rpx bg-hex-EB313E"></view>
          <view class="ml-10rpx">故障</view>
          <view class="ml-10rpx text-32rpx">{{ data.value[2] }}</view>
        </view>
      </view>
    </view>
    <view class="text-30rpx">{{ data.name }}</view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
}
</script>
