xiabin

sub-operation-service/src/components/common/leftMenu.vue

@@ -43,6 +43,11 @@
 import { ref, reactive, onMounted, watch } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+import { useGetCommonData } from '../../store/modules/common';
+import { productFactory } from './modul';
+
+const store = useGetCommonData();
+
 const route = useRoute();
 const router = useRouter();
 
@@ -68,8 +73,8 @@ let currentIndex = ref(0);
 let currentCIndex = ref('');
 
 const toLink = (index) => {
+  productFactory(props.menus[index].title);
   currentIndex.value = index;
-  console.log(leftMenu);
   if (leftMenu.value[index].children.length > 0) {
     window.sessionStorage.setItem('currentOpen', index);
   }

sub-operation-service/src/components/common/modul.js

@@ -0,0 +1,27 @@
+import { useGetCommonData } from '../../store/modules/common';
+const store = useGetCommonData();
+
+// 仓储
+function createProductA() {
+  store.getData({ title: '仓储' });
+}
+
+// 物流
+function createProductB() {
+  store.getData1({ title: '物流' });
+}
+
+// 工厂函数
+export function productFactory(title) {
+  switch (title) {
+    case '仓储':
+      return createProductA();
+    case '物流':
+      return createProductB();
+    default:
+      throw new Error('未知产品类型');
+  }
+}
+
+// 可选：直接导出具体产品构造函数
+export { createProductA, createProductB };

sub-operation-service/src/store/modules/common.js

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { constantRoutes, notFoundRouter } from '@/router';
+import { createAsyncRoutes, filterAsyncRoutes, filterKeepAlive } from '@/utils/router';
+import { useUserStore } from '@/store/modules/user';
+import { getTree } from '@/utils';
+
+export const useGetCommonData = defineStore('commonData', {
+  state: () => ({
+    data: {},
+  }),
+  actions: {
+    //仓储调用方法
+    getData(res) {
+      useGetCommonData().$state.data = res;
+    },
+    //物流调用方法
+    getData1(res) {
+      useGetCommonData().$state.data = res;
+    },
+  },
+  getters: {},
+});

sub-operation-service/src/views/packaging/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/packaging/components/leftMenu.vue

@@ -0,0 +1,192 @@
+<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/packaging/sorting',
+    isOpen: false,
+    children: [
+      // {
+      //   name: 'fieldInspection',
+      //   title: '田间监测',
+      //   icon: 'menu1.png',
+      //   path: '/sub-operation-service/smartFarm/fieldInspection',
+      // },
+    ],
+  },
+  {
+    name: 'control',
+    title: '包装',
+    icon: 'menu3.png',
+    path: '/sub-operation-service/packaging/sorting',
+    isOpen: false,
+    children: [],
+  },
+]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref('');
+
+const toLink = (index) => {
+  currentIndex.value = index;
+  if (leftMenu[index].children.length > 0) {
+    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);
+    window.sessionStorage.setItem('currentParent', index);
+  }
+};
+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(() => {
+  currentIndex.value = window.sessionStorage.getItem('currentParent') ? Number(window.sessionStorage.getItem('currentParent')) : 0;
+  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') {
+    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/packaging/sorting.vue

@@ -1,19 +1,256 @@
 <template>
-  <div>131</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-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';
 
-<script setup>
+const route = useRoute();
-import { ref } from 'vue';
+const router = useRouter();
 
-/* --------------- data --------------- */
+const state = reactive({
-// #region
+  menus: warehouseLogisticsRoutes[0].children,
+  query: {
+    current: 1,
+  },
+  data: [
+    {
+      imageUrl: '/storage1.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '1',
+    },
+    {
+      imageUrl: '/storage2.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '2',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      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: '',
+    },
+  ],
+});
 
-// #endregion
+const currentTab = ref(0);
 
-/* --------------- methods --------------- */
+const currentChange = (current) => {
-// #region
+  state.query.current = current;
+};
 
-// #endregion
+const toLink = (row) => {
+  router.push({
+    path: '/sub-operation-service/warehouse-detail',
+    query: { id: row?.id ?? '100' },
+  });
+};
 </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;
+  margin-bottom: 20px;
+  border: 0;
+  border-radius: 24px;
+}
+.storage-content {
+  @include flex-column;
 
-<style lang="scss" scoped></style>
+  gap: 16px;
+  &-top {
+    @include flex-row;
+
+    align-items: center;
+  }
+}
+.storage-image {
+  margin-right: 16px;
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+.storage-info {
+  padding-right: 50px;
+  flex: 1;
+  cursor: pointer;
+}
+.storage-title,
+.storage-desc,
+.storage-tags,
+.storage-location {
+  overflow: hidden;
+  margin: 10px 0;
+  width: 100%;
+}
+.storage-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #000000;
+  @include ellipsis;
+}
+.storage-desc {
+  font-size: 16px;
+  color: #999999;
+  @include ellipsis;
+  i {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+  }
+}
+.storage-tags {
+  span {
+    margin-right: 10px;
+  }
+}
+.storage-location {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 400;
+  color: #000000;
+}
+.storage-price {
+  display: flex;
+  align-items: center;
+  &-left {
+    flex: 1;
+  }
+}
+.price-label {
+  margin-right: 10px;
+  font-size: 16px;
+  color: #999999;
+}
+.price-amount {
+  font-size: 20px;
+  font-weight: 700;
+  color: $color-primary;
+}
+.contact-btn {
+  width: 152px;
+  height: 48px;
+  font-size: 20px;
+  border-radius: 8px;
+  background: #25bf82 !important;
+  :deep(.el-icon) {
+    margin-right: 10px;
+  }
+}
+.rank-badge {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 80px;
+  height: 80px;
+}
+</style>

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

@@ -5,7 +5,7 @@
       <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" style="color: rgba(153, 153, 153, 1)">仓储分类({{ data.title }})</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>
@@ -65,6 +65,10 @@ import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
 import Common from '../components/common.vue';
+import { useGetCommonData } from '../../../store/modules/common';
+import { storeToRefs } from 'pinia';
+const store = useGetCommonData();
+const { data } = storeToRefs(store);
 
 const route = useRoute();
 const router = useRouter();