| | |
| | | v-model="taskData" |
| | | placeholder="请选择日期" |
| | | @change="changeselect" |
| | | clearable |
| | | @clear="handleDateClear" |
| | | /> |
| | | </div> |
| | | <div class="item"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div |
| | | <div v-if="detailData.length > 0" class="pictureBox"> |
| | | <div |
| | | class="pictureitem" |
| | | v-if="detailData.length > 0" |
| | | |
| | | v-loading="loading" |
| | | element-loading-text="加载中" |
| | | > |
| | | <div class="imgitem" v-for="(item, index) in detailData" :key="index"> |
| | | <el-image |
| | | ref="imageRef" |
| | | :src="item.url" |
| | | :src="getSmallImg(item.url)" |
| | | show-progress |
| | | :preview-src-list="detailData.map(i => i.url)" |
| | | fit="cover" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-empty class="custom-empty" v-else> |
| | | <template #description> |
| | | <span class="custom-text">暂无数据</span> |
| | |
| | | <el-pagination |
| | | class="pageStyle" |
| | | background |
| | | :page-sizes="[10, 20, 30, 50]" |
| | | :page-sizes="[15, 20, 30, 50]" |
| | | v-model:current-page="params.current" |
| | | v-model:page-size="params.size" |
| | | layout="total, prev, pager, next,sizes, jumper" |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | defineOptions({ |
| | | name: 'algorithmRepository', |
| | | }); |
| | | |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz'; |
| | | import { getalgorithmList, selectDeviceList } from '@/api/algorithm'; |
| | | import { getSmallImg } from '@/utils/util' |
| | | import { getSmallImg } from '@/utils/util'; |
| | | import { useRouter } from 'vue-router'; |
| | | const router = useRouter(); |
| | | const baseUrl = import.meta.env.VITE_APP_TERRAIN_URL; |
| | | const baseUrl = import.meta.env.VITE_APP_PICTURE_URL; |
| | | const showDetail = ref(false); |
| | | const taskData = ref(''); |
| | | const jcvalue = ref(''); |
| | |
| | | device_name: '', |
| | | name: '', |
| | | current: 1, |
| | | size: 10, |
| | | size: 15, |
| | | }); |
| | | |
| | | // const getSmallImg = (url) => { |
| | | |
| | | // return url ? encodeURI(url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.'))) : '' |
| | | // } |
| | | // 请求字典字段 |
| | | let AlgorithmData = ref([]); |
| | | const detailData = ref([]); |
| | |
| | | }; |
| | | // 详情 |
| | | const getList = () => { |
| | | getalgorithmList(params.value).then(res => { |
| | | const detailParams={ |
| | | ai_type_key: params.value.ai_type_key, |
| | | start_date:params.value.start_date, |
| | | end_date: params.value.end_date, |
| | | device_name: params.value.device_name, |
| | | name:params.value.name, |
| | | } |
| | | getalgorithmList(detailParams,{ current: params.value.current, |
| | | size: params.value.size,}).then(res => { |
| | | loading.value = true; |
| | | detailData.value = res.data.data.records; |
| | | total.value = res.data.data.total; |
| | |
| | | params.value.start_date = taskData.value.length ? `${taskData.value[0]} 00:00:00` : null; |
| | | params.value.end_date = taskData.value.length ? `${taskData.value[1]} 23:59:59` : null; |
| | | }; |
| | | const handleSearch = () => { |
| | | // 处理日期清空 |
| | | const handleDateClear = () => { |
| | | taskData.value = ''; // 清空绑定的日期数据 |
| | | params.value.start_date = null; // 重置开始日期参数 |
| | | params.value.end_date = null; // 重置结束日期参数 |
| | | getList(); |
| | | }; |
| | | const handleSearch = () => { |
| | | getList(); |
| | | |
| | | }; |
| | | const handleReset = () => { |
| | | taskData.value ='' |
| | | params.value.start_date = null; |
| | | params.value.end_date = null; |
| | | params.value.device_name = ''; |
| | | params.value.name = ''; |
| | | getList(); |
| | | |
| | | }; |
| | | const goback = () => { |
| | | showDetail.value = false; |
| | | activeItem.value = null; |
| | | params.value.current =1 |
| | | params.value.size=15 |
| | | }; |
| | | // 分页大小改变 |
| | | const handleSizeChange = val => { |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .algorithContainer { |
| | | height: 100%; |
| | | overflow: auto; |
| | | } |
| | | .algorithItem { |
| | | padding: 20px; |
| | | // padding: 20px; |
| | | display: grid; |
| | | grid-template-columns: repeat(5, 1fr); |
| | | gap: 53px; |
| | | // gap: 13px; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | .item { |
| | | height: 300px; |
| | | height: 267px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | |
| | | .imgicon { |
| | | width: 100px; |
| | | height: 100px; |
| | | margin-bottom: 47px; |
| | | margin-bottom: 17px; |
| | | } |
| | | &:hover { |
| | | background: url('/src/assets/images/ht-sfbg-hover.png') no-repeat center; |
| | |
| | | } |
| | | .algorithItemDetail { |
| | | padding: 20px; |
| | | |
| | | |
| | | .pictureBox { |
| | | // height: 625px; |
| | | height: pxToVh(760); |
| | | overflow: auto; |
| | | } |
| | | .pictureitem { |
| | | |
| | | display: grid; |
| | | grid-template-columns: repeat(5, 1fr); |
| | | gap: 24px; |
| | | gap: 14px; |
| | | |
| | | .imgitem { |
| | | border-radius: 12px 12px 0 0; |
| | | overflow: hidden; |
| | | .el-image { |
| | | width: 100%; |
| | | height: 200px; |
| | | height: 170px; |
| | | display: block; |
| | | margin: 0; |
| | | padding: 0; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | height: 42px; |
| | | height: 35px; |
| | | border-radius: 0 0 12px 12px; |
| | | overflow: hidden; |
| | | background: linear-gradient(180deg, #ffffff 0%, #e5edff 100%); |