Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
9e1580d8ad
@ -11,7 +11,7 @@ VITE_APP_SUB_GSS = '//localhost:9529/sub-government-screen-service/'
|
||||
VITE_APP_SUB_GSR = '//localhost:9530/new-digital-agriculture-screen/'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.14:8080'//线下测试
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.9:8080'
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/1.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 853 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/2.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 502 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/3.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/4.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 448 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/5.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 939 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 828 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/核桃.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/核桃.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 458 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/白菜.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/白菜.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/石斛.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/石斛.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/红茶.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/红茶.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
BIN
new-digital-agriculture-screen/src/assets/images/entities/芹菜.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/entities/芹菜.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
new-digital-agriculture-screen/src/assets/video2.mp4
Normal file
BIN
new-digital-agriculture-screen/src/assets/video2.mp4
Normal file
Binary file not shown.
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="business">
|
||||
<div class="business-left">
|
||||
<div class="business-left" style="padding-left: 30px">
|
||||
<custom-echart-water-droplet width="100%" height="100%" :option="state.option" />
|
||||
<div class="business-title">证件齐全率</div>
|
||||
<div class="business-title">证照合格率</div>
|
||||
</div>
|
||||
<div class="business-right">
|
||||
<div class="business-right" style="padding-top: 20px">
|
||||
<div class="business-title">临期预警</div>
|
||||
<ul class="business-info">
|
||||
<li class="success">
|
||||
@ -13,18 +13,18 @@
|
||||
</li>
|
||||
<li class="warning">
|
||||
<b>临期</b>
|
||||
<span>5家</span>
|
||||
<span>25家</span>
|
||||
</li>
|
||||
<li class="danger">
|
||||
<b>已过期</b>
|
||||
<span>0家</span>
|
||||
<b>逾期</b>
|
||||
<span>7家</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
@ -142,6 +142,9 @@ watch(
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
console.log(props.data);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.business {
|
||||
|
||||
@ -100,7 +100,7 @@ let testInfo = reactive({});
|
||||
let currentRegion = ref(null);
|
||||
const doMapclick = (data) => {
|
||||
currentRegion.value = data;
|
||||
if (data.name == '永星食品加工厂') {
|
||||
if (data.name == '永星食品合作社') {
|
||||
testInfo = {
|
||||
addr: '云南省临沧市耿马傣族佤族自治县孟定镇101号',
|
||||
user: '张强',
|
||||
@ -111,13 +111,13 @@ const doMapclick = (data) => {
|
||||
imglist: ['images/business/b1-1.png', 'images/business/b1-2.png', 'images/business/b1-3.png'],
|
||||
};
|
||||
}
|
||||
if (data.name == '欣欣种源企业') {
|
||||
if (data.name == '耿马原生茶叶种植专业合作社') {
|
||||
testInfo = {
|
||||
addr: '云南省临沧市耿马傣族佤族自治耿马镇102号',
|
||||
user: '李欣',
|
||||
addr: '云南省临沧市耿马傣族佤族自治县',
|
||||
user: '李伟荣',
|
||||
tel: '13713575206',
|
||||
capital: '600万',
|
||||
time: '2020年10月1日',
|
||||
capital: '400万',
|
||||
time: '2013年08月26日',
|
||||
credit: 'AA',
|
||||
imglist: ['images/business/b2-1.png', 'images/business/b1-2.png', 'images/business/b1-2.png'],
|
||||
};
|
||||
@ -127,7 +127,7 @@ const doMapclick = (data) => {
|
||||
let markerData = reactive([
|
||||
// 示例数据点，实际应用中应替换为真实的数据
|
||||
{
|
||||
name: '永星食品加工厂',
|
||||
name: '永星食品合作社',
|
||||
value: [99.081993, 23.524045, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
@ -135,7 +135,7 @@ let markerData = reactive([
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '欣欣种源企业',
|
||||
name: '耿马原生茶叶种植专业合作社',
|
||||
value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
|
||||
@ -240,7 +240,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
width:10px;
|
||||
height:10px;
|
||||
background-color:${params.color};"></span>
|
||||
${option.series[params.seriesIndex].pieData.value}
|
||||
${option.series[params.seriesIndex].pieData.quantity}家
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -12,24 +12,24 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const rawData = [
|
||||
{ name: '勐撒镇', type: '农户', value: 150 },
|
||||
{ name: '勐撒镇', type: '企业/合作社', value: 300 },
|
||||
{ name: '勐撒镇', type: '农户', value: 164 },
|
||||
{ name: '勐撒镇', type: '农企/合作社', value: 152 },
|
||||
|
||||
{ name: '勐永镇', type: '农户', value: 280 },
|
||||
{ name: '勐永镇', type: '企业/合作社', value: 200 },
|
||||
{ name: '勐永镇', type: '农户', value: 179 },
|
||||
{ name: '勐永镇', type: '农企/合作社', value: 243 },
|
||||
|
||||
{ name: '孟定镇', type: '农户', value: 250 },
|
||||
{ name: '孟定镇', type: '企业/合作社', value: 240 },
|
||||
{ name: '孟定镇', type: '农户', value: 189 },
|
||||
{ name: '孟定镇', type: '农企/合作社', value: 254 },
|
||||
|
||||
{ name: '大兴乡', type: '农户', value: 170 },
|
||||
{ name: '大兴乡', type: '企业/合作社', value: 140 },
|
||||
{ name: '大兴乡', type: '农户', value: 243 },
|
||||
{ name: '大兴乡', type: '农企/合作社', value: 167 },
|
||||
|
||||
{ name: '耿马镇', type: '农户', value: 260 },
|
||||
{ name: '耿马镇', type: '企业/合作社', value: 230 },
|
||||
{ name: '耿马镇', type: '农户', value: 265 },
|
||||
{ name: '耿马镇', type: '农企/合作社', value: 213 },
|
||||
];
|
||||
|
||||
const towns = ['勐撒镇', '勐永镇', '孟定镇', '大兴乡', '耿马镇'];
|
||||
const types = ['农户', '企业/合作社'];
|
||||
const types = ['农户', '农企/合作社'];
|
||||
const colors = [
|
||||
// 蓝色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
|
||||
@ -107,7 +107,6 @@ const loadData = async (code = '') => {
|
||||
{ name: '贺派乡', value: 62 },
|
||||
{ name: '四排山乡', value: 84 },
|
||||
{ name: '芒洪乡', value: 82 },
|
||||
{ name: '大兴乡', value: 64 },
|
||||
];
|
||||
};
|
||||
|
||||
@ -124,16 +123,16 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.query,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
loadData(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// watch(
|
||||
// () => props.query,
|
||||
// (val) => {
|
||||
// if (!isEmpty(val)) {
|
||||
// loadData(val);
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// }
|
||||
// );
|
||||
</script>
|
||||
|
||||
@ -12,19 +12,16 @@
|
||||
<customBack
|
||||
top-title="生产经营主体数量"
|
||||
:top-postion="'left'"
|
||||
:down-title="'农资企业'"
|
||||
:down-title="'农企/合作社'"
|
||||
:label-field="'label'"
|
||||
:value-field="'value'"
|
||||
:down-width="''"
|
||||
:options="[
|
||||
{ value: 1, label: '农企/合作社' },
|
||||
{ value: 2, label: '农资企业' },
|
||||
{ value: 3, label: '种源企业' },
|
||||
{ value: 4, label: '生产加工企业' },
|
||||
{ value: 5, label: '农户' },
|
||||
{ value: 2, label: '农户' },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="handleCommand"
|
||||
@command="handleCommand($event)"
|
||||
>
|
||||
<template #back>
|
||||
<businessTwo :data="state.data.two" :query="state.queryCode" />
|
||||
@ -32,7 +29,7 @@
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="历年用地规模曲线" :top-postion="'left'">
|
||||
<customBack top-title="生产经营主体用地面积" :top-postion="'left'">
|
||||
<template #back>
|
||||
<businessThere :data="state.data.there" />
|
||||
</template>
|
||||
@ -44,7 +41,7 @@
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="证件状态看板" :top-postion="'right'">
|
||||
<customBack top-title="证照状态看板" :top-postion="'right'">
|
||||
<template #back>
|
||||
<businessFour :data="state.data.four" />
|
||||
</template>
|
||||
@ -100,21 +97,21 @@ const loadData = async () => {
|
||||
await sleep(500);
|
||||
state.data = {
|
||||
one: [
|
||||
{ value: 13.8, name: '农企/合作社', quantity: 202 },
|
||||
{ value: 7.14, name: '农企/合作社', quantity: 152 },
|
||||
// { value: 23.8, name: '农资企业' },
|
||||
// { value: 24.1, name: '种源企业' },
|
||||
// { value: 29.8, name: '生产加工企业' },
|
||||
{ value: 8.5, name: '农户', quantity: 180 },
|
||||
{ value: 64.7, name: '农户', quantity: 1376 },
|
||||
],
|
||||
two: [
|
||||
{ name: '耿马镇', value: 870 },
|
||||
{ name: '勐撒镇', value: 603 },
|
||||
{ name: '勐永镇', value: 854 },
|
||||
{ name: '孟定镇', value: 635 },
|
||||
{ name: '勐简乡', value: 795 },
|
||||
{ name: '贺派乡', value: 662 },
|
||||
{ name: '四排山乡', value: 584 },
|
||||
{ name: '芒洪乡', value: 682 },
|
||||
{ name: '耿马镇', value: 50 },
|
||||
{ name: '勐撒镇', value: 20 },
|
||||
{ name: '勐永镇', value: 54 },
|
||||
{ name: '孟定镇', value: 35 },
|
||||
{ name: '勐简乡', value: 45 },
|
||||
{ name: '贺派乡', value: 52 },
|
||||
{ name: '四排山乡', value: 34 },
|
||||
{ name: '芒洪乡', value: 52 },
|
||||
],
|
||||
there: [
|
||||
{ name: '耿马镇', value: 870, value2: 455 },
|
||||
@ -124,10 +121,10 @@ const loadData = async () => {
|
||||
{ name: '大兴乡', value: 795, value2: 382 },
|
||||
],
|
||||
four: {
|
||||
percent: 0.3998,
|
||||
percent: 0.825,
|
||||
success: 253,
|
||||
warning: 5,
|
||||
danger: 0,
|
||||
warning: 25,
|
||||
danger: 7,
|
||||
},
|
||||
five: [
|
||||
{ name: '耿马镇', value: 87.84 },
|
||||
@ -141,26 +138,8 @@ const loadData = async () => {
|
||||
{ name: '大兴乡', value: 66.34 },
|
||||
],
|
||||
six: [
|
||||
{
|
||||
name: '农企/合作社',
|
||||
value: 25,
|
||||
},
|
||||
{
|
||||
name: '农资企业',
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
name: '种源企业',
|
||||
value: 24,
|
||||
},
|
||||
{
|
||||
name: '生产加工企业',
|
||||
value: 32,
|
||||
},
|
||||
{
|
||||
name: '农户',
|
||||
value: 32,
|
||||
},
|
||||
{ value: 25, name: '农企/合作社' },
|
||||
{ value: 66, name: '农户' },
|
||||
],
|
||||
};
|
||||
state.loading = false;
|
||||
@ -169,7 +148,32 @@ const loadData = async () => {
|
||||
loadData();
|
||||
|
||||
const handleCommand = (data) => {
|
||||
console.log(data);
|
||||
state.queryCode = data.value;
|
||||
// 根据id获取数据
|
||||
if (data.value == 1) {
|
||||
state.data.two = [
|
||||
{ name: '耿马镇', value: 50 },
|
||||
{ name: '勐撒镇', value: 20 },
|
||||
{ name: '勐永镇', value: 54 },
|
||||
{ name: '孟定镇', value: 35 },
|
||||
{ name: '勐简乡', value: 45 },
|
||||
{ name: '贺派乡', value: 52 },
|
||||
{ name: '四排山乡', value: 34 },
|
||||
{ name: '芒洪乡', value: 52 },
|
||||
];
|
||||
} else if (data.value == 2) {
|
||||
state.data.two = [
|
||||
{ name: '耿马镇', value: 870 },
|
||||
{ name: '勐撒镇', value: 603 },
|
||||
{ name: '勐永镇', value: 854 },
|
||||
{ name: '孟定镇', value: 635 },
|
||||
{ name: '勐简乡', value: 795 },
|
||||
{ name: '贺派乡', value: 662 },
|
||||
{ name: '四排山乡', value: 584 },
|
||||
{ name: '芒洪乡', value: 682 },
|
||||
];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -18,67 +18,49 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import tomatoImg from '@/assets/images/entities/tomatoImg.png';
|
||||
import a from '@/assets/images/entities/1.jpg';
|
||||
import b from '@/assets/images/entities/2.jpg';
|
||||
import c from '@/assets/images/entities/3.jpg';
|
||||
import d from '@/assets/images/entities/4.jpg';
|
||||
import e from '@/assets/images/entities/5.jpg';
|
||||
import f from '@/assets/images/entities/6.jpg';
|
||||
import g from '@/assets/images/entities/7.jpg';
|
||||
import h from '@/assets/images/entities/8.png';
|
||||
import a from '@/assets/images/entities/1.png';
|
||||
import b from '@/assets/images/entities/2.png';
|
||||
import c from '@/assets/images/entities/3.png';
|
||||
import d from '@/assets/images/entities/4.png';
|
||||
import e from '@/assets/images/entities/5.png';
|
||||
const list = ref([
|
||||
{
|
||||
name: '西红柿',
|
||||
price: '2.5元/公斤',
|
||||
price: '1.35元/公斤',
|
||||
img: tomatoImg,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
price: '3.5元/公斤',
|
||||
name: '南瓜',
|
||||
price: '2.45元/公斤',
|
||||
img: a,
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
price: '4.5元/公斤',
|
||||
name: '彩椒',
|
||||
price: '2.22元/公斤',
|
||||
img: b,
|
||||
},
|
||||
{
|
||||
name: '黄豆',
|
||||
price: '5.5元/公斤',
|
||||
name: '甘蔗',
|
||||
price: '0.84元/公斤',
|
||||
img: c,
|
||||
},
|
||||
{
|
||||
name: '韭菜',
|
||||
price: '34.5元/公斤',
|
||||
name: '石斛',
|
||||
price: '56.24元/公斤',
|
||||
img: d,
|
||||
},
|
||||
{
|
||||
name: '辣椒',
|
||||
price: '55.5元/公斤',
|
||||
name: '土豆',
|
||||
price: '0.76元/公斤',
|
||||
img: e,
|
||||
},
|
||||
{
|
||||
name: '豌豆',
|
||||
price: '222.5元/公斤',
|
||||
img: f,
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
price: '32.5元/公斤',
|
||||
img: g,
|
||||
},
|
||||
{
|
||||
name: '青花',
|
||||
price: '2.7元/公斤',
|
||||
img: h,
|
||||
},
|
||||
]);
|
||||
const current = reactive({
|
||||
index: 0,
|
||||
length: list.value.length - 1,
|
||||
info: {
|
||||
name: '西红柿',
|
||||
price: '2.5元/公斤',
|
||||
price: '1.35元/公斤',
|
||||
img: tomatoImg,
|
||||
},
|
||||
});
|
||||
|
||||
@ -10,7 +10,7 @@ const chartRef = ref(null);
|
||||
// #region
|
||||
const data = ref([
|
||||
{
|
||||
name: ' 企业',
|
||||
name: '农企/合作社',
|
||||
value: 10.8,
|
||||
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
|
||||
},
|
||||
@ -25,7 +25,7 @@ const data = ref([
|
||||
// itemStyle: { color: '#65be97', opacity: 0.8 },
|
||||
// },
|
||||
{
|
||||
name: ' 个体',
|
||||
name: '农户',
|
||||
value: 23.7,
|
||||
itemStyle: { color: '#f0c94d', opacity: 0.8 },
|
||||
},
|
||||
|
||||
@ -42,7 +42,6 @@ const state = reactive({
|
||||
let str = `<div class="custom-echarts-tips">
|
||||
<span>${params.name}</span><br/>
|
||||
<span>${params.marker} ${params.data} 万吨</span><br />
|
||||
<span>${data[1].marker} ${data[1].data} 万吨</span>
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
@ -144,7 +143,7 @@ const state = reactive({
|
||||
fontSize: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
data: ['总产量（吨）', '平均产量（吨）'],
|
||||
data: ['总产量（吨）'],
|
||||
selectedMode: false,
|
||||
},
|
||||
series: [
|
||||
@ -240,16 +239,16 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.query,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
loadData(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// watch(
|
||||
// () => props.query,
|
||||
// (val) => {
|
||||
// if (!isEmpty(val)) {
|
||||
// loadData(val);
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// }
|
||||
// );
|
||||
</script>
|
||||
|
||||
@ -9,29 +9,24 @@ import { reactive, ref } from 'vue';
|
||||
// #region
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '烟草',
|
||||
value: 60.8,
|
||||
money: 100,
|
||||
name: '蔬菜',
|
||||
value: 1290.76,
|
||||
},
|
||||
{
|
||||
name: '甘蔗',
|
||||
value: 44.4,
|
||||
money: 88,
|
||||
value: 9333.5,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
value: 24.3,
|
||||
money: 92,
|
||||
name: '石斛',
|
||||
value: 1366.2,
|
||||
},
|
||||
{
|
||||
name: '蔬菜',
|
||||
value: 32.7,
|
||||
money: 56,
|
||||
name: '茶叶',
|
||||
value: 2698.7,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 32.9,
|
||||
money: 18,
|
||||
value: 269.9,
|
||||
},
|
||||
]);
|
||||
|
||||
@ -39,7 +34,8 @@ const option = reactive({
|
||||
k: 0.3,
|
||||
opacity: 1,
|
||||
itemGap: 0,
|
||||
autoItemHeight: 2,
|
||||
autoItemHeight: 0.01,
|
||||
legendSuffix: ' 万元',
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 4, //厚度
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
import { get } from 'lodash';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@ -16,6 +17,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
let titles = reactive([]);
|
||||
let values = reactive([]);
|
||||
const getValue = (dataList) => {
|
||||
let arr = [];
|
||||
@ -24,6 +26,23 @@ const getValue = (dataList) => {
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
const getName = (dataList) => {
|
||||
let arr = [];
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
arr.push(dataList[i].name);
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
let max = reactive([]);
|
||||
let maxData = reactive([]);
|
||||
const getMaxData = (dataList) => {
|
||||
return dataList.map((item, index) => {
|
||||
return {
|
||||
value: [max, index],
|
||||
name: titles[index],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
data: [],
|
||||
@ -123,7 +142,7 @@ const state = reactive({
|
||||
fontSize: '16',
|
||||
},
|
||||
formatter: function (value) {
|
||||
let str = '{title|' + value + '吨}';
|
||||
let str = '{title|' + value + '万元}';
|
||||
return str;
|
||||
},
|
||||
rich: {
|
||||
@ -133,7 +152,7 @@ const state = reactive({
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [12000, 8000, 6000, 4000, 3500],
|
||||
data: [8653.1, 9455.7, 4502.8, 4907.2, 4152],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
@ -172,7 +191,7 @@ const state = reactive({
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '-100%',
|
||||
data: [],
|
||||
data: maxData,
|
||||
barBorderRadius: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@ -220,6 +239,7 @@ watch(
|
||||
}
|
||||
);
|
||||
const loadData = (val) => {
|
||||
console.log(val);
|
||||
if (val === 'all') {
|
||||
state.data = props.data;
|
||||
state.option.yAxis.data = ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'];
|
||||
@ -232,7 +252,11 @@ const loadData = (val) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(state.data);
|
||||
console.log(state.option.yAxis);
|
||||
values = getValue(state.data);
|
||||
console.log(val);
|
||||
titles = getName(state.data);
|
||||
max = Math.max(...state.data);
|
||||
maxData = getMaxData(state.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<customBack
|
||||
top-title="全县历年产值对比"
|
||||
top-title="全县各乡镇产值对比"
|
||||
:top-postion="'left'"
|
||||
:down-title="'全县'"
|
||||
:label-field="'label'"
|
||||
@ -17,12 +17,12 @@
|
||||
{ label: '孟定镇', value: '孟定镇' },
|
||||
{ label: '大兴乡', value: '大兴乡' },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="handleCommand"
|
||||
:is-down="false"
|
||||
@command="handleCommand($event)"
|
||||
>
|
||||
<template #back>
|
||||
<value-charts :data="state.data.one" :query="state.queryCode"></value-charts>
|
||||
<!-- <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
|
||||
<!--<entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -37,19 +37,19 @@
|
||||
<customBack
|
||||
top-title="全县作物产量对比"
|
||||
:top-postion="'left'"
|
||||
:down-title="'烟草'"
|
||||
:down-title="'蔬菜'"
|
||||
:label-field="'label'"
|
||||
:value-field="'value'"
|
||||
:down-width="''"
|
||||
:options="[
|
||||
{ label: '烟草', value: 1 },
|
||||
{ label: '蔬菜', value: 1 },
|
||||
{ label: '甘蔗', value: 2 },
|
||||
{ label: '核桃', value: 3 },
|
||||
{ label: '蔬菜', value: 4 },
|
||||
{ label: '石斛', value: 3 },
|
||||
{ label: '茶叶', value: 4 },
|
||||
{ label: '其他', value: 5 },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="handleContrast"
|
||||
@command="handleContrast($event)"
|
||||
>
|
||||
<template #back>
|
||||
<entitiesStatistics ref="thirdRef" :data="state.data.third" :query="state.contrastCode"></entitiesStatistics>
|
||||
@ -86,7 +86,7 @@
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from 'vue';
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import categoryCharts from './components/categoryCharts.vue';
|
||||
import entitieslist from './components/entitieslist.vue';
|
||||
@ -98,6 +98,27 @@ import entitiesMap from './components/entitiesMap.vue';
|
||||
import { sleep } from '@/utils';
|
||||
import ValueCharts from '@/views/entities/components/valueCharts.vue';
|
||||
|
||||
import Mock from 'mockjs';
|
||||
const thirdRes = () => {
|
||||
return Mock.mock({
|
||||
'data|9': [
|
||||
{
|
||||
id: '@id',
|
||||
name: '@pick(["耿马镇", "勐撒镇", "勐永镇","孟定镇","勐简乡", "贺派乡", "四排山乡","芒洪乡","大兴乡"])',
|
||||
value1: function () {
|
||||
const num = Mock.Random.float(100, 300, 0, 2);
|
||||
return num % 1 === 0 ? num : parseFloat(num.toFixed(2));
|
||||
},
|
||||
// value: function () {
|
||||
// // 确保 this.value1 是数字类型，再计算
|
||||
// const num = Mock.Random.float(100, 300, 0, 2);
|
||||
// return parseFloat((num / 5).toFixed(2));
|
||||
// },
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const oneRef = ref(null);
|
||||
const thirdRef = ref(null);
|
||||
|
||||
@ -112,22 +133,22 @@ const loadData = async () => {
|
||||
await sleep(500);
|
||||
state.data = {
|
||||
one: [
|
||||
{ value: 3500, name: '耿马镇' },
|
||||
{ value: 6000, name: '勐撒镇' },
|
||||
{ value: 4000, name: '勐永镇' },
|
||||
{ value: 8000, name: '孟定镇' },
|
||||
{ value: 12000, name: '大兴乡' },
|
||||
{ value: 4152, name: '大兴乡' },
|
||||
{ value: 4907.2, name: '勐撒镇' },
|
||||
{ value: 4502.8, name: '勐永镇' },
|
||||
{ value: 9455.7, name: '孟定镇' },
|
||||
{ value: 8653.1, name: '耿马镇' },
|
||||
],
|
||||
third: [
|
||||
{ value: 98, value1: 88, name: '耿马镇' },
|
||||
{ value: 55, value1: 117, name: '勐撒镇' },
|
||||
{ value: 65, value1: 145, name: '勐永镇' },
|
||||
{ value: 60, value1: 126, name: '孟定镇' },
|
||||
{ value: 40, value1: 86, name: '勐简乡' },
|
||||
{ value: 81, value1: 152, name: '贺派乡' },
|
||||
{ value: 41, value1: 130, name: '四排山乡' },
|
||||
{ value: 100, value1: 101, name: '芒洪乡' },
|
||||
{ value: 79, value1: 184, name: '大兴乡' },
|
||||
// { value: 35.61, value1: 178.06, name: '耿马镇' },
|
||||
// { value: 11.81, value1: 59.06, name: '勐撒镇' },
|
||||
// { value: 11.08, value1: 55.41, name: '勐永镇' },
|
||||
// { value: 28.42, value1: 142.12, name: '孟定镇' },
|
||||
// { value: 12, value1: 65.99, name: '勐简乡' },
|
||||
// { value: 10.19, value1: 50.97, name: '贺派乡' },
|
||||
// { value: 6.61, value1: 33.08, name: '四排山乡' },
|
||||
// { value: 7.73, value1: 38.69, name: '芒洪乡' },
|
||||
// { value: 13.08, value1: 65.4, name: '大兴乡' },
|
||||
],
|
||||
};
|
||||
};
|
||||
@ -141,12 +162,17 @@ const handleCommand = (data) => {
|
||||
// });
|
||||
};
|
||||
const handleContrast = (data) => {
|
||||
state.contrastCode = data.value;
|
||||
// console.info('data=', data);
|
||||
nextTick(() => {
|
||||
thirdRef.value && thirdRef.value.refresData();
|
||||
});
|
||||
state.contrastCode = data.value.toString();
|
||||
state.data.third = [...thirdRes().data];
|
||||
console.info(state.data.third);
|
||||
// nextTick(() => {
|
||||
// thirdRef.value && thirdRef.value.refresData();
|
||||
// });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.data.third = thirdRes().data;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="全县耕地面积" :top-postion="'right'">
|
||||
<customBack top-title="全县土地用地数据" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landFour :data="state.data.four" />
|
||||
</template>
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack
|
||||
top-title="管理需求分类"
|
||||
top-title="乡镇土地用地数据"
|
||||
:down-title="'所有类型'"
|
||||
:top-postion="'right'"
|
||||
:down-width="'140px'"
|
||||
@ -277,16 +277,14 @@ const loadData = async () => {
|
||||
{ value: 80, name: '2025' },
|
||||
],
|
||||
four: [
|
||||
{ value: 58.9, label: '灌溉水田' },
|
||||
{ value: 56.1, label: '基地' },
|
||||
{ value: 60.8, label: '水田' },
|
||||
{ value: 58.9, label: '旱地' },
|
||||
{ value: 60.6, label: '水浇地' },
|
||||
{ value: 56.1, label: '灌木林地' },
|
||||
{ value: 32.6, label: '竹林地' },
|
||||
{ value: 25.8, label: '育苗地' },
|
||||
{ value: 56.0, label: '果园' },
|
||||
{ value: 52.4, label: '草地' },
|
||||
{ value: 6.3, label: '观测用地' },
|
||||
{ value: 6.1, label: '监测用地' },
|
||||
{ value: 25.8, label: '茶园' },
|
||||
{ value: 52.4, label: '人工牧草地' },
|
||||
],
|
||||
// five: [
|
||||
// { value: 20, name: '耿马镇' },
|
||||
@ -326,7 +324,7 @@ const loadData = async () => {
|
||||
},
|
||||
],
|
||||
basic: [
|
||||
{ value: '3837km²', title: '政区域面积' },
|
||||
{ value: '3837km²', title: '行政区域面积' },
|
||||
{ value: '9个乡（镇）,3个农场', title: '下辖地区' },
|
||||
{ value: '27.88万人', title: '常住人口' },
|
||||
{ value: '18.8℃ - 19.2℃', title: '年均气温' },
|
||||
|
||||
@ -2,46 +2,29 @@
|
||||
<custom-echart-bar :chart-data="dataList" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const dataList = reactive([
|
||||
{
|
||||
name: '其他',
|
||||
value: 3500,
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
{
|
||||
name: '烟叶',
|
||||
value: 4000,
|
||||
query: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
name: '甘蔗',
|
||||
value: 6000,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
value: 8000,
|
||||
},
|
||||
{
|
||||
name: '茶叶',
|
||||
value: 12000,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
// 此处数据需要按照类目的重要程度顺序排列
|
||||
let dataList = reactive([]);
|
||||
|
||||
let titles = reactive([]);
|
||||
let values = reactive([]);
|
||||
const max = Math.max(...dataList);
|
||||
const maxData = dataList.map((item, index) => {
|
||||
return {
|
||||
value: [max, index],
|
||||
name: titles[index],
|
||||
};
|
||||
});
|
||||
const barData = dataList.map((item, index) => {
|
||||
return {
|
||||
value: [item, index],
|
||||
name: titles[index],
|
||||
};
|
||||
});
|
||||
let max = reactive([]);
|
||||
let maxData = reactive([]);
|
||||
|
||||
let barData = reactive([]);
|
||||
|
||||
const getValue = () => {
|
||||
let arr = [];
|
||||
@ -58,12 +41,35 @@ const getName = () => {
|
||||
return arr;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
titles = getName();
|
||||
values = getValue();
|
||||
console.log(titles);
|
||||
console.log(values);
|
||||
});
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
dataList = val;
|
||||
titles = getName();
|
||||
values = getValue();
|
||||
console.log(titles);
|
||||
console.log(values);
|
||||
max = Math.max(...values);
|
||||
maxData = dataList.map((item, index) => {
|
||||
return {
|
||||
value: [max, index],
|
||||
name: titles[index],
|
||||
};
|
||||
});
|
||||
console.log(max);
|
||||
console.log(maxData);
|
||||
barData = dataList.map((item, index) => {
|
||||
return {
|
||||
value: [item, index],
|
||||
name: titles[index],
|
||||
};
|
||||
});
|
||||
console.log(barData);
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
@ -139,7 +145,7 @@ const state = reactive({
|
||||
{
|
||||
// 左侧title
|
||||
type: 'category',
|
||||
data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
|
||||
data: [...titles].reverse(),
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
@ -180,99 +186,7 @@ const state = reactive({
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [12000, 8000, 6000, 4000, 3500],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '值',
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
barBorderRadius: 10,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 10, 10],
|
||||
color: 'rgba(100, 200, 255, 0.3)',
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(100, 200, 255, 0.3)',
|
||||
borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
|
||||
},
|
||||
barWidth: 20,
|
||||
data: values,
|
||||
label: {
|
||||
position: [0, -16],
|
||||
align: 'left',
|
||||
show: true,
|
||||
formatter: (params) => {
|
||||
return params.name;
|
||||
},
|
||||
},
|
||||
barMaxWidth: 40,
|
||||
markLine: {
|
||||
label: {
|
||||
color: '#26a69a',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '-100%',
|
||||
data: maxData,
|
||||
barBorderRadius: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(105,131,242,.3)',
|
||||
borderRadius: 10,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
barMaxWidth: 40,
|
||||
markLine: {
|
||||
label: {
|
||||
color: '#26a69a',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '内圆',
|
||||
type: 'scatter',
|
||||
hoverAnimation: false,
|
||||
data: barData,
|
||||
yAxisIndex: 0,
|
||||
symbolSize: 22,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#26a69a',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
zlevel: 2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '外圆',
|
||||
type: 'scatter',
|
||||
hoverAnimation: false,
|
||||
data: barData,
|
||||
yAxisIndex: 0,
|
||||
symbolSize: 28,
|
||||
symbol: `path://M512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-268.8a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z`,
|
||||
itemStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
opacity: 1,
|
||||
borderColor: 'rgba(44, 111, 226, 0.2)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
zlevel: 3,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -26,19 +26,36 @@
|
||||
<div class="_label" style="font-size: 30px">溯源信息</div>
|
||||
<div class="traceability_info_box">
|
||||
<div class="traceability_info_box_image">
|
||||
<img style="width: 100%; height: 100%" src="../../../assets/images/entities/tomatoImg.png" />
|
||||
<img v-if="info.productType === '番茄'" src="../../../assets/images/entities/tomatoImg.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '芹菜'" src="../../../assets/images/entities/芹菜.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '白菜'" src="../../../assets/images/entities/白菜.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '铁皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '紫皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '黑皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '黄皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '红茶'" src="../../../assets/images/entities/红茶.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '核桃'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
|
||||
<img v-else-if="info.productType === '核桃仁'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<div class="traceability_info_box_title">
|
||||
<div class="traceability_info_right">新鲜番茄</div>
|
||||
<div class="traceability_info_right">新鲜{{ info.productType }}</div>
|
||||
<div class="traceability_info_right_bottom">检测通过</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detection_text">权威检测</div>
|
||||
<section class="info_box">
|
||||
<div v-for="item in list1" :key="item.name">
|
||||
<span class="_label">{{ item.title }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<section>
|
||||
<div v-for="item in list1" :key="item.name" class="info_box">
|
||||
<div v-if="item.title === '样品名称'">
|
||||
<span class="_label">{{ item.title }}</span>
|
||||
<span>{{ info.productType }}</span>
|
||||
</div>
|
||||
<div v-else class="info_box">
|
||||
<span class="_label">{{ item.title }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="route_box">
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productName": "蔬菜",
|
||||
"productCode": "10062787341458",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "芹菜",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productName": "蔬菜",
|
||||
"productCode": "10062787341458",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "芹菜",
|
||||
"manufacturer": "老灶坊食品加工厂",
|
||||
"shop": "深圳市吉祥干果店",
|
||||
"productTime": "2025年03月23日",
|
||||
@ -39,16 +39,16 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productName": "蔬菜",
|
||||
"productCode": "10062787348741",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "白菜",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productName": "蔬菜",
|
||||
"productCode": "10062787348741",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "白菜",
|
||||
"manufacturer": "九鼎香食品有限公司",
|
||||
"shop": "秦岭核香店",
|
||||
"productTime": "2025年02月18日",
|
||||
@ -77,16 +77,16 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productName": "石斛",
|
||||
"productCode": "10062787349847",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "铁皮石斛",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productName": "石斛",
|
||||
"productCode": "10062787349847",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "铁皮石斛",
|
||||
"manufacturer": "绿源智造食品加工厂",
|
||||
"shop": "晋南核味店",
|
||||
"productTime": "2025年01月20日",
|
||||
@ -115,16 +115,16 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productName": "石斛",
|
||||
"productCode": "10062787346574",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "紫皮石斛",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productName": "石斛",
|
||||
"productCode": "10062787346574",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "紫皮石斛",
|
||||
"manufacturer": "绿源智造食品加工厂",
|
||||
"shop": "福核斋店",
|
||||
"productTime": "2025年01月13日",
|
||||
@ -153,16 +153,16 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productName": "甘蔗",
|
||||
"productCode": "10062787341478",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "黑皮甘蔗",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productName": "甘蔗",
|
||||
"productCode": "10062787341478",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"productType": "黑皮甘蔗",
|
||||
"manufacturer": "一口鲜食品加工厂",
|
||||
"shop": "核养坊",
|
||||
"productTime": "2025年01月04日",
|
||||
@ -191,16 +191,16 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "红茶",
|
||||
"productName": "甘蔗",
|
||||
"productCode": "10062787346524",
|
||||
"specs": "袋装",
|
||||
"productType": "红茶",
|
||||
"productType": "黄皮甘蔗",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "红茶",
|
||||
"productName": "甘蔗",
|
||||
"productCode": "10062787346524",
|
||||
"specs": "袋装",
|
||||
"productType": "红茶",
|
||||
"productType": "黄皮甘蔗",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月04日",
|
||||
@ -228,120 +228,6 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787343574",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787343574",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "乌龙茶",
|
||||
"productCode": "10062787348745",
|
||||
"specs": "袋装",
|
||||
"productType": "乌龙茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "乌龙茶",
|
||||
"productCode": "10062787348745",
|
||||
"specs": "袋装",
|
||||
"productType": "乌龙茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "黄茶",
|
||||
"productCode": "10062787343254",
|
||||
"specs": "袋装",
|
||||
"productType": "黄茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "黄茶",
|
||||
"productCode": "10062787343254",
|
||||
"specs": "袋装",
|
||||
"productType": "黄茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346958",
|
||||
@ -380,158 +266,6 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346923",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787346923",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787343256",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787343256",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787347489",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"type": "1",
|
||||
"info": {
|
||||
"productName": "白茶",
|
||||
"productCode": "10062787347489",
|
||||
"specs": "袋装",
|
||||
"productType": "白茶",
|
||||
"manufacturer": "粤膳坊食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月21日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-22 05:32.45"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-22 21:43.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-23 04:15.20"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-23 22:55.05"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-25 07:23.46"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787347536",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"type": "2",
|
||||
"info": {
|
||||
"productName": "核桃",
|
||||
"productCode": "10062787347536",
|
||||
"specs": "袋装",
|
||||
"productType": "核桃仁",
|
||||
"manufacturer": "一口鲜食品加工厂",
|
||||
"shop": "茗香居店",
|
||||
"productTime": "2025年03月23日",
|
||||
"route": [
|
||||
{
|
||||
"name": "出库",
|
||||
"time": "2025-03-25 07:30.46"
|
||||
},
|
||||
{
|
||||
"name": "到达临沧市",
|
||||
"time": "2025-03-25 14:38.41"
|
||||
},
|
||||
{
|
||||
"name": "到达昆明市",
|
||||
"time": "2025-03-26 00:15.35"
|
||||
},
|
||||
{
|
||||
"name": "到达广州市",
|
||||
"time": "2025-03-26 16:55.08"
|
||||
},
|
||||
{
|
||||
"name": "出售",
|
||||
"time": "2025-03-27 09:26.40"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"productName": "红茶",
|
||||
"productCode": "10062787345641",
|
||||
|
||||
@ -21,12 +21,12 @@ import producer from '@/assets/images/trace/producer.png';
|
||||
import batch from '@/assets/images/trace/batch.png';
|
||||
import publicize from '@/assets/images/trace/publicize.png';
|
||||
let valData = reactive([
|
||||
{ value: 356, name: '扫码统计', unit: '次', bg: all },
|
||||
{ value: 47865, name: '扫码统计', unit: '次', bg: all },
|
||||
{ value: 86, name: '溯源产品', unit: '种', bg: producer },
|
||||
{ value: 90, name: '溯源产品', unit: '个', bg: batch },
|
||||
{ value: 136, name: '宣传门店', unit: '家', bg: publicize },
|
||||
{ value: 6, name: '线上门店', unit: '家', bg: online },
|
||||
{ value: 63, name: '业务人员', unit: '人', bg: person },
|
||||
{ value: 90, name: '溯源批次', unit: '个', bg: batch },
|
||||
{ value: 136, name: '追溯主体数', unit: '家', bg: publicize },
|
||||
{ value: 32654, name: '发放溯源码', unit: '家', bg: online },
|
||||
{ value: 23578, name: '有效期内溯源码', unit: '人', bg: person },
|
||||
]);
|
||||
|
||||
onMounted(() => {});
|
||||
@ -43,11 +43,12 @@ onMounted(() => {});
|
||||
._item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 45%;
|
||||
justify-content: flex-start;
|
||||
width: 47%;
|
||||
height: calc((100% / 3) - 16px);
|
||||
color: #fff;
|
||||
&:nth-child(2n + 2) {
|
||||
justify-content: flex-end;
|
||||
//justify-content: flex-end;
|
||||
}
|
||||
._value {
|
||||
> span {
|
||||
|
||||
@ -9,7 +9,7 @@ import { reactive, ref } from 'vue';
|
||||
// #region
|
||||
const data = ref([
|
||||
{
|
||||
name: '烟草',
|
||||
name: '蔬菜',
|
||||
value: 60.8,
|
||||
},
|
||||
{
|
||||
@ -17,16 +17,16 @@ const data = ref([
|
||||
value: 44.4,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
name: '石斛',
|
||||
value: 24.3,
|
||||
},
|
||||
{
|
||||
name: '蔬菜',
|
||||
name: '茶叶',
|
||||
value: 32.7,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 32.9,
|
||||
value: 22.9,
|
||||
},
|
||||
]);
|
||||
const option = reactive({
|
||||
@ -34,6 +34,7 @@ const option = reactive({
|
||||
opacity: 1,
|
||||
itemGap: 0,
|
||||
autoItemHeight: 2,
|
||||
legendSuffix: '万件',
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 3,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="_container">
|
||||
<div class="_left">
|
||||
<video src="../../../assets/video.mp4" autoplay loop controls></video>
|
||||
<video src="../../../assets/video2.mp4" autoplay loop controls></video>
|
||||
<div class="video_footer">核桃仁原材料</div>
|
||||
</div>
|
||||
<div class="_right">
|
||||
@ -42,7 +42,7 @@ import { ref } from 'vue';
|
||||
|
||||
<style lang="scss" scoped>
|
||||
._container {
|
||||
padding: 12px 0;
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
@ -57,9 +57,10 @@ import { ref } from 'vue';
|
||||
font-size: 18px;
|
||||
video {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
// height: calc(100% - 60px);
|
||||
border: 2px solid #01fefd;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.video_footer {
|
||||
width: 64%;
|
||||
@ -70,7 +71,7 @@ import { ref } from 'vue';
|
||||
}
|
||||
}
|
||||
._right {
|
||||
padding: 24px 0;
|
||||
padding: 10px;
|
||||
> div {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
|
||||
@ -82,15 +82,15 @@ onMounted(() => {});
|
||||
.item_3 {
|
||||
right: 0;
|
||||
top: 5%;
|
||||
width: 26%;
|
||||
width: 24%;
|
||||
background-image: url('../../../assets/images/trace/bubbleC.png');
|
||||
._num {
|
||||
color: #fef906;
|
||||
}
|
||||
}
|
||||
.item_4 {
|
||||
top: 40px;
|
||||
left: 36%;
|
||||
top: 30px;
|
||||
left: 38%;
|
||||
width: 22%;
|
||||
background-image: url('../../../assets/images/trace/bubbleD.png');
|
||||
._num {
|
||||
|
||||
@ -26,68 +26,68 @@ const chinaGeoCoordMap = ref({
|
||||
广东: [113.12244, 23.009505],
|
||||
香港: [114.133834, 22.381374],
|
||||
四川: [104.063707, 30.658753],
|
||||
河北: [114.511072, 38.054693],
|
||||
北京: [116.46, 39.92],
|
||||
浙江: [120.19, 30.26],
|
||||
山东: [117, 36.65],
|
||||
福建: [119.3, 26.08],
|
||||
上海: [121.48, 31.22],
|
||||
重庆: [106.54, 29.59],
|
||||
江西: [115.89, 28.68],
|
||||
山西: [112.53, 37.87],
|
||||
黑龙江: [126.63, 45.75],
|
||||
陕西: [108.95, 34.27],
|
||||
辽宁: [123.38, 41.8],
|
||||
// 河北: [114.511072, 38.054693],
|
||||
// 北京: [116.46, 39.92],
|
||||
// 浙江: [120.19, 30.26],
|
||||
// 山东: [117, 36.65],
|
||||
// 福建: [119.3, 26.08],
|
||||
// 上海: [121.48, 31.22],
|
||||
// 重庆: [106.54, 29.59],
|
||||
// 江西: [115.89, 28.68],
|
||||
// 山西: [112.53, 37.87],
|
||||
// 黑龙江: [126.63, 45.75],
|
||||
// 陕西: [108.95, 34.27],
|
||||
// 辽宁: [123.38, 41.8],
|
||||
海南: [110.35, 20.02],
|
||||
湖南: [113, 28.21],
|
||||
宁夏: [106.27, 38.47],
|
||||
湖北: [114.31, 30.52],
|
||||
内蒙古: [111.65, 40.82],
|
||||
天津: [117.2, 39.13],
|
||||
贵州: [106.71, 26.57],
|
||||
甘肃: [103.73, 36.03],
|
||||
江苏: [118.78, 32.04],
|
||||
吉林: [125.35, 43.88],
|
||||
河南: [113.65, 34.76],
|
||||
青海: [101.74, 36.56],
|
||||
安徽: [117.27, 31.86],
|
||||
广西: [108.33, 22.84],
|
||||
西藏: [91.11, 29.97],
|
||||
新疆: [87.68, 43.77],
|
||||
// 宁夏: [106.27, 38.47],
|
||||
// 湖北: [114.31, 30.52],
|
||||
// 内蒙古: [111.65, 40.82],
|
||||
// 天津: [117.2, 39.13],
|
||||
// 贵州: [106.71, 26.57],
|
||||
// 甘肃: [103.73, 36.03],
|
||||
// 江苏: [118.78, 32.04],
|
||||
// 吉林: [125.35, 43.88],
|
||||
// 河南: [113.65, 34.76],
|
||||
// 青海: [101.74, 36.56],
|
||||
// 安徽: [117.27, 31.86],
|
||||
// 广西: [108.33, 22.84],
|
||||
// 西藏: [91.11, 29.97],
|
||||
// 新疆: [87.68, 43.77],
|
||||
});
|
||||
const chinaDatas = ref([
|
||||
[{ name: '云南', value: 382 }],
|
||||
[{ name: '广东', value: 62256 }],
|
||||
[{ name: '香港', value: 9256 }],
|
||||
[{ name: '四川', value: 1256 }],
|
||||
[{ name: '河北', value: 382 }],
|
||||
[{ name: '北京', value: 88 }],
|
||||
[{ name: '浙江', value: 87 }],
|
||||
[{ name: '山东', value: 87 }],
|
||||
[{ name: '福建', value: 87 }],
|
||||
[{ name: '上海', value: 87 }],
|
||||
[{ name: '重庆', value: 87 }],
|
||||
[{ name: '江西', value: 86 }],
|
||||
[{ name: '山西', value: 84 }],
|
||||
[{ name: '黑龙江', value: 83 }],
|
||||
[{ name: '陕西', value: 83 }],
|
||||
[{ name: '辽宁', value: 82 }],
|
||||
// [{ name: '河北', value: 382 }],
|
||||
// [{ name: '北京', value: 88 }],
|
||||
// [{ name: '浙江', value: 87 }],
|
||||
// [{ name: '山东', value: 87 }],
|
||||
// [{ name: '福建', value: 87 }],
|
||||
// [{ name: '上海', value: 87 }],
|
||||
// [{ name: '重庆', value: 87 }],
|
||||
// [{ name: '江西', value: 86 }],
|
||||
// [{ name: '山西', value: 84 }],
|
||||
// [{ name: '黑龙江', value: 83 }],
|
||||
// [{ name: '陕西', value: 83 }],
|
||||
// [{ name: '辽宁', value: 82 }],
|
||||
[{ name: '海南', value: 82 }],
|
||||
[{ name: '湖南', value: 82 }],
|
||||
[{ name: '宁夏', value: 82 }],
|
||||
[{ name: '湖北', value: 81 }],
|
||||
[{ name: '内蒙古', value: 81 }],
|
||||
[{ name: '天津', value: 80 }],
|
||||
[{ name: '贵州', value: 80 }],
|
||||
[{ name: '甘肃', value: 80 }],
|
||||
[{ name: '江苏', value: 80 }],
|
||||
[{ name: '吉林', value: 80 }],
|
||||
[{ name: '河南', value: 79 }],
|
||||
[{ name: '青海', value: 79 }],
|
||||
[{ name: '广西', value: 78 }],
|
||||
[{ name: '安徽', value: 77 }],
|
||||
[{ name: '新疆', value: 76 }],
|
||||
[{ name: '西藏', value: 76 }],
|
||||
// [{ name: '宁夏', value: 82 }],
|
||||
// [{ name: '湖北', value: 81 }],
|
||||
// [{ name: '内蒙古', value: 81 }],
|
||||
// [{ name: '天津', value: 80 }],
|
||||
// [{ name: '贵州', value: 80 }],
|
||||
// [{ name: '甘肃', value: 80 }],
|
||||
// [{ name: '江苏', value: 80 }],
|
||||
// [{ name: '吉林', value: 80 }],
|
||||
// [{ name: '河南', value: 79 }],
|
||||
// [{ name: '青海', value: 79 }],
|
||||
// [{ name: '广西', value: 78 }],
|
||||
// [{ name: '安徽', value: 77 }],
|
||||
// [{ name: '新疆', value: 76 }],
|
||||
// [{ name: '西藏', value: 76 }],
|
||||
]);
|
||||
// 设置扩散中心
|
||||
const convertData = (data) => {
|
||||
@ -222,7 +222,7 @@ const getSeries = () => {
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
title: {
|
||||
text: '地图统计图表',
|
||||
text: '',
|
||||
subtext: '',
|
||||
x: 'center',
|
||||
y: 'top',
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="原材料供应" :top-postion="'left'">
|
||||
<template #back>
|
||||
<codeNumCharts :data="one"></codeNumCharts>
|
||||
<codeNumCharts :data="oneData"></codeNumCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="生产加工数据" :top-postion="'left'">
|
||||
<customBack top-title="生产加工包装" :top-postion="'left'">
|
||||
<template #back>
|
||||
<principalTypeCharts></principalTypeCharts>
|
||||
</template>
|
||||
@ -76,7 +76,29 @@ import productTypeCharts from './components/productTypeCharts.vue';
|
||||
import traceBarCharts from './components/traceBarCharts.vue';
|
||||
import detectionCharts from './components/detectionCharts.vue';
|
||||
|
||||
const one = ref([]);
|
||||
// 此处数据需要按照类目的重要程度顺序排列
|
||||
const oneData = ref([
|
||||
{
|
||||
name: '蔬菜',
|
||||
value: 4000,
|
||||
},
|
||||
{
|
||||
name: '甘蔗',
|
||||
value: 6500,
|
||||
},
|
||||
{
|
||||
name: '石斛',
|
||||
value: 8000,
|
||||
},
|
||||
{
|
||||
name: '茶叶',
|
||||
value: 6000,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 3500,
|
||||
},
|
||||
]);
|
||||
|
||||
const handleCommand = (data) => {
|
||||
// state.queryCode = data.value;
|
||||
|
||||
@ -5,8 +5,8 @@ VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:9000'
|
||||
VITE_APP_NAME = 'sub-government-affairs-service'
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.14:8080'
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.9:8080'
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:9300'
|
||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.14:8080'
|
||||
@ -9,12 +9,12 @@ const dictRoutes = [
|
||||
redirect: '/sub-government-affairs-service/region',
|
||||
meta: { title: '基础信息维护', icon: 'DocumentRemove' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/region',
|
||||
name: 'region',
|
||||
component: () => import('@/views/dict/component/region/index.vue'),
|
||||
meta: { title: '行政信息', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/region',
|
||||
// name: 'region',
|
||||
// component: () => import('@/views/dict/component/region/index.vue'),
|
||||
// meta: { title: '行政信息', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/landCassification',
|
||||
name: 'landCassification',
|
||||
|
||||
@ -15,12 +15,12 @@ const landsRoutes = [
|
||||
// component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
||||
// meta: { title: '土地信息登记', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/plantPlan',
|
||||
name: 'plantPlan',
|
||||
component: () => import('@/views/landManage/component/plantPlan/index.vue'),
|
||||
meta: { title: '种植计划', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/plantPlan',
|
||||
// name: 'plantPlan',
|
||||
// component: () => import('@/views/landManage/component/plantPlan/index.vue'),
|
||||
// meta: { title: '种植计划', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/operationRecord',
|
||||
name: 'operationRecord',
|
||||
|
||||
@ -130,7 +130,7 @@ const state = reactive({
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '种植面积',
|
||||
label: '种植面积（亩）',
|
||||
prop: 'plantingArea',
|
||||
rules: {
|
||||
required: true,
|
||||
@ -156,7 +156,7 @@ const state = reactive({
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '生长周期',
|
||||
label: '生长周期（周）',
|
||||
prop: 'growthCycle',
|
||||
width: '120px',
|
||||
viewDisabled: true,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="16">
|
||||
<!-- <pane size="16">
|
||||
<el-col>
|
||||
<custom-table-tree title="土地用途分类信息" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
|
||||
<template #default="{ data }">
|
||||
@ -12,7 +12,7 @@
|
||||
</template>
|
||||
</custom-table-tree>
|
||||
</el-col>
|
||||
</pane>
|
||||
</pane> -->
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<avue-crud
|
||||
@ -32,6 +32,46 @@
|
||||
@row-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #icon="{ row }">
|
||||
<i :class="row.icon" style="font-size: 24px"></i>
|
||||
</template>
|
||||
<!-- <template #icon="{ row }">
|
||||
<i :class="row.icon" style="font-size: 24px"></i>
|
||||
</template>
|
||||
<template #menu="{ row, size }">
|
||||
<el-button :size="size" text type="primary" @click="handleAdd(row)">新增子级</el-button>
|
||||
</template> -->
|
||||
<template #menu-left>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
|
||||
<template #status="{ row }">
|
||||
<el-tag v-if="row.status == 1" type="success">启用</el-tag>
|
||||
<el-tag v-if="row.status == 0" type="danger">禁用</el-tag>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
<!-- <avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.pageData"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@row-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
@ -45,7 +85,7 @@
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</avue-crud> -->
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
@ -83,10 +123,16 @@ const state = reactive({
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
headerAlign: 'center',
|
||||
align: 'center',
|
||||
border: true,
|
||||
index: true,
|
||||
rowKey: 'id',
|
||||
rowParentKey: 'pid',
|
||||
dialogWidth: 600,
|
||||
selection: false,
|
||||
column: [
|
||||
{ label: '编号', prop: 'id', addDisplay: false, editDisplay: false },
|
||||
// { label: '编号', prop: 'id', addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '分类名称',
|
||||
prop: 'landType',
|
||||
@ -198,7 +244,14 @@ const getLandTree = async () => {
|
||||
try {
|
||||
const res = await getLandTypeTree();
|
||||
if (res.code == 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
treeData.value = [{ id: '0', landType: '土地分类', children: res.data }];
|
||||
state.data = treeData.value;
|
||||
state.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
app.$message.error(err.msg);
|
||||
@ -235,24 +288,28 @@ const loadData = () => {
|
||||
|
||||
const handleNodeClick = (data, node) => {
|
||||
treeSelected.value = data;
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
});
|
||||
|
||||
// 页数
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
};
|
||||
|
||||
// 条数
|
||||
const sizeChange = (size) => {
|
||||
state.query.current = 1;
|
||||
state.query.size = size;
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
@ -260,12 +317,14 @@ const searchChange = (params, done) => {
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.query.current = 1;
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const refreshChange = () => {
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
app.$message.success('刷新成功');
|
||||
};
|
||||
|
||||
@ -286,8 +345,9 @@ async function rowStatus(row) {
|
||||
if (res.code == 200) {
|
||||
app.$message.success('操作成功！');
|
||||
nextTick(() => {
|
||||
state.data[row.$index].status = status;
|
||||
loadData();
|
||||
row.status = status;
|
||||
// loadData();
|
||||
// getLandTree();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -298,7 +358,7 @@ async function rowDel(row, done, loading) {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('已删除！');
|
||||
getLandTree();
|
||||
loadData();
|
||||
// loadData();
|
||||
done();
|
||||
}
|
||||
loading();
|
||||
@ -320,7 +380,7 @@ const rowSave = async (row, done, loading) => {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getLandTree();
|
||||
loadData();
|
||||
// loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -343,7 +403,7 @@ const rowUpdate = (row, index, done, loading) => {
|
||||
editLandType(row).then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
loadData();
|
||||
// loadData();
|
||||
getLandTree();
|
||||
done();
|
||||
}
|
||||
|
||||
@ -46,6 +46,7 @@ import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getRegion } from '@/apis/index';
|
||||
import { getAnnualList } from '@/apis/land';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
@ -133,26 +134,26 @@ const infoData = reactive({
|
||||
});
|
||||
|
||||
const loadData = () => {
|
||||
//state.loading = true;
|
||||
// getAnnualList(state.query)
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// const { current, size, total, records } = res.data;
|
||||
// state.data = records;
|
||||
// state.pageData = {
|
||||
// currentPage: current || 1,
|
||||
// pageSize: size || 10,
|
||||
// total: total,
|
||||
// };
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// state.data = [];
|
||||
// })
|
||||
// .finally(() => {
|
||||
// state.loading = false;
|
||||
// });
|
||||
state.loading = true;
|
||||
getAnnualList(state.query)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
state.data = records;
|
||||
state.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
state.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
const getTree = () => {
|
||||
@ -202,24 +203,24 @@ const selectionChange = (rows) => {
|
||||
};
|
||||
|
||||
const handleNodeClick = (data) => {
|
||||
// if (data.level == '2') {
|
||||
// return;
|
||||
// }
|
||||
// if (data.level == '0') {
|
||||
// infoData.countyId = data.id;
|
||||
// infoData.townId = '';
|
||||
// }
|
||||
// if (data.level == '1') {
|
||||
// let countys =
|
||||
// typeTree.filter((m) => {
|
||||
// return m.id == data.pId;
|
||||
// }) || [];
|
||||
// let town = countys[0] && countys[0].children ? countys[0].children : [];
|
||||
// townOptions = town;
|
||||
// infoData.townId = data.id;
|
||||
// infoData.countyId = data.pId;
|
||||
// }
|
||||
// console.info('infoData', infoData);
|
||||
if (data.level == '2') {
|
||||
return;
|
||||
}
|
||||
if (data.level == '0') {
|
||||
infoData.countyId = data.id;
|
||||
infoData.townId = '';
|
||||
}
|
||||
if (data.level == '1') {
|
||||
let countys =
|
||||
typeTree.value.filter((m) => {
|
||||
return m.id == data.pId;
|
||||
}) || [];
|
||||
let town = countys[0] && countys[0].children ? countys[0].children : [];
|
||||
townOptions.value = town;
|
||||
infoData.townId = data.id;
|
||||
infoData.countyId = data.pId;
|
||||
}
|
||||
console.info('infoData', infoData);
|
||||
};
|
||||
// 编辑
|
||||
const rowStatus = (row) => {
|
||||
|
||||
@ -77,12 +77,19 @@ const handleLandChange = async (value, form, done) => {
|
||||
const productTypeOptions = reactive([
|
||||
{ label: '蔬菜', value: '0' },
|
||||
{ label: '水果', value: '1' },
|
||||
{ label: '畜产品', value: '2' },
|
||||
{ label: '水产品', value: '3' },
|
||||
{ label: '谷物', value: '4' },
|
||||
{ label: '农资', value: '5' },
|
||||
{ label: '种源', value: '6' },
|
||||
{ label: '农产品加工', value: '7' },
|
||||
{ label: '其他', value: '8' },
|
||||
]);
|
||||
|
||||
const bTypeOptions = reactive([
|
||||
{ label: '养殖', value: '0' },
|
||||
{ label: '种植', value: '1' },
|
||||
{ label: '畜牧业', value: '1' },
|
||||
{ label: '农户', value: '0' },
|
||||
// { label: '种植', value: '1' },
|
||||
{ label: '合作社', value: '2' },
|
||||
]);
|
||||
|
||||
let timeVal = ref([]);
|
||||
@ -179,6 +186,35 @@ const state = reactive({
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '网格区域',
|
||||
// prop: 'cities',
|
||||
// type: 'cascader',
|
||||
// hide: true,
|
||||
// addDisplay: true,
|
||||
// editDisplay: true,
|
||||
// viewDisplay: false,
|
||||
// // multiple: true,
|
||||
// // checkStrictly: true,
|
||||
// // collapseTags: true,
|
||||
// // emitPath: false,
|
||||
// // checkDescendants: false,
|
||||
// props: {
|
||||
// label: 'areaName',
|
||||
// value: 'areaCode',
|
||||
// children: 'areaChildVOS',
|
||||
// },
|
||||
// dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
||||
// dicHeaders: {
|
||||
// authorization: UserStore.token,
|
||||
// },
|
||||
// dicFormatter: (res) => res.data ?? [],
|
||||
// rules: {
|
||||
// required: true,
|
||||
// message: '请选择',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '合作社地址',
|
||||
prop: 'villageCode',
|
||||
@ -297,7 +333,7 @@ const state = reactive({
|
||||
column: [
|
||||
{
|
||||
label: '主体名称',
|
||||
prop: 'taskCode',
|
||||
prop: 'businessName',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
},
|
||||
{
|
||||
@ -315,7 +351,7 @@ const state = reactive({
|
||||
},
|
||||
{
|
||||
label: '主要产品',
|
||||
prop: 'product',
|
||||
prop: 'primaryProduct',
|
||||
rules: { required: false, message: '请输入', trigger: 'blur' },
|
||||
},
|
||||
{
|
||||
@ -335,9 +371,9 @@ const state = reactive({
|
||||
},
|
||||
{
|
||||
label: '合作社地址',
|
||||
prop: 'inspectionTarget',
|
||||
prop: 'villageCode',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
type: 'select',
|
||||
type: 'cascader',
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
|
||||
@ -344,7 +344,7 @@ const state = reactive({
|
||||
label: '合作社地址',
|
||||
prop: 'inspectionTarget',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
type: 'select',
|
||||
type: 'cascader',
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.pageData"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:data="data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@ -93,6 +93,31 @@ const enterpriseBase = [
|
||||
{ label: '公司地址', prop: 'crop' },
|
||||
];
|
||||
|
||||
const data = reactive([
|
||||
{
|
||||
executor: '100001',
|
||||
executors: '好又来蔬菜批发公司',
|
||||
BType: '农企合作社',
|
||||
operationDate: '2030-05-23',
|
||||
crop: '蔬菜',
|
||||
status: '通过',
|
||||
seek: '暂无',
|
||||
seektime: '2025-01-12',
|
||||
creatTime: '2025-01-1-01',
|
||||
},
|
||||
{
|
||||
executor: '100002',
|
||||
executors: '亚恒商贸有限公司',
|
||||
BType: '农企合作社',
|
||||
operationDate: '2030-03-22',
|
||||
crop: '蔬菜',
|
||||
status: '通过',
|
||||
seek: '暂无',
|
||||
seektime: '2025-01-05',
|
||||
creatTime: '2025-01-1-01',
|
||||
},
|
||||
]);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
@ -124,7 +149,7 @@ const state = reactive({
|
||||
},
|
||||
{
|
||||
label: '主体名称',
|
||||
prop: 'executor',
|
||||
prop: 'executors',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
@ -171,18 +196,18 @@ const state = reactive({
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '经营产品种类',
|
||||
showOverflowTooltip: true,
|
||||
search: false,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '经营产品种类',
|
||||
// showOverflowTooltip: true,
|
||||
// search: false,
|
||||
// addDisplay: false,
|
||||
// editDisplay: false,
|
||||
// rules: {
|
||||
// required: true,
|
||||
// message: '请输入',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '主要产品',
|
||||
prop: 'crop',
|
||||
@ -197,19 +222,19 @@ const state = reactive({
|
||||
},
|
||||
{
|
||||
label: '审核状态',
|
||||
prop: 'crop',
|
||||
prop: 'status',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
label: '审核意见',
|
||||
prop: 'crop',
|
||||
prop: 'seek',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{ label: '审核时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
|
||||
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
|
||||
{ label: '审核时间', prop: 'seektime', addDisplay: false, editDisplay: false, search: false },
|
||||
{ label: '创建时间', prop: 'creatTime', addDisplay: false, editDisplay: false, search: false },
|
||||
],
|
||||
searchColumn: [
|
||||
{ label: '主体代码', prop: 'landName', search: true },
|
||||
|
||||
@ -38,7 +38,7 @@ const res = [
|
||||
name: `1号基地`,
|
||||
area: 100,
|
||||
status: 1,
|
||||
location: '东经 92°54′至 99°23′，北纬 20°27′至 18°41′F',
|
||||
location: '东经 92°45′至 99°23′，北纬 20°27′至 18°35′F',
|
||||
type: 1,
|
||||
p1: 1,
|
||||
p2: 100,
|
||||
@ -52,7 +52,7 @@ const res = [
|
||||
name: `2号基地`,
|
||||
area: 211,
|
||||
status: 1,
|
||||
location: '东经 92°54′至 99°21′，北纬 20°25′至 18°31′F',
|
||||
location: '东经 92°44′至 99°24′，北纬 20°23′至 18°31′F',
|
||||
type: 1,
|
||||
p1: 1,
|
||||
p2: 120,
|
||||
@ -66,7 +66,7 @@ const res = [
|
||||
name: `3号基地`,
|
||||
area: 121,
|
||||
status: 1,
|
||||
location: '东经 92°53′至 99°22′，北纬 20°21′至 18°32′F',
|
||||
location: '东经 92°43′至 99°25′，北纬 20°21′至 18°31′F',
|
||||
type: 1,
|
||||
p1: 1,
|
||||
p2: 56,
|
||||
@ -80,7 +80,7 @@ const res = [
|
||||
name: `4号基地`,
|
||||
area: 231,
|
||||
status: 2,
|
||||
location: '东经 92°53′至 99°22′，北纬 20°21′至 18°32′F',
|
||||
location: '东经 92°42′至 99°26′，北纬 21°20′至 18°32′F',
|
||||
type: 2,
|
||||
p1: 2,
|
||||
p2: 145,
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.page"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:data="res"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@ -32,34 +32,32 @@ import { sleep } from '@/utils';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
|
||||
import Mock from 'mockjs';
|
||||
const res = Mock.mock({
|
||||
'data|2': [
|
||||
{
|
||||
id: '@increment(100000)',
|
||||
name: '小麦',
|
||||
shop: '万好芽种公司',
|
||||
buyTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
avalibleTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
createdTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
},
|
||||
{
|
||||
id: '@increment(100000)',
|
||||
name: '玉米',
|
||||
shop: '万好芽种公司',
|
||||
buyTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
avalibleTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
createdTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
},
|
||||
{
|
||||
id: '@increment(100000)',
|
||||
name: '南瓜',
|
||||
shop: '丰隆种源专卖点',
|
||||
buyTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
avalibleTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
createdTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
},
|
||||
],
|
||||
});
|
||||
const res = [
|
||||
{
|
||||
id: '100001',
|
||||
name: '小麦',
|
||||
shop: '万好芽种公司',
|
||||
buyTime: '2025-01-20 20:32:24',
|
||||
avalibleTime: '2026-01-20 20:32:24',
|
||||
createdTime: '2025-01-20 20:32:24',
|
||||
},
|
||||
{
|
||||
id: '100002',
|
||||
name: '南瓜',
|
||||
shop: '丰隆种源公司',
|
||||
buyTime: '2025-01-15 14:20:21',
|
||||
avalibleTime: '2026-01-15 14:20:21',
|
||||
createdTime: '2025-01-15 14:20:21',
|
||||
},
|
||||
{
|
||||
id: '100003',
|
||||
name: '玉米',
|
||||
shop: '万好芽种公司',
|
||||
buyTime: '2025-01-12 17:25:32',
|
||||
avalibleTime: '2026-01-12 17:25:32',
|
||||
createdTime: '2025-01-12 17:25:32',
|
||||
},
|
||||
];
|
||||
|
||||
const app = useApp();
|
||||
const crudRef = ref(null);
|
||||
|
||||
BIN
sub-operation-service/src/assets/images/smartFarm/logo2.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/message.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/position.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/position.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/优先级.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/优先级.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/认证.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/认证.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -74,10 +74,10 @@ const router = useRouter();
|
||||
const keyword = ref('');
|
||||
|
||||
const meuns = ref([
|
||||
{
|
||||
label: '综合看板',
|
||||
path: '/sub-operation-service/dashboard',
|
||||
},
|
||||
// {
|
||||
// label: '综合看板',
|
||||
// path: '/sub-operation-service/dashboard',
|
||||
// },
|
||||
{
|
||||
label: '智慧种植',
|
||||
path: '/sub-operation-service/smartFarm',
|
||||
|
||||
@ -248,7 +248,7 @@ export const constantRoutes = [
|
||||
meta: { title: '使用申请' },
|
||||
},
|
||||
{
|
||||
path: 'apply/:id',
|
||||
path: 'brandApplyDetail',
|
||||
name: 'brandApplyDetail',
|
||||
component: () => import('@/views/brand/components/ApplyDetail.vue'),
|
||||
meta: { title: '产品申请' },
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<el-form-item label="溯源码">
|
||||
<el-button type="primary" @click="uploadTraceCode">
|
||||
<template #icon>
|
||||
<i class="el-icon-upload"></i>
|
||||
<el-icon><Upload /></el-icon>
|
||||
</template>
|
||||
点击上传
|
||||
</el-button>
|
||||
|
||||
@ -24,9 +24,9 @@ const router = useRouter();
|
||||
const products = ref([]);
|
||||
|
||||
// 获取商品数据
|
||||
getApplyList().then((res) => {
|
||||
products.value = res.data;
|
||||
});
|
||||
// getApplyList().then((res) => {
|
||||
// products.value = res.data;
|
||||
// });
|
||||
|
||||
const applyData = [
|
||||
{ id: 1, name: '耿马绿色蔬菜', imageUrl: 'images/brand/11.png' },
|
||||
@ -44,7 +44,7 @@ const applyData = [
|
||||
];
|
||||
|
||||
function gotoApplication(id) {
|
||||
router.push(`/sub-operation-service/brand/apply/${id}`);
|
||||
router.push('/sub-operation-service/brand/brandApplyDetail?id=' + id);
|
||||
}
|
||||
|
||||
// TODO: 对接口需要删除这个方法
|
||||
|
||||
@ -52,7 +52,7 @@ const menuMap = {
|
||||
// 获取当前菜单激活项
|
||||
const activeMenu = computed(() => {
|
||||
const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
|
||||
console.log(matched[0]);
|
||||
// console.log(matched[0]);
|
||||
return matched ? matched[0] : '';
|
||||
});
|
||||
// 菜单切换处理
|
||||
|
||||
@ -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>
|
||||
@ -139,7 +139,7 @@ const chartsData = reactive({
|
||||
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) {
|
||||
let content = `<div style='font-size: 14px; color: #666;text-align:left'>${params[0].name}</div>`;
|
||||
if (Array.isArray(params)) {
|
||||
|
||||
@ -1,52 +1,99 @@
|
||||
<template>
|
||||
<div class="purchaser-popup-warp">
|
||||
<el-dialog v-model="isShow" title="采购报价" width="800" :before-close="doCancel">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto" class="custom-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品分类" prop="typeId">
|
||||
<el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收购价格" prop="price">
|
||||
<el-input-number v-model="ruleForm.price" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采购商品" prop="goods">
|
||||
<el-input v-model="ruleForm.goods" style="width: 200px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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 label-width="auto" class="custom-form">
|
||||
<!-- <el-row :gutter="20">-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="商品分类" prop="typeId">-->
|
||||
<!-- <el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="收购价格" prop="price">-->
|
||||
<!-- <el-input-number v-model="ruleForm.price" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="采购商品" prop="goods">-->
|
||||
<!-- <el-input v-model="ruleForm.goods" style="width: 200px" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收购数量" prop="num">
|
||||
<el-input-number v-model="ruleForm.num" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收货地址" prop="addr">
|
||||
<el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label=" " prop="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-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采购说明" prop="remark">
|
||||
<el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="收购数量" prop="num">-->
|
||||
<!-- <el-input-number v-model="ruleForm.num" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="收货地址" prop="addr">-->
|
||||
<!-- <el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label=" " prop="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-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="采购说明" prop="remark">-->
|
||||
<!-- <el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </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%"> </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%"> </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%"> </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>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="doCancel">取消</el-button>
|
||||
<el-button type="primary" @click="doSure"> 确定 </el-button>
|
||||
<el-button type="primary" style="height: 40px; width: 120px" @click="doSure"> 确认 </el-button>
|
||||
<el-button style="height: 40px; width: 120px" @click="doCancel">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -59,6 +106,10 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import { fa } from 'element-plus/es/locale/index.mjs';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const formData = ref({
|
||||
toHome: '0',
|
||||
address: '',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
@ -133,6 +184,40 @@ defineExpose({
|
||||
});
|
||||
</script>
|
||||
<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 {
|
||||
}
|
||||
.custom-form {
|
||||
@ -148,4 +233,10 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 30px !important;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,22 +2,29 @@
|
||||
<div class="purchaser-index-warp">
|
||||
<common current-name="purchaser">
|
||||
<template #main>
|
||||
<el-row class="purchaser-top">
|
||||
<el-col :span="12">
|
||||
<div class="purchaser-top-title">行情动态</div>
|
||||
<div class="purchaser-charts">
|
||||
<marketCharts></marketCharts>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="purchaser-top-title">近7天热门产品</div>
|
||||
<div class="purchaser-charts">
|
||||
<hotGoodsWordClould></hotGoodsWordClould>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<filtertop :list="treeList"></filtertop>
|
||||
|
||||
<div v-if="showDetail">
|
||||
<el-row class="purchaser-top">
|
||||
<el-col :span="12">
|
||||
<div class="purchaser-top-title">行情动态</div>
|
||||
<div class="purchaser-charts">
|
||||
<marketCharts :height="'180'"></marketCharts>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="purchaser-top-title">近7天热门产品</div>
|
||||
<div class="purchaser-charts">
|
||||
<hotGoodsWordClould></hotGoodsWordClould>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8" align="left">
|
||||
@ -39,7 +46,7 @@
|
||||
<el-table-column prop="buyer" label="采购时间" />
|
||||
<el-table-column fixed="right" label="操作">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
|
||||
<el-button link type="primary" size="small"> 去报价 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -61,6 +68,8 @@ import purchaserPopup from './components/purchaserPopup.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { getRegion } from '@/apis/index';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { transaction } from '@/apis/agricultural.js';
|
||||
import GoodSource from '@/views/ecommerce/components/goodSource.vue';
|
||||
const route = useRoute();
|
||||
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);
|
||||
const detailId = ref(0);
|
||||
|
||||
const typeTree = 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 = () => {
|
||||
popupQuote.value && popupQuote.value.doShow();
|
||||
};
|
||||
@ -218,15 +179,33 @@ let tableData = reactive([
|
||||
]);
|
||||
|
||||
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(() => {
|
||||
console.info('onMounted');
|
||||
getTree();
|
||||
getTreeList();
|
||||
});
|
||||
</script>
|
||||
<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 {
|
||||
width: 100%;
|
||||
.purchaser-top {
|
||||
|
||||
@ -3,15 +3,25 @@
|
||||
<common current-name="supplier">
|
||||
<template #main>
|
||||
<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">
|
||||
<template v-for="(n, index) in 16" :key="index">
|
||||
<template v-for="(n, index) in list" :key="n.id">
|
||||
<div class="goods-item">
|
||||
<goodsItem></goodsItem>
|
||||
<goodsItem :data="n"></goodsItem>
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
</template>
|
||||
</common>
|
||||
@ -23,118 +33,73 @@ import banner from './components/banner.vue';
|
||||
import filtertop from './components/filtertop.vue';
|
||||
import goodsItem from './components/goodsItem.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
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: '观赏树木' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
import { agriculturalList, transaction } from '@/apis/agricultural.js';
|
||||
let treeList = reactive([]);
|
||||
|
||||
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']);
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-warp {
|
||||
|
||||
@ -5,6 +5,8 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const currentDevice = ref(0);
|
||||
|
||||
// 图标icon对照表
|
||||
const icons = [
|
||||
{ 监控: 'camera' },
|
||||
@ -61,7 +63,13 @@ const props = defineProps({
|
||||
<template>
|
||||
<div>
|
||||
<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 v-for="(item, index) in devices" :key="index" class="device">
|
||||
<div v-if="item.status == 1" class="status" style="background-color: #25bf82">正常</div>
|
||||
|
||||
@ -81,6 +81,14 @@ onMounted(async () => {
|
||||
<el-card style="border-radius: 16px">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<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">
|
||||
当前设备
|
||||
<el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px">
|
||||
@ -125,4 +133,11 @@ onMounted(async () => {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
border-radius: 90px;
|
||||
background-color: #25bf82;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,13 +29,6 @@ const devices = ref([
|
||||
status: '1', // 0: 离线 1: 正常 -1: 异常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'temperature',
|
||||
detail: 'A区-监控设备66',
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'humidity',
|
||||
@ -43,13 +36,6 @@ const devices = ref([
|
||||
status: '0',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'humidity',
|
||||
detail: 'A区-监控设备1',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'valve',
|
||||
@ -57,13 +43,6 @@ const devices = ref([
|
||||
status: '-1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
icon: 'valve',
|
||||
status: '0',
|
||||
detail: 'A区-监控设备21',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: 'A-007',
|
||||
icon: 'sprinkler',
|
||||
@ -71,13 +50,6 @@ const devices = ref([
|
||||
detail: 'A区-监控设备4',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'A-008',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'sprinkler',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'A-009',
|
||||
detail: 'A区-监控设备9',
|
||||
@ -85,13 +57,6 @@ const devices = ref([
|
||||
status: '-1',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
name: 'A-010',
|
||||
detail: 'A区-监控设备10',
|
||||
icon: 'waterSupplyValve',
|
||||
status: '0',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'A-011',
|
||||
detail: 'A区-监控设备3',
|
||||
@ -99,13 +64,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
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']);
|
||||
|
||||
@ -29,13 +29,6 @@ const devices = ref([
|
||||
status: '1', // 0: 离线 1: 正常 -1: 异常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'tempSensor',
|
||||
detail: 'A区-监控设备66',
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'heater',
|
||||
@ -43,13 +36,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'heater',
|
||||
detail: 'A区-监控设备1',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'heat',
|
||||
@ -57,13 +43,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
icon: 'disinfectionLamp',
|
||||
status: '0',
|
||||
detail: 'A区-监控设备21',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: 'A-007',
|
||||
icon: 'timer',
|
||||
@ -71,13 +50,6 @@ const devices = ref([
|
||||
detail: 'A区-监控设备4',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'A-008',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'timer',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'A-009',
|
||||
detail: 'A区-监控设备9',
|
||||
@ -92,13 +64,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'A-011',
|
||||
detail: 'A区-监控设备3',
|
||||
icon: 'liquidSensor',
|
||||
status: '0',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'A-012',
|
||||
detail: 'A区-监控设备3',
|
||||
|
||||
@ -17,13 +17,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'temp',
|
||||
detail: 'A区-监控设备2',
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'ph',
|
||||
@ -31,13 +24,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'ph',
|
||||
detail: 'A区-监控设备4',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'O2',
|
||||
@ -59,20 +45,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
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',
|
||||
icon: 'dust',
|
||||
@ -87,13 +59,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'B-006',
|
||||
icon: 'float',
|
||||
detail: 'B区-监控设备6',
|
||||
status: '1',
|
||||
id: 11,
|
||||
},
|
||||
]);
|
||||
const rules = ref([
|
||||
{
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
<el-card style="width: 60%; margin-right: 20px; border-radius: 16px">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<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">
|
||||
当前设备
|
||||
<el-select
|
||||
@ -91,20 +98,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
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',
|
||||
icon: 'soilSensor',
|
||||
@ -119,13 +112,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
icon: 'anemometer',
|
||||
detail: 'A区-监控设备6',
|
||||
status: '0',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: 'B-001',
|
||||
icon: 'rainGauge',
|
||||
@ -133,13 +119,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'B-002',
|
||||
icon: 'rainGauge',
|
||||
detail: 'B区-监控设备2',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'B-003',
|
||||
icon: 'waterLoggingSensor',
|
||||
@ -154,13 +133,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'B-005',
|
||||
icon: 'PM2.5',
|
||||
detail: 'B区-监控设备5',
|
||||
status: '1',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'B-006',
|
||||
icon: 'light',
|
||||
@ -260,6 +232,13 @@ const chooseIcon = (type) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dot {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
border-radius: 90px;
|
||||
background-color: #25bf82;
|
||||
}
|
||||
.plantStatus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -71,27 +71,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
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',
|
||||
icon: 'sensor',
|
||||
@ -99,27 +78,6 @@ const devices = ref([
|
||||
status: '-1',
|
||||
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
|
||||
|
||||
@ -60,13 +60,6 @@ const devices = ref([
|
||||
status: '0',
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'fertilizerTank',
|
||||
detail: 'A区-监控设备66',
|
||||
status: '0',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'fertilization',
|
||||
@ -81,20 +74,6 @@ const devices = ref([
|
||||
status: '-1',
|
||||
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',
|
||||
icon: 'mixingPump',
|
||||
@ -102,20 +81,6 @@ const devices = ref([
|
||||
detail: 'A区-监控设备4',
|
||||
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',
|
||||
detail: 'A区-监控设备10',
|
||||
@ -123,20 +88,6 @@ const devices = ref([
|
||||
status: '0',
|
||||
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
|
||||
/* --------------- methods --------------- */
|
||||
|
||||
@ -15,13 +15,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'temp',
|
||||
detail: 'A区-监控设备2',
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'ph',
|
||||
@ -29,13 +22,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'ph',
|
||||
detail: 'A区-监控设备4',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'O2',
|
||||
@ -57,13 +43,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'B-002',
|
||||
icon: 'elect',
|
||||
detail: 'B区-监控设备2',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'B-003',
|
||||
icon: 'dust',
|
||||
@ -71,13 +50,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
name: 'B-004',
|
||||
icon: 'dust',
|
||||
detail: 'B区-监控设备4',
|
||||
status: '1',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'B-005',
|
||||
icon: 'float',
|
||||
@ -85,13 +57,6 @@ const devices = ref([
|
||||
status: '1',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'B-006',
|
||||
icon: 'float',
|
||||
detail: 'B区-监控设备6',
|
||||
status: '1',
|
||||
id: 11,
|
||||
},
|
||||
]);
|
||||
const rules = ref([
|
||||
{
|
||||
@ -183,6 +148,13 @@ const chooseIcon = (type) => {
|
||||
<el-card style="border-radius: 16px; width: 58%; height: fit-content">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<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">
|
||||
当前设备
|
||||
<el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px">
|
||||
@ -250,4 +222,11 @@ const chooseIcon = (type) => {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
border-radius: 90px;
|
||||
background-color: #25bf82;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user