<template>
|
<basic-container>
|
<div class="algorithContainer">
|
<div class="algorithItem" v-if="!showDetail">
|
<div class="item" v-for="(item, index) in AlgorithmData" :key="index">
|
<img class="imgicon" :src="`${baseUrl}/后台-算法仓库/${item.dictValue}.png`" alt="" />
|
<div>{{ item.dictValue }}</div>
|
<div
|
:class="item.dictValue === '病虫害识别' ? 'stopStatus' : 'normalStatus'"
|
@click="jumpDatail(item)"
|
>
|
{{ item.dictValue === '病虫害识别' ? '停用状态' : '正常状态' }}
|
</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-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">
|
<img :src="item.url" alt=""/>
|
<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>
|
defineOptions({
|
name: 'algorithmRepository',
|
});
|
import { getDictionaryByCode } from '@/api/system/dictbiz';
|
import { getalgorithmList, selectDeviceList } from '@/api/algorithm';
|
|
import { useRouter } from 'vue-router';
|
const router = useRouter();
|
const baseUrl = import.meta.env.VITE_APP_TERRAIN_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: 10,
|
});
|
// 请求字典字段
|
let AlgorithmData = ref([]);
|
const detailData = ref([]);
|
const requestDictionary = () => {
|
getDictionaryByCode('SF').then(res => {
|
if (res.code !== 0) {
|
// 处理数据
|
AlgorithmData.value = res.data.data['SF'];
|
}
|
});
|
};
|
const jumpDatail = val => {
|
if (val.dictValue === '病虫害识别') {
|
showDetail.value = false;
|
} else {
|
showDetail.value = true;
|
params.value.ai_type_key = val.dictKey;
|
}
|
|
getList();
|
};
|
// 详情
|
const getList = () => {
|
getalgorithmList(params.value).then(res => {
|
loading.value = true;
|
// console.log('详情', res.data.data);
|
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 handleSizeChange = val => {
|
params.size = val;
|
getList();
|
};
|
// 页码改变
|
const handleCurrentChange = val => {
|
params.current = val;
|
getList();
|
};
|
onMounted(() => {
|
requestDictionary();
|
getDeviceList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.algorithItem {
|
padding: 20px;
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 53px;
|
text-align: center;
|
vertical-align: middle;
|
.item {
|
height: 300px;
|
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%;
|
.imgicon {
|
width: 100px;
|
height: 100px;
|
margin-bottom: 47px;
|
}
|
.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;
|
}
|
.normalStatus:hover {
|
background: rgba(6, 217, 87, 0.2);
|
}
|
}
|
}
|
.algorithItemDetail {
|
padding: 20px;
|
|
.pictureitem {
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 24px;
|
|
.imgitem {
|
border-radius: 12px 12px 0 0;
|
overflow: hidden;
|
img {
|
width: 100%;
|
height: 200px;
|
display: block;
|
margin: 0;
|
padding: 0;
|
}
|
.info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 42px;
|
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>
|
