From ab96a919c2cc512f0e976794ec8152e87c748733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9A=E4=BF=8A=E6=97=AD?= <398847134@qq.com>
Date: Wed, 28 May 2025 14:20:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=93=E5=82=A8=E7=89=A9=E6=B5=81=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E3=80=82=20=E4=BB=93=E5=82=A8=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/warehouseLogistics/messageBox.png  | Bin 0 -> 1392 bytes
 .../warehouseLogistics/components/common.vue  | 122 +++++++++++
 .../components/leftMenu.vue                   | 189 ++++++++++++++++++
 .../warehouseLogistics/warehouse/index.vue    | 141 +++++++++----
 4 files changed, 409 insertions(+), 43 deletions(-)
 create mode 100644 sub-operation-service/src/assets/images/warehouseLogistics/messageBox.png
 create mode 100644 sub-operation-service/src/views/warehouseLogistics/components/common.vue
 create mode 100644 sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue

diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/messageBox.png b/sub-operation-service/src/assets/images/warehouseLogistics/messageBox.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dc2daf07f7bf53bcfe714092992263c1b34da31
GIT binary patch
literal 1392
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!SkfJR9T^xl_H+M9WCijWi-X*q
z7}lMWc?o2H4e$wZbuaMwKMF=z2yn3$IRI0`vXUUbU<O7$(Z51J{)qj)D0t<}&#&wv
z&38Xdbo#cMzsT+0;k_nIvwqd^UaRLkdG23#(B;l!;YXED^9WxTxOMQtMk9N3(@S3-
zZ&#PKS}C({o$mKjZ0(-sb6xZcw%+9KKhZnMV0vxW^0`&7tUEH(Ht&#HaQ29^3hS!2
zk6eXYjHgP@zU|17ntxoURe5qrR-LO_-ut*G3#E&_-hJLszCX#b+E(uEotZYwD?V)U
zX>7GIW?*1S_jGX#i8%ardT9A$1A*4L*E%PeTv?KNxnO4D=`%ad_~cHX2?UZ~tjk4z
zpD0pVKIzY`-zJlu*FE>RCfTc!>Dl&5hlf2qDSMZh>|4Iv-G!#}Pv`8M_F}8!T!)&4
zT{rXXZ9}+>pA`Hop84i&cKgD{oW!=NCc7C-L{?<P9f`Zgv3d2jbr!Sl?_$znYFMCl
z+HX!q6VIxhsZaJZOPacUe=eKMnzQxNpWM6?Yx-ok7F;^WHz7a$*Y&ARe3e|rW((Mh
zRw~v?zhky*c-(Mrelc57);?eM9qc<pGZp`6NB>~teX>61>nG-%W)=kw))JS`;i4T3
zU0Y0f927I#Gxtj*@G+NlGkO^$^h-QYVDp)LdE@@g{LWc_e&0=a^fbHlg7nPVuk+62
z9Afw+(Yxn|{lnE^Z1XQ%KVGCI=QKO-uiKJch6$2})_;Z1PSI$V*YMNvKRQ{%Z=Y(=
z+z<zw&a{2n&730NH5=krdgr%sy--V=@4HZS#nZQpzof#ZJ#Z3lGWA+=??^*nQMTLf
z{X8qQ8~p8hY^#2S%G&(5`1g~4rsVO4;9o_iYwn&o@cOD&@7rGY=@N$;YLlKTbTD2&
z%JAG^K|GH^BjfD7O8=PVhY6H*F?<se&D`t0V98fOhWWGQALyu`u9CD*nCe=-`D6Hz
zExUWK>reN5#?a{fjA22X5$lBQKt^LtaYLWxNtp*tDO?ZkIA(v!n)!Ww_q|tr8@{<k
z-+Gz5YW~WTlNNt<tNnD-txb;c2Y-6zSN~_XLbqNE4cHZSeCqDUXZqKjJCPDN>+gk+
zdsMEUUTd-G;iI1s{tB;F-K(g)p7r~Z^NooA49{;fMg;x7z5tj>7(8A5T-G@yGywo>
C@sLOW

literal 0
HcmV?d00001

diff --git a/sub-operation-service/src/views/warehouseLogistics/components/common.vue b/sub-operation-service/src/views/warehouseLogistics/components/common.vue
new file mode 100644
index 0000000..847afce
--- /dev/null
+++ b/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>
diff --git a/sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue b/sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue
new file mode 100644
index 0000000..3090fc8
--- /dev/null
+++ b/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>
diff --git a/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue b/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue
index 542541f..c5dfab6 100644
--- a/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue
+++ b/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;