Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025-6-11

Browse Source
This commit is contained in:
姚俊旭 2025-06-11 14:38:40 +08:00
parent f97b473d31
commit 09b3894966
23 changed files with 715 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sub-operation-service/src/apis/brand.js
View File

@ -39,6 +39,12 @@ export function authList(params) {
params,
});
}
export function authDetail(id, params) {
return request(`brand/brandbase/detail/${id}`, {
method: 'GET',
params,
});
}
export function saveRecords(data) {
return request('brand/applicationrecord/save', {

BIN
sub-operation-service/src/assets/images/mockPic/nyzc0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 971 KiB

BIN
sub-operation-service/src/assets/images/mockPic/nyzc1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 601 KiB

BIN
sub-operation-service/src/assets/images/mockPic/nyzc2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 683 KiB

BIN
sub-operation-service/src/assets/images/mockPic/nyzc3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

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

@ -15,12 +15,14 @@
</div>
<div class="layout-header-top-right">
<el-badge :hidden="goodNum < 1" :value="goodNum" :max="99" class="item" :offset="[-3, 10]">
<span class="block-icon" @click="toCart">
<div class="iconfont icon-shopcar" style="font-size: 12px"></div>
<span>购物车</span>
</span>
<div style="display: flex" @click="toCart">
<div class="iconfont icon-shopcar" style="font-size: 14px; margin: 0 5px; color: #25bf82; font-weight: bold"></div>
<div>购物车</div>
</div>
</el-badge>
<el-badge :hidden="true" :value="0" :max="99" class="item" :offset="[-3, 10]">
<span>商家中心</span>
</el-badge>
<span>商家中心</span>
<span @click="toUserCenter">个人中心</span>
<span class="block-icon" @click="toHome">
<div class="iconfont icon-home" style="font-size: 12px"></div>
@ -336,4 +338,15 @@ const toCart = () => {
.layout-header-bottom-right {
margin-top: 0;
}
.layout-header-top-right {
display: flex;
.item {
margin-left: 25px;
font-size: 12px;
text-align: center;
color: $color-000;
line-height: 36px;
cursor: pointer;
}
}
</style>

90
sub-operation-service/src/router/index.js
View File

@ -121,6 +121,55 @@ export const constantRoutes = [
},
],
},
{
path: '/sub-operation-service/farmService',
component: Layout,
name: 'farmService',
redirect: '/sub-operation-service/farmService/consult/policy',
meta: { title: '农事服务' },
children: [
{
path: 'consult',
component: Views,
name: 'farmServiceMain',
meta: { title: '农事咨询' },
children: [
{
path: 'policy',
component: Views,
name: 'farmPolicys',
meta: { title: '农业政策' },
children: [
{
path: '',
component: () => import('@/views/farmingService/farmingConsult/index.vue'),
name: 'farmPolicy',
meta: { title: '农业政策', hideInBread: true },
},
{
path: 'detail',
component: () => import('@/views/farmingService/farmingConsult/index.vue'),
name: 'farmPolicyDetail',
meta: { title: '农业政策详情' },
},
],
},
{
path: 'technology',
component: () => import('@/views/farmingService/farmingConsult/farmingTec.vue'),
name: 'farmTechnology',
meta: { title: '农事技术' },
},
{
path: 'situation',
component: () => import('@/views/farmingService/farmingConsult/situation.vue'),
name: 'farmSituation',
meta: { title: '市场行情' },
},
],
},
],
},
{
path: '/sub-operation-service/dashboard',
component: Layout,
@ -336,39 +385,44 @@ export const constantRoutes = [
meta: { title: '公共品牌' },
children: [
{
path: '',
path: 'apply',
component: BrandLayout,
meta: { title: '使用申请' },
name: 'brandList',
redirect: '/sub-operation-service/brand/apply',
children: [
{
path: 'apply',
name: 'brandApplyList',
path: '',
component: () => import('@/views/brand/components/ApplyList.vue'),
meta: { title: '使用申请' },
meta: { title: '使用申请', hideInBread: true },
name: 'brandApplyList',
},
{
path: 'brandApplyDetail',
name: 'brandApplyDetail',
path: 'detail',
component: () => import('@/views/brand/components/ApplyDetail.vue'),
meta: { title: '产品申请' },
meta: { title: '申请详情' },
name: 'brandApplyDetail',
},
],
},
{
path: 'auth',
component: BrandLayout,
meta: { title: '授权管理' },
name: 'authManage',
redirect: 'record',
children: [
{
path: 'auth/record',
name: 'brandAuth',
path: 'record',
name: 'authRecord',
component: () => import('@/views/brand/components/Auth.vue'),
meta: { title: '授权记录' },
},
{
path: 'auth/system',
name: 'brandSystem',
path: 'manage',
name: 'brandManage',
component: () => import('@/views/brand/components/BrandSystem.vue'),
meta: { title: '品牌制度' },
},
{
path: 'monitor',
name: 'brandMonitor',
component: () => import('@/views/brand/components/Monitor.vue'),
meta: { title: '使用监管' },
meta: { title: '品牌使用管理' },
},
],
},

23
sub-operation-service/src/views/brand/components/ApplyDetail.vue
View File

@ -1,18 +1,11 @@
<template>
<div class="container">
<el-breadcrumb separator="·">
<el-breadcrumb-item style="cursor: pointer" @click="backToList"
><el-icon><ArrowLeftBold /></el-icon>使用申请</el-breadcrumb-item
>
<el-breadcrumb-item><a href="#">我要申请</a></el-breadcrumb-item>
</el-breadcrumb>
<img :src="getAssetsFile('images/brand/11.png')" alt="" class="img" />
<img :src="goodDetail.imgPath" alt="" class="img" />
<el-form label-width="120px" class="form">
<h1 style="margin: 20px 0 20px 50px">请选择溯源农产品申请</h1>
<h1 style="margin: 0 0 20px 50px">请选择溯源农产品申请</h1>
<el-form-item label="溯源商品">
<el-select v-model="batch" placeholder="请选择商品" :width="200">
<el-select v-model="batch" placeholder="请选择商品" filterable :width="200">
<el-option v-for="(item, index) in goodsList" :key="index" :label="item.goodName" :value="item.id">
<el-tooltip :content="item.goodName" placement="top">
<span>{{ item.goodNames }}</span>
@ -59,12 +52,14 @@ import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { getAssetsFile } from '@/utils/index.js';
import { goodList, saveRecords } from '@/apis/brand.js';
import { authDetail } from '../../../apis/brand.js';
const router = useRouter();
const route = useRoute();
const productId = route.query.id;
const product = ref({ name: '加载中...', id: productId });
const goodDetail = ref({});
const goodsList = reactive([]);
@ -82,6 +77,11 @@ onMounted(() => {
}
}
});
authDetail(productId).then((res) => {
if (res.code === 200) {
goodDetail.value = res.data;
}
});
});
const batch = ref('');
@ -134,12 +134,11 @@ function submit() {
width: 200px;
height: 200px;
position: absolute;
top: 60px;
top: 20px;
left: 20px;
}
.form {
margin-top: 20px;
width: 60%;
margin: 0 auto;
}

8
sub-operation-service/src/views/brand/components/ApplyList.vue
View File

@ -3,7 +3,7 @@
<el-col v-for="product in products" :key="product.id" :span="6">
<el-card class="box-card" :body-style="{ padding: '8px', height: '100%' }">
<div class="flex-column">
<img :src="getAssetsFile(product.imgPath)" alt="商品图" class="img" />
<img :src="product.imgPath" alt="商品图" class="img" />
<div class="flex-1 flex-around">
<p>{{ product.title }}</p>
<el-button type="success" class="button" @click="gotoApplication(product.id)">我要申请</el-button>
@ -39,7 +39,7 @@ const applyData = [
];
function gotoApplication(id) {
router.push('/sub-operation-service/brand/brandApplyDetail?id=' + id);
router.push('/sub-operation-service/brand/apply/detail?id=' + id);
}
// TODO: 对接口需要删除这个方法
@ -60,8 +60,8 @@ function getApplyData() {
// 组件挂载时获取数据
onMounted(() => {
// getApplyData();
data();
getApplyData();
// data();
});
</script>

16
sub-operation-service/src/views/brand/components/Auth.vue
View File

@ -38,8 +38,8 @@
<el-card shadow="hover" style="border-radius: 16px" class="product-card">
<!-- 状态筛选 -->
<el-tabs v-model="activeStatus" class="tabs-wrapper" @tab-change="changeStatus">
<el-tab-pane label="已授权" name="1" />
<el-tab-pane label="审批中" name="2" />
<el-tab-pane label="已授权" name="2" />
<el-tab-pane label="审批中" name="1" />
<el-tab-pane label="被驳回" name="3" />
<el-tab-pane label="已失效" name="4" />
</el-tabs>
@ -67,13 +67,13 @@
</div>
</div>
<div class="product-action">
<el-tag v-if="product.status == 1" size="large" class="text-success status-tag" type="success">已授权</el-tag>
<el-tag v-if="product.status == 2" size="large" class="text-warning status-tag" type="warning">审批中</el-tag>
<el-tag v-if="product.status == 2" size="large" class="text-success status-tag" type="success">已授权</el-tag>
<el-tag v-if="product.status == 1" size="large" class="text-warning status-tag" type="warning">审批中</el-tag>
<el-tag v-if="product.status == 3" size="large" class="text-danger status-tag" type="danger">被驳回</el-tag>
<el-tag v-if="product.status == 4" size="large" class="text-info status-tag" type="info">已失效</el-tag>
<div style="display: flex">
<el-button
v-if="product.status == 1"
v-if="product.status == 2"
type="primary"
plain
:icon="Edit"
@ -84,7 +84,7 @@
授权证书
</el-button>
<el-button size="large" class="button" @click="onInspect(product)">溯源报告</el-button>
<el-button v-if="product.status == 1" size="large" class="button" type="danger" @click="onRevoke(product)">取消授权</el-button>
<el-button v-if="product.status == 2" size="large" class="button" type="danger" @click="onRevoke(product)">取消授权</el-button>
</div>
</div>
</div>
@ -174,7 +174,7 @@
<!-- 右侧图片 -->
<div class="trace-img">
<img :src="traceData.img" alt="产品图" />
<img :src="traceData.img" alt="产品图" width="150" />
</div>
</div>
</el-dialog>
@ -339,7 +339,7 @@ const getAuthList = (status) => {
};
onMounted(() => {
getAuthList(1);
getAuthList(2);
});
</script>

34
sub-operation-service/src/views/brand/components/BrandSystem.vue
View File

@ -1,12 +1,13 @@
<template>
<div class="brand-system">
<!-- 搜索与筛选 -->
<div class="system-header">
<el-input v-model="searchQuery" placeholder="搜索制度名称/编号" prefix-icon="el-icon-search" />
<el-select v-model="filterType" placeholder="分类筛选">
<el-option v-for="type in filterTypes" :key="type.value" :label="type.label" :value="type.value" />
</el-select>
</div>
<!-- <div class="system-header">-->
<!-- <el-input v-model="searchQuery" placeholder="搜索制度名称/编号" prefix-icon="el-icon-search" />-->
<!-- <el-select v-model="filterType" placeholder="分类筛选">-->
<!-- <el-option v-for="type in filterTypes" :key="type.value" :label="type.label" :value="type.value" />-->
<!-- </el-select>-->
<!-- </div>-->
<h2>品牌制度</h2>
<!-- 制度列表 -->
<div class="system-list">
@ -18,16 +19,15 @@
</div>
<div class="card-meta">
<span>编号：{{ item.code }}</span>
<span>版本：v{{ item.version }}</span>
</div>
</div>
<div class="card-content">
<p>{{ item.desc }}</p>
</div>
<div class="card-footer">
<span :class="`status-tag ${item.status === '生效中' ? 'active' : 'inactive'}`">{{ item.status }}</span>
<span>生效日期：{{ item.effectiveDate }}</span>
</div>
<!-- <div class="card-footer">-->
<!-- <span :class="`status-tag ${item.status === '生效中' ? 'active' : 'inactive'}`">{{ item.status }}</span>-->
<!-- <span>生效日期：{{ item.effectiveDate }}</span>-->
<!-- </div>-->
</div>
</div>
@ -40,7 +40,6 @@
<h3>{{ currentDetail.title }}</h3>
<div class="dialog-meta">
<span>编号：{{ currentDetail.code }}</span>
<span>版本：v{{ currentDetail.version }}</span>
<span :class="`status-tag ${currentDetail.status === '生效中' ? 'active' : 'inactive'}`">{{ currentDetail.status }}</span>
</div>
</div>
@ -56,7 +55,6 @@
</div>
<div class="dialog-footer">
<div class="footer-info">
<p>制定部门：{{ currentDetail.department }}</p>
<p>发布日期：{{ currentDetail.publishDate }}</p>
</div>
<el-button @click="hideDetail">关闭</el-button>
@ -236,10 +234,10 @@ $color-danger: #ff4949;
}
.system-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
flex: 1;
margin-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
overflow-y: auto;
}
@ -248,9 +246,11 @@ $color-danger: #ff4949;
border-radius: 12px;
border: 1px solid $color-border;
cursor: pointer;
width: 48%;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
overflow: hidden;
margin-bottom: 20px;
&:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.1);

