| | |
| | | <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" v-for="(item, index) in AlgorithmData" :key="index" |
| | | :class="{ 'active-bg': activeItem === item.dictValue }" @click="jumpDatail(item)"> |
| | | <img class="imgicon" :src="`${baseUrl}/manage-sf-icon-source/${item.dictKey}.png`" alt="" /> |
| | | <div class="item-title">{{ item.dictValue }}</div> |
| | | <div |
| | | :class="!statusSign && item.dictValue === nameSign ? 'stopStatus' : 'normalStatus'" |
| | | @click.stop="changeStatus(item)" |
| | | > |
| | | <div :class="!statusSign && item.dictValue === nameSign ? 'stopStatus' : 'normalStatus'" |
| | | @click.stop="changeStatus(item)"> |
| | | {{ !statusSign && item.dictValue === nameSign ? '停用状态' : '正常状态' }} |
| | | </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 |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | value-format="YYYY-MM-DD" |
| | | v-model="taskData" |
| | | placeholder="请选择日期" |
| | | @change="changeselect" |
| | | /> |
| | | <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"> |
| | | <el-select v-model="params.device_name" placeholder="请选择" class="filter-item" @change="handleSearch" clearable> |
| | | <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> |
| | | <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 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 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 class="info"> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="time">{{ item.create_time.slice(5, 16).replace('-', '/', 1) }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </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" |
| | | /> |
| | | <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> |
| | | defineOptions({ |
| | | name: 'algorithmRepository', |
| | | }); |
| | | 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); |
| | | 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, |
| | |
| | | device_name: '', |
| | | name: '', |
| | | current: 1, |
| | | size: 10, |
| | | }); |
| | | size: 15, |
| | | }) |
| | | |
| | | // 请求字典字段 |
| | | let AlgorithmData = ref([]); |
| | | const detailData = ref([]); |
| | | let AlgorithmData = ref([]) |
| | | const detailData = ref([]) |
| | | const requestDictionary = () => { |
| | | getDictionaryByCode('SF').then(res => { |
| | | if (res.code !== 0) { |
| | | // 处理数据 |
| | | AlgorithmData.value = res.data.data['SF']; |
| | | AlgorithmData.value = res.data.data['SF'] |
| | | } |
| | | }); |
| | | }; |
| | | const activeItem = ref(null); |
| | | console.log('算法',AlgorithmData.value); |
| | | |
| | | }) |
| | | } |
| | | 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(''); |
| | | 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; |
| | | }; |
| | | nameSign.value = val.dictValue |
| | | statusSign.value = !statusSign.value |
| | | } |
| | | // 详情 |
| | | const getList = () => { |
| | | getalgorithmList(params.value).then(res => { |
| | | loading.value = true; |
| | | detailData.value = res.data.data.records; |
| | | total.value = res.data.data.total; |
| | | 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); |
| | | }); |
| | | }; |
| | | loading.value = false |
| | | }, 1000) |
| | | }) |
| | | } |
| | | // 机巢查询 |
| | | const getDeviceList = () => { |
| | | console.log('userAreaCode', userAreaCode.value) |
| | | // { areaCode: userAreaCode.value } |
| | | selectDeviceList().then(res => { |
| | | jcoptions.value = res.data.data; |
| | | }); |
| | | }; |
| | | 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 handleDateClear = () => { |
| | | taskData.value = '' // 清空绑定的日期数据 |
| | | params.value.start_date = null // 重置开始日期参数 |
| | | params.value.end_date = null // 重置结束日期参数 |
| | | getList() |
| | | } |
| | | const handleSearch = () => { |
| | | getList(); |
| | | }; |
| | | |
| | | if (taskData.value === null) { |
| | | params.value.start_date = null // 重置开始日期参数 |
| | | params.value.end_date = null // 重置结束日期参数 |
| | | } |
| | | |
| | | getList() |
| | | |
| | | } |
| | | const handleReset = () => { |
| | | params.value.start_date = null; |
| | | params.value.end_date = null; |
| | | params.value.device_name = ''; |
| | | params.value.name = ''; |
| | | getList(); |
| | | }; |
| | | 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; |
| | | }; |
| | | showDetail.value = false |
| | | activeItem.value = null |
| | | params.value.current = 1 |
| | | params.value.size = 15 |
| | | params.value.name = '' |
| | | } |
| | | // 分页大小改变 |
| | | const handleSizeChange = val => { |
| | | params.size = val; |
| | | getList(); |
| | | }; |
| | | params.size = val |
| | | getList() |
| | | } |
| | | // 页码改变 |
| | | const handleCurrentChange = val => { |
| | | params.current = val; |
| | | getList(); |
| | | }; |
| | | params.current = val |
| | | getList() |
| | | } |
| | | onMounted(() => { |
| | | requestDictionary(); |
| | | getDeviceList(); |
| | | }); |
| | | requestDictionary() |
| | | getDeviceList() |
| | | }) |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .algorithContainer { |
| | | height: 100%; |
| | | overflow: auto; |
| | | height: calc(100vh - 130px); |
| | | } |
| | | |
| | | .algorithItem { |
| | | // padding: 20px; |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | overflow-x: hidden; |
| | | display: grid; |
| | | grid-template-columns: repeat(5, 1fr); |
| | | // gap: 13px; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | |
| | | .item { |
| | | height: 269px; |
| | | 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%; |
| | |
| | | margin-top: 23px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .stopStatus { |
| | | width: 116px; |
| | | height: 43px; |
| | |
| | | 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: 24px; |
| | | gap: 14px; |
| | | |
| | | .imgitem { |
| | | border-radius: 12px 12px 0 0; |
| | | overflow: hidden; |
| | | |
| | | .el-image { |
| | | width: 100%; |
| | | height: 200px; |
| | | height: 170px; |
| | | display: block; |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | |
| | | .info { |
| | | 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%); |
| | |
| | | font-size: 16px; |
| | | color: #363636; |
| | | } |
| | | |
| | | .time { |
| | | margin-right: 12px; |
| | | font-weight: 500; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .search { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | //justify-content: space-between; |
| | | } |
| | | |
| | | .searchBox { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 27px; |
| | | |
| | | .itemchild { |
| | | white-space: nowrap; |
| | | margin-right: 5px; |
| | |
| | | font-size: 14px; |
| | | color: #363636; |
| | | } |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 49px; |
| | | margin-right: 40px; |
| | | } |
| | | } |
| | | |
| | | .search-btn { |
| | | display: flex; |
| | | } |
| | | |
| | | .filter-item { |
| | | width: 218px; |
| | | } |
| | | } |
| | | |
| | | .pageStyle { |
| | | margin-top: 32px; |
| | | display: flex; |