修改头部和菜单导航栏，添加部分路由。

sub-operation-service/src/layouts/component/Header/index.vue

@@ -75,33 +75,33 @@ const keyword = ref('');
 
 const meuns = ref([
   {
-    label: '智慧种植',
-    path: '/sub-operation-service/ecommerce',
+    label: '综合看板',
+    path: '/sub-operation-service/dashboard',
+  },
+  {
+    label: '智慧种植',
+    path: '/sub-operation-service/smartFarm',
   },
-  // {
-  //   label: '农事服务',
-  //   path: '/sub-operation-service/ecommerce',
-  // },
   {
     label: '电商交易',
     path: '/sub-operation-service/ecommerce',
   },
   {
     label: '涉农金融',
-    path: '/sub-operation-service/ecommerce',
+    path: '/sub-operation-service/ruralFinance',
   },
 
   {
     label: '分拣包装',
-    path: '/sub-operation-service/ecommerce',
+    path: '/sub-operation-service/packaging',
   },
   {
     label: '仓储物流',
-    path: '/sub-operation-service/ecommerce',
+    path: '/sub-operation-service/warehouseLogistics',
   },
   {
-    label: '公共品牌运营',
-    path: '/sub-operation-service/ecommerce',
+    label: '公共品牌',
+    path: '/sub-operation-service/brand',
   },
 ]);
 
@@ -136,7 +136,7 @@ const toCart = () => {
         border: none !important;
       }
       .el-menu-item {
-        font-size: 24px;
+        font-size: 20px;
       }
       .el-menu-item:hover {
         background: none !important;
@@ -264,7 +264,7 @@ const toCart = () => {
           justify-content: space-around;
           border: none;
           .el-menu-item {
-            font-size: 24px;
+            font-size: 20px;
           }
         }
       }

sub-operation-service/src/router/index.js

