新增数据管理的字段

yangyin

2024-09-06 b01a1c6b97a120c7d7fc2a19a23ae55121277fde

新增数据管理的字段

 src/utils/util.ts

@@ -575,7 +575,23 @@
        }, wait);
    };
};

/**
 * 文件大小字节转换为XXX
 * @param size 字节大小
 * @returns {string|*}
 */
export const convertFileSize = (size) => {
    if (!size && size !== 0) return '';
    if (size < pow1024(1)) return size + ' B';
    if (size < pow1024(2)) return (size / pow1024(1)).toFixed(2) + ' KB';
    if (size < pow1024(3)) return (size / pow1024(2)).toFixed(2) + ' MB';
    if (size < pow1024(4)) return (size / pow1024(3)).toFixed(2) + ' GB';
    return (size / pow1024(4)).toFixed(2) + ' TB';
};
// 求次幂
function pow1024(num) {
    return Math.pow(1024, num);
}
/**
 *
 * @param {*} func 节流函数
@@ -684,9 +700,9 @@

/**
 * 保留指定精度小数位，且不补零
 * @param num 
 * @param precision 
 * @returns 
 * @param num
 * @param precision
 * @returns
 */
export const toMyFixed = (num, precision) => {
    if (num == null) return '';

 src/views/project/yw/dataManage/graph/GraphIndex.vue

@@ -87,6 +87,7 @@
                >
                    <el-table-column prop="name" label="文件名称" fixed="left" show-overflow-tooltip align="left" />
                    <el-table-column prop="type" width="120" label="文件类型" show-overflow-tooltip align="center" />
                    <el-table-column prop="size" width="120" label="文件大小" show-overflow-tooltip align="center" />
                    <el-table-column prop="time" label="上传时间" show-overflow-tooltip width="280" align="center"></el-table-column>
                    <el-table-column label="操作" width="80" fixed="right" show-overflow-tooltip align="center">
                        <template #default="scope">
@@ -174,7 +175,7 @@
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import { useQueryTable } from '/@/hooks/useQueryTable';
import { deepClone } from '/@/utils/other';
import { convertListToTree } from '/@/utils/util';
import { convertFileSize, convertListToTree } from '/@/utils/util';
const state = reactive({
    tableParams: {
        PageIndex: 1,
@@ -233,6 +234,9 @@
    }).finally(() => {});
    if (res?.json_ok) {
        const resData = (res.values || []) as [];
        resData.forEach((item) => {
            item.size = convertFileSize(item.size);
        });
        categoryTableData.value = resData;
    } else {
        ElMessage.error('获取文档列表失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));

 src/views/project/yw/dataManage/knowledge/Knowledge.vue

@@ -170,4 +170,3 @@
    }
}
</style>
import { useQueryTable } from '/@/hooks/useQueryTable';

 src/views/project/yw/dataManage/knowledge/viewKnowBase/ViewFile.vue

@@ -2,98 +2,137 @@
    <div class="flex flex-col h100">
        <div class="h100" v-show="!state.showKnowledgeForm">
            <div class="mb-[10px] flex flex-shrink-0 items-center">
                <el-button style="margin-left: 8px; width: 40px" link @click="handleExitFlow">
                <el-button style="margin-left: 8px; width: 40px" link @click="handleShowKnowledge">
                    <el-icon style="font-size: 24px !important">
                        <ArrowLeft />
                    </el-icon>
                </el-button>
                <span class="text-[24px] text-[#26244c] font-[700]">{{ state.knowledgeInfo.knowledge_title }}</span>
            </div>
            <div class="set-table-height"></div>
            <div class="set-table-height">
                <div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center">
                    <div class="flex-col">
                        <el-input
                            v-model="knowledgeFileForm.title"
                            style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s"
                            placeholder="搜索知识库名称"
                            clearable
                        ></el-input>
                        <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
                        <el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
                    </div>
                </div>
                <div class="relative transition-[opacity 0.3s]">
                    <div class="flex flex-wrap gap-[12px] mt-4 box-border">
                        <div
                            class="set_slice"
                            v-for="(item, index) in displayTableData"
                            :key="index"
                            @mouseover="mouseOver($event, item)"
                            @mouseleave="mouseLeave()"
                        >
                            <div class="flex justify-between">
                                <div class="items-center font-[500] flex">{{ item.title }}</div>
                                <el-switch v-model="state.isSliceValueTime" class="ml-2" size="small" />
                            </div>
                            <div class="set_content">{{ item.content }}</div>
                            <div :class="{ viewFileClassHover: state.selectSliceID == item.id }">
                                <el-button type="primary" link style="color: #0062be" @click="viewSliceFile(item)">{{
                                    item.id == state.selectSliceID ? '查看详情' : ''
                                }}</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="set-form-footer" v-show="state.showKnowledgeForm">
            <el-button @click="importCompleted" type="primary">导入完成</el-button>
            <el-button @click="handleShowKnowledge">取消</el-button>
        </div>
        <el-dialog v-model="state.isShowSliceDetail" :title="state.knowLedgeDetailForm?.title" width="50%" :before-close="handleClose">
            <el-form :model="state.knowLedgeDetailForm" label-position="right">
                <el-form-item label="切片内容">
                    <el-input v-model="state.knowLedgeDetailForm.name" />
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="state.knowLedgeDetailForm.region" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { add_docvector_file } from '/@/api/knowledge/docvector';
const viewKnowledgeTableRef = ref();
import { useQueryTable } from '/@/hooks/useQueryTable';

const router = useRouter();
const route = useRoute();
const knowledgeTableData = ref([]);
const knowledgeFileRef = ref();
// 定义变量内容
const state = reactive({
    knowledgeInfo: {
        knowledge_title: '查看文件',
        knowledge_id: '',
        knowledge_import_data: '导入数据',
    } as any,
    knowledgeForm: {
        segmentationMode: 1,
    },
    knowLedgeDetailForm: {},
    showKnowledgeForm: false,
    knowledgeFile: {},
    isSliceValueTime: true,
    selectSliceID: null,
    isShowSliceDetail: false,
});
//返回到知识库列表
const handleExitFlow = () => {
    //是否显示返回
    router.back();
};
//返回到知识库查看页面
const handleShowKnowledge = () => {
    state.showKnowledgeForm = false;
    router.back();
};
//#region ====================== 搜索表格，对表格排序 ======================
const graphQueryParams = ref({
    title: '',
});
// const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(getSliceFile, graphQueryParams, () => {
//     displayTableData.value = knowledgeTableData.value;
// });
//#endregion
const handleClose = () => {
    state.isShowSliceDetail = false;
};
//#region ====================== 获取切换的数据 ======================
const mouseOver = ($event, row) => {
    state.selectSliceID = row.id;
};
const mouseLeave = () => {
    state.selectSliceID = null;
};
const getSliceFile = async () => {
    const res = 0;
};
const viewSliceFile = (row) => {
    state.isShowSliceDetail = true;
    state.knowLedgeDetailForm = row;
};
//#endregion
//#region ====================== 导入知识库数据 ======================
const importKnowledgeData = () => {
    state.showKnowledgeForm = true;
    getImportantFileTreeData(true);
};
//导入完成
const importCompleted = async () => {
    // 上传文件
    if (multipleSelection.value.length == 0) return ElMessage.warning('请先选择文件');
    let isCreateIndex = false;
    const file_id = multipleSelection.value.map((v) => v.id).join(',');
    knowledgeTableData.value.forEach((element) => {
        if (element.id == file_id) {
            ElMessage.warning('文件已存在，请选择其他文件');
            isCreateIndex = true;
        }
    });
    if (isCreateIndex) return;
    const res = await add_docvector_file({
        knowlg_id: state.knowledgeInfo.knowledge_id,
        file_id: file_id,
    });
    if (res.json_ok) {
        ElMessage.success('导入数据成功');
        state.showKnowledgeForm = false;
        getKnowledgeFileData();
        //清空表单
        knowledgeFileRef.value.resetFields();
    }
};
//#region ====================== 搜索表格，对表格排序 ======================
const sliceFileData = ref([
    {
        content:
            'R SHLMGE for better lifeShimge Pump Industry(Zhejiang) Co.,Ltd Headquarter address: Dayangcheng Industrial Zone, Daxi Town, Wenling City, Zhejiang Province, 317525, China Tel:+86- 576- 86331536/ 86335366/ 86333138Fax:+86- 576- 86335467Email: shichangbu@shimge.com Webite: www.shimge.comSHIMGE PUMP INDUSTRY(ZHEJIANG) CO.,LTD.VISION& MISSIONProvide leading fluid solutions andimprove the quality of life for everyone.////////SHIMGENSGW-Type Standard End Suction Centrifugal PumpNSGW TypeContents01Company Profile03Product Overview05Highlight Features07Type Chart09Standard Parameter Table',
        id: 1,
        title: '文件1',
    },
    {
        content:
            'NSGW pump is used for pumping clean water and liquid with physical and chemical properties similar to water, and is suitable for factories, mines, urban water supply and drainage, air conditioning, fire fighting, and agricultural irrigation. Pumps with the same specifications can have different performance due to the change of different impeller outer diameters(represented by adding A, B, C etc. after the pump model). The pump has simple structure, reliable performance, small size, light weight, good cavitation resistance, low power consumption and convenient use and maintenance. It has a wide',
        id: 2,
        title: '文件2',
    },
    {
        content:
            'good cavitation resistance, low power consumption and convenient use and maintenance. It has a wide range of versatil-ity. The whole series have 60 specifications, but only four types of shafts are used. The shafts, bearings, shaft sleeves, shaft seals and impeller fasteners of the same specification can be interchanged. There are only five types of suspension for the whole series of pumps too.',
        id: 3,
        title: '文件3',
    },
]);
const knowledgeFileForm = ref({
    title: '',
});
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(sliceFileData, knowledgeFileForm, () => {
    displayTableData.value = sliceFileData.value;
});
//#endregion

onMounted(() => {
@@ -111,6 +150,34 @@
    overflow-y: auto;
    padding: 20px 24px;
    box-sizing: border-box;
    .set_slice {
        border: 1px solid rgba(135, 138, 171, 0.15);
        border-radius: 16px;
        padding: 12px 20px;
        width: calc(33.33333% - 8px);
        &:hover {
            border-color: #0062be;
        }
        .viewFileClassHover {
            border-top: 1px solid hsla(0, 0%, 94%, 0.5);
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
            padding-top: 8px;
            background-color: #fff;
        }
    }
    .set_content {
        color: rgba(38, 36, 76, 0.8);
        font-size: 12px;
        line-height: 22px;
        margin: 6px 0 0;
        min-height: 88px;
        -webkit-line-clamp: 4;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }
}
.set-file-height {
    height: calc(100% - 48px);