| | |
| | | <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> |
| | |
| | | <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 |
| | |
| | | </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="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=""/> |
| | | <el-image |
| | | ref="imageRef" |
| | | :src="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 class="time">{{ item.create_time.slice(5, 16).replace('-', '/', 1) }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | }); |
| | | 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_TERRAIN_URL; |
| | |
| | | current: 1, |
| | | size: 10, |
| | | }); |
| | | |
| | | // const getSmallImg = (url) => { |
| | | |
| | | // return url ? encodeURI(url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.'))) : '' |
| | | // } |
| | | // 请求字典字段 |
| | | let AlgorithmData = ref([]); |
| | | const detailData = ref([]); |
| | |
| | | } |
| | | }); |
| | | }; |
| | | 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 => { |
| | | 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); |
| | | }); |
| | | }; |
| | | // 机巢查询 |
| | |
| | | params.value.device_name = ''; |
| | | params.value.name = ''; |
| | | getList(); |
| | | }; |
| | | const goback = () => { |
| | | showDetail.value = false; |
| | | activeItem.value = null; |
| | | }; |
| | | // 分页大小改变 |
| | | const handleSizeChange = val => { |
| | |
| | | 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; |
| | | } |
| | | &: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; |
| | |
| | | font-size: 16px; |
| | | color: #464747; |
| | | margin-top: 23px; |
| | | cursor: pointer; |
| | | } |
| | | .normalStatus:hover { |
| | | background: rgba(6, 217, 87, 0.2); |
| | |
| | | .imgitem { |
| | | border-radius: 12px 12px 0 0; |
| | | overflow: hidden; |
| | | img { |
| | | .el-image { |
| | | width: 100%; |
| | | height: 200px; |
| | | display: block; |
| | |
| | | white-space: nowrap; |
| | | margin-right: 5px; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #363636; |
| | | font-size: 14px; |
| | | color: #363636; |
| | | } |
| | | .item { |
| | | display: flex; |