智慧种植页面组件修改 、电商页面修改、公共品牌不显示问题。

This commit is contained in:
姚俊旭 2025-05-26 17:10:06 +08:00
parent dc54d40853
commit 25a555d6b1
23 changed files with 462 additions and 515 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -248,7 +248,7 @@ export const constantRoutes = [
meta: { title: '使用申请' }, meta: { title: '使用申请' },
}, },
{ {
path: 'apply/:id', path: 'brandApplyDetail',
name: 'brandApplyDetail', name: 'brandApplyDetail',
component: () => import('@/views/brand/components/ApplyDetail.vue'), component: () => import('@/views/brand/components/ApplyDetail.vue'),
meta: { title: '产品申请' }, meta: { title: '产品申请' },

View File

@ -19,7 +19,7 @@
<el-form-item label="溯源码"> <el-form-item label="溯源码">
<el-button type="primary" @click="uploadTraceCode"> <el-button type="primary" @click="uploadTraceCode">
<template #icon> <template #icon>
<i class="el-icon-upload"></i> <el-icon><Upload /></el-icon>
</template> </template>
点击上传 点击上传
</el-button> </el-button>

View File

@ -24,9 +24,9 @@ const router = useRouter();
const products = ref([]); const products = ref([]);
// //
getApplyList().then((res) => { // getApplyList().then((res) => {
products.value = res.data; // products.value = res.data;
}); // });
const applyData = [ const applyData = [
{ id: 1, name: '耿马绿色蔬菜', imageUrl: 'images/brand/11.png' }, { id: 1, name: '耿马绿色蔬菜', imageUrl: 'images/brand/11.png' },
@ -44,7 +44,7 @@ const applyData = [
]; ];
function gotoApplication(id) { function gotoApplication(id) {
router.push(`/sub-operation-service/brand/apply/${id}`); router.push('/sub-operation-service/brand/brandApplyDetail?id=' + id);
} }
// TODO: // TODO:

View File

@ -52,7 +52,7 @@ const menuMap = {
// //
const activeMenu = computed(() => { const activeMenu = computed(() => {
const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name)); const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
console.log(matched[0]); // console.log(matched[0]);
return matched ? matched[0] : ''; return matched ? matched[0] : '';
}); });
// //

View File

@ -0,0 +1,134 @@
<template>
<div>
<el-card shadow="always">
<div class="route"><span style="cursor: pointer" @click.stop="changeDialog">采购商服务</span> <span>·</span> <span>采购服务</span></div>
<div style="display: flex; margin-top: 10px">
<img :src="getAssetsFile('images/smartFarm/logo2.png')" alt="" style="height: 150px; width: 150px" />
<div style="width: calc(100% - 150px); padding: 0 20px">
<div style="display: flex; justify-content: space-between; width: 100%; font-size: 18px; font-weight: bold">
<div>
耿马县勐简乡飘云生态农业<img
:src="getAssetsFile('images/smartFarm/优先级.png')"
alt=""
style="height: 20px; width: 20px; margin: 0 5px"
/><img :src="getAssetsFile('images/smartFarm/.png')" alt="" style="height: 20px; width: 20px" />
</div>
<div>
耿马县·勐简乡<img :src="getAssetsFile('images/smartFarm/position.png')" alt="" style="height: 20px; width: 20px; margin: 0 5px" />
</div>
</div>
<div class="shiming">已实名认证</div>
<div class="inTime">入驻时间 37</div>
</div>
</div>
<div style="display: flex; margin-top: 40px; justify-content: space-between">
<div class="between">
<div class="leftTitle">采购品种</div>
<div class="rightValue">西红柿</div>
</div>
<div class="between">
<div class="leftTitle">采购数量</div>
<div class="rightValue">5000kg</div>
</div>
</div>
<div style="display: flex; margin-top: 10px; justify-content: space-between">
<div class="between">
<div class="leftTitle">期望货源地</div>
<div class="rightValue">耿马县·贺派乡</div>
</div>
<div class="between">
<div class="leftTitle">浏览次数</div>
<div class="rightValue">188</div>
</div>
</div>
<div style="display: flex; margin-top: 10px; justify-content: space-between">
<div class="between">
<div class="leftTitle">收获地</div>
<div class="rightValue">耿马县·勐简乡</div>
</div>
<div class="between">
<div class="leftTitle">更新时间</div>
<div class="rightValue">2025.01.01 11:11:11</div>
</div>
</div>
<div>
<el-button style="background-color: #25bf82; color: #ffffff; padding: 20px 30px; margin-top: 20px">
<template #icon>
<img :src="getAssetsFile('images/smartFarm/message.png')" alt="" style="height: 20px; width: 20px; margin: 0 5px" />
</template>
在线联系
</el-button>
</div>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { getAssetsFile } from '@/utils/index.js';
/* --------------- data --------------- */
// #region
const props = defineProps({
id: {
type: Number,
default: () => {
return 0;
},
},
});
// #endregion
/* --------------- methods --------------- */
// #region
const emit = defineEmits(['updateStatus']); //
const changeDialog = () => {
const data = { message: false };
emit('updateStatus', data); //
};
// #endregion
</script>
<style lang="scss" scoped>
.between {
width: 47%;
justify-content: space-between;
display: flex;
font-size: 18px;
}
.leftTitle {
font-weight: 400;
text-align: left;
color: #999999;
}
.rightValue {
font-weight: 400;
text-align: right;
color: #000000;
}
.shiming {
width: fit-content;
padding: 2px 5px;
margin-top: 20px;
background: rgba(37, 191, 130, 0.1);
border: 1px solid rgba(37, 191, 130, 0.5);
border-radius: 8px;
font-size: 14px;
font-weight: 400;
color: #25bf82;
}
.inTime {
font-size: 18px;
margin-top: 20px;
font-weight: 400;
text-align: left;
color: #999999;
}
.route {
font-size: 16px;
font-weight: 900;
text-align: left;
}
</style>

View File

@ -139,7 +139,7 @@ const chartsData = reactive({
color: 'rgba(255, 255, 255, .6)', color: 'rgba(255, 255, 255, .6)',
}, },
}, },
extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)', extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16);z-index: 1',
formatter: function (params) { formatter: function (params) {
let content = `<div style='font-size: 14px; color: #666;text-align:left'>${params[0].name}</div>`; let content = `<div style='font-size: 14px; color: #666;text-align:left'>${params[0].name}</div>`;
if (Array.isArray(params)) { if (Array.isArray(params)) {

View File

@ -1,52 +1,99 @@
<template> <template>
<div class="purchaser-popup-warp"> <div class="purchaser-popup-warp">
<el-dialog v-model="isShow" title="采购报价" width="800" :before-close="doCancel"> <el-dialog v-model="isShow" title="" width="80%" :before-close="doCancel" style="border-radius: 16px; padding: 40px 80px">
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto" class="custom-form"> <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="auto" class="custom-form">
<el-row :gutter="20"> <!-- <el-row :gutter="20">-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label="商品分类" prop="typeId"> <!-- <el-form-item label="商品分类" prop="typeId">-->
<el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" /> <!-- <el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label="收购价格" prop="price"> <!-- <el-form-item label="收购价格" prop="price">-->
<el-input-number v-model="ruleForm.price" /> <!-- <el-input-number v-model="ruleForm.price" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label="采购商品" prop="goods"> <!-- <el-form-item label="采购商品" prop="goods">-->
<el-input v-model="ruleForm.goods" style="width: 200px" /> <!-- <el-input v-model="ruleForm.goods" style="width: 200px" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label="收购数量" prop="num"> <!-- <el-form-item label="收购数量" prop="num">-->
<el-input-number v-model="ruleForm.num" /> <!-- <el-input-number v-model="ruleForm.num" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label="收货地址" prop="addr"> <!-- <el-form-item label="收货地址" prop="addr">-->
<el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" /> <!-- <el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label=" " prop="isPickup"> <!-- <el-form-item label=" " prop="isPickup">-->
<el-radio-group v-model="ruleForm.isPickup"> <!-- <el-radio-group v-model="ruleForm.isPickup">-->
<el-radio v-for="(n, index) in pickupOptions" :key="index" :value="n.value">{{ n.label }}</el-radio> <!-- <el-radio v-for="(n, index) in pickupOptions" :key="index" :value="n.value">{{ n.label }}</el-radio>-->
</el-radio-group> <!-- </el-radio-group>-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-form-item label="采购说明" prop="remark"> <!-- <el-form-item label="采购说明" prop="remark">-->
<el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" /> <!-- <el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" />-->
</el-form-item> <!-- </el-form-item>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
<div style="display: flex; justify-content: flex-start">
<el-form-item label="分类名称:" prop="typeId" style="width: 50%">
<el-cascader
v-model="ruleForm.typeId"
:options="treeList"
:props="treeOption"
clearable
:placeholder="'请选择分类'"
style="width: 100%; border-radius: 10px; height: 30px"
/>
</el-form-item>
<div style="width: 5%">&nbsp;</div>
<div class="inputs">
<span class="labels">收购价格</span>
<input type="text" placeholder="请输入" />
</div>
</div>
<div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
<div class="inputs">
<span class="labels">采购商品</span>
<input type="text" placeholder="请输入" />
</div>
<div style="width: 5%">&nbsp;</div>
<div class="inputs unit">
<span class="labels">收购数量</span>
<input type="text" placeholder="请输入" />
</div>
</div>
<div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
<div class="inputs">
<span class="labels">收货地址</span>
<input type="text" placeholder="请输入" />
</div>
<div style="width: 5%">&nbsp;</div>
<div class="inputs">
<el-radio-group v-model="formData.toHome">
<el-radio value="1" size="large">可上门收货</el-radio>
<el-radio value="0" size="large">不上门收货</el-radio>
</el-radio-group>
</div>
</div>
<div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
<div class="inputs" style="width: 100%">
<span class="labels" style="width: 14%">收货地址</span>
<el-input v-model="formData.address" maxlength="30" style="width: 100%" placeholder="请输入" show-word-limit type="textarea" />
</div>
</div>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="doCancel">取消</el-button> <el-button type="primary" style="height: 40px; width: 120px" @click="doSure"> 确认 </el-button>
<el-button type="primary" @click="doSure"> 确定 </el-button> <el-button style="height: 40px; width: 120px" @click="doCancel">取消</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -59,6 +106,10 @@ import { useRoute, useRouter } from 'vue-router';
import { fa } from 'element-plus/es/locale/index.mjs'; import { fa } from 'element-plus/es/locale/index.mjs';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const formData = ref({
toHome: '0',
address: '',
});
const props = defineProps({ const props = defineProps({
list: { list: {
@ -133,6 +184,40 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dialog-footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.unit::after {
content: 'kg';
position: absolute;
right: 10px; /* 调整单位与输入框的距离 */
color: #000; /* 单位颜色 */
pointer-events: none; /* 防止单位遮挡输入框 */
}
.unit input {
}
.inputs {
color: #999999;
font-size: 18px;
width: 50%;
position: relative;
display: flex;
align-items: center;
.labels {
width: 25%;
margin-right: 10px;
}
input {
width: calc(74% - 20px);
border: 1px solid #999999;
border-radius: 10px;
height: 30px;
padding-left: 15px;
}
}
.purchaser-popup-warp { .purchaser-popup-warp {
} }
.custom-form { .custom-form {
@ -148,4 +233,10 @@ defineExpose({
} }
} }
} }
.el-input__inner {
height: 30px !important;
border-radius: 10px;
font-size: 18px;
color: #999999;
}
</style> </style>

View File

@ -2,22 +2,29 @@
<div class="purchaser-index-warp"> <div class="purchaser-index-warp">
<common current-name="purchaser"> <common current-name="purchaser">
<template #main> <template #main>
<el-row class="purchaser-top"> <div v-if="showDetail">
<el-col :span="12"> <el-row class="purchaser-top">
<div class="purchaser-top-title">行情动态</div> <el-col :span="12">
<div class="purchaser-charts"> <div class="purchaser-top-title">行情动态</div>
<marketCharts></marketCharts> <div class="purchaser-charts">
</div> <marketCharts :height="'180'"></marketCharts>
</el-col> </div>
<el-col :span="12"> </el-col>
<div class="purchaser-top-title">近7天热门产品</div> <el-col :span="12">
<div class="purchaser-charts"> <div class="purchaser-top-title">近7天热门产品</div>
<hotGoodsWordClould></hotGoodsWordClould> <div class="purchaser-charts">
</div> <hotGoodsWordClould></hotGoodsWordClould>
</el-col> </div>
</el-row> <div>
<filtertop :list="treeList"></filtertop> <el-button type="success" @click.stop="handleClick">一键发布采购信息</el-button>
</div>
</el-col>
</el-row>
<filtertop :list="treeList"></filtertop>
</div>
<div v-else>
<good-source :id="detailId" @update-status="handleUpdate"></good-source>
</div>
<div class="hot-list-warp"> <div class="hot-list-warp">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="8" align="left"> <el-col :span="8" align="left">
@ -39,7 +46,7 @@
<el-table-column prop="buyer" label="采购时间" /> <el-table-column prop="buyer" label="采购时间" />
<el-table-column fixed="right" label="操作"> <el-table-column fixed="right" label="操作">
<template #default> <template #default>
<el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button> <el-button link type="primary" size="small"> 去报价 </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -61,6 +68,8 @@ import purchaserPopup from './components/purchaserPopup.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue'; import { ref, reactive, onMounted, watch, computed } from 'vue';
import { getRegion } from '@/apis/index'; import { getRegion } from '@/apis/index';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { transaction } from '@/apis/agricultural.js';
import GoodSource from '@/views/ecommerce/components/goodSource.vue';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -115,67 +124,10 @@ let treeList = reactive([
}, },
], ],
}, },
{
id: '02',
name: '种子种苗',
children: [
{
parentId: '02',
id: '0101',
name: '花卉种子种苗',
children: [
{ parentId: '0101', id: '010101', name: '草本花卉' },
{ parentId: '0101', id: '010102', name: '木本花卉' },
{ parentId: '0101', id: '010103', name: '野生花卉' },
],
},
{
parentId: '02',
id: '0102',
name: '蔬菜种子种苗',
children: [
{ parentId: '0102', id: '010201', name: '叶菜类' },
{ parentId: '0102', id: '010202', name: '根茎类' },
{ parentId: '0102', id: '010203', name: '果实类' },
{ parentId: '0102', id: '010204', name: '豆类' },
{ parentId: '0102', id: '010205', name: '瓜类' },
],
},
{
parentId: '02',
id: '0103',
name: '果树种苗',
children: [
{ parentId: '0103', id: '010301', name: '柑橘类' },
{ parentId: '0103', id: '010302', name: '仁果类' },
{ parentId: '0103', id: '010303', name: '核果类' },
{ parentId: '0103', id: '010304', name: '浆果类' },
],
},
{
parentId: '02',
id: '0104',
name: '药材种子与种苗',
children: [
{ parentId: '0104', id: '010401', name: '寒地龙药' },
{ parentId: '0104', id: '010402', name: '常见中药材' },
],
},
{
parentId: '02',
id: '0105',
name: '其他作物',
children: [
{ parentId: '0105', id: '010501', name: '牧草' },
{ parentId: '0105', id: '010502', name: '经济作物' },
{ parentId: '0105', id: '010503', name: '观赏树木' },
],
},
],
},
]); ]);
const showDetail = ref(true);
let popupQuote = ref(null); let popupQuote = ref(null);
const detailId = ref(0);
const typeTree = ref([]); const typeTree = ref([]);
const treeOption = ref({ const treeOption = ref({
@ -194,6 +146,15 @@ const getTree = () => {
}); });
}; };
const getTreeList = () => {
transaction().then((res) => {
if (res.code === 200) {
let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
treeList.splice(0, treeList.length, ...a);
}
});
};
const handleClick = () => { const handleClick = () => {
popupQuote.value && popupQuote.value.doShow(); popupQuote.value && popupQuote.value.doShow();
}; };
@ -218,15 +179,33 @@ let tableData = reactive([
]); ]);
const rowClick = (data) => { const rowClick = (data) => {
router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id); // router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id);
detailId.value = data.id;
showDetail.value = false;
};
const handleUpdate = (data) => {
// console.log(data);
showDetail.value = !showDetail.value;
}; };
onMounted(() => { onMounted(() => {
console.info('onMounted'); console.info('onMounted');
getTree(); getTree();
getTreeList();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 确保 ElementUI 弹出层有更高的 z-index */
.el-dialog {
z-index: 2000 !important;
}
/* 降低 ECharts tooltip 的 z-index */
div[class^='zr-element'],
.echarts-tooltip {
z-index: 1000 !important;
}
.purchaser-index-warp { .purchaser-index-warp {
width: 100%; width: 100%;
.purchaser-top { .purchaser-top {

View File

@ -3,15 +3,25 @@
<common current-name="supplier"> <common current-name="supplier">
<template #main> <template #main>
<banner name="supplier" :imglist="bannerList"></banner> <banner name="supplier" :imglist="bannerList"></banner>
<filtertop :list="treeList"></filtertop> <filtertop :list="treeList" @select="selected"></filtertop>
<div class="goods-list-warp"> <div class="goods-list-warp">
<div class="goods-list"> <div class="goods-list">
<template v-for="(n, index) in 16" :key="index"> <template v-for="(n, index) in list" :key="n.id">
<div class="goods-item"> <div class="goods-item">
<goodsItem></goodsItem> <goodsItem :data="n"></goodsItem>
</div> </div>
</template> </template>
</div> </div>
<el-pagination
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div> </div>
</template> </template>
</common> </common>
@ -23,118 +33,73 @@ import banner from './components/banner.vue';
import filtertop from './components/filtertop.vue'; import filtertop from './components/filtertop.vue';
import goodsItem from './components/goodsItem.vue'; import goodsItem from './components/goodsItem.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue'; import { ref, reactive, onMounted, watch, computed } from 'vue';
let treeList = reactive([ import { agriculturalList, transaction } from '@/apis/agricultural.js';
{ let treeList = reactive([]);
id: '01',
name: '农产品',
children: [
{
parentId: '01',
id: '0101',
name: '植物性农产品',
children: [
{ parentId: '0101', id: '010101', name: '谷物' },
{ parentId: '0101', id: '010102', name: '蔬菜' },
{ parentId: '0101', id: '010103', name: '水果' },
{ parentId: '0101', id: '010104', name: '坚果与油料作物' },
{ parentId: '0101', id: '010105', name: '糖料作物' },
{ parentId: '0101', id: '010106', name: '纤维作物' },
{ parentId: '0101', id: '010107', name: '茶叶' },
{ parentId: '0101', id: '010108', name: '咖啡' },
{ parentId: '0101', id: '010109', name: '香料' },
],
},
{
parentId: '01',
id: '0102',
name: '动物性农产品',
children: [
{ parentId: '0102', id: '010201', name: '肉类' },
{ parentId: '0102', id: '010202', name: '奶制品' },
{ parentId: '0102', id: '010203', name: '蛋类' },
{ parentId: '0102', id: '010204', name: '蜂蜜' },
{ parentId: '0102', id: '010205', name: '水产品' },
],
},
{
parentId: '01',
id: '0103',
name: '特殊农产品',
children: [
{ parentId: '0103', id: '010301', name: '花卉与苗木' },
{ parentId: '0103', id: '010302', name: '药材' },
{ parentId: '0103', id: '010303', name: '菌类' },
],
},
{
parentId: '01',
id: '0104',
name: '其他',
children: [{ parentId: '0104', id: '010401', name: '饲料' }],
},
],
},
{
id: '02',
name: '种子种苗',
children: [
{
parentId: '02',
id: '0101',
name: '花卉种子种苗',
children: [
{ parentId: '0101', id: '010101', name: '草本花卉' },
{ parentId: '0101', id: '010102', name: '木本花卉' },
{ parentId: '0101', id: '010103', name: '野生花卉' },
],
},
{
parentId: '02',
id: '0102',
name: '蔬菜种子种苗',
children: [
{ parentId: '0102', id: '010201', name: '叶菜类' },
{ parentId: '0102', id: '010202', name: '根茎类' },
{ parentId: '0102', id: '010203', name: '果实类' },
{ parentId: '0102', id: '010204', name: '豆类' },
{ parentId: '0102', id: '010205', name: '瓜类' },
],
},
{
parentId: '02',
id: '0103',
name: '果树种苗',
children: [
{ parentId: '0103', id: '010301', name: '柑橘类' },
{ parentId: '0103', id: '010302', name: '仁果类' },
{ parentId: '0103', id: '010303', name: '核果类' },
{ parentId: '0103', id: '010304', name: '浆果类' },
],
},
{
parentId: '02',
id: '0104',
name: '药材种子与种苗',
children: [
{ parentId: '0104', id: '010401', name: '寒地龙药' },
{ parentId: '0104', id: '010402', name: '常见中药材' },
],
},
{
parentId: '02',
id: '0105',
name: '其他作物',
children: [
{ parentId: '0105', id: '010501', name: '牧草' },
{ parentId: '0105', id: '010502', name: '经济作物' },
{ parentId: '0105', id: '010503', name: '观赏树木' },
],
},
],
},
]);
let list = reactive([]);
let params = reactive({
current: 1,
size: 10,
parentId: null,
childrenId: null,
});
let pagination = reactive({
current: 1,
size: 10,
total: 0,
});
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']); let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
const getList = () => {
params.current = pagination.current;
params.size = pagination.size;
agriculturalList(params).then((res) => {
if (res.code === 200) {
list.splice(0, list.length, ...res.data.records);
pagination.total = res.data.total;
}
});
};
onMounted(() => {
getList();
getTree();
});
const handleSizeChange = (val) => {
pagination.size = val;
getList();
};
const handleCurrentChange = (val) => {
pagination.current = val;
getList();
};
const getTree = () => {
transaction().then((res) => {
if (res.code === 200) {
let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
treeList.splice(0, treeList.length, ...a);
// console.log('treeList', treeList);
}
});
};
const selected = (data) => {
//
const val = Object.values(data);
console.log(data);
if (val.length === 1) {
params.parentId = val[0].id;
} else {
if (val[0].id === '') {
params.childrenId = '';
params.parentId = null;
} else {
params.childrenId = val[val.length - 1].id;
params.parentId = val[val.length - 1].parentId;
}
}
getList();
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.goods-list-warp { .goods-list-warp {

View File

@ -5,6 +5,8 @@ import { useRoute, useRouter } from 'vue-router';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const currentDevice = ref(0);
// icon // icon
const icons = [ const icons = [
{ 监控: 'camera' }, { 监控: 'camera' },
@ -61,7 +63,13 @@ const props = defineProps({
<template> <template>
<div> <div>
<el-card style="border-radius: 16px"> <el-card style="border-radius: 16px">
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000; margin-bottom: 20px">{{ title }}</div> <div style="color: #999999; line-height: 25px; text-align: left">
当前设备组
<el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px">
<el-option v-for="item in devices" :key="item.value" :label="item.detail" :value="item.id" />
</el-select>
</div>
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000; margin: 15px 0">{{ title }}</div>
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px"> <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px">
<div v-for="(item, index) in devices" :key="index" class="device"> <div v-for="(item, index) in devices" :key="index" class="device">
<div v-if="item.status == 1" class="status" style="background-color: #25bf82">正常</div> <div v-if="item.status == 1" class="status" style="background-color: #25bf82">正常</div>

View File

@ -81,6 +81,14 @@ onMounted(async () => {
<el-card style="border-radius: 16px"> <el-card style="border-radius: 16px">
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 16px; font-weight: bold; text-align: left">{{ title }}</div> <div style="font-size: 16px; font-weight: bold; text-align: left">{{ title }}</div>
<div>
<div>当前设备状态</div>
<div>
<div class="dot"></div>
<span>正常</span>
</div>
</div>
<div style="color: #999999; line-height: 25px"> <div style="color: #999999; line-height: 25px">
当前设备 当前设备
<el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px"> <el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px">
@ -125,4 +133,11 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
} }
} }
.dot {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 90px;
background-color: #25bf82;
}
</style> </style>

View File

@ -29,13 +29,6 @@ const devices = ref([
status: '1', // 0: 线 1: -1: status: '1', // 0: 线 1: -1:
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'temperature',
detail: 'A区-监控设备66',
status: '1',
id: 1,
},
{ {
name: 'A-003', name: 'A-003',
icon: 'humidity', icon: 'humidity',
@ -43,13 +36,6 @@ const devices = ref([
status: '0', status: '0',
id: 2, id: 2,
}, },
{
name: 'A-004',
icon: 'humidity',
detail: 'A区-监控设备1',
status: '-1',
id: 3,
},
{ {
name: 'A-005', name: 'A-005',
icon: 'valve', icon: 'valve',
@ -57,13 +43,6 @@ const devices = ref([
status: '-1', status: '-1',
id: 4, id: 4,
}, },
{
name: 'A-006',
icon: 'valve',
status: '0',
detail: 'A区-监控设备21',
id: 5,
},
{ {
name: 'A-007', name: 'A-007',
icon: 'sprinkler', icon: 'sprinkler',
@ -71,13 +50,6 @@ const devices = ref([
detail: 'A区-监控设备4', detail: 'A区-监控设备4',
id: 6, id: 6,
}, },
{
name: 'A-008',
detail: 'A区-监控设备3',
icon: 'sprinkler',
status: '-1',
id: 7,
},
{ {
name: 'A-009', name: 'A-009',
detail: 'A区-监控设备9', detail: 'A区-监控设备9',
@ -85,13 +57,6 @@ const devices = ref([
status: '-1', status: '-1',
id: 8, id: 8,
}, },
{
name: 'A-010',
detail: 'A区-监控设备10',
icon: 'waterSupplyValve',
status: '0',
id: 9,
},
{ {
name: 'A-011', name: 'A-011',
detail: 'A区-监控设备3', detail: 'A区-监控设备3',
@ -99,13 +64,6 @@ const devices = ref([
status: '1', status: '1',
id: 10, id: 10,
}, },
{
name: 'A-012',
detail: 'A区-监控设备3',
icon: 'intelligentValveControl',
status: '1',
id: 11,
},
]); ]);
const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']); const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);

View File

@ -29,13 +29,6 @@ const devices = ref([
status: '1', // 0: 线 1: -1: status: '1', // 0: 线 1: -1:
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'tempSensor',
detail: 'A区-监控设备66',
status: '1',
id: 1,
},
{ {
name: 'A-003', name: 'A-003',
icon: 'heater', icon: 'heater',
@ -43,13 +36,6 @@ const devices = ref([
status: '1', status: '1',
id: 2, id: 2,
}, },
{
name: 'A-004',
icon: 'heater',
detail: 'A区-监控设备1',
status: '-1',
id: 3,
},
{ {
name: 'A-005', name: 'A-005',
icon: 'heat', icon: 'heat',
@ -57,13 +43,6 @@ const devices = ref([
status: '1', status: '1',
id: 4, id: 4,
}, },
{
name: 'A-006',
icon: 'disinfectionLamp',
status: '0',
detail: 'A区-监控设备21',
id: 5,
},
{ {
name: 'A-007', name: 'A-007',
icon: 'timer', icon: 'timer',
@ -71,13 +50,6 @@ const devices = ref([
detail: 'A区-监控设备4', detail: 'A区-监控设备4',
id: 6, id: 6,
}, },
{
name: 'A-008',
detail: 'A区-监控设备3',
icon: 'timer',
status: '-1',
id: 7,
},
{ {
name: 'A-009', name: 'A-009',
detail: 'A区-监控设备9', detail: 'A区-监控设备9',
@ -92,13 +64,6 @@ const devices = ref([
status: '1', status: '1',
id: 9, id: 9,
}, },
{
name: 'A-011',
detail: 'A区-监控设备3',
icon: 'liquidSensor',
status: '0',
id: 10,
},
{ {
name: 'A-012', name: 'A-012',
detail: 'A区-监控设备3', detail: 'A区-监控设备3',

View File

@ -17,13 +17,6 @@ const devices = ref([
status: '1', status: '1',
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'temp',
detail: 'A区-监控设备2',
status: '1',
id: 1,
},
{ {
name: 'A-003', name: 'A-003',
icon: 'ph', icon: 'ph',
@ -31,13 +24,6 @@ const devices = ref([
status: '1', status: '1',
id: 2, id: 2,
}, },
{
name: 'A-004',
icon: 'ph',
detail: 'A区-监控设备4',
status: '-1',
id: 3,
},
{ {
name: 'A-005', name: 'A-005',
icon: 'O2', icon: 'O2',
@ -59,20 +45,6 @@ const devices = ref([
status: '1', status: '1',
id: 6, id: 6,
}, },
{
name: 'B-002',
icon: 'elect',
detail: 'B区-监控设备2',
status: '-1',
id: 7,
},
{
name: 'B-003',
icon: 'dust',
detail: 'B区-监控设备3',
status: '1',
id: 8,
},
{ {
name: 'B-004', name: 'B-004',
icon: 'dust', icon: 'dust',
@ -87,13 +59,6 @@ const devices = ref([
status: '1', status: '1',
id: 10, id: 10,
}, },
{
name: 'B-006',
icon: 'float',
detail: 'B区-监控设备6',
status: '1',
id: 11,
},
]); ]);
const rules = ref([ const rules = ref([
{ {

View File

@ -10,6 +10,13 @@
<el-card style="width: 60%; margin-right: 20px; border-radius: 16px"> <el-card style="width: 60%; margin-right: 20px; border-radius: 16px">
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 16px; font-weight: bold; text-align: left">实时环境监测</div> <div style="font-size: 16px; font-weight: bold; text-align: left">实时环境监测</div>
<div>
<div>当前设备状态</div>
<div>
<div class="dot"></div>
<span>正常</span>
</div>
</div>
<div style="color: #999999; line-height: 25px"> <div style="color: #999999; line-height: 25px">
当前设备 当前设备
<el-select <el-select
@ -91,20 +98,6 @@ const devices = ref([
status: '1', status: '1',
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'temp',
detail: 'A区-监控设备2',
status: '1',
id: 1,
},
{
name: 'A-003',
icon: 'temp',
detail: 'A区-监控设备3',
status: '1',
id: 2,
},
{ {
name: 'A-004', name: 'A-004',
icon: 'soilSensor', icon: 'soilSensor',
@ -119,13 +112,6 @@ const devices = ref([
status: '1', status: '1',
id: 4, id: 4,
}, },
{
name: 'A-006',
icon: 'anemometer',
detail: 'A区-监控设备6',
status: '0',
id: 5,
},
{ {
name: 'B-001', name: 'B-001',
icon: 'rainGauge', icon: 'rainGauge',
@ -133,13 +119,6 @@ const devices = ref([
status: '1', status: '1',
id: 6, id: 6,
}, },
{
name: 'B-002',
icon: 'rainGauge',
detail: 'B区-监控设备2',
status: '-1',
id: 7,
},
{ {
name: 'B-003', name: 'B-003',
icon: 'waterLoggingSensor', icon: 'waterLoggingSensor',
@ -154,13 +133,6 @@ const devices = ref([
status: '1', status: '1',
id: 9, id: 9,
}, },
{
name: 'B-005',
icon: 'PM2.5',
detail: 'B区-监控设备5',
status: '1',
id: 10,
},
{ {
name: 'B-006', name: 'B-006',
icon: 'light', icon: 'light',
@ -260,6 +232,13 @@ const chooseIcon = (type) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dot {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 90px;
background-color: #25bf82;
}
.plantStatus { .plantStatus {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@ -71,27 +71,6 @@ const devices = ref([
status: '1', status: '1',
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'camera',
detail: 'A区-监控设备66',
status: '1',
id: 1,
},
{
name: 'A-003',
icon: 'sensor',
detail: 'A区-监控设备7',
status: '0',
id: 2,
},
{
name: 'A-004',
icon: 'sensor',
detail: 'A区-监控设备1',
status: '-1',
id: 3,
},
{ {
name: 'A-005', name: 'A-005',
icon: 'sensor', icon: 'sensor',
@ -99,27 +78,6 @@ const devices = ref([
status: '-1', status: '-1',
id: 4, id: 4,
}, },
{
name: 'A-006',
icon: 'camera',
status: '0',
detail: 'A区-监控设备21',
id: 5,
},
{
name: 'A-007',
icon: 'camera',
status: '0',
detail: 'A区-监控设备4',
id: 6,
},
{
name: 'A-008',
detail: 'A区-监控设备3',
icon: 'camera',
status: '0',
id: 7,
},
]); ]);
// #endregion // #endregion

View File

@ -60,13 +60,6 @@ const devices = ref([
status: '0', status: '0',
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'fertilizerTank',
detail: 'A区-监控设备66',
status: '0',
id: 1,
},
{ {
name: 'A-003', name: 'A-003',
icon: 'fertilization', icon: 'fertilization',
@ -81,20 +74,6 @@ const devices = ref([
status: '-1', status: '-1',
id: 3, id: 3,
}, },
{
name: 'A-005',
icon: 'mixingTank',
detail: 'A区-监控设备5',
status: '-1',
id: 4,
},
{
name: 'A-006',
icon: 'mixingTank',
status: '0',
detail: 'A区-监控设备21',
id: 5,
},
{ {
name: 'A-007', name: 'A-007',
icon: 'mixingPump', icon: 'mixingPump',
@ -102,20 +81,6 @@ const devices = ref([
detail: 'A区-监控设备4', detail: 'A区-监控设备4',
id: 6, id: 6,
}, },
{
name: 'A-008',
detail: 'A区-监控设备3',
icon: 'mixingPump',
status: '0',
id: 7,
},
{
name: 'A-009',
detail: 'A区-监控设备9',
icon: 'mixingPump',
status: '0',
id: 8,
},
{ {
name: 'A-010', name: 'A-010',
detail: 'A区-监控设备10', detail: 'A区-监控设备10',
@ -123,20 +88,6 @@ const devices = ref([
status: '0', status: '0',
id: 9, id: 9,
}, },
{
name: 'A-008',
detail: 'A区-监控设备3',
icon: 'solenoidValve',
status: '0',
id: 10,
},
{
name: 'A-008',
detail: 'A区-监控设备3',
icon: 'solenoidValve',
status: '0',
id: 11,
},
]); ]);
// #endregion // #endregion
/* --------------- methods --------------- */ /* --------------- methods --------------- */

View File

@ -15,13 +15,6 @@ const devices = ref([
status: '1', status: '1',
id: 0, id: 0,
}, },
{
name: 'A-002',
icon: 'temp',
detail: 'A区-监控设备2',
status: '1',
id: 1,
},
{ {
name: 'A-003', name: 'A-003',
icon: 'ph', icon: 'ph',
@ -29,13 +22,6 @@ const devices = ref([
status: '1', status: '1',
id: 2, id: 2,
}, },
{
name: 'A-004',
icon: 'ph',
detail: 'A区-监控设备4',
status: '-1',
id: 3,
},
{ {
name: 'A-005', name: 'A-005',
icon: 'O2', icon: 'O2',
@ -57,13 +43,6 @@ const devices = ref([
status: '1', status: '1',
id: 6, id: 6,
}, },
{
name: 'B-002',
icon: 'elect',
detail: 'B区-监控设备2',
status: '-1',
id: 7,
},
{ {
name: 'B-003', name: 'B-003',
icon: 'dust', icon: 'dust',
@ -71,13 +50,6 @@ const devices = ref([
status: '1', status: '1',
id: 8, id: 8,
}, },
{
name: 'B-004',
icon: 'dust',
detail: 'B区-监控设备4',
status: '1',
id: 9,
},
{ {
name: 'B-005', name: 'B-005',
icon: 'float', icon: 'float',
@ -85,13 +57,6 @@ const devices = ref([
status: '1', status: '1',
id: 10, id: 10,
}, },
{
name: 'B-006',
icon: 'float',
detail: 'B区-监控设备6',
status: '1',
id: 11,
},
]); ]);
const rules = ref([ const rules = ref([
{ {
@ -183,6 +148,13 @@ const chooseIcon = (type) => {
<el-card style="border-radius: 16px; width: 58%; height: fit-content"> <el-card style="border-radius: 16px; width: 58%; height: fit-content">
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="font-size: 16px; font-weight: bold; text-align: left">实时水质监测</div> <div style="font-size: 16px; font-weight: bold; text-align: left">实时水质监测</div>
<div>
<div>当前设备状态</div>
<div>
<div class="dot"></div>
<span>正常</span>
</div>
</div>
<div style="color: #999999; line-height: 25px"> <div style="color: #999999; line-height: 25px">
当前设备 当前设备
<el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px"> <el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px">
@ -250,4 +222,11 @@ const chooseIcon = (type) => {
height: 20px; height: 20px;
} }
} }
.dot {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 90px;
background-color: #25bf82;
}
</style> </style>