<template>
|
<basic-container>
|
<div class="algorithContainer">
|
<div class="algorithItem" v-if="!showDetail">
|
<div
|
class="item"
|
v-for="(item, index) in AlgorithmData"
|
:key="index"
|
:class="{ 'active-bg': activeItem === item.dictValue }"
|
@click="jumpDatail(item)"
|
>
|
<img class="imgicon" :src="`${baseUrl}/后台-算法仓库/${item.dictValue}.png`" alt="" />
|
<div class="item-title">{{ item.dictValue }}</div>
|
<div
|
:class="!statusSign && item.dictValue === nameSign ? 'stopStatus' : 'normalStatus'"
|
@click.stop="changeStatus(item)"
|
>
|
{{ !statusSign && item.dictValue === nameSign ? '停用状态' : '正常状态' }}
|
</div>
|
</div>
|
</div>
|
<!-- 详情页 -->
|
<div class="algorithItemDetail" v-else>
|
<div class="search">
|
<div class="searchBox">
|
<div class="item">
|
<div class="itemchild">模糊查询：</div>
|
<el-input
|
v-model="params.name"
|
class="filter-item"
|
placeholder="请输入事件名称"
|
clearable
|
></el-input>
|
</div>
|
<div class="item">
|
<el-date-picker
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="YYYY-MM-DD"
|
v-model="taskData"
|
placeholder="请选择日期"
|
@change="changeselect"
|
/>
|
</div>
|
<div class="item">
|
<div class="itemchild">机巢查询：</div>
|
<el-select v-model="params.device_name" placeholder="请选择" class="filter-item">
|
<el-option v-for="item in jcoptions" :key="item" :label="item" :value="item" />
|
</el-select>
|
</div>
|
</div>
|
<div class="search-btn">
|
<el-button type="primary" icon="el-icon-back" @click="goback">返回</el-button>
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
<el-button icon="el-icon-delete" @click="handleReset">清空</el-button>
|
</div>
|
</div>
|
|
<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="getSmallImg(item.url)"
|
show-progress
|
:preview-src-list="detailData.map(i => i.url)"
|
fit="cover"
|
/>
|
|
<div class="info">
|
<div class="name">{{ item.name }}</div>
|
<div class="time">{{ item.create_time.slice(5, 16).replace('-', '/', 1) }}</div>
|
</div>
|
</div>
|
</div>
|
<el-empty class="custom-empty" v-else>
|
<template #description>
|
<span class="custom-text">暂无数据</span>
|
</template>
|
</el-empty>
|
<!-- 分页 -->
|
<el-pagination
|
class="pageStyle"
|
background
|
:page-sizes="[10, 20, 30, 50]"
|
v-model:current-page="params.current"
|
v-model:page-size="params.size"
|
layout="total, prev, pager, next,sizes, jumper"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</basic-container>
|
</template>
|
|
<script setup>
|
|
import { getDictionaryByCode } from '@/api/system/dictbiz';
|
import { getalgorithmList, selectDeviceList } from '@/api/algorithm';
|
import { getSmallImg } from '@/utils/util';
|
import { useRouter } from 'vue-router';
|
const router = useRouter();
|
const baseUrl = import.meta.env.VITE_APP_PICTURE_URL;
|
const showDetail = ref(false);
|
const taskData = ref('');
|
const jcvalue = ref('');
|
const jcoptions = ref([]);
|
const total = ref(0);
|
const loading = ref(true);
|
const params = ref({
|
ai_type_key: '',
|
start_date: null,
|
end_date: null,
|
device_name: '',
|
name: '',
|
current: 1,
|
size: 15,
|
});
|
|
// 请求字典字段
|
let AlgorithmData = ref([]);
|
const detailData = ref([]);
|
const requestDictionary = () => {
|
getDictionaryByCode('SF').then(res => {
|
if (res.code !== 0) {
|
// 处理数据
|
AlgorithmData.value = res.data.data['SF'];
|
}
|
});
|
};
|
const activeItem = ref(null);
|
const jumpDatail = val => {
|
showDetail.value = true;
|
activeItem.value = val.dictValue;
|
params.value.ai_type_key = val.dictKey;
|
getList();
|
};
|
const statusSign = ref(true);
|
const nameSign = ref('');
|
const changeStatus = val => {
|
nameSign.value = val.dictValue;
|
statusSign.value = !statusSign.value;
|
};
|
// 详情
|
const getList = () => {
|
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 => {
|
|
console.log('算法仓库',res.data.data);
|
|
loading.value = true;
|
detailData.value = res.data.data.records;
|
total.value = res.data.data.total;
|
setTimeout(() => {
|
loading.value = false;
|
}, 1000);
|
});
|
};
|
// 机巢查询
|
const getDeviceList = () => {
|
selectDeviceList().then(res => {
|
jcoptions.value = res.data.data;
|
});
|
};
|
// 日期选择
|
const changeselect = () => {
|
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 = () => {
|
getList();
|
};
|
const handleReset = () => {
|
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;
|
};
|
// 分页大小改变
|
const handleSizeChange = val => {
|
params.size = val;
|
getList();
|
};
|
// 页码改变
|
const handleCurrentChange = val => {
|
params.current = val;
|
getList();
|
};
|
onMounted(() => {
|
requestDictionary();
|
getDeviceList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.algorithContainer {
|
height: 100%;
|
overflow: auto;
|
}
|
.algorithItem {
|
// padding: 20px;
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
// gap: 13px;
|
text-align: center;
|
vertical-align: middle;
|
.item {
|
height: 267px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background: url('/src/assets/images/ht-sfbg.png') no-repeat center;
|
background-size: 100% 100%;
|
.item-title {
|
font-weight: bold;
|
font-size: 18px;
|
color: #656565;
|
}
|
.imgicon {
|
width: 100px;
|
height: 100px;
|
margin-bottom: 17px;
|
}
|
&:hover {
|
background: url('/src/assets/images/ht-sfbg-hover.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
&.active-bg {
|
background: url('/src/assets/images/ht-sfbg-click.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
|
.normalStatus {
|
width: 116px;
|
height: 43px;
|
background: #ebfbee;
|
border-radius: 50px;
|
text-align: center;
|
line-height: 43px;
|
font-weight: 400;
|
font-size: 16px;
|
color: #029d36;
|
margin-top: 23px;
|
cursor: pointer;
|
}
|
.stopStatus {
|
width: 116px;
|
height: 43px;
|
background: #e8e8e8;
|
border-radius: 50px 50px 50px 50px;
|
text-align: center;
|
line-height: 43px;
|
font-weight: 400;
|
font-size: 16px;
|
color: #464747;
|
margin-top: 23px;
|
cursor: pointer;
|
}
|
.normalStatus:hover {
|
background: rgba(6, 217, 87, 0.2);
|
}
|
}
|
}
|
.algorithItemDetail {
|
padding: 20px;
|
|
.pictureitem {
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 14px;
|
|
.imgitem {
|
border-radius: 12px 12px 0 0;
|
overflow: hidden;
|
.el-image {
|
width: 100%;
|
height: 170px;
|
display: block;
|
margin: 0;
|
padding: 0;
|
}
|
.info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 35px;
|
border-radius: 0 0 12px 12px;
|
overflow: hidden;
|
background: linear-gradient(180deg, #ffffff 0%, #e5edff 100%);
|
border: 1px solid #1c5cff;
|
border-top: none !important;
|
|
.name {
|
margin-left: 12px;
|
font-weight: 500;
|
font-size: 16px;
|
color: #363636;
|
}
|
.time {
|
margin-right: 12px;
|
font-weight: 500;
|
font-size: 14px;
|
color: #595959;
|
}
|
}
|
}
|
}
|
.search {
|
display: flex;
|
justify-content: space-between;
|
}
|
.searchBox {
|
display: flex;
|
align-items: center;
|
margin-bottom: 27px;
|
.itemchild {
|
white-space: nowrap;
|
margin-right: 5px;
|
font-weight: 400;
|
font-size: 14px;
|
color: #363636;
|
}
|
.item {
|
display: flex;
|
align-items: center;
|
margin-right: 49px;
|
}
|
}
|
.search-btn {
|
display: flex;
|
}
|
.filter-item {
|
width: 218px;
|
}
|
}
|
.pageStyle {
|
margin-top: 32px;
|
display: flex;
|
justify-content: right;
|
}
|
</style>
|
