|
|
@@ -1,128 +1,117 @@
|
|
|
<template>
|
|
|
- <div class="body-container">
|
|
|
+ <div class="body-container" ref="body_container">
|
|
|
<CardItem v-for="item in moke_data" :key="item.id" :name="item.name" :img_src="item.img_src" :height="200">
|
|
|
<template #description> {{ item.desc }}> </template>
|
|
|
<template #settings>
|
|
|
<a-switch v-model="item.online">
|
|
|
- <template #checked> 上线 </template>
|
|
|
- <template #unchecked> 下线 </template>
|
|
|
+ <template #checked> {{ $t('management.online') }} </template>
|
|
|
+ <template #unchecked> {{ $t('management.offline') }} </template>
|
|
|
</a-switch>
|
|
|
</template>
|
|
|
- <template #labels v-if="item.has_label">
|
|
|
+ <template #labels>
|
|
|
<div class="label-btn">
|
|
|
<icon-subscribe />
|
|
|
- <div>添加标签</div>
|
|
|
+ <div>{{ $t('management.addLabelBtn') }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #bottom>
|
|
|
<div class="bottom">
|
|
|
- <div class="user"><icon-user /> 创建用户:{{ item.user }}</div>
|
|
|
+ <div class="user"><icon-user /> {{ $t('management.createUser') }}:{{ item.user }}</div>
|
|
|
<div class="tools">
|
|
|
<icon-more :style="{ fontSize: '20px' }" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</CardItem>
|
|
|
+ <div class="loading-tips">
|
|
|
+ <a-spin v-if="scroll_bottom && pages.current < total_pages" :tip="$t('management.loadingData')" />
|
|
|
+ <div v-if="scroll_bottom && pages.current >= total_pages">{{ $t('management.noMoreData') }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
-import CardItem from '../../views/manage-common/CardItem.vue';
|
|
|
-import intelligentFrame1 from '../../assets/image/management/intelligent-frame1.png';
|
|
|
-import intelligentFrame2 from '../../assets/image/management/intelligent-frame2.png';
|
|
|
-import intelligentFrame3 from '../../assets/image/management/intelligent-frame3.png';
|
|
|
-import intelligentFrame4 from '../../assets/image/management/intelligent-frame4.png';
|
|
|
-import intelligentFrame5 from '../../assets/image/management/intelligent-frame5.png';
|
|
|
-import intelligentFrame6 from '../../assets/image/management/intelligent-frame6.png';
|
|
|
-import intelligentFrame7 from '../../assets/image/management/intelligent-frame7.png';
|
|
|
-import intelligentFrame8 from '../../assets/image/management/intelligent-frame8.png';
|
|
|
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
|
|
|
+import CardItem from '../../views/manage/CardItem.vue';
|
|
|
+import { getImageIntelligent } from '../../views/manage/common';
|
|
|
+import { getDialogList } from '../../apis/intelligent';
|
|
|
+import { bus_intelligentSearch } from '../../base/event-bus';
|
|
|
|
|
|
const moke_data = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: '智能问答',
|
|
|
- img_src: intelligentFrame1,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: false,
|
|
|
- has_label: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: '智能客服',
|
|
|
- img_src: intelligentFrame2,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: false,
|
|
|
- has_label: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: '继题组卷',
|
|
|
- img_src: intelligentFrame3,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: true,
|
|
|
- has_label: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: '小数绘图',
|
|
|
- img_src: intelligentFrame4,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: true,
|
|
|
- has_label: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- name: '材据分析',
|
|
|
- img_src: intelligentFrame5,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: true,
|
|
|
- has_label: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- name: '报告自动生成 ',
|
|
|
- img_src: intelligentFrame6,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: true,
|
|
|
- has_label: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 7,
|
|
|
- name: '文档创作',
|
|
|
- img_src: intelligentFrame7,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: false,
|
|
|
- has_label: true
|
|
|
- },
|
|
|
- {
|
|
|
- id: 8,
|
|
|
- name: '设备检测',
|
|
|
- img_src: intelligentFrame8,
|
|
|
- desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
- user: 'admin',
|
|
|
- online: true,
|
|
|
- has_label: true
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // name: '智能问答',
|
|
|
+ // img_src: intelligentFrame1,
|
|
|
+ // desc: '极目新闻记者了解到,这些患者都有一些共同的习惯:经常把未吃完的食物放在桌上敞着',
|
|
|
+ // user: 'admin',
|
|
|
+ // online: false,
|
|
|
+ // },
|
|
|
]);
|
|
|
+const pages = reactive({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 25
|
|
|
+});
|
|
|
+// 总页码
|
|
|
+const total_pages = ref(5);
|
|
|
+const body_container = ref(null);
|
|
|
+const scroll_bottom = ref(false);
|
|
|
+const search_text = ref('');
|
|
|
+
|
|
|
+const getDialog = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getDialogList(pages.current, pages.pageSize);
|
|
|
+ const data = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ time: new Date(item.update_time).toLocaleString('zh-CN'),
|
|
|
+ desc: item.description,
|
|
|
+ img_src: getImageIntelligent(item.icon),
|
|
|
+ user: item.user || 'admin',
|
|
|
+ online: item.status == 1
|
|
|
+ };
|
|
|
+ });
|
|
|
+ moke_data.value.push(...data);
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+};
|
|
|
+const scrollHandler = (e) => {
|
|
|
+ if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
|
|
|
+ scroll_bottom.value = true;
|
|
|
+ // 调用函数加载更多数据
|
|
|
+ if (pages.current < total_pages.value) {
|
|
|
+ pages.current += 1;
|
|
|
+ getDialog();
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+bus_intelligentSearch.on((text) => {
|
|
|
+ search_text.value = text;
|
|
|
+ getDialog();
|
|
|
+});
|
|
|
+onMounted(() => {
|
|
|
+ getDialog();
|
|
|
+ body_container.value.addEventListener('scroll', scrollHandler);
|
|
|
+});
|
|
|
+
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ body_container.value.removeEventListener('scroll', scrollHandler);
|
|
|
+ bus_intelligentSearch.off();
|
|
|
+});
|
|
|
</script>
|
|
|
<style scoped lang="css">
|
|
|
.body-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(6, 1fr);
|
|
|
align-content: flex-start;
|
|
|
gap: 20px;
|
|
|
- overflow: auto;
|
|
|
+ overflow-y: scroll;
|
|
|
height: calc(100% - 80px);
|
|
|
}
|
|
|
+.body-container::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
.label-btn {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
@@ -136,4 +125,9 @@ const moke_data = ref([
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+.loading-tips {
|
|
|
+ grid-column: 1/-1;
|
|
|
+ grid-row-start: auto;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
</style>
|