8
sub-operation-service/src/views/brand/index.vue
View File

@ -15,7 +15,7 @@
<span>授权管理</span>
</template>
<el-menu-item index="auth/record"> 授权记录 </el-menu-item>
<el-menu-item index="auth/system"> 品牌使用管理 </el-menu-item>
<el-menu-item index="auth/manage"> 品牌使用管理 </el-menu-item>
</el-sub-menu>
<!-- <el-menu-item index="monitor">-->
@ -26,6 +26,7 @@
</el-aside>
<el-main class="brand-main">
<bread-comp></bread-comp>
<router-view />
</el-main>
</el-container>
@ -44,13 +45,14 @@ const openMenus = ref(['auth']);
const menuMap = {
apply: ['brandApplyList'],
'auth/record': ['brandAuth'],
'auth/system': ['brandSystem'],
'auth/record': ['authRecord'],
'auth/manage': ['brandManage'],
monitor: ['brandMonitor'],
};
// 获取当前菜单激活项
const activeMenu = computed(() => {
console.log(route.name);
const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
// console.log(matched[0]);
return matched ? matched[0] : '';

1
sub-operation-service/src/views/ecommerce/agriculturalDetail.vue
View File

@ -144,6 +144,7 @@ import { getGoodDetail } from '@/apis/agricultural.js';
import { addToCart, quicklyBuy } from '../../apis/agricultural.js';
import { useMethodsStore } from '@/store/modules/methods';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const methodsStore = useMethodsStore();

5
sub-operation-service/src/views/ecommerce/components/goodsItem.vue
View File

@ -14,12 +14,13 @@
</div>
<el-dialog v-model="centerDialogVisible" title="Warning" width="80%" align-center :show-close="false" style="border-radius: 16px">
<template #header>
<div style="text-align: right" @click="centerDialogVisible = false">
<div style="display: flex; justify-content: space-between; padding: 0 20px" @click="centerDialogVisible = false">
<div style="font-size: 20px">商品购买</div>
<el-icon size="25" style="cursor: pointer"><Close /></el-icon>
</div>
</template>
<template #default>
<div style="padding: 20px; text-align: left">
<div style="padding: 0 20px 20px 20px; text-align: left">
<div style="text-align: left; display: flex">
<img :src="currentGood.goodUrl" style="width: 120px" alt="" />
<div style="margin-left: 15px; display: flex; flex-direction: column; justify-content: space-around">

2
sub-operation-service/src/views/ecommerce/index.vue
View File

@ -93,7 +93,7 @@ let params = reactive({
});
let pagination = reactive({
current: 1,
size: 10,
size: 50,
total: 0,
});
const handleSizeChange = (val) => {

92
sub-operation-service/src/views/ecommerce/sourceCodeDetail.vue
View File

@ -22,13 +22,22 @@
<div v-if="activeCurrent == 'baseInfo'" class="baseInfo-content">
<el-row :gutter="16">
<el-col :span="6">
<banner name="codeinfo" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
<banner
name="codeinfo"
:imglist="bannerList"
:is-montage="false"
indicator-pos="none"
arrow="always"
height="160px"
:is-view="true"
>
</banner>
</el-col>
<el-col :span="18">
<el-row :gutter="16">
<el-col :span="12" class="des-item">
<span class="label">产品名称：</span>
<span class="val">有机沙瓤西红柿</span>
<span class="val">{{ goodInfo.goodName }}</span>
</el-col>
<el-col :span="12" class="des-item">
<span class="label">追溯次数：</span>
@ -66,7 +75,16 @@
<div v-if="activeCurrent == 'report'" class="report-content">
<el-row :gutter="16">
<el-col :span="6">
<banner name="report" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
<banner
name="report"
:imglist="bannerList"
:is-montage="false"
indicator-pos="none"
arrow="always"
height="160px"
:is-view="true"
>
</banner>
</el-col>
<el-col :span="18">
<el-row :gutter="16">
@ -110,7 +128,16 @@
<div v-if="activeCurrent == 'business'" class="business-content">
<el-row :gutter="16">
<el-col :span="6">
<banner name="business" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
<banner
name="business"
:is-montage="false"
:imglist="bannerList"
indicator-pos="none"
arrow="always"
height="160px"
:is-view="true"
>
</banner>
</el-col>
<el-col :span="18">
<el-row :gutter="16">
@ -158,8 +185,10 @@
<div class="report">
<!-- <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="none" /> -->
<costomImg
:url="'images/ecommerce/' + 'pic.png'"
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
v-if="bannerList.length > 0"
:url="bannerList[0]"
:is-montage="false"
:preview-list="bannerList"
:is-view="true"
></costomImg>
<span class="img-tips">溯源证书</span>
@ -181,15 +210,21 @@
</template>
<script setup>
import common from './components/common.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { onMounted, reactive, ref } from 'vue';
import { getAssetsFile } from '@/utils';
import banner from './components/banner.vue';
import { qrImg } from '@/layouts/component/Header/base64img.js';
import { useRoute, useRouter } from 'vue-router';
import costomImg from '@/components/costomImg.vue';
import { getGoodDetail } from '@/apis/agricultural.js';
const route = useRoute();
const router = useRouter();
const goodId = route.query.id;
const goodInfo = ref({});
let bottomList = reactive([
{ title: '基本信息', img: 'trace01.png', name: 'baseInfo' },
{ title: '检测报告', img: 'trace02.png', name: 'report' },
@ -200,19 +235,33 @@ let bottomList = reactive([
let activeCurrent = ref('baseInfo');
let bannerList = reactive(['images/ecommerce/' + 'pic.png', 'images/ecommerce/' + 'pic.png']);
const bannerList = ref([]);
let tableData = reactive([
{ id: 'NS10000111', title: '施肥', inputs: '氮肥', operator: '张三', time: '2025-04-02 12:25:36' },
{ id: 'NS10000112', title: '灌溉', inputs: '矿物质', operator: '李四', time: '2025-04-01 12:25:36' },
{ id: 'NS10000113', title: '喷洒农药', inputs: '杀虫剂', operator: '王五', time: '2025-04-02 13:25:36' },
{ id: 'NS10000114', title: '施肥', inputs: '有机肥', operator: '张三', time: '2025-04-02 12:25:36' },
{ id: 'NS10000115', title: '灌溉', inputs: '白糖水', operator: '李四', time: '2025-03-31 12:25:36' },
{ id: 'NS10000116', title: '喷洒农药', inputs: '除草剂', operator: '王五', time: '2025-04-02 12:25:36' },
{ id: 'NS10000117', title: '施肥', inputs: '钾肥', operator: '张三', time: '2025-04-02 12:25:36' },
{ id: 'NS10000118', title: '灌溉', inputs: '尿素水', operator: '李四', time: '2025-04-02 12:25:36' },
{ id: 'NS10000111', title: '施肥', inputs: '氮肥', operator: '王持国', time: '2025-04-02 12:25:36' },
{ id: 'NS10000112', title: '灌溉', inputs: '矿物质', operator: '李东', time: '2025-04-01 12:25:36' },
{ id: 'NS10000113', title: '喷洒农药', inputs: '杀虫剂', operator: '王国舫', time: '2025-04-02 13:25:36' },
{ id: 'NS10000114', title: '施肥', inputs: '有机肥', operator: '张旭东', time: '2025-04-02 12:25:36' },
{ id: 'NS10000115', title: '灌溉', inputs: '白糖水', operator: '李楠', time: '2025-03-31 12:25:36' },
{ id: 'NS10000116', title: '喷洒农药', inputs: '除草剂', operator: '姚勋', time: '2025-04-02 12:25:36' },
{ id: 'NS10000117', title: '施肥', inputs: '钾肥', operator: '沈红', time: '2025-04-02 12:25:36' },
{ id: 'NS10000118', title: '灌溉', inputs: '尿素水', operator: '郭开', time: '2025-04-02 12:25:36' },
]);
onMounted(() => {
getGoodDetail(goodId).then((res) => {
if (res.code === 200) {
goodInfo.value = res.data;
if (res.data.goodUrl) {
let ar = res.data.goodUrl.split(',');
for (let i in ar) {
bannerList.value[i] = ar[i];
}
}
}
});
});
const toBack = (level) => {
router.go(level);
};
@ -335,7 +384,7 @@ const toBack = (level) => {
}
.val {
width: calc(100% - 150px);
text-align: right;
text-align: left;
color: $color-333;
}
}
@ -456,4 +505,11 @@ const toBack = (level) => {
}
}
}
.report {
:deep(.el-image img) {
width: 100%;
height: 100%;
object-fit: fill !important;
}
}
</style>

2
sub-operation-service/src/views/ecommerce/supplier.vue
View File

@ -61,7 +61,7 @@ let params = reactive({
});
let pagination = reactive({
current: 1,
size: 10,
size: 50,
total: 4,
});
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);

124
sub-operation-service/src/views/farmingService/components/common.vue Normal file
View File

@ -0,0 +1,124 @@
<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">
<bread-comp></bread-comp>
<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';
import BreadComp from '@/components/breadComp.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>

232
sub-operation-service/src/views/farmingService/components/leftMenu.vue Normal file
View File

@ -0,0 +1,232 @@
<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="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" />
<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="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: '',
isOpen: false,
children: [
{
name: 'farmPolicy',
title: '农业政策',
icon: 'menu1.png',
path: '/sub-operation-service/farmService/consult/policy',
},
// {
// name: 'farmTechnology',
// title: '农事技术',
// icon: 'menu1.png',
// path: '/sub-operation-service/farmService/consult/technology',
// },
// {
// name: 'farmSituation',
// title: '市场行情',
// icon: 'menu1.png',
// path: '/sub-operation-service/farmService/consult/situation',
// },
],
},
// {
// name: 'control',
// title: '生产管理控制',
// icon: 'menu3.png',
// path: '',
// isOpen: false,
// children: [
// {
// name: 'growSeedlings',
// title: '一体育苗',
// icon: 'menu3.png',
// path: '/sub-operation-service/smartFarm/growSeedlings',
// },
// {
// name: 'pestPrevention',
// title: '病虫害预防',
// icon: 'menu3.png',
// path: '/sub-operation-service/smartFarm/pestPrevention',
// },
// {
// name: 'irrigationSystem',
// title: '喷灌滴灌',
// icon: 'menu3.png',
// path: '/sub-operation-service/smartFarm/irrigationSystem',
// },
// {
// name: 'drainageControl',
// title: '排集水控制',
// icon: 'menu3.png',
// path: '/sub-operation-service/smartFarm/drainageControl',
// },
// {
// name: 'openCurtain',
// title: '开窗卷帘',
// icon: 'menu3.png',
// path: '/sub-operation-service/smartFarm/openCurtain',
// },
// ],
// },
]);
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>

