From 2b01c341d55629a7b86fdb329f962dca2ce7f7e2 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 17 Oct 2025 13:59:28 +0800
Subject: [PATCH] feat:更新宽度
---
src/views/algorithmRepository/algorithmRepository.vue | 186 +++++++++++++++++++++++++++++++++++-----------
1 files changed, 140 insertions(+), 46 deletions(-)
diff --git a/src/views/algorithmRepository/algorithmRepository.vue b/src/views/algorithmRepository/algorithmRepository.vue
index ccda450..3b4828a 100644
--- a/src/views/algorithmRepository/algorithmRepository.vue
+++ b/src/views/algorithmRepository/algorithmRepository.vue
@@ -2,14 +2,20 @@
<basic-container>
<div class="algorithContainer">
<div class="algorithItem" v-if="!showDetail">
- <div class="item" v-for="(item, index) in AlgorithmData" :key="index">
+ <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>{{ item.dictValue }}</div>
+ <div class="item-title">{{ item.dictValue }}</div>
<div
- :class="item.dictValue === '病虫害' ? 'stopStatus' : 'normalStatus'"
- @click="jumpDatail(item)"
+ :class="!statusSign && item.dictValue === nameSign ? 'stopStatus' : 'normalStatus'"
+ @click.stop="changeStatus(item)"
>
- {{ item.dictValue === '病虫害' ? '停用状态' : '正常状态' }}
+ {{ !statusSign && item.dictValue === nameSign ? '停用状态' : '正常状态' }}
</div>
</div>
</div>
@@ -19,7 +25,12 @@
<div class="searchBox">
<div class="item">
<div class="itemchild">模糊查询：</div>
- <el-input v-model="params.name" class="filter-item" placeholder="请输入事件名称" clearable></el-input>
+ <el-input
+ v-model="params.name"
+ class="filter-item"
+ placeholder="请输入事件名称"
+ clearable
+ ></el-input>
</div>
<div class="item">
<el-date-picker
@@ -31,11 +42,14 @@
v-model="taskData"
placeholder="请选择日期"
@change="changeselect"
+ clearable
+
/>
+ <!-- @clear="handleDateClear" -->
</div>
<div class="item">
<div class="itemchild">机巢查询：</div>
- <el-select v-model="params.device_name" placeholder="请选择" class="filter-item">
+ <el-select v-model="params.device_name" placeholder="请选择" class="filter-item" @change="handleSearch">
<el-option v-for="item in jcoptions" :key="item" :label="item" :value="item" />
</el-select>
</div>
@@ -43,18 +57,33 @@
<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>
+ <el-button type="primary" icon="el-icon-back" @click="goback">返回</el-button>
</div>
</div>
- <div class="pictureitem" v-if="detailData.length > 0" v-loading="loading" element-loading-text="加载中">
+ <div v-if="detailData.length > 0" class="pictureBox">
+ <div
+ class="pictureitem"
+
+ v-loading="loading"
+ element-loading-text="加载中"
+ >
<div class="imgitem" v-for="(item, index) in detailData" :key="index">
- <img :src="item.url" alt=""/>
+ <el-image
+ ref="imageRef"
+ :src="getSmallImg(item.url)"
+ show-progress
+ :preview-src-list="[getShowImg(item.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 class="time">{{ item.create_time.slice(5, 16).replace('-', '/', 1) }}</div>
</div>
</div>
</div>
+ </div>
<el-empty class="custom-empty" v-else>
<template #description>
<span class="custom-text">暂无数据</span>
@@ -64,7 +93,7 @@
<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"
@@ -78,21 +107,21 @@
</template>
<script setup>
-defineOptions({
- name: 'algorithmRepository',
-});
+import { useStore } from 'vuex';
import { getDictionaryByCode } from '@/api/system/dictbiz';
import { getalgorithmList, selectDeviceList } from '@/api/algorithm';
-
+import { getSmallImg,getShowImg } from '@/utils/util';
import { useRouter } from 'vue-router';
+const store = useStore();
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('');
const jcoptions = ref([]);
const total = ref(0);
const loading = ref(true);
+const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const params = ref({
ai_type_key: '',
start_date: null,
@@ -100,8 +129,9 @@
device_name: '',
name: '',
current: 1,
- size: 10,
+ size: 15,
});
+
// 请求字典字段
let AlgorithmData = ref([]);
const detailData = ref([]);
@@ -113,48 +143,86 @@
}
});
};
+const activeItem = ref(null);
const jumpDatail = val => {
- if (val.dictValue === '病虫害') {
- showDetail.value = false;
- } else {
- showDetail.value = true;
- params.value.ai_type_key = val.dictKey;
- }
-
+ 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 = () => {
- 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;
- // console.log('详情', res.data.data);
detailData.value = res.data.data.records;
- total.value=res.data.data.total
- setTimeout(() =>{
- loading.value = false
- },1000)
+ total.value = res.data.data.total;
+ setTimeout(() => {
+ loading.value = false;
+ }, 1000);
});
};
// 机巢查询
const getDeviceList = () => {
+console.log('userAreaCode',userAreaCode.value);
+// { areaCode: userAreaCode.value }
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;
+ 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;
+ handleSearch()
};
-const handleSearch = () => {
+// 处理日期清空
+const handleDateClear = () => {
+ taskData.value = ''; // 清空绑定的日期数据
+ params.value.start_date = null; // 重置开始日期参数
+ params.value.end_date = null; // 重置结束日期参数
getList();
};
+const handleSearch = () => {
+
+if(taskData.value === null){
+ params.value.start_date = null; // 重置开始日期参数
+ params.value.end_date = null; // 重置结束日期参数
+}
+
+ 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
+ params.value.name=''
};
// 分页大小改变
const handleSizeChange = val => {
@@ -173,26 +241,46 @@
</script>
<style scoped lang="scss">
+.algorithContainer {
+height: calc(100vh - 130px);
+}
.algorithItem {
- padding: 20px;
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
display: grid;
grid-template-columns: repeat(5, 1fr);
- gap: 53px;
text-align: center;
vertical-align: middle;
+
.item {
- height: 300px;
+ 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: 47px;
+ margin-bottom: 17px;
}
+ &:hover {
+ background: url('/src/assets/images/ht-sfbg-hover.png') no-repeat center;
+ background-size: 100% 100%;
+ cursor: pointer;
+ }
+ &.active-bg {
+ background: url('/src/assets/images/ht-sfbg-click.png') no-repeat center;
+ background-size: 100% 100%;
+ }
+
.normalStatus {
width: 116px;
height: 43px;
@@ -217,6 +305,7 @@
font-size: 16px;
color: #464747;
margin-top: 23px;
+ cursor: pointer;
}
.normalStatus:hover {
background: rgba(6, 217, 87, 0.2);
@@ -225,18 +314,24 @@
}
.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;
- img {
+ .el-image {
width: 100%;
- height: 200px;
+ height: 170px;
display: block;
margin: 0;
padding: 0;
@@ -245,7 +340,7 @@
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%);
@@ -269,7 +364,6 @@
}
.search {
display: flex;
- justify-content: space-between;
}
.searchBox {
display: flex;
@@ -279,13 +373,13 @@
white-space: nowrap;
margin-right: 5px;
font-weight: 400;
-font-size: 14px;
-color: #363636;
+ font-size: 14px;
+ color: #363636;
}
.item {
display: flex;
align-items: center;
- margin-right: 49px;
+ margin-right: 40px;
}
}
.search-btn {
--
Gitblit v1.9.3