Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
2da225162e
@ -61,7 +61,7 @@ export const rightApps = [
|
||||
// entry: VITE_APP_SUB_GSS,
|
||||
entry: VITE_APP_SUB_GSR,
|
||||
// activeRule: '/sub-government-screen-service',
|
||||
activeRule: '/new-digital-agriculture-screen/v2/land',
|
||||
activeRule: '/new-digital-agriculture-screen',
|
||||
title: '数据大屏',
|
||||
icon: 'images/platform/icon-screen.png',
|
||||
},
|
||||
|
||||
@ -35,9 +35,8 @@ import { leftApps, rightApps } from '@/micro/app';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
|
||||
const gotoPage = (row) => {
|
||||
console.log(row);
|
||||
console.log(window.history.pushState({}, row.name, row.activeRule));
|
||||
window.history.pushState({}, row.name, row.activeRule);
|
||||
// window.history.pushState({}, row.name, row.activeRule);
|
||||
window.location.href = row.activeRule;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
17620
main/yarn.lock
17620
main/yarn.lock
File diff suppressed because it is too large
Load Diff
75
new-digital-agriculture-screen/auto-imports.d.ts
vendored
75
new-digital-agriculture-screen/auto-imports.d.ts
vendored
@ -1,75 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
53
new-digital-agriculture-screen/components.d.ts
vendored
53
new-digital-agriculture-screen/components.d.ts
vendored
@ -1,53 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||
'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
Components: typeof import('./src/components/index.js')['default']
|
||||
copy: typeof import('./src/components/centerMap copy.vue')['default']
|
||||
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
||||
CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
|
||||
CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
|
||||
CustomEchartColumnLine: typeof import('./src/components/custom-echart-column-line/index.vue')['default']
|
||||
CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
|
||||
CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
|
||||
CustomEchartLineLine: typeof import('./src/components/custom-echart-line-line/index.vue')['default']
|
||||
CustomEchartMaps: typeof import('./src/components/custom-echart-maps/index.vue')['default']
|
||||
CustomEchartMixin: typeof import('./src/components/custom-echart-mixin/index.vue')['default']
|
||||
CustomEchartPictorialBar: typeof import('./src/components/custom-echart-pictorial-bar/index.vue')['default']
|
||||
CustomEchartPie: typeof import('./src/components/custom-echart-pie/index.vue')['default']
|
||||
CustomEchartPie3d: typeof import('./src/components/custom-echart-pie-3d/index.vue')['default']
|
||||
CustomEchartPieGauge: typeof import('./src/components/custom-echart-pie-gauge/index.vue')['default']
|
||||
CustomEchartRadar: typeof import('./src/components/custom-echart-radar/index.vue')['default']
|
||||
CustomEchartScatterBlister: typeof import('./src/components/custom-echart-scatter-blister/index.vue')['default']
|
||||
CustomEchartTriangle: typeof import('./src/components/custom-echart-triangle/index.vue')['default']
|
||||
CustomEchartWaterDroplet: typeof import('./src/components/custom-echart-water-droplet/index.vue')['default']
|
||||
CustomEchartWordCloud: typeof import('./src/components/custom-echart-word-cloud/index.vue')['default']
|
||||
CustomIframe: typeof import('./src/components/custom-iframe/index.vue')['default']
|
||||
CustomImportExcel: typeof import('./src/components/custom-import-excel/index.vue')['default']
|
||||
CustomProgress: typeof import('./src/components/customProgress.vue')['default']
|
||||
CustomRankList: typeof import('./src/components/custom-rank-list/index.vue')['default']
|
||||
CustomRichEditor: typeof import('./src/components/custom-rich-editor/index.vue')['default']
|
||||
CustomScrollBoard: typeof import('./src/components/custom-scroll-board/index.vue')['default']
|
||||
CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
|
||||
CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
|
||||
CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
|
||||
NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
|
||||
NewPie: typeof import('./src/components/custom-echart-hyaline-cake/new-pie.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SubTop: typeof import('./src/components/subTop.vue')['default']
|
||||
SvgIcon: typeof import('./src/components/svg-icon/index.vue')['default']
|
||||
UpFile: typeof import('./src/components/custom-rich-editor/upFile.js')['default']
|
||||
}
|
||||
}
|
||||
@ -17,6 +17,70 @@ export const constantRoutes = [
|
||||
component: () => import('@/views/error/403.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/new-digital-agriculture-screen',
|
||||
name: 'home',
|
||||
component: Layout,
|
||||
redirect: '/new-digital-agriculture-screen/v2/land', //原home
|
||||
meta: { title: '首页', icon: '' },
|
||||
children: [
|
||||
// {
|
||||
// path: '/new-digital-agriculture-screen/v2/home',
|
||||
// component: () => import('@/views/home/index.vue'),
|
||||
// name: 'home',
|
||||
// meta: { title: '首页', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/new-digital-agriculture-screen/v2/land',
|
||||
component: () => import('@/views/land/index.vue'),
|
||||
name: 'land',
|
||||
meta: { title: '土地资源', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/new-digital-agriculture-screen/v2/inputs',
|
||||
name: 'inputs',
|
||||
component: () => import('@/views/inputs/index.vue'),
|
||||
meta: { title: '投入品监管', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/new-digital-agriculture-screen/v2/entities',
|
||||
name: 'entities',
|
||||
component: () => import('@/views/entities/index.vue'),
|
||||
meta: { title: '产出品管理', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: 'breed',
|
||||
// name: 'breed',
|
||||
// component: () => import('@/views/breed/index.vue'),
|
||||
// meta: { title: '', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: 'plant',
|
||||
// name: 'plant',
|
||||
// component: () => import('@/views/plant/index.vue'),
|
||||
// meta: { title: '', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/new-digital-agriculture-screen/v2/business',
|
||||
name: 'business',
|
||||
component: () => import('@/views/business/index.vue'),
|
||||
meta: { title: '生产经营主体', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/new-digital-agriculture-screen/v2/trace',
|
||||
name: 'trace',
|
||||
component: () => import('@/views/trace/index.vue'),
|
||||
meta: { title: '农产品溯源', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: 'early',
|
||||
// name: 'early',
|
||||
// component: () => import('@/views/early/index.vue'),
|
||||
// meta: { title: '', icon: '' },
|
||||
// },
|
||||
],
|
||||
},
|
||||
|
||||
// {
|
||||
// // 原来的首页默认配置
|
||||
// path: '/new-digital-agriculture-screen',
|
||||
@ -34,7 +98,7 @@ export const constantRoutes = [
|
||||
// ],
|
||||
// },
|
||||
// ...demoRouters,
|
||||
v2,
|
||||
// v2,
|
||||
// {
|
||||
// path: '/test',
|
||||
// name: 'test',
|
||||
|
||||
BIN
sub-operation-service/src/assets/images/business/b1-1.png
Normal file
BIN
sub-operation-service/src/assets/images/business/b1-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
BIN
sub-operation-service/src/assets/images/business/b1-2.png
Normal file
BIN
sub-operation-service/src/assets/images/business/b1-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
sub-operation-service/src/assets/images/business/b2-1.png
Normal file
BIN
sub-operation-service/src/assets/images/business/b2-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
BIN
sub-operation-service/src/assets/images/business/b2-2.png
Normal file
BIN
sub-operation-service/src/assets/images/business/b2-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
sub-operation-service/src/assets/images/business/bg_title.png
Normal file
BIN
sub-operation-service/src/assets/images/business/bg_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/PM2.5.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/PM2.5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/broadcast.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/broadcast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.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.5 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.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.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.4 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: 623 B |
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.8 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: 2.3 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.6 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 |
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: 608 B |
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.7 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: 2.4 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.8 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.2 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.5 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: 2.3 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.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.7 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.2 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: 2.0 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.5 KiB |
@ -127,12 +127,48 @@ export const constantRoutes = [
|
||||
name: 'bugInspection',
|
||||
meta: { title: '病虫害监测' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/envInspection',
|
||||
component: () => import('@/views/smartFarm/inspection/envInspection.vue'),
|
||||
name: 'envInspection',
|
||||
meta: { title: '环境监测' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/intelligentFertilizer',
|
||||
component: () => import('@/views/smartFarm/inspection/intelligentFertilizer.vue'),
|
||||
name: 'intelligentFertilizer',
|
||||
meta: { title: '智能配肥' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/growSeedlings',
|
||||
component: () => import('@/views/smartFarm/growSeedlings/index.vue'),
|
||||
component: () => import('@/views/smartFarm/manageControl/growSeedlings.vue'),
|
||||
name: 'growSeedlings',
|
||||
meta: { title: '一体育苗' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/pestPrevention',
|
||||
component: () => import('@/views/smartFarm/manageControl/pestPrevention.vue'),
|
||||
name: 'pestPrevention',
|
||||
meta: { title: '病虫害防治' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/irrigationSystem',
|
||||
component: () => import('@/views/smartFarm/manageControl/irrigationSystem.vue'),
|
||||
name: 'irrigationSystem',
|
||||
meta: { title: '喷灌滴灌' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/drainageControl',
|
||||
component: () => import('@/views/smartFarm/manageControl/drainageControl.vue'),
|
||||
name: 'drainageControl',
|
||||
meta: { title: '排集水控制' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/smartFarm/openCurtain',
|
||||
component: () => import('@/views/smartFarm/manageControl/openCurtain.vue'),
|
||||
name: 'openCurtain',
|
||||
meta: { title: '开窗卷帘' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
<template>
|
||||
<dev></dev>
|
||||
</template>
|
||||
<!-- <template>
|
||||
<div class="data-home-index">
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
|
||||
266
sub-operation-service/src/views/smartFarm/components/bugData.vue
Normal file
266
sub-operation-service/src/views/smartFarm/components/bugData.vue
Normal file
@ -0,0 +1,266 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表 DOM 引用
|
||||
const chartRef2 = ref(null);
|
||||
// ECharts 实例
|
||||
let chartInstance = null;
|
||||
// 颜色列表
|
||||
const colorList = ['#3685FE', '#FFD500', '#25BF82', '#FE4066'];
|
||||
// x轴数据
|
||||
const xData = ['1月', '2月', '3月', '4月', '5月', '6月'];
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
// 图表配置
|
||||
const option = {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
},
|
||||
left: 'center',
|
||||
top: '5%',
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
itemWidth: 6,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: '#556677',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: '#fff',
|
||||
color: '#556677',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
shadowColor: 'rgba(0,0,0,0)',
|
||||
shadowOffsetY: 0,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
backgroundColor: '#fff',
|
||||
textStyle: {
|
||||
color: '#5c6c7c',
|
||||
},
|
||||
padding: [10, 10],
|
||||
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(107,107,107,0.37)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
margin: 15,
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
padding: [11, 5, 7],
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#fff',
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: '#fff',
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: '#33c0cd',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#33c0cd',
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(107,107,107,0.37)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '蝗虫',
|
||||
type: 'line',
|
||||
data: [235, 852, 1208, 1988, 1657, 643],
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: '#3685FE',
|
||||
shadowColor: 'rgba(158,135,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[0],
|
||||
borderColor: colorList[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '飞蛾',
|
||||
type: 'line',
|
||||
data: [1124, 1055, 1654, 1764, 922, 55],
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: '#FFD500',
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[1],
|
||||
borderColor: colorList[1],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '毛虫',
|
||||
type: 'line',
|
||||
data: [1245, 618, 1468, 1814, 2175],
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: '#25BF82',
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[2],
|
||||
borderColor: colorList[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '其他昆虫',
|
||||
type: 'line',
|
||||
data: [1673, 1732, 783, 179, 963, 2068],
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: '#FE4066',
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorList[3],
|
||||
borderColor: colorList[3],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const initChart = () => {
|
||||
if (chartRef2.value) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
chartInstance = echarts.init(chartRef2.value);
|
||||
// 绘制图表
|
||||
chartInstance.setOption(option);
|
||||
// 自动显示最大值点的tooltip
|
||||
// showMaxValueTooltip();
|
||||
// 响应式调整
|
||||
window.addEventListener('resize', resizeChart);
|
||||
setTimeout(() => chartInstance.resize(), 10);
|
||||
}
|
||||
};
|
||||
// 组件挂载时初始化图表
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
// 组件卸载前销毁图表
|
||||
onBeforeUnmount(() => {
|
||||
if (chartInstance) {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
});
|
||||
// 调整图表大小
|
||||
const resizeChart = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="width: 100%; min-height: 210px">
|
||||
<div ref="chartRef2" style="width: 100%; height: 210px; margin-top: 20px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -51,14 +51,38 @@ const menus = reactive([
|
||||
name: 'control',
|
||||
title: '生产管理控制',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/ecommerce-purchaser',
|
||||
path: '',
|
||||
isOpen: false,
|
||||
children: [
|
||||
{
|
||||
name: 'control',
|
||||
title: '一体育苗',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/growSeedlings',
|
||||
path: '/sub-operation-service/smartFarm/manageControl/growSeedlings',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '病虫害预防',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/manageControl/pestPrevention',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '喷灌滴灌',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '排集水控制',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/manageControl/drainageControl',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '开窗卷帘',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/manageControl/openCurtain',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
devices: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
isShowBroadcast: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
broadcastData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const getDeviceSwitchIsOpen = (device) => {
|
||||
return computed({
|
||||
get: () => device.isOpen !== 0,
|
||||
set: (value) => {
|
||||
device.isOpen = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
};
|
||||
const getDeviceSwitchStatus = (device) => {
|
||||
return computed({
|
||||
get: () => device.status == '0',
|
||||
set: (value) => {
|
||||
device.status = value;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// console.info('broadcastData', props.broadcastData);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card style="border-radius: 16px">
|
||||
<div v-if="isShowBroadcast" class="broadcast-box">
|
||||
<img :src="getAssetsFile('images/smartFarm/broadcast.png')" alt="" />
|
||||
<div style="flex: 1">
|
||||
<el-carousel height="32px" direction="vertical" :autoplay="true">
|
||||
<el-carousel-item v-for="(item, index) in broadcastData" :key="index" style="line-height: 36px; font-size: 16px">
|
||||
<div text="2xl" justify="center">{{ item }}</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in devices" :key="index" class="device-list-box">
|
||||
<div class="device-list-title" style="">{{ item.title }}</div>
|
||||
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 16px">
|
||||
<div v-for="(device, i) in item.devices" :key="i" class="device">
|
||||
<div v-if="device.status == 1" class="status" style="background-color: #25bf82">正常</div>
|
||||
<div v-else-if="device.status == 0" class="status" style="background-color: #999999">离线</div>
|
||||
<div v-else-if="device.status == -1" class="status" style="background-color: #fe4066">故障</div>
|
||||
<div style="display: flex; flex-direction: column; justify-content: flex-start; height: 100%">
|
||||
<div style="display: flex; justify-content: flex-start">
|
||||
<img v-if="device.icon === 'pump'" :src="getAssetsFile('images/smartFarm/排水泵.png')" alt="" />
|
||||
<img v-else-if="device.icon === 'gate'" :src="getAssetsFile('images/smartFarm/电动闸阀.png')" alt="" />
|
||||
<img v-else-if="device.icon === 'sensor'" :src="getAssetsFile('images/smartFarm/液位传感器.png')" alt="" />
|
||||
<div style="margin-left: 10px">
|
||||
<div style="font-size: 16px; text-align: left; color: #000000">{{ device.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 12px; padding-left: 6px; margin: 10px 0; text-align: left">{{ device.serial }}</div>
|
||||
<div style="padding-left: 6px; text-align: left">
|
||||
<el-switch
|
||||
v-model="getDeviceSwitchIsOpen(device).value"
|
||||
:disabled="getDeviceSwitchStatus(device).value"
|
||||
class="ml-2"
|
||||
style="--el-switch-on-color: #25bf82; --el-switch-off-color: #999999"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.broadcast-box {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 115px;
|
||||
}
|
||||
}
|
||||
.device-list-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.device-list-box:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.device-list-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.device {
|
||||
height: 140px;
|
||||
flex: 0 0 calc(25% - 20px);
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 16px 16px 16px 10px;
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
border-radius: 0 16px 0 16px;
|
||||
height: 32px;
|
||||
line-height: 26px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -5,6 +5,40 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 图标icon对照表
|
||||
const icons = [
|
||||
{ 监控: 'camera' },
|
||||
{ 传感器: 'sensor' },
|
||||
{ 水质溶解氧: 'O2' },
|
||||
{ 温度: 'temp' },
|
||||
{ 酸碱度: 'ph' },
|
||||
{ 水质电导率: 'elect' },
|
||||
{ 浊度: 'dust' },
|
||||
{ 悬浮物: 'float' },
|
||||
{ 分光器: 'light' },
|
||||
{ 阀门: 'valve' },
|
||||
{ 喷头: 'sprinkler' },
|
||||
{ 计时器: 'timer' },
|
||||
{ 加热器: 'heater' },
|
||||
{ 搅拌机: 'mixer' },
|
||||
{ 热力: 'heat' },
|
||||
{ 液位传感器: 'liquidSensor' },
|
||||
{ 消毒灯: 'disinfectionLamp' },
|
||||
{ 温度传感器: 'tempSensor' },
|
||||
{ 智能阀控: 'intelligentValveControl' },
|
||||
{ 供水阀: 'waterSupplyValve' },
|
||||
{ 混合泵: 'mixingPump' },
|
||||
{ 混合罐: 'mixingTank' },
|
||||
{ 施肥: 'fertilization' },
|
||||
{ 肥料罐: 'fertilizerTank' },
|
||||
{ 电磁阀状态: 'solenoidValve' },
|
||||
{ 'PM2.5': 'PM2.5' },
|
||||
{ 风速仪: 'anemometer' },
|
||||
{ 雨量计: 'rainGauge' },
|
||||
{ 土壤传感器: 'soilSensor' },
|
||||
{ 积水传感器: 'waterLoggingSensor' },
|
||||
];
|
||||
|
||||
const props = defineProps({
|
||||
devices: {
|
||||
type: Array,
|
||||
@ -54,6 +88,27 @@ const props = defineProps({
|
||||
<img v-else-if="item.icon === 'dust'" :src="getAssetsFile('images/smartFarm/浊度.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'float'" :src="getAssetsFile('images/smartFarm/悬浮物.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'light'" :src="getAssetsFile('images/smartFarm/分光器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'valve'" :src="getAssetsFile('images/smartFarm/阀门.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'sprinkler'" :src="getAssetsFile('images/smartFarm/喷头.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'timer'" :src="getAssetsFile('images/smartFarm/计时器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'heater'" :src="getAssetsFile('images/smartFarm/加热器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'mixer'" :src="getAssetsFile('images/smartFarm/搅拌机.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'heat'" :src="getAssetsFile('images/smartFarm/热力.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'liquidSensor'" :src="getAssetsFile('images/smartFarm/液位传感器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'disinfectionLamp'" :src="getAssetsFile('images/smartFarm/消毒灯.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'tempSensor'" :src="getAssetsFile('images/smartFarm/温度传感器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'intelligentValveControl'" :src="getAssetsFile('images/smartFarm/智能阀控.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'waterSupplyValve'" :src="getAssetsFile('images/smartFarm/供水阀.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'mixingPump'" :src="getAssetsFile('images/smartFarm/混合泵.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'mixingTank'" :src="getAssetsFile('images/smartFarm/混合罐.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'fertilization'" :src="getAssetsFile('images/smartFarm/施肥.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'fertilizerTank'" :src="getAssetsFile('images/smartFarm/肥料罐.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'solenoidValve'" :src="getAssetsFile('images/smartFarm/电磁阀状态.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'PM2.5'" :src="getAssetsFile('images/smartFarm/PM2.5.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'anemometer'" :src="getAssetsFile('images/smartFarm/风速仪.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'rainGauge'" :src="getAssetsFile('images/smartFarm/雨量计.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'soilSensor'" :src="getAssetsFile('images/smartFarm/土壤传感器.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'waterLoggingSensor'" :src="getAssetsFile('images/smartFarm/积水传感器.png')" alt="" />
|
||||
<div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -56,30 +56,42 @@ const leftMenu = reactive([
|
||||
isOpen: true,
|
||||
children: [
|
||||
{
|
||||
name: 'supplier',
|
||||
name: 'fieldInspection',
|
||||
title: '田间监测',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/fieldInspection',
|
||||
},
|
||||
{
|
||||
name: 'supplier',
|
||||
name: 'waterInspection',
|
||||
title: '水质监测',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/waterInspection',
|
||||
},
|
||||
{
|
||||
name: 'supplier',
|
||||
name: 'bugInspection',
|
||||
title: '病虫害监测',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/bugInspection',
|
||||
},
|
||||
{
|
||||
name: 'envInspection',
|
||||
title: '环境监测',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/envInspection',
|
||||
},
|
||||
{
|
||||
name: 'intelligentFertilizer',
|
||||
title: '智能配肥',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/smartFarm/intelligentFertilizer',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '生产管理控制',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/main',
|
||||
path: '',
|
||||
isOpen: false,
|
||||
children: [
|
||||
{
|
||||
@ -88,6 +100,30 @@ const leftMenu = reactive([
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/growSeedlings',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '病虫害预防',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/pestPrevention',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '喷灌滴灌',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/irrigationSystem',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '排集水控制',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/drainageControl',
|
||||
},
|
||||
{
|
||||
name: 'control',
|
||||
title: '开窗卷帘',
|
||||
icon: 'menu3.png',
|
||||
path: '/sub-operation-service/smartFarm/openCurtain',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
@ -40,8 +40,8 @@ onMounted(() => {
|
||||
</tr>
|
||||
<tr v-for="(item, index) in data" :key="item.id || index">
|
||||
<td v-for="(cell, i) of item" :key="item.id || i">
|
||||
<span style="color: #25bf82" v-if="cell == '开启'">{{ cell }}</span>
|
||||
<span style="color: #fe4066" v-else-if="cell == '关闭'">{{ cell }}</span>
|
||||
<span v-if="cell == '开启'" style="color: #25bf82">{{ cell }}</span>
|
||||
<span v-else-if="cell == '关闭'" style="color: #fe4066">{{ cell }}</span>
|
||||
<span v-else>{{ cell }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -52,7 +52,7 @@ const props = defineProps({
|
||||
<img v-else-if="item.icon === 'gogga'" :src="getAssetsFile('images/smartFarm/病虫害.png')" alt="" />
|
||||
<img v-else-if="item.icon === 'water'" :src="getAssetsFile('images/smartFarm/灌溉控制.png')" alt="" />
|
||||
<div style="margin-left: 10px">
|
||||
<div style="font-size: 16px; text-align: left">{{ item.name }}</div>
|
||||
<div style="font-size: 16px; text-align: left; color: #000000">{{ item.name }}</div>
|
||||
<div style="font-size: 12px; text-align: left">{{ item.serial }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div ref="chartRef" style="width: 100%; height: 230px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const chartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '8%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: ['黑星病', '火疫病', '叶腐病'],
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true, // 刻度线与标签对齐
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)', // 浅灰色刻度线
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 1000,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 隐藏Y轴刻度
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 隐藏网格线
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '黑星病',
|
||||
type: 'bar',
|
||||
barWidth: '15%',
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
color: '#3685FE', // 橙色
|
||||
},
|
||||
data: [400, 400, 300, 300, 300, 400],
|
||||
},
|
||||
{
|
||||
name: '火疫病',
|
||||
type: 'bar',
|
||||
barWidth: '15%',
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
color: '#25BF82', // 绿色
|
||||
},
|
||||
data: [400, 500, 500, 500, 500, 400],
|
||||
},
|
||||
{
|
||||
name: '叶腐病',
|
||||
type: 'bar',
|
||||
barWidth: '15%',
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
color: '#FFD500', // 蓝绿色
|
||||
},
|
||||
data: [400, 600, 700, 700, 700, 400],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
|
||||
// 窗口大小变化时自适应
|
||||
const resizeChart = () => {
|
||||
chartInstance?.resize();
|
||||
};
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
chartInstance?.dispose();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
@ -1,13 +1,7 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<devices :title="'环境监测设备'" :devices="devices"></devices>
|
||||
</div>
|
||||
<div style="margin-top: 10px; display: flex; justify-content: space-between">
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 10px; width: 100%">
|
||||
<el-card style="width: 60%">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left">实时环境监测</div>
|
||||
<div style="color: #999999; line-height: 25px">
|
||||
当前设备
|
||||
<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>
|
||||
<div class="envData">
|
||||
<div class="dt">
|
||||
<div class="values">21℃</div>
|
||||
<div class="points">空气温度</div>
|
||||
</div>
|
||||
<div class="dt">
|
||||
<div class="values">61%</div>
|
||||
<div class="points">空气湿度</div>
|
||||
</div>
|
||||
<div class="dt">
|
||||
<div class="values">1600mm</div>
|
||||
<div class="points">空气温度</div>
|
||||
</div>
|
||||
<div class="dt">
|
||||
<div class="values">东南风</div>
|
||||
<div class="points">风向</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="envData">
|
||||
<div class="dt">
|
||||
<div class="values">12μg/m³</div>
|
||||
<div class="points">PM2.5</div>
|
||||
</div>
|
||||
<div class="dt">
|
||||
<div class="values">679Lux</div>
|
||||
<div class="points">光照强度</div>
|
||||
</div>
|
||||
<div class="dt">
|
||||
<div class="values">440ppm</div>
|
||||
<div class="points">二氧化碳浓度</div>
|
||||
</div>
|
||||
<div class="dt">
|
||||
<div class="values">1.5m/s</div>
|
||||
<div class="points">风速</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notices">
|
||||
<div v-for="(item, index) in notices" :key="index">
|
||||
<img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" style="height: 20px" />
|
||||
<span style="font-size: 14px">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left">作物生长状态</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">酸碱度:</div>
|
||||
<div class="rightValue">6.5 正常</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">养分含量:</div>
|
||||
<div class="errorValue">N 元素含量不足</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">重金属含量:</div>
|
||||
<div class="errorValue">Hg 金属含量超标</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">水温:</div>
|
||||
<div class="errorValue">38℃ 偏高</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">水浑浊度:</div>
|
||||
<div class="rightValue">良好</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">酸碱度:</div>
|
||||
<div class="rightValue">正常</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">盐分含量:</div>
|
||||
<div class="rightValue">正常</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Devices from '@/views/smartFarm/components/devices.vue';
|
||||
import Common from '@/views/smartFarm/components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
icon: 'temp',
|
||||
detail: 'A区-监控设备1',
|
||||
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',
|
||||
detail: 'A区-监控设备4',
|
||||
status: '-1',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
icon: 'anemometer',
|
||||
detail: 'A区-监控设备5',
|
||||
status: '1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
icon: 'anemometer',
|
||||
detail: 'A区-监控设备6',
|
||||
status: '0',
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
name: 'B-001',
|
||||
icon: 'rainGauge',
|
||||
detail: 'B区-监控设备1',
|
||||
status: '1',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
name: 'B-002',
|
||||
icon: 'rainGauge',
|
||||
detail: 'B区-监控设备2',
|
||||
status: '-1',
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
name: 'B-003',
|
||||
icon: 'waterLoggingSensor',
|
||||
detail: 'B区-监控设备3',
|
||||
status: '1',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
name: 'B-004',
|
||||
icon: 'PM2.5',
|
||||
detail: 'B区-监控设备4',
|
||||
status: '1',
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
name: 'B-005',
|
||||
icon: 'PM2.5',
|
||||
detail: 'B区-监控设备5',
|
||||
status: '1',
|
||||
id: 10,
|
||||
},
|
||||
{
|
||||
name: 'B-006',
|
||||
icon: 'light',
|
||||
detail: 'B区-监控设备6',
|
||||
status: '1',
|
||||
id: 11,
|
||||
},
|
||||
]);
|
||||
const currentDevice = ref(0);
|
||||
const notices = ref([
|
||||
{
|
||||
title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
|
||||
content: '',
|
||||
},
|
||||
{
|
||||
title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
|
||||
content: '',
|
||||
},
|
||||
]);
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
const chooseIcon = (type) => {
|
||||
switch (type) {
|
||||
case 'light':
|
||||
return '分光器.png';
|
||||
case 'float':
|
||||
return '悬浮物.png';
|
||||
case 'O2':
|
||||
return '水质溶解氧.png';
|
||||
case 'elect':
|
||||
return '水质电导率.png';
|
||||
case 'dust':
|
||||
return '浊度.png';
|
||||
case 'temp':
|
||||
return '温度.png';
|
||||
case 'ph':
|
||||
return '酸碱度.png';
|
||||
}
|
||||
};
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plantStatus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin: 7px 0;
|
||||
.leftKey {
|
||||
color: #000000;
|
||||
}
|
||||
.rightValue {
|
||||
color: #25bf82;
|
||||
}
|
||||
.errorValue {
|
||||
color: #fe4066;
|
||||
}
|
||||
}
|
||||
.notices {
|
||||
div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
text-align: left;
|
||||
}
|
||||
.envData {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
.dt {
|
||||
width: 24%;
|
||||
text-align: left;
|
||||
.values {
|
||||
color: #25bf82;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.points {
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plantStatus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
|
||||
.leftKey {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.rightValue {
|
||||
color: #25bf82;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<devices :title="'智能配肥设备'" :devices="devices"></devices>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 10px">
|
||||
<stream :title="'施肥监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
|
||||
<el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left">配肥分析</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">土壤酸碱度:</div>
|
||||
<div class="rightValue">正常</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">土壤养分含量:</div>
|
||||
<div class="errorValue">N 元素不足</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">光照强度:</div>
|
||||
<div class="errorValue">偏高</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">风速:</div>
|
||||
<div class="rightValue">微风</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">作物生长状态:</div>
|
||||
<div class="rightValue">良好</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">设备状态:</div>
|
||||
<div class="rightValue">正常</div>
|
||||
</div>
|
||||
<div class="plantStatus">
|
||||
<div class="leftKey">肥料储备:</div>
|
||||
<div class="rightValue">充足</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import Devices from '@/views/smartFarm/components/devices.vue';
|
||||
import Stream from '@/views/smartFarm/components/stream.vue';
|
||||
import * as echarts from 'echarts';
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
icon: 'fertilizerTank',
|
||||
detail: 'A区-监控设备9',
|
||||
status: '0',
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
icon: 'fertilizerTank',
|
||||
detail: 'A区-监控设备66',
|
||||
status: '0',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
icon: 'fertilization',
|
||||
detail: 'A区-监控设备7',
|
||||
status: '0',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
icon: 'mixingTank',
|
||||
detail: 'A区-监控设备1',
|
||||
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',
|
||||
status: '0',
|
||||
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',
|
||||
icon: 'solenoidValve',
|
||||
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 --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plantStatus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin: 7px 0;
|
||||
.leftKey {
|
||||
color: #000000;
|
||||
}
|
||||
.rightValue {
|
||||
color: #25bf82;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<ControlDevices :devices="devices" :is-show-broadcast="true" :broadcast-data="broadcastData"></ControlDevices>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import ControlDevices from '@/views/smartFarm/components/controlDevices.vue';
|
||||
|
||||
const devices = ref([
|
||||
{
|
||||
title: '排水泵站',
|
||||
devices: [
|
||||
{
|
||||
name: 'A-001',
|
||||
serial: 'YM20250101001', // 设备序列号
|
||||
icon: 'pump', // pump排水泵站 gate电动闸门 sensor水位传感器
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
serial: 'YM20250101002',
|
||||
icon: 'pump',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
serial: 'YM20250101003',
|
||||
icon: 'pump',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
serial: 'YM20250101004',
|
||||
icon: 'pump',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '电动闸门',
|
||||
devices: [
|
||||
{
|
||||
name: 'A-005',
|
||||
serial: 'YM20250101005', // 设备序列号
|
||||
icon: 'gate', // pump排水泵站 gate电动闸门 sensor水位传感器
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
serial: 'YM20250101006',
|
||||
icon: 'gate',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-007',
|
||||
serial: 'YM20250101007',
|
||||
icon: 'gate',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-008',
|
||||
serial: 'YM20250101008',
|
||||
icon: 'gate',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '水位传感器',
|
||||
devices: [
|
||||
{
|
||||
name: 'A-009',
|
||||
serial: 'YM20250101009', // 设备序列号
|
||||
icon: 'sensor', // pump排水泵站 gate电动闸门 sensor水位传感器
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-010',
|
||||
serial: 'YM20250101010',
|
||||
icon: 'sensor',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-011',
|
||||
serial: 'YM20250101011',
|
||||
icon: 'sensor',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-012',
|
||||
serial: 'YM20250101012',
|
||||
icon: 'sensor',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
const broadcastData = ref([
|
||||
'2025年01月01日10:10:10,排水泵P567789456发生异常关机,请检查设备情况!',
|
||||
'2025年02月02日11:14:55,排水泵P567789478发生异常故障,请检查设备情况!',
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -188,17 +188,4 @@ const rightTableTitle = ref([
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plantStatus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin: 7px 0;
|
||||
.leftKey {
|
||||
color: #000000;
|
||||
}
|
||||
.rightValue {
|
||||
color: #25bf82;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<ProduceDevices :title="'喷灌滴灌设备'" :devices="devices"></ProduceDevices>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 20px">
|
||||
<MyTable :title="'喷灌滴灌策略'" :data="leftTableData" :column="leftTableTitle" style="width: 60%; margin-right: 20px"></MyTable>
|
||||
<MyTable :title="'喷灌滴灌记录'" :data="rightTableData" :column="rightTableTitle" style="flex: 1"></MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import MyTable from '@/views/smartFarm/components/myTable.vue';
|
||||
import ProduceDevices from '@/views/smartFarm/components/produceDevices.vue';
|
||||
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
serial: 'YM20250101001', // 设备序列号
|
||||
icon: 'water', // plant育苗 gogga病虫害 water喷灌
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
serial: 'YM20250101002',
|
||||
icon: 'water',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
serial: 'YM20250101003',
|
||||
icon: 'water',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
serial: 'YM20250101004',
|
||||
icon: 'water',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
serial: 'YM20250101005',
|
||||
icon: 'water',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
serial: 'YM20250101006',
|
||||
icon: 'water',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '1',
|
||||
id: 5,
|
||||
},
|
||||
]);
|
||||
|
||||
const leftTableData = ref([
|
||||
{
|
||||
name: '土壤温度',
|
||||
value: '>21°C',
|
||||
device: '喷灌设备',
|
||||
behavior: '开启',
|
||||
time: 10,
|
||||
},
|
||||
{
|
||||
name: '土壤湿度',
|
||||
value: '>18%',
|
||||
device: '滴灌设备',
|
||||
behavior: '开启',
|
||||
time: 15,
|
||||
},
|
||||
{
|
||||
name: '光照强度',
|
||||
value: '>偏高',
|
||||
device: '滴灌设备',
|
||||
behavior: '开启',
|
||||
time: 5,
|
||||
},
|
||||
{
|
||||
name: '短期降水',
|
||||
value: '>偏低',
|
||||
device: '喷灌设备',
|
||||
behavior: '开启',
|
||||
time: '10',
|
||||
},
|
||||
{
|
||||
name: '风速',
|
||||
value: '>中风',
|
||||
device: '通风窗',
|
||||
behavior: '关闭',
|
||||
time: '/',
|
||||
},
|
||||
]);
|
||||
const leftTableTitle = ref([
|
||||
{
|
||||
label: '参数名称',
|
||||
prop: 'name',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '参数值',
|
||||
prop: 'value',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '智能设备',
|
||||
prop: 'device',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '机械行为',
|
||||
prop: 'behavior',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '持续时间(min)',
|
||||
prop: 'time',
|
||||
width: 'auto',
|
||||
},
|
||||
]);
|
||||
|
||||
const rightTableData = ref([
|
||||
{
|
||||
date: '2025-01-01 10:36',
|
||||
device: '喷灌设备',
|
||||
behavior: '开启',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:30',
|
||||
device: '滴灌设备',
|
||||
behavior: '关闭',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:22',
|
||||
device: '喷灌设备',
|
||||
behavior: '开启',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:10',
|
||||
device: '滴灌设备',
|
||||
behavior: '关闭',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:00',
|
||||
device: '通风窗',
|
||||
behavior: '开启',
|
||||
},
|
||||
]);
|
||||
const rightTableTitle = ref([
|
||||
{
|
||||
label: '执行时间',
|
||||
prop: 'date',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '智能设备',
|
||||
prop: 'device',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '机械行为',
|
||||
prop: 'behavior',
|
||||
width: 'auto',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<ControlDevices :devices="devices"></ControlDevices>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 20px">
|
||||
<MyTable :title="'操作时间'" :data="tableData" :column="tableTitle" style="width: 100%" class="my-table"></MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import MyTable from '@/views/smartFarm/components/myTable.vue';
|
||||
import ControlDevices from '@/views/smartFarm/components/controlDevices.vue';
|
||||
|
||||
const devices = ref([
|
||||
{
|
||||
title: '排水泵站',
|
||||
devices: [
|
||||
{
|
||||
name: 'A-001',
|
||||
serial: 'YM20250101001', // 设备序列号
|
||||
icon: 'pump', // pump排水泵站 gate电动闸门 sensor水位传感器
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
serial: 'YM20250101002',
|
||||
icon: 'pump',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
serial: 'YM20250101003',
|
||||
icon: 'pump',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
serial: 'YM20250101004',
|
||||
icon: 'pump',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '电动闸门',
|
||||
devices: [
|
||||
{
|
||||
name: 'A-005',
|
||||
serial: 'YM20250101005', // 设备序列号
|
||||
icon: 'gate', // pump排水泵站 gate电动闸门 sensor水位传感器
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
serial: 'YM20250101006',
|
||||
icon: 'gate',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-007',
|
||||
serial: 'YM20250101007',
|
||||
icon: 'gate',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-008',
|
||||
serial: 'YM20250101008',
|
||||
icon: 'gate',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '水位传感器',
|
||||
devices: [
|
||||
{
|
||||
name: 'A-009',
|
||||
serial: 'YM20250101009', // 设备序列号
|
||||
icon: 'sensor', // pump排水泵站 gate电动闸门 sensor水位传感器
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-010',
|
||||
serial: 'YM20250101010',
|
||||
icon: 'sensor',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-011',
|
||||
serial: 'YM20250101011',
|
||||
icon: 'sensor',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-012',
|
||||
serial: 'YM20250101012',
|
||||
icon: 'sensor',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
name: '卷膜器',
|
||||
serial: 'P-1110101',
|
||||
behavior: '开启',
|
||||
date: '2025-01-01 09:00:00',
|
||||
},
|
||||
{
|
||||
name: '智能电动天窗',
|
||||
serial: 'P-1110102',
|
||||
behavior: '开启',
|
||||
date: '2025-01-01 09:10:12',
|
||||
},
|
||||
{
|
||||
name: '链式开窗',
|
||||
serial: 'P-1110103',
|
||||
behavior: '关闭',
|
||||
date: '2025-01-01 09:22:20',
|
||||
},
|
||||
{
|
||||
name: '卷膜器',
|
||||
serial: 'P-1110104',
|
||||
behavior: '开启',
|
||||
date: '2025-01-01 09:03:10',
|
||||
},
|
||||
{
|
||||
name: '智能电动天窗',
|
||||
serial: 'P-1110105',
|
||||
behavior: '关闭',
|
||||
date: '2025-01-01 10:10:01',
|
||||
},
|
||||
]);
|
||||
const tableTitle = ref([
|
||||
{
|
||||
label: '设备名称',
|
||||
prop: 'name',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '设备编码',
|
||||
prop: 'serial',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
prop: 'behavior',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '操作日期',
|
||||
prop: 'date',
|
||||
width: 'auto',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-table {
|
||||
&:deep(table) {
|
||||
table-layout: fixed; //平均分配宽度
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<div>
|
||||
<ProduceDevices :title="'病虫害预防设备'" :devices="devices"></ProduceDevices>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 20px">
|
||||
<MyTable :title="'病虫害预防策略'" :data="leftTableData" :column="leftTableTitle" style="width: 60%; margin-right: 20px"></MyTable>
|
||||
<MyTable :title="'防治记录'" :data="rightTableData" :column="rightTableTitle" style="flex: 1"></MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Common from '../components/common.vue';
|
||||
import MyTable from '@/views/smartFarm/components/myTable.vue';
|
||||
import ProduceDevices from '@/views/smartFarm/components/produceDevices.vue';
|
||||
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
serial: 'YM20250101001', // 设备序列号
|
||||
icon: 'gogga', // plant育苗 gogga病虫害 water喷灌
|
||||
isOpen: 1, // 0:关闭 1:开启
|
||||
isOperation: 0, // 0:待机中 1:运作中
|
||||
status: '1', // -1:故障 0:离线 1:正常
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: 'A-002',
|
||||
serial: 'YM20250101002',
|
||||
icon: 'gogga',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'A-003',
|
||||
serial: 'YM20250101003',
|
||||
icon: 'gogga',
|
||||
isOpen: 0,
|
||||
isOperation: 0,
|
||||
status: '-1',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: 'A-004',
|
||||
serial: 'YM20250101004',
|
||||
icon: 'gogga',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '0',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: 'A-005',
|
||||
serial: 'YM20250101005',
|
||||
icon: 'gogga',
|
||||
isOpen: 0,
|
||||
isOperation: 1,
|
||||
status: '1',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: 'A-006',
|
||||
serial: 'YM20250101006',
|
||||
icon: 'gogga',
|
||||
isOpen: 1,
|
||||
isOperation: 0,
|
||||
status: '1',
|
||||
id: 5,
|
||||
},
|
||||
]);
|
||||
|
||||
const leftTableData = ref([
|
||||
{
|
||||
name: '虫群数量',
|
||||
value: '>20',
|
||||
device: '诱虫灯',
|
||||
behavior: '开启',
|
||||
time: 10,
|
||||
},
|
||||
{
|
||||
name: '诱捕数量',
|
||||
value: '>30',
|
||||
device: '灭虫灯',
|
||||
behavior: '开启',
|
||||
time: 15,
|
||||
},
|
||||
{
|
||||
name: '病理',
|
||||
value: '叶腐病',
|
||||
device: '农药喷洒机',
|
||||
behavior: '开启',
|
||||
time: 5,
|
||||
},
|
||||
{
|
||||
name: '虫群数量',
|
||||
value: '>20',
|
||||
device: '通风窗',
|
||||
behavior: '关闭',
|
||||
time: '/',
|
||||
},
|
||||
{
|
||||
name: '诱捕数量',
|
||||
value: '>30',
|
||||
device: '幕布',
|
||||
behavior: '开启',
|
||||
time: '/',
|
||||
},
|
||||
]);
|
||||
const leftTableTitle = ref([
|
||||
{
|
||||
label: '参数名称',
|
||||
prop: 'name',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '参数值',
|
||||
prop: 'value',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '智能设备',
|
||||
prop: 'device',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '机械行为',
|
||||
prop: 'behavior',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '持续时间(min)',
|
||||
prop: 'time',
|
||||
width: 'auto',
|
||||
},
|
||||
]);
|
||||
|
||||
const rightTableData = ref([
|
||||
{
|
||||
date: '2025-01-01 10:36',
|
||||
device: '农药喷洒机',
|
||||
behavior: '开启',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:30',
|
||||
device: '通风窗',
|
||||
behavior: '关闭',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:22',
|
||||
device: '诱虫灯',
|
||||
behavior: '开启',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:10',
|
||||
device: '灭虫灯',
|
||||
behavior: '开启',
|
||||
},
|
||||
{
|
||||
date: '2025-01-01 10:00',
|
||||
device: '幕布',
|
||||
behavior: '开启',
|
||||
},
|
||||
]);
|
||||
const rightTableTitle = ref([
|
||||
{
|
||||
label: '执行时间',
|
||||
prop: 'date',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '智能设备',
|
||||
prop: 'device',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
label: '机械行为',
|
||||
prop: 'behavior',
|
||||
width: 'auto',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user