<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" clearable />
|
<!-- @clear="handleDateClear" -->
|
</div>
|
<div class="item">
|
<div class="itemchild">机巢查询：</div>
|
<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>
|
</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>
|
<el-button type="primary" icon="el-icon-back" @click="goback">返回</el-button>
|
</div>
|
</div>
|
|
<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">
|
<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>
|
</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="[15, 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 { 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_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,
|
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 => {
|
loading.value = true
|
detailData.value = res.data.data.records
|
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
|
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 => {
|
params.size = val
|
getList()
|
}
|
// 页码改变
|
const handleCurrentChange = val => {
|
params.current = val
|
getList()
|
}
|
onMounted(() => {
|
requestDictionary()
|
getDeviceList()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.algorithContainer {
|
height: calc(100vh - 130px);
|
}
|
|
.algorithItem {
|
height: 100%;
|
overflow-y: auto;
|
overflow-x: hidden;
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
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%;
|
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;
|
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;
|
|
.pictureBox {
|
// height: 625px;
|
height: pxToVh(760);
|
overflow: auto;
|
}
|
|
.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: 40px;
|
}
|
}
|
|
.search-btn {
|
display: flex;
|
}
|
|
.filter-item {
|
width: 218px;
|
}
|
}
|
|
.pageStyle {
|
margin-top: 32px;
|
display: flex;
|
justify-content: right;
|
}
|
</style>
|