@@ -27,7 +27,7 @@ export const constantRoutes = [
     path: '/sub-operation-service',
     name: 'layout',
     component: Layout,
-    redirect: '/sub-operation-service/ecommerce',
+    redirect: '/sub-operation-service/smartFarm',
     meta: { title: '运营服务' },
     children: [
       {
@@ -36,6 +36,93 @@ export const constantRoutes = [
         name: 'home',
         meta: { title: '首页' },
       },
+      {
+        path: '/sub-operation-service/dashboard',
+        component: () => import('@/views/dashboard/index.vue'),
+        name: 'dashboard',
+        meta: { title: '综合看板' },
+      },
+    ],
+  },
+  {
+    path: '/sub-operation-service/smartFarm',
+    name: 'smartFarm',
+    component: Layout,
+    redirect: '/sub-operation-service/smartFarm/main',
+    meta: { title: '智慧种植' },
+    children: [
+      {
+        path: '/sub-operation-service/smartFarm/main',
+        component: () => import('@/views/smartFarm/index.vue'),
+        name: 'smartFarmMain',
+        meta: { title: '智慧种植首页' },
+      },
+      {
+        path: '/sub-operation-service/smartFarm/fieldInspection',
+        component: () => import('@/views/smartFarm/fieldInspection/index.vue'),
+        name: 'fieldInspection',
+        meta: { title: '田间检测' },
+      },
+    ],
+  },
+  {
+    path: '/sub-operation-service/ruralFinance',
+    name: 'ruralFinance',
+    component: Layout,
+    redirect: '/sub-operation-service/ruralFinance/index',
+    meta: { title: '涉农金融' },
+    children: [
+      {
+        path: '/sub-operation-service/ruralFinance/index',
+        component: () => import('@/views/ruralFinance/index.vue'),
+        name: 'ruralFinanceMain',
+        meta: { title: '涉农金融首页' },
+      },
+    ],
+  },
+  {
+    path: '/sub-operation-service/packaging',
+    name: 'packaging',
+    component: Layout,
+    redirect: '/sub-operation-service/packaging/index',
+    meta: { title: '分拣包装' },
+    children: [
+      {
+        path: '/sub-operation-service/packaging/index',
+        component: () => import('@/views/packaging/index.vue'),
+        name: 'packagingMain',
+        meta: { title: '分拣包装首页' },
+      },
+    ],
+  },
+  {
+    path: '/sub-operation-service/warehouseLogistics',
+    name: 'warehouseLogistics',
+    component: Layout,
+    redirect: '/sub-operation-service/warehouseLogistics/index',
+    meta: { title: '仓储物流' },
+    children: [
+      {
+        path: '/sub-operation-service/warehouseLogistics/index',
+        component: () => import('@/views/warehouseLogistics/index.vue'),
+        name: 'warehouseLogisticsMain',
+        meta: { title: '仓储物流首页' },
+      },
+    ],
+  },
+  {
+    path: '/sub-operation-service/brand',
+    name: 'brand',
+    component: Layout,
+    redirect: '/sub-operation-service/brand/index',
+    meta: { title: '公共品牌' },
+    children: [
+      {
+        path: '/sub-operation-service/brand/index',
+        component: () => import('@/views/brand/index.vue'),
+        name: 'brandMain',
+        meta: { title: '公共品牌首页' },
+      },
     ],
   },
   {

sub-operation-service/src/views/brand/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

sub-operation-service/src/views/dashboard/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

sub-operation-service/src/views/packaging/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

sub-operation-service/src/views/ruralFinance/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="ecommerce-common-warp">
+    <div class="ecommerce-common-content">
+      <div class="left-menu">
+        <slot v-if="$slots.left" name="left"></slot>
+        <template v-else>
+          <leftMenu :current-name="currentName"></leftMenu>
+        </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' },
+});
+</script>
+<style lang="scss" scoped>
+.ecommerce-common-warp {
+  width: 100%;
+  height: calc(100vh - 230px);
+  text-align: center;
+  .ecommerce-common-content {
+    width: $width-main;
+    margin: auto;
+    height: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    .left-menu,
+    .common-content {
+      height: calc(100% - 16px);
+      border-radius: 8px;
+      padding: 8px;
+      overflow-y: auto;
+    }
+    .left-menu {
+      width: 240px;
+      background: $color-fff;
+    }
+    .common-content {
+      width: calc(100% - 240px);
+      margin-left: 16px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,184 @@
+<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">
+        <div style="display: flex; justify-content: flex-start; align-items: center" @click.stop="toLink(index)">
+          <div class="item-img">
+            <img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
+          </div>
+          <span :class="n.isOpen ? 'active' : ''" class="item-title">{{ n.title }}</span>
+          <img
+            v-if="n.children && n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/closing.png')"
+            class="isOpen"
+            @click.stop="openList(index)"
+          />
+          <img
+            v-if="n.children && !n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
+            class="isOpen fz"
+            @click.stop="openList(index)"
+          />
+        </div>
+        <div v-if="n.children && n.isOpen" class="item-children">
+          <div v-for="(item, indexC) in n.children" :key="indexC">
+            <ul style="list-style-type: disc !important; padding-left: 40px; text-align: left; overflow: visible">
+              <li :class="indexC === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, indexC)">
+                <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 props = defineProps({
+//   currentName: { type: String, default: 'dashboard' },
+// });
+
+const leftMenu = reactive([
+  {
+    name: 'supplier',
+    title: '农业环境监测',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/smartFarm/main',
+    isOpen: true,
+    children: [
+      {
+        name: 'supplier',
+        title: '田间监测',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/smartFarm/fieldInspection',
+      },
+      {
+        name: 'supplier',
+        title: '水质监测',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/ecommerce-supplier',
+      },
+      {
+        name: 'supplier',
+        title: '病虫害监测',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/ecommerce-supplier',
+      },
+    ],
+  },
+  {
+    name: 'purchaser',
+    title: '生产管理控制',
+    icon: 'menu3.png',
+    path: '/sub-operation-service/ecommerce-purchaser',
+    isOpen: false,
+    children: [],
+  },
+]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref(-1);
+
+// watch(
+//   () => props.currentName,
+//   () => {
+//     console.info('currentName', props.currentName);
+//     currentIndex.value = leftMenu.findIndex((m) => {
+//       return m.name === props.currentName;
+//     });
+//   },
+//   { deep: true, immediate: true }
+// );
+
+const toLink = (index) => {
+  currentIndex.value = index;
+  currentCIndex.value = -1;
+  let path = index !== undefined ? leftMenu[index].path : null;
+  if (path) {
+    router.push(path);
+  }
+};
+const toLinkSub = (index, c) => {
+  currentCIndex.value = c;
+  let path = leftMenu[index].children[c].path;
+  if (path) {
+    router.push(path);
+  }
+};
+const openList = (index) => {
+  currentIndex.value = index;
+  leftMenu[index].isOpen = !leftMenu[index].isOpen;
+};
+</script>
+<style lang="scss" scoped>
+.fz {
+  transform: rotate(180deg);
+}
+.isOpen {
+  position: absolute;
+  right: -24px;
+  height: 20px;
+  width: 20px;
+}
+.active {
+  color: $color-main;
+}
+.smartFarm-left-menu-warp {
+  width: 100%;
+  height: 100%;
+  padding: 0 30px;
+  .left-menu {
+    .left-menu-item {
+      width: 100%;
+      padding: 16px 0;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+      }
+      .item-title {
+        font-size: 18px;
+        font-weight: 400;
+        padding-left: 8px;
+      }
+      .item-children {
+        text-align: center;
+        font-size: 16px;
+        margin-top: 8px;
+        transition: transform 0.3s ease;
+        .dot {
+          display: inline-block;
+          height: 4px;
+          margin-right: 15px;
+          width: 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/smartFarm/fieldInspection/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <section>
+    <common>
+      <template #main>
+        <div>农田监测</div>
+      </template>
+    </common>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Common from '../components/common.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

sub-operation-service/src/views/smartFarm/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <section>
+    <common>
+      <template #main>
+        <div>
+          <el-card shadow="hover"> </el-card>
+        </div>
+      </template>
+    </common>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Common from './components/common.vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped></style>