BorrowRankingList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <div class="ranking-panel">
  3. <div class="panel-title">
  4. <div class="title">单台设备累计借用次数排名</div>
  5. <!-- <div class="more">更多</div> -->
  6. </div>
  7. <div class="panel-header">
  8. <el-row :gutter="16">
  9. <el-col :span="4">
  10. <el-select v-model="borrowType" clearable placeholder="借用类型" style="width: 100%;" @change="fetchRanking">
  11. <el-option label="全部" value="all" />
  12. <el-option label="常规借用" value="regular" />
  13. <el-option label="课堂借用" value="classroom" />
  14. <el-option label="特殊借用" value="special" />
  15. </el-select>
  16. </el-col>
  17. <el-col :span="10">
  18. <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable
  19. @change="fetchRanking" style="width: 100%;" />
  20. </el-col>
  21. <el-col :span="10">
  22. <el-select
  23. multiple
  24. v-model="deviceTagIds"
  25. placeholder="标签名"
  26. style="width: 270px;"
  27. @change="handleTagChange"
  28. class="select-tags">
  29. <el-option :value="'selectAll'" @click.native.stop="handleSelectAll">
  30. <el-checkbox
  31. :model-value="isSelectAll"
  32. @change="handleSelectAll"
  33. @click.native.stop>
  34. 全选
  35. </el-checkbox>
  36. </el-option>
  37. <el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" >
  38. </el-option>
  39. </el-select>
  40. </el-col>
  41. </el-row>
  42. </div>
  43. <el-table v-if="rankingData.length" :data="rankingData" style="width: 100%; margin-top: 20px; height: 350px"
  44. max-height="500" class="ranking-table">
  45. <el-table-column type="index" label="排名" width="60" />
  46. <el-table-column prop="device_name" label="设备名" min-width="120" />
  47. <!-- <el-table-column prop="device_name" label="标签名">
  48. <template #default="scope">
  49. <el-tag v-for="tag in scope.row.device_tags" :key="tag" :type="tag.type">{{ tag.name }}</el-tag>
  50. </template>
  51. </el-table-column> -->
  52. <el-table-column prop="device_code" label="设备编号" min-width="120" />
  53. <el-table-column prop="borrow_count" label="借用次数" min-width="100" />
  54. <!-- <el-table-column prop="total_quantity" label="累计借用册数" /> -->
  55. </el-table>
  56. <div v-else class="empty-tip">暂无数据</div>
  57. </div>
  58. </template>
  59. <script setup lang="ts">
  60. import { ref, onMounted } from 'vue'
  61. import * as api from '../api'
  62. import { GetList } from '../../devicelabel/api'
  63. import { Session, Local } from '/@/utils/storage';
  64. interface RankingItem {
  65. user_id: number
  66. user_name: string
  67. user_code: string
  68. borrow_count: number
  69. total_quantity: number
  70. }
  71. interface LabelItem {
  72. id: number
  73. name: string
  74. }
  75. const borrowType = ref('all')
  76. const dateRange = ref<[string, string] | null>(null)
  77. const keyword = ref('')
  78. const rankingData = ref<RankingItem[]>([])
  79. // const deviceTagId = ref('')
  80. const deviceTagIds = ref<number[]>([])
  81. // 全选相关状态
  82. const isSelectAll = ref(false)
  83. // 本地存储相关配置
  84. const STORAGE_KEY = 'borrow_ranking_filters'
  85. // 全选/反选处理函数
  86. const handleSelectAll = () => {
  87. if (isSelectAll.value) {
  88. // 如果当前是全选状态,则清空选择
  89. deviceTagIds.value = []
  90. isSelectAll.value = false
  91. } else {
  92. // 如果当前不是全选状态,则选择所有标签
  93. deviceTagIds.value = labelType.value.map(item => item.id)
  94. isSelectAll.value = true
  95. }
  96. fetchRanking()
  97. }
  98. // 监听标签选择变化,更新全选状态
  99. const handleTagChange = () => {
  100. const allTagIds = labelType.value.map(item => item.id)
  101. isSelectAll.value = deviceTagIds.value.length === allTagIds.length &&
  102. allTagIds.every(id => deviceTagIds.value.includes(id))
  103. fetchRanking()
  104. }
  105. const fetchRanking = async () => {
  106. const params: Record<string, any> = {
  107. type: borrowType.value
  108. }
  109. if (dateRange.value) {
  110. params.start = dateRange.value[0]
  111. params.end = dateRange.value[1]
  112. }
  113. if (keyword.value) {
  114. params.keyword = keyword.value
  115. }
  116. // if (deviceTagId.value) {
  117. // params.tag_id = deviceTagId.value
  118. // }
  119. if (deviceTagIds.value.length) {
  120. params.tag_id = deviceTagIds.value
  121. // console.log("params.tag_id::",params.tag_id)
  122. }
  123. const res = await api.GetBorrowRankingComposite(params)
  124. if (res.code === 2000) {
  125. rankingData.value = res.data.device_rankings.borrow_count_ranking
  126. } else {
  127. rankingData.value = []
  128. }
  129. // 保存当前筛选条件到本地存储
  130. saveFiltersToStorage()
  131. }
  132. const labelType = ref<LabelItem[]>([])
  133. const getList = async () => {
  134. const res = await GetList({
  135. page: 1,
  136. page_size: 20,
  137. })
  138. if (res.code === 2000) {
  139. labelType.value = res.data
  140. // 若未从本地恢复过选择,初始化为"全选"并刷新数据
  141. if (!deviceTagIds.value.length && Array.isArray(labelType.value) && labelType.value.length) {
  142. deviceTagIds.value = labelType.value.map(item => item.id)
  143. isSelectAll.value = true
  144. fetchRanking()
  145. } else {
  146. // 更新全选状态
  147. const allTagIds = labelType.value.map(item => item.id)
  148. isSelectAll.value = deviceTagIds.value.length === allTagIds.length &&
  149. allTagIds.every(id => deviceTagIds.value.includes(id))
  150. }
  151. }
  152. }
  153. // 保存筛选条件到本地存储(无加密版本)
  154. const saveFiltersToStorage = () => {
  155. try {
  156. const userInfo = Session.get('userInfo')
  157. if (!userInfo?.username) return
  158. const filters = {
  159. borrowType: borrowType.value,
  160. dateRange: dateRange.value,
  161. deviceTagIds: deviceTagIds.value,
  162. isSelectAll: isSelectAll.value,
  163. timestamp: Date.now(), // 添加时间戳用于数据有效期控制
  164. version: '1.0' // 版本号用于后续数据结构升级
  165. }
  166. // 使用用户名作为存储键的一部分,实现用户级别的数据隔离
  167. const storageKey = `${STORAGE_KEY}_${userInfo.username}`
  168. Local.set(storageKey, filters)
  169. console.log('筛选条件已保存到本地存储',filters)
  170. } catch (error) {
  171. console.error('保存筛选条件失败:', error)
  172. }
  173. }
  174. // 从本地存储恢复筛选条件(无加密版本)
  175. const loadFiltersFromStorage = () => {
  176. try {
  177. const userInfo = Session.get('userInfo')
  178. if (!userInfo?.username) return
  179. const storageKey = `${STORAGE_KEY}_${userInfo.username}`
  180. const storedData = Local.get(storageKey)
  181. if (!storedData) return
  182. // 检查数据有效期(7天)
  183. const now = Date.now()
  184. const maxAge = 7 * 24 * 60 * 60 * 1000 // 7天
  185. if (storedData.timestamp && (now - storedData.timestamp) > maxAge) {
  186. Local.remove(storageKey)
  187. console.log('筛选条件已过期,已清除本地数据')
  188. return
  189. }
  190. // 恢复筛选条件
  191. if (storedData.borrowType) {
  192. borrowType.value = storedData.borrowType
  193. }
  194. if (storedData.dateRange) {
  195. dateRange.value = storedData.dateRange
  196. }
  197. if (storedData.deviceTagIds && Array.isArray(storedData.deviceTagIds)) {
  198. deviceTagIds.value = storedData.deviceTagIds
  199. }
  200. if (typeof storedData.isSelectAll === 'boolean') {
  201. isSelectAll.value = storedData.isSelectAll
  202. }
  203. console.log('筛选条件已从本地存储恢复')
  204. } catch (error) {
  205. console.error('恢复筛选条件失败:', error)
  206. // 发生错误时清除可能损坏的数据
  207. const userInfo = Session.get('userInfo')
  208. if (userInfo?.username) {
  209. const storageKey = `${STORAGE_KEY}_${userInfo.username}`
  210. Local.remove(storageKey)
  211. }
  212. }
  213. }
  214. // 清除本地存储的筛选条件
  215. const clearStoredFilters = () => {
  216. try {
  217. const userInfo = Session.get('userInfo')
  218. if (!userInfo?.username) return
  219. const storageKey = `${STORAGE_KEY}_${userInfo.username}`
  220. Local.remove(storageKey)
  221. console.log('已清除本地存储的筛选条件')
  222. } catch (error) {
  223. console.error('清除筛选条件失败:', error)
  224. }
  225. }
  226. // 重置筛选条件
  227. const resetFilters = () => {
  228. borrowType.value = 'all'
  229. dateRange.value = null
  230. deviceTagIds.value = []
  231. isSelectAll.value = false
  232. // 清除本地存储
  233. clearStoredFilters()
  234. // 重新获取数据
  235. fetchRanking()
  236. }
  237. onMounted(() => {
  238. // 先恢复筛选条件,再获取数据
  239. loadFiltersFromStorage()
  240. fetchRanking()
  241. if(Session.get('userInfo').username =='平台管理员') return
  242. getList()
  243. })
  244. </script>
  245. <style scoped>
  246. .ranking-panel {
  247. width: 100%;
  248. padding: 16px;
  249. background: #fff;
  250. border-radius: 20px;
  251. box-sizing: border-box;
  252. @media (max-width: 768px) {
  253. padding: 12px;
  254. border-radius: 15px;
  255. }
  256. @media (max-width: 576px) {
  257. padding: 10px;
  258. border-radius: 12px;
  259. }
  260. }
  261. .panel-title {
  262. display: flex;
  263. justify-content: space-between;
  264. align-items: center;
  265. margin-bottom: 16px;
  266. }
  267. .panel-title .title {
  268. font-size: 20px;
  269. font-weight: 600;
  270. color: #2c3e50;
  271. position: relative;
  272. @media (max-width: 768px) {
  273. font-size: 18px;
  274. }
  275. @media (max-width: 576px) {
  276. font-size: 16px;
  277. }
  278. }
  279. .panel-title .more {
  280. font-size: 14px;
  281. color: #999;
  282. cursor: pointer;
  283. }
  284. .panel-header {
  285. width: 100%;
  286. display: flex;
  287. align-items: center;
  288. flex-wrap: wrap;
  289. margin-bottom: 16px;
  290. @media (max-width: 768px) {
  291. margin-bottom: 12px;
  292. :deep(.el-row) {
  293. margin: 0 !important;
  294. }
  295. :deep(.el-col) {
  296. margin-bottom: 10px;
  297. }
  298. }
  299. @media (max-width: 576px) {
  300. margin-bottom: 10px;
  301. :deep(.el-select),
  302. :deep(.el-date-picker) {
  303. width: 100% !important;
  304. }
  305. }
  306. }
  307. .empty-tip {
  308. text-align: center;
  309. color: #999;
  310. padding: 20px;
  311. }
  312. :deep(.el-table) {
  313. border: none !important;
  314. }
  315. :deep(.el-table th) {
  316. background-color: #f5f7fa;
  317. color: #606266;
  318. font-weight: 400;
  319. border-bottom: 1px solid #EBEEF5;
  320. }
  321. :deep(.el-table td) {
  322. color: #606266;
  323. }
  324. :deep(.el-table--border) {
  325. border: none;
  326. }
  327. :deep(.el-table__inner-wrapper::before) {
  328. display: none;
  329. }
  330. /* 多选下拉框样式优化 */
  331. :deep(.el-select__tags) {
  332. max-width: 100%;
  333. overflow: hidden;
  334. white-space: nowrap;
  335. flex-wrap: nowrap;
  336. }
  337. :deep(.el-tag) {
  338. margin-right: 6px;
  339. margin-bottom: 0;
  340. max-width: 120px;
  341. overflow: hidden;
  342. text-overflow: ellipsis;
  343. white-space: nowrap;
  344. }
  345. :deep(.el-select__input) {
  346. min-width: 60px;
  347. }
  348. :deep(.select-tags .el-select__selection){
  349. overflow: auto;
  350. flex-wrap: nowrap;
  351. /* 隐藏滚动条 */
  352. scrollbar-width: none; /* Firefox */
  353. -ms-overflow-style: none; /* IE and Edge */
  354. }
  355. :deep(.select-tags .el-select__selection)::-webkit-scrollbar {
  356. display: none; /* Chrome, Safari and Opera */
  357. }
  358. /* 全选选项样式优化 */
  359. :deep(.el-select-dropdown__item) {
  360. padding: 8px 20px;
  361. }
  362. :deep(.el-select-dropdown__item .el-checkbox) {
  363. margin-right: 8px;
  364. }
  365. :deep(.el-select-dropdown__item .el-checkbox__label) {
  366. font-size: 14px;
  367. color: #606266;
  368. }
  369. /* 表格响应式优化 */
  370. .ranking-table {
  371. @media (max-width: 768px) {
  372. :deep(.el-table__body-wrapper) {
  373. overflow-x: auto;
  374. }
  375. :deep(.el-table__header-wrapper) {
  376. overflow-x: auto;
  377. }
  378. }
  379. @media (max-width: 576px) {
  380. font-size: 14px;
  381. :deep(.el-table th),
  382. :deep(.el-table td) {
  383. padding: 8px 5px;
  384. font-size: 12px;
  385. }
  386. :deep(.el-table-column--index) {
  387. width: 50px !important;
  388. }
  389. }
  390. }
  391. </style>