DeviceStats.vue
5.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Download, Picture, VideoPlay } from '@element-plus/icons-vue'
const queryForm = reactive({
dateRange: [],
page: 1,
pageSize: 10
})
const deviceStats = ref([
{ name: '工服', t1: 120, t1p: 40, t2: 80, t2p: 25, t3: 50, t3p: 15, t4: 20, t4p: 6, t5: 10, t5p: 3, t6: 5, t6p: 1.5, t6plus: 15, t6plus_p: 4.5 },
{ name: '光猫', t1: 100, t1p: 33, t2: 90, t2p: 30, t3: 60, t3p: 20, t4: 30, t4p: 10, t5: 10, t5p: 3, t6: 5, t6p: 1.5, t6plus: 5, t6plus_p: 1.5 },
{ name: '机顶盒', t1: 150, t1p: 50, t2: 60, t2p: 20, t3: 40, t3p: 13, t4: 20, t4p: 6, t5: 10, t5p: 3, t6: 5, t6p: 1.5, t6plus: 15, t6plus_p: 5 },
])
// Dialogs
const exportImgDialog = ref(false)
const videoDialog = ref(false)
</script>
<template>
<div class="device-stats-page">
<!-- Filter -->
<el-card shadow="never" class="mb-4">
<el-form :inline="true" :model="queryForm">
<el-form-item label="日期">
<el-date-picker
v-model="queryForm.dateRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search">查询</el-button>
<el-button type="success" :icon="Download">导出明细</el-button>
<el-button :icon="Picture" @click="exportImgDialog = true">导出图片</el-button>
<el-button :icon="VideoPlay" @click="videoDialog = true">查看视频</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- Table -->
<el-card shadow="never">
<el-table :data="deviceStats" border stripe>
<el-table-column prop="name" label="设备名称" fixed width="120" />
<el-table-column prop="t1" label="识别1次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t1 }}</div><div class="text-xs text-gray-400">{{ row.t1p }}%</div>
</template>
</el-table-column>
<el-table-column prop="t2" label="识别2次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t2 }}</div><div class="text-xs text-gray-400">{{ row.t2p }}%</div>
</template>
</el-table-column>
<el-table-column prop="t3" label="识别3次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t3 }}</div><div class="text-xs text-gray-400">{{ row.t3p }}%</div>
</template>
</el-table-column>
<el-table-column prop="t4" label="识别4次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t4 }}</div><div class="text-xs text-gray-400">{{ row.t4p }}%</div>
</template>
</el-table-column>
<el-table-column prop="t5" label="识别5次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t5 }}</div><div class="text-xs text-gray-400">{{ row.t5p }}%</div>
</template>
</el-table-column>
<el-table-column prop="t6" label="识别6次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t6 }}</div><div class="text-xs text-gray-400">{{ row.t6p }}%</div>
</template>
</el-table-column>
<el-table-column prop="t6plus" label=">6次" align="center" sortable>
<template #default="{ row }">
<div>{{ row.t6plus }}</div><div class="text-xs text-gray-400">{{ row.t6plus_p }}%</div>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- Export Image Dialog -->
<el-dialog v-model="exportImgDialog" title="导出图片配置" width="500px">
<el-form label-width="100px">
<el-form-item label="日期范围">
<el-date-picker type="datetimerange" />
</el-form-item>
<el-form-item label="选择设备">
<el-select placeholder="请选择">
<el-option label="工服" value="工服" />
<el-option label="光猫" value="光猫" />
</el-select>
</el-form-item>
<el-form-item label="导出数量">
<el-input-number :min="1" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="exportImgDialog = false">取消</el-button>
<el-button type="primary">确定导出</el-button>
</template>
</el-dialog>
<!-- Video List Dialog Placeholder -->
<el-dialog v-model="videoDialog" title="查看视频" width="800px">
<el-form :inline="true">
<el-form-item label="日期"><el-date-picker type="datetimerange" /></el-form-item>
<el-form-item label="地区"><el-select placeholder="请选择"><el-option label="南京" value="南京"/></el-select></el-form-item>
<el-form-item><el-button type="primary">查询</el-button></el-form-item>
</el-form>
<el-table :data="[]" border height="400">
<el-table-column label="视频ID" />
<el-table-column label="链接" />
</el-table>
</el-dialog>
</div>
</template>