diff --git a/sub-operation-service/src/assets/images/smartFarm/danger.png b/sub-operation-service/src/assets/images/smartFarm/danger.png new file mode 100644 index 0000000..8164df4 Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/danger.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/normal.png b/sub-operation-service/src/assets/images/smartFarm/normal.png new file mode 100644 index 0000000..1a6adc5 Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/normal.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/分光器.png b/sub-operation-service/src/assets/images/smartFarm/分光器.png new file mode 100644 index 0000000..ee1f2c7 Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/分光器.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/悬浮物.png b/sub-operation-service/src/assets/images/smartFarm/悬浮物.png new file mode 100644 index 0000000..155ed1e Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/悬浮物.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/水质溶解氧.png b/sub-operation-service/src/assets/images/smartFarm/水质溶解氧.png new file mode 100644 index 0000000..7014853 Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/水质溶解氧.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/水质电导率.png b/sub-operation-service/src/assets/images/smartFarm/水质电导率.png new file mode 100644 index 0000000..d2782cb Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/水质电导率.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/浊度.png b/sub-operation-service/src/assets/images/smartFarm/浊度.png new file mode 100644 index 0000000..d88a974 Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/浊度.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/温度.png b/sub-operation-service/src/assets/images/smartFarm/温度.png new file mode 100644 index 0000000..6de1e3e Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/温度.png differ diff --git a/sub-operation-service/src/assets/images/smartFarm/酸碱度.png b/sub-operation-service/src/assets/images/smartFarm/酸碱度.png new file mode 100644 index 0000000..1147c21 Binary files /dev/null and b/sub-operation-service/src/assets/images/smartFarm/酸碱度.png differ diff --git a/sub-operation-service/src/router/index.js b/sub-operation-service/src/router/index.js index 10bb445..7693fa7 100644 --- a/sub-operation-service/src/router/index.js +++ b/sub-operation-service/src/router/index.js @@ -59,9 +59,21 @@ export const constantRoutes = [ }, { path: '/sub-operation-service/smartFarm/fieldInspection', - component: () => import('@/views/smartFarm/fieldInspection/index.vue'), + component: () => import('@/views/smartFarm/inspection/fieldInspection.vue'), name: 'fieldInspection', - meta: { title: '田间检测' }, + meta: { title: '田间监测' }, + }, + { + path: '/sub-operation-service/smartFarm/waterInspection', + component: () => import('@/views/smartFarm/inspection/waterInspection.vue'), + name: 'waterInspection', + meta: { title: '水质监测' }, + }, + { + path: '/sub-operation-service/smartFarm/bugInspection', + component: () => import('@/views/smartFarm/inspection/bugInspection.vue'), + name: 'bugInspection', + meta: { title: '病虫害监测' }, }, ], }, diff --git a/sub-operation-service/src/views/smartFarm/components/common.vue b/sub-operation-service/src/views/smartFarm/components/common.vue index 8062d88..52199ee 100644 --- a/sub-operation-service/src/views/smartFarm/components/common.vue +++ b/sub-operation-service/src/views/smartFarm/components/common.vue @@ -33,7 +33,7 @@ const menus = reactive([ { name: 'supplier', title: '田间监测', - path: '/sub-operation-service/smartFarm/fieldInspection', + path: '/sub-operation-service/smartFarm/inspection', }, { name: 'supplier', diff --git a/sub-operation-service/src/views/smartFarm/components/devices.vue b/sub-operation-service/src/views/smartFarm/components/devices.vue index 74b0c88..ea8ce7f 100644 --- a/sub-operation-service/src/views/smartFarm/components/devices.vue +++ b/sub-operation-service/src/views/smartFarm/components/devices.vue @@ -41,11 +41,19 @@ const props = defineProps({
{{ title }}
-
正常
+
正常
+
离线
异常
+ + + + + + +
{{ item.name }}
@@ -57,7 +65,7 @@ const props = defineProps({ diff --git a/sub-operation-service/src/views/smartFarm/fieldInspection/index.vue b/sub-operation-service/src/views/smartFarm/inspection/fieldInspection.vue similarity index 50% rename from sub-operation-service/src/views/smartFarm/fieldInspection/index.vue rename to sub-operation-service/src/views/smartFarm/inspection/fieldInspection.vue index e4e5792..3feacd0 100644 --- a/sub-operation-service/src/views/smartFarm/fieldInspection/index.vue +++ b/sub-operation-service/src/views/smartFarm/inspection/fieldInspection.vue @@ -6,7 +6,7 @@
- +
作物生长状态
@@ -41,7 +41,7 @@
生长趋势图
 
-
+
@@ -58,11 +58,11 @@ import * as echarts from 'echarts'; /* --------------- data --------------- */ // #region // 图表 DOM 引用 -const chartRef = ref(null); +const chartRef1 = ref(null); // ECharts 实例 let chartInstance = null; // 颜色列表 -const colorList = ['#9E87FF', '#73DDFF']; +const colorList = ['#3685FE', '#FFD500', '#25BF82']; // x轴数据 const xData = ['1月', '2月', '3月', '4月', '5月', '6月']; const devices = ref([ @@ -123,206 +123,240 @@ const devices = ref([ id: 7, }, ]); +// 图表配置 +const option = { + backgroundColor: '#fff', + title: { + text: '', + textStyle: { + fontSize: 12, + fontWeight: 400, + }, + left: 'center', + top: '5%', + }, + legend: { + icon: 'circle', + top: '0', + 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: [10, 10, 30, 12, 15, 3], + 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: [5, 12, 11, 14, 25, 16], + 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: [6, 14, 17, 25, 21, 10], + 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], + }, + }, + ], +}; // #endregion /* --------------- methods --------------- */ // #region // 初始化图表 const initChart = () => { - // 图表配置 - 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: '15%', - }, - 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', - axisTick: { - show: false, - }, - axisLine: { - show: true, - lineStyle: { - color: 'rgba(107,107,107,0.37)', - }, - }, - axisLabel: { - textStyle: { - color: '#999', - }, - }, - splitLine: { - show: false, - }, - }, - ], - series: [ - { - name: 'Adidas', - type: 'line', - data: [10, 10, 30, 12, 15, 3, 7], - symbolSize: 1, - symbol: 'circle', - smooth: true, - yAxisIndex: 0, - showSymbol: false, - lineStyle: { - width: 5, - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ - { - offset: 0, - color: '#9effff', - }, - { - offset: 1, - color: '#9E87FF', - }, - ]), - shadowColor: 'rgba(158,135,255, 0.3)', - shadowBlur: 10, - shadowOffsetY: 20, - }, - itemStyle: { - color: colorList[0], - borderColor: colorList[0], - }, - }, - { - name: 'Nike', - type: 'line', - data: [5, 12, 11, 14, 25, 16, 10], - symbolSize: 1, - symbol: 'circle', - smooth: true, - yAxisIndex: 0, - showSymbol: false, - lineStyle: { - width: 5, - color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [ - { - offset: 0, - color: '#73DD39', - }, - { - offset: 1, - color: '#73DDFF', - }, - ]), - shadowColor: 'rgba(115,221,255, 0.3)', - shadowBlur: 10, - shadowOffsetY: 20, - }, - itemStyle: { - color: colorList[1], - borderColor: colorList[1], - }, - }, - ], - }; - if (chartRef.value) { + if (chartRef1.value) { // 基于准备好的dom，初始化echarts实例 - chartInstance = echarts.init(chartRef.value); + chartInstance = echarts.init(chartRef1.value); // 绘制图表 chartInstance.setOption(option); - + // 自动显示最大值点的tooltip + // showMaxValueTooltip(); // 响应式调整 window.addEventListener('resize', resizeChart); } }; + +const showMaxValueTooltip = () => { + if (!chartInstance) return; + + // 找出所有系列中的最大值点 + let maxValue = -Infinity; + let maxSeriesIndex = 0; + let maxDataIndex = 0; + + option.series.forEach((series, seriesIndex) => { + series.data.forEach((value, dataIndex) => { + if (value > maxValue) { + maxValue = value; + maxSeriesIndex = seriesIndex; + maxDataIndex = dataIndex; + } + }); + }); + + // 延迟执行确保图表渲染完成 + setTimeout(() => { + chartInstance.dispatchAction({ + type: 'showTip', + seriesIndex: maxSeriesIndex, + dataIndex: maxDataIndex, + }); + }, 300); +}; + // 组件挂载时初始化图表 onMounted(() => { initChart(); diff --git a/sub-operation-service/src/views/smartFarm/inspection/waterInspection.vue b/sub-operation-service/src/views/smartFarm/inspection/waterInspection.vue new file mode 100644 index 0000000..cd955de --- /dev/null +++ b/sub-operation-service/src/views/smartFarm/inspection/waterInspection.vue @@ -0,0 +1,253 @@ + + + + +