仓储物流模块。 仓储页面菜单组件。

sub-operation-service/src/views/warehouseLogistics/components/common.vue

@@ -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>

sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue

@@ -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>

sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue

@@ -1,55 +1,70 @@
 <template>
-  <page-layout :menus="state.menus">
-    <el-row :gutter="20">
-      <el-col v-for="(item, index) in state.data" :key="index" :span="12">
-        <el-card class="storage-card" shadow="hover">
-          <div class="storage-content">
-            <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">
-                <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>
+  <!--  <page-layout :menus="state.menus"> </page-layout>-->
+  <section>
+    <common>
+      <template #main>
+        <el-card shadow="none" style="border-radius: 14px">
+          <div class="tabs">
+            <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div>
+            <div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 2 }" @click.stop="currentTab = 2">冷库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>
+            <div class="tab">&nbsp;</div>
           </div>
         </el-card>
-      </el-col>
-    </el-row>
-
-    <page-pagination :total="20" @current-change="currentChange" />
-  </page-layout>
+        <el-row :gutter="20" style="margin-top: 10px">
+          <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+            <el-card class="storage-card" shadow="hover">
+              <div class="storage-content">
+                <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>
 <script setup name="page-menu">
 import { ref, reactive, watch } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
+import Common from '../components/common.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -84,9 +99,35 @@ const state = reactive({
       price: '600.0',
       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) => {
   state.query.current = current;
 };
@@ -99,6 +140,20 @@ const toLink = (row) => {
 };
 </script>
 <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 {
   position: relative;
   overflow: hidden;