仓储物流模块。 仓储页面菜单组件。
This commit is contained in:
parent
cd166e3acb
commit
ab96a919c2
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<div class="smartFarm-common-warp">
|
||||||
|
<div class="smartFarm-common-content">
|
||||||
|
<div class="left-menu">
|
||||||
|
<slot v-if="$slots.left" name="left"></slot>
|
||||||
|
<template v-else>
|
||||||
|
<left-menu :menus="menus"></left-menu>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="common-content">
|
||||||
|
<slot v-if="$slots.main" name="main"></slot>
|
||||||
|
<template v-else></template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, watch } from 'vue';
|
||||||
|
import leftMenu from './leftMenu.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
currentName: { type: String, default: 'agricultural' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const menus = reactive([
|
||||||
|
{
|
||||||
|
name: 'supplier',
|
||||||
|
title: '农业环境监测',
|
||||||
|
icon: 'menu1.png',
|
||||||
|
path: '/sub-operation-service/smartFarm/main',
|
||||||
|
isOpen: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'supplier',
|
||||||
|
title: '田间监测',
|
||||||
|
path: '/sub-operation-service/smartFarm/inspection',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'supplier',
|
||||||
|
title: '水质监测',
|
||||||
|
path: '/sub-operation-service/ecommerce-supplier',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'supplier',
|
||||||
|
title: '病虫害监测',
|
||||||
|
path: '/sub-operation-service/ecommerce-supplier',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '生产管理控制',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '',
|
||||||
|
isOpen: false,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '一体育苗',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '/sub-operation-service/smartFarm/manageControl/growSeedlings',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '病虫害预防',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '/sub-operation-service/smartFarm/manageControl/pestPrevention',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '喷灌滴灌',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '排集水控制',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '/sub-operation-service/smartFarm/manageControl/drainageControl',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '开窗卷帘',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '/sub-operation-service/smartFarm/manageControl/openCurtain',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.smartFarm-common-warp {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 230px);
|
||||||
|
text-align: center;
|
||||||
|
.smartFarm-common-content {
|
||||||
|
width: $width-main;
|
||||||
|
margin: auto;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: auto;
|
||||||
|
width: $width-main;
|
||||||
|
height: 100%;
|
||||||
|
.left-menu,
|
||||||
|
.common-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px;
|
||||||
|
height: calc(100% - 16px);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.left-menu {
|
||||||
|
width: 240px;
|
||||||
|
background: $color-fff;
|
||||||
|
}
|
||||||
|
.common-content {
|
||||||
|
margin-left: 16px;
|
||||||
|
width: calc(100% - 240px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
<template>
|
||||||
|
<div class="smartFarm-left-menu-warp">
|
||||||
|
<div class="left-menu">
|
||||||
|
<div
|
||||||
|
v-for="(n, index) in leftMenu"
|
||||||
|
:key="index"
|
||||||
|
class="left-menu-item"
|
||||||
|
style="position: relative"
|
||||||
|
@click.stop="
|
||||||
|
toLink(index);
|
||||||
|
openList(index);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="display: flex; justify-content: flex-start; align-items: center">
|
||||||
|
<div class="item-img">
|
||||||
|
<img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
|
||||||
|
</div>
|
||||||
|
<span :class="currentIndex === index ? 'active' : ''" class="item-title">{{ n.title }}</span>
|
||||||
|
<img v-if="n.children.length > 0 && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
|
||||||
|
<img
|
||||||
|
v-if="n.children.length > 0 && !n.isOpen"
|
||||||
|
alt=""
|
||||||
|
:src="getAssetsFile('images/smartFarm/down_1@2x.png')"
|
||||||
|
class="isOpen fz"
|
||||||
|
@click.stop="openList(index)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="n.children.length > 0 && n.isOpen" class="item-children">
|
||||||
|
<div v-for="(item, indexC) in n.children" :key="indexC">
|
||||||
|
<ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
|
||||||
|
<li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
|
||||||
|
<div class="dot"></div>
|
||||||
|
{{ item.title }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, watch } from 'vue';
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const leftMenu = reactive([
|
||||||
|
{
|
||||||
|
name: 'inspection',
|
||||||
|
title: '仓储',
|
||||||
|
icon: 'menu1.png',
|
||||||
|
path: '/sub-operation-service/warehouse',
|
||||||
|
isOpen: false,
|
||||||
|
children: [
|
||||||
|
// {
|
||||||
|
// name: 'fieldInspection',
|
||||||
|
// title: '田间监测',
|
||||||
|
// icon: 'menu1.png',
|
||||||
|
// path: '/sub-operation-service/smartFarm/fieldInspection',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'control',
|
||||||
|
title: '物流',
|
||||||
|
icon: 'menu3.png',
|
||||||
|
path: '',
|
||||||
|
isOpen: false,
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
let currentIndex = ref(0);
|
||||||
|
let currentCIndex = ref('');
|
||||||
|
|
||||||
|
const toLink = (index) => {
|
||||||
|
currentIndex.value = index;
|
||||||
|
window.sessionStorage.setItem('currentOpen', index);
|
||||||
|
if (index === 0) {
|
||||||
|
window.sessionStorage.setItem('currentChild', 'main');
|
||||||
|
}
|
||||||
|
currentCIndex.value = '';
|
||||||
|
let path = index !== undefined ? leftMenu[index].path : null;
|
||||||
|
if (path) {
|
||||||
|
router.push(path);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const toLinkSub = (index, name) => {
|
||||||
|
console.info('index', index);
|
||||||
|
console.info('currentChild', name);
|
||||||
|
currentCIndex.value = name;
|
||||||
|
window.sessionStorage.setItem('currentChild', name);
|
||||||
|
let path;
|
||||||
|
for (let i in leftMenu[index].children) {
|
||||||
|
if (leftMenu[index].children[i].name === name) {
|
||||||
|
path = leftMenu[index].children[i].path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (path) {
|
||||||
|
console.info('path', path);
|
||||||
|
router.push(path);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const openList = (index) => {
|
||||||
|
currentIndex.value = index;
|
||||||
|
leftMenu[index].isOpen = !leftMenu[index].isOpen;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const currentMenu = window.sessionStorage.getItem('currentOpen');
|
||||||
|
if (currentMenu) {
|
||||||
|
for (let i in leftMenu) {
|
||||||
|
leftMenu[i].isOpen = i === currentMenu;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const currentChild = window.sessionStorage.getItem('currentChild');
|
||||||
|
if (currentChild && currentChild === 'main') {
|
||||||
|
currentIndex.value = 0;
|
||||||
|
currentCIndex.value = '';
|
||||||
|
} else if (currentChild) {
|
||||||
|
currentCIndex.value = currentChild;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fz {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.isOpen {
|
||||||
|
position: absolute;
|
||||||
|
right: -24px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: $color-main;
|
||||||
|
}
|
||||||
|
.smartFarm-left-menu-warp {
|
||||||
|
padding: 0 30px 0 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.left-menu {
|
||||||
|
.left-menu-item {
|
||||||
|
padding: 16px 0;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active {
|
||||||
|
color: $color-main;
|
||||||
|
}
|
||||||
|
.item-img,
|
||||||
|
.item-title {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.item-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
padding-left: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.item-children {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
.dot {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 15px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 90px;
|
||||||
|
background-color: black;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin: 5px auto;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,55 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<page-layout :menus="state.menus">
|
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||||
<el-row :gutter="20">
|
<section>
|
||||||
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
<common>
|
||||||
<el-card class="storage-card" shadow="hover">
|
<template #main>
|
||||||
<div class="storage-content">
|
<el-card shadow="none" style="border-radius: 14px">
|
||||||
<div class="storage-content-top" @click="toLink(item)">
|
<div class="tabs">
|
||||||
<el-image :src="item.imageUrl" fit="cover" class="storage-image" />
|
<div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div>
|
||||||
<div class="storage-info">
|
<div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</div>
|
||||||
<h3 class="storage-title">{{ item.title }}</h3>
|
<div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>
|
||||||
<div class="storage-desc">
|
<div class="tab cursor" :class="{ active: currentTab === 2 }" @click.stop="currentTab = 2">冷库</div>
|
||||||
<span>{{ item.description }}</span>
|
<div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>
|
||||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
<div class="tab"> </div>
|
||||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
|
||||||
</div>
|
|
||||||
<div class="storage-tags">
|
|
||||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">延长仓储</el-tag>
|
|
||||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>
|
|
||||||
</div>
|
|
||||||
<div class="storage-location">
|
|
||||||
<el-icon><Location /></el-icon>
|
|
||||||
{{ item.location }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="storage-price">
|
|
||||||
<div class="storage-price-left">
|
|
||||||
<span class="price-label">报价</span>
|
|
||||||
<span class="price-amount">¥{{ item.price }}/间/月</span>
|
|
||||||
</div>
|
|
||||||
<el-button type="success" class="contact-btn">
|
|
||||||
<el-icon><ChatDotRound /></el-icon>
|
|
||||||
<span>联系卖家</span>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.rank" class="rank-badge">
|
|
||||||
<!-- {{ item.rank }}-->
|
|
||||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
<el-row :gutter="20" style="margin-top: 10px">
|
||||||
</el-row>
|
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||||
|
<el-card class="storage-card" shadow="hover">
|
||||||
<page-pagination :total="20" @current-change="currentChange" />
|
<div class="storage-content">
|
||||||
</page-layout>
|
<div class="storage-content-top" @click="toLink(item)">
|
||||||
|
<el-image :src="item.imageUrl" fit="cover" class="storage-image" />
|
||||||
|
<div class="storage-info">
|
||||||
|
<h3 class="storage-title">{{ item.title }}</h3>
|
||||||
|
<div class="storage-desc">
|
||||||
|
<span>{{ item.description }}</span>
|
||||||
|
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||||
|
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||||
|
</div>
|
||||||
|
<div class="storage-tags">
|
||||||
|
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">延长仓储</el-tag>
|
||||||
|
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="storage-location">
|
||||||
|
<el-icon><Location /></el-icon>
|
||||||
|
{{ item.location }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storage-price">
|
||||||
|
<div class="storage-price-left">
|
||||||
|
<span class="price-label">报价</span>
|
||||||
|
<span class="price-amount">¥{{ item.price }}/间/月</span>
|
||||||
|
</div>
|
||||||
|
<el-button type="success" class="contact-btn">
|
||||||
|
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||||
|
<span>联系卖家</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.rank" class="rank-badge">
|
||||||
|
<!-- {{ item.rank }}-->
|
||||||
|
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<page-pagination :total="20" @current-change="currentChange" />
|
||||||
|
</template>
|
||||||
|
</common>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="page-menu">
|
<script setup name="page-menu">
|
||||||
import { ref, reactive, watch } from 'vue';
|
import { ref, reactive, watch } from 'vue';
|
||||||
import { getAssetsFile } from '@/utils';
|
import { getAssetsFile } from '@/utils';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
import Common from '../components/common.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -84,9 +99,35 @@ const state = reactive({
|
|||||||
price: '600.0',
|
price: '600.0',
|
||||||
rank: '3',
|
rank: '3',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
imageUrl: '/storage3.jpg',
|
||||||
|
title: '果蔬保鲜仓储',
|
||||||
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||||
|
location: '临沧市-耿马县',
|
||||||
|
price: '600.0',
|
||||||
|
rank: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageUrl: '/storage3.jpg',
|
||||||
|
title: '果蔬保鲜仓储',
|
||||||
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||||
|
location: '临沧市-耿马县',
|
||||||
|
price: '600.0',
|
||||||
|
rank: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageUrl: '/storage3.jpg',
|
||||||
|
title: '果蔬保鲜仓储',
|
||||||
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||||
|
location: '临沧市-耿马县',
|
||||||
|
price: '600.0',
|
||||||
|
rank: '',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const currentTab = ref(0);
|
||||||
|
|
||||||
const currentChange = (current) => {
|
const currentChange = (current) => {
|
||||||
state.query.current = current;
|
state.query.current = current;
|
||||||
};
|
};
|
||||||
@ -99,6 +140,20 @@ const toLink = (row) => {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.tabs {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 18px;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.cursor {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: rgba(37, 191, 130, 1);
|
||||||
|
}
|
||||||
.storage-card {
|
.storage-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user