97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
<template>
|
|
<view class="px-20rpx">
|
|
<view class="bg-white">
|
|
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
|
>设备运行状态</view
|
|
>
|
|
<view>
|
|
<u-line></u-line>
|
|
</view>
|
|
<view class="p-20rpx">
|
|
<view class="grid grid-cols-2 gap-20rpx">
|
|
<sbztItem v-for="(item, i) in list" :key="i" :data="item"></sbztItem>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import sbztItem from './sbzt-item.vue'
|
|
import { http } from '@/api/index.js'
|
|
import d01 from '@/static/img/01.png'
|
|
import d02 from '@/static/img/02.png'
|
|
import d03 from '@/static/img/03.png'
|
|
import d04 from '@/static/img/04.png'
|
|
import d05 from '@/static/img/05.png'
|
|
|
|
const defaultDevice = [
|
|
{
|
|
name: 'AI智能监控',
|
|
value: [0, 0, 0],
|
|
img: d01,
|
|
key: 1,
|
|
},
|
|
{
|
|
name: '水质监测',
|
|
value: [0, 0, 0],
|
|
img: d02,
|
|
key: 3,
|
|
},
|
|
{
|
|
name: '土壤监测',
|
|
value: [0, 0, 0],
|
|
img: d03,
|
|
key: 2,
|
|
},
|
|
{
|
|
name: '气象监测',
|
|
value: [0, 0, 0],
|
|
img: d04,
|
|
key: 4,
|
|
},
|
|
{
|
|
name: '虫情监测',
|
|
value: [0, 0, 0],
|
|
img: d05,
|
|
key: 5,
|
|
},
|
|
]
|
|
|
|
export default {
|
|
props: {
|
|
baseId: {
|
|
type: [String, Number],
|
|
},
|
|
},
|
|
components: {
|
|
sbztItem,
|
|
},
|
|
data() {
|
|
return {
|
|
list: defaultDevice,
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
http
|
|
.get('/api/devices-num', {
|
|
params: {
|
|
base_id: this.baseId,
|
|
},
|
|
})
|
|
.then(({ data }) => {
|
|
const resData = data.data
|
|
Object.keys(resData).map((e) => {
|
|
const zindex = this.list.findIndex(({ key }) => key == e)
|
|
|
|
if (zindex >= 0) this.list[zindex].value = resData[e].slice(1)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|