| | |
| | | <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" |
| | | class="set_slice" |
| | | :key="index" |
| | | @mouseover="mouseOver($event, item)" |
| | | @mouseover="mouseOver(index)" |
| | | @mouseleave="mouseLeave()" |
| | | > |
| | | <div class="flex justify-between"> |
| | | <!-- <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 }"> |
| | | </div> --> |
| | | <div class="set_content" :class="state.selectSliceID == index ? 'h-[48px]' : 'h-[88px]'">{{ item }}</div> |
| | | <div :class="{ viewFileClassHover: state.selectSliceID == index }"> |
| | | <el-button type="primary" link style="color: #0062be" @click="viewSliceFile(item)">{{ |
| | | item.id == state.selectSliceID ? '查看详情' : '' |
| | | state.selectSliceID == index ? '查看详情' : '' |
| | | }}</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </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-dialog v-model="state.isShowSliceDetail" title="切片内容" width="50%" :before-close="handleClose"> |
| | | <el-form v-model="state.knowLedgeDetailForm" label-position="right"> |
| | | <el-form-item> |
| | | <el-input v-model="state.knowLedgeDetailForm" readonly type="textarea" :rows="10"></el-input> |
| | | </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 { onMounted, reactive, ref } from 'vue'; |
| | | import { useRoute, useRouter } from 'vue-router'; |
| | | import { list_knowledge_file_vector } from '/@/api/knowledge/group'; |
| | | import { useQueryTable } from '/@/hooks/useQueryTable'; |
| | | |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | // 定义变量内容 |
| | |
| | | knowledge_title: '查看文件', |
| | | knowledge_id: '', |
| | | } as any, |
| | | knowLedgeDetailForm: {}, |
| | | knowLedgeDetailForm: '', |
| | | showKnowledgeForm: false, |
| | | knowledgeFile: {}, |
| | | isSliceValueTime: true, |
| | |
| | | state.isShowSliceDetail = false; |
| | | }; |
| | | //#region ====================== 获取切换的数据 ====================== |
| | | const mouseOver = ($event, row) => { |
| | | state.selectSliceID = row.id; |
| | | const mouseOver = (index) => { |
| | | state.selectSliceID = index; |
| | | }; |
| | | const mouseLeave = () => { |
| | | state.selectSliceID = null; |
| | | }; |
| | | const getSliceFile = async () => { |
| | | const res = 0; |
| | | const res = await list_knowledge_file_vector({ |
| | | file_id: state.knowledgeInfo.knowledge_id, |
| | | }); |
| | | if (res.json_ok) { |
| | | sliceFileData.value = res.values; |
| | | } |
| | | }; |
| | | const viewSliceFile = (row) => { |
| | | state.isShowSliceDetail = true; |
| | |
| | | }; |
| | | //#endregion |
| | | //#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 sliceFileData = ref([]); |
| | | const knowledgeFileForm = ref({ |
| | | title: '', |
| | | }); |
| | |
| | | displayTableData.value = sliceFileData.value; |
| | | }); |
| | | //#endregion |
| | | |
| | | onMounted(() => { |
| | | const { id } = route.query; |
| | | state.knowledgeInfo.knowledge_id = id; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 6px; |
| | | padding-top: 8px; |
| | | height: 44px; |
| | | padding-top: 4px; |
| | | background-color: #fff; |
| | | -webkit-line-clamp: 2; |
| | | } |
| | | } |
| | | .set_content { |
| | |
| | | font-size: 12px; |
| | | line-height: 22px; |
| | | margin: 6px 0 0; |
| | | min-height: 88px; |
| | | -webkit-line-clamp: 4; |
| | | display: -webkit-box; |
| | | overflow: hidden; |