33
sub-operation-service/src/views/farmingService/farmingConsult/farmingTec.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div>
<common>
<template #main> </template>
</common>
</div>
</template>
<script setup>
import { ref } from 'vue';
import common from '../components/common.vue';
/* --------------- data --------------- */
// #region
// #endregion
/* --------------- methods --------------- */
// #region
// #endregion
</script>
<style lang="scss" scoped>
.framing_service_content {
margin: 0 auto;
padding: 0 32px;
width: 1200px;
min-height: 600px;
border: 1px solid skyblue;
box-sizing: border-box;
}
</style>

68
sub-operation-service/src/views/farmingService/farmingConsult/index.vue
View File

@ -1,13 +1,62 @@
<template>
<section>framing consult</section>
<div>
<common>
<template #main>
<div>
<el-card shadow="hover" style="border-radius: 16px">
<h2 style="text-align: left">农业政策</h2>
<div v-for="(item, index) in tableData" :key="index" class="card-item">
<div style="width: 49%"><img :src="getAssetsFile(item.imgPath)" alt="" width="100%" /></div>
<div style="width: 49%; display: flex; flex-direction: column; justify-content: space-between">
<div>
<div style="font-size: 20px; font-weight: bold">{{ item.title }}</div>
<div style="font-size: 14px; margin-top: 20px">
{{ item.desc }}
</div>
</div>
<div>
<el-button style="height: 50px; background-color: #25bf82; color: #ffffff; border-radius: 16px"
>查看详情<el-icon><Right /></el-icon
></el-button>
</div>
</div>
</div>
</el-card>
</div>
</template>
</common>
</div>
</template>
<script setup>
import { ref } from 'vue';
import common from '../components/common.vue';
import { getAssetsFile } from '../../../utils/index.js';
/* --------------- data --------------- */
// #region
const tableData = ref([
{
id: 1,
title: '完善强农惠农富农支持制度',
desc: '制度关乎根本、稳定和长远，全面推进乡村振兴事关国泰民安。以农业农村现代化推进农业强国建设，尤其需要重视农村制度建设。党的二十届三中全会作出“完善强农惠农富农支持制度”的决策部署。',
imgPath: 'images/mockPic/nyzc0.png',
},
{
id: 2,
title: '农民日报仲农平文章：一号文件里的“三农”脉动',
desc: '自党的十九大提出乡村振兴战略后，2018年中央一号文件对该战略进行了顶层设计，将其作为新时代“三农”工作的总抓手，绘制出一幅扎实的蓝图。',
imgPath: 'images/mockPic/nyzc2.png',
},
{
id: 3,
title: '近年来，三农问题一直是国家关注的焦点。在新的历史时期，我们必须坚持农业农村优先发展的战略，加快推进乡村振兴，建设美好新农村。',
desc: '首先，我们要深入推进农业现代化。传统农业已经无法满足现代社会的需求，我们必须引进新技术、新品种、新模式，提高农业生产效率和质量。',
imgPath: 'images/mockPic/nyzc3.png',
},
]);
// #endregion
/* --------------- methods --------------- */
@ -16,4 +65,19 @@ import { ref } from 'vue';
// #endregion
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.framing_service_content {
margin: 0 auto;
padding: 0 32px;
width: 1200px;
min-height: 600px;
border: 1px solid skyblue;
box-sizing: border-box;
}
.card-item {
display: flex;
justify-content: space-between;
margin: 20px 0;
text-align: left;
}
</style>

33
sub-operation-service/src/views/farmingService/farmingConsult/situation.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div>
<common>
<template #main> </template>
</common>
</div>
</template>
<script setup>
import { ref } from 'vue';
import common from '../components/common.vue';
/* --------------- data --------------- */
// #region
// #endregion
/* --------------- methods --------------- */
// #region
// #endregion
</script>
<style lang="scss" scoped>
.framing_service_content {
margin: 0 auto;
padding: 0 32px;
width: 1200px;
min-height: 600px;
border: 1px solid skyblue;
box-sizing: border-box;
}
</style>

7
sub-operation-service/src/views/farmingService/index.vue
View File

@ -1,9 +1,14 @@
<template>
<section class="framing_service_content"><el-button type="primary">农事服务</el-button></section>
<div>
<common>
<template #main> </template>
</common>
</div>
</template>
<script setup>
import { ref } from 'vue';
import common from './components/common.vue';
/* --------------- data --------------- */
// #region