跟新代码

src/components/baseEcharts/index.vue

@@ -6,21 +6,18 @@
 <script lang="ts" setup>
 import * as echarts from "echarts";
 import { EChartsType } from "echarts";
-import { onMounted, ref, watch, onBeforeUnmount, nextTick } from "vue";
+import { onMounted, ref, watch, onBeforeUnmount, onUnmounted } from "vue";
 
 const props = defineProps({
-  NamechartData: {
-    // 柱形图x轴数据
+  flipData: {
     type: Array,
     default: true,
   },
-  ArrOneData: {
-    // 柱形图x轴数据
+  waterImmersion: {
     type: Array,
     default: true,
   },
-  ArrTwoData: {
-    // 柱形图x轴数据
+  waterLevel: {
     type: Array,
     default: true,
   },
@@ -30,84 +27,95 @@ let myEchart: EChartsType;
 const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
 const myEchartData = () => {
   const option = {
-    tooltip: {
-      trigger: "axis",
-    },
-    legend: {
-      data: ["翻转", "水浸", "水位"],
-    },
+    tooltip: { trigger: "axis" },
+    legend: { data: ["翻转", "水浸", "水位"] },
     grid: {
       left: "3%",
       right: "4%",
-      bottom: "3%",
+      bottom: "10%",
       containLabel: true,
     },
     xAxis: {
       type: "category",
-      boundaryGap: false,
-      data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
+      data: [
+        "一月",
+        "二月",
+        "三月",
+        "四月",
+        "五月",
+        "六月",
+        "七月",
+        "八月",
+        "九月",
+        "十月",
+        "十一月",
+        "十二月",
+      ],
+      axisLine: { lineStyle: { color: "#666" } },
     },
+
     yAxis: {
       type: "value",
+      axisLine: { lineStyle: { color: "#666" } },
+      splitLine: { show: true, lineStyle: { type: "dashed" } }, // 网格线
     },
+
     series: [
       {
         name: "翻转",
         type: "line",
-        stack: "Total",
-        data: [120, 132, 101, 134, 90, 230, 210],
+        data: props.flipData,
+        // itemStyle: { color: "#5470C6" }, // 自定义颜色
+        // smooth: true, // 平滑曲线
+        symbol: "circle", // 数据点形状
+        symbolSize: 8,
       },
       {
         name: "水浸",
         type: "line",
-        stack: "Total",
-        data: [220, 182, 191, 234, 290, 330, 310],
+        data: props.waterImmersion,
+        // smooth: true,
+        symbol: "rect",
+        symbolSize: 8,
       },
       {
         name: "水位",
         type: "line",
-        stack: "Total",
-        data: [150, 232, 201, 154, 190, 330, 410],
+        data: props.waterLevel,
+        // smooth: true,
+        symbol: "rect",
+        symbolSize: 8,
       },
     ],
   };
   // { notMerge: true } 解决删除数据时,数据不刷新的问题
   myEchart.setOption(option, { notMerge: true });
 };
-
-watch(
-  //监控数据变化
-  () => props.NamechartData,
-  () => {
-    setTimeout(() => {
-      myEchartData();
-    }, 500);
-  },
-  { deep: true }
-);
-
-watch(
-  //监控数据变化
-  () => props.ArrOneData,
-  () => {
-    setTimeout(() => {
-      myEchartData();
-    }, 500);
-  },
-  { deep: true }
-);
-
+// 在组件 setup() 中
+const timer = ref(null);
+// 统一监听多个 props 的变化
 watch(
-  //监控数据变化
-  () => props.ArrTwoData,
+  [() => props.flipData, () => props.waterImmersion, () => props.waterLevel],
   () => {
-    setTimeout(() => {
+    // 防抖处理：清除之前的定时器
+    if (timer.value) {
+      clearTimeout(timer.value);
+      timer.value = null;
+    }
+    // 设置新的定时器
+    timer.value = setTimeout(() => {
       myEchartData();
     }, 500);
   },
-  { deep: true }
+  { deep: true } // 保持深度监听
 );
 
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
 onMounted(() => {
   setTimeout(() => {
     const dom = document.getElementById(`echart${timeId.value}`) as any;

src/components/baseEcharts/pieChart.vue

@@ -43,19 +43,12 @@ const myEchartData = () => {
       {
         name: "Access From",
         type: "pie",
-        // radius: ['60%', '80%'],
-        avoidLabelOverlap: false,
+        radius: ["00%", "80%"],
+        // avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 10,
           borderWidth: 2,
         },
-        label: {
-          show: false,
-          position: "center",
-        },
-        labelLine: {
-          show: false,
-        },
         data: props.message,
       },
     ],

src/components/baseEcharts/riEcharts.vue

@@ -6,21 +6,22 @@
 <script lang="ts" setup>
 import * as echarts from "echarts";
 import { EChartsType } from "echarts";
-import { onMounted, ref, watch, onBeforeUnmount, nextTick } from "vue";
+import { onMounted, ref, watch, onBeforeUnmount, onUnmounted } from "vue";
 
 const props = defineProps({
-  NamechartData: {
-    // 柱形图x轴数据
+  flipData: {
     type: Array,
     default: true,
   },
-  ArrOneData: {
-    // 柱形图x轴数据
+  waterImmersion: {
     type: Array,
     default: true,
   },
-  ArrTwoData: {
-    // 柱形图x轴数据
+  waterLevel: {
+    type: Array,
+    default: true,
+  },
+  DagiveanalarmDate: {
     type: Array,
     default: true,
   },
@@ -39,45 +40,13 @@ const myEchartData = () => {
     grid: {
       left: "3%",
       right: "4%",
-      bottom: "3%",
+      bottom: "10%",
       containLabel: true,
     },
     xAxis: {
       type: "category",
       boundaryGap: false,
-      data: [
-        "01",
-        "02",
-        "03",
-        "04",
-        "05",
-        "06",
-        "07",
-        "08",
-        "09",
-        "12",
-        "11",
-        "12",
-        "13",
-        "14",
-        "15",
-        "16",
-        "17",
-        "18",
-        "19",
-        "20",
-        "22",
-        "22",
-        "23",
-        "24",
-        "25",
-        "26",
-        "27",
-        "28",
-        "29",
-        "30",
-        "31",
-      ],
+      data: props.DagiveanalarmDate,
     },
     yAxis: {
       type: "value",
@@ -87,169 +56,50 @@ const myEchartData = () => {
         name: "翻转",
         type: "bar",
         stack: "total",
-        data: [
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-        ],
+        data: props.flipData,
       },
       {
         name: "水浸",
         type: "bar",
         stack: "total",
-        data: [
-          2.6,
-          5.9,
-          9.0,
-          26.4,
-          28.7,
-          70.7,
-          175.6,
-          182.2,
-          48.7,
-          18.8,
-          6.0,
-          2.3,
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-        ],
+        data: props.waterImmersion,
       },
       {
         name: "水位",
         type: "bar",
         stack: "total",
-        data: [
-          2.6,
-          5.9,
-          9.0,
-          26.4,
-          28.7,
-          70.7,
-          175.6,
-          182.2,
-          48.7,
-          18.8,
-          6.0,
-          2.3,
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-          2.0,
-          4.9,
-          7.0,
-          23.2,
-          25.6,
-          76.7,
-          135.6,
-          162.2,
-          32.6,
-          20.0,
-          6.4,
-          3.3,
-        ],
+        data: props.waterLevel,
       },
     ],
   };
   // { notMerge: true } 解决删除数据时,数据不刷新的问题
   myEchart.setOption(option, { notMerge: true });
 };
-
-watch(
-  //监控数据变化
-  () => props.NamechartData,
-  () => {
-    setTimeout(() => {
-      myEchartData();
-    }, 500);
-  },
-  { deep: true }
-);
-
+// 在组件 setup() 中
+const timer = ref(null);
+// 统一监听多个 props 的变化
 watch(
-  //监控数据变化
-  () => props.ArrOneData,
+  [() => props.flipData, () => props.waterImmersion, () => props.waterLevel],
   () => {
-    setTimeout(() => {
+    // 防抖处理：清除之前的定时器
+    if (timer.value) {
+      clearTimeout(timer.value);
+      timer.value = null;
+    }
+    // 设置新的定时器
+    timer.value = setTimeout(() => {
       myEchartData();
     }, 500);
   },
-  { deep: true }
+  { deep: true } // 保持深度监听
 );
 
-watch(
-  //监控数据变化
-  () => props.ArrTwoData,
-  () => {
-    setTimeout(() => {
-      myEchartData();
-    }, 500);
-  },
-  { deep: true }
-);
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
 
 onMounted(() => {
   setTimeout(() => {

src/views/device/manhole/ldzh/fzbj.vue

@@ -102,7 +102,7 @@ const buildQueryParams = () => ({
 
 // 获取数据
 const getManholeAllData = async () => {
-  console.log(12321, parseTime(dateRange.value[0]), parseTime(dateRange.value[1]));
+  // console.log(12321, buildQueryParams());
   try {
     tableLoading.value = true;
     const res = await getflipalarmDataAll(buildQueryParams());
@@ -111,10 +111,14 @@ const getManholeAllData = async () => {
       ElMessage.error(res.msg);
       return;
     }
-
     totals.value = res.data.total;
     tableData.value = res.data.records || [];
-
+    console.log(
+      "初始数据值",
+      res,
+      parseTime(dateRange.value[0]),
+      parseTime(dateRange.value[1])
+    );
     if (totals.value === 0) {
       ElMessage.warning("暂无数据");
     }
@@ -126,6 +130,42 @@ const getManholeAllData = async () => {
   }
 };
 
+const getEchartsAllData = async () => {
+  try {
+    let etime = "2025-01-01 00:00:00,2025-03-28 23:59:59";
+    let end = {
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      query: [
+        { column: "alarm_status", type: "ne", value: "0" },
+        {
+          column: "create_time",
+          type: "between",
+          value: `${etime}`,
+        },
+      ],
+    };
+    console.log("获取图标数据条件", end);
+
+    const res = await getflipalarmDataAll(end);
+    console.log("获取图标数据值", res);
+
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    if (totals.value === 0) {
+      ElMessage.warning("暂无数据");
+    }
+  } catch (error) {
+    console.error("获取数据失败:", error);
+    ElMessage.error("数据加载失败，请稍后重试");
+  } finally {
+  }
+};
+
+getEchartsAllData();
+
 // 搜索时重置页码
 const search = () => {
   currentPage.value = 1;

src/views/device/manhole/ldzh/jgkl.vue

@@ -28,6 +28,14 @@ const pageSize = ref(10);
 const deviceType = ref({});
 
 const PieChartDataTwo = ref([]);
+const flipDataMonthly = ref([]);
+const waterImmersionMonthly = ref([]);
+const waterLevelMonthly = ref([]);
+
+const flipDataDay = ref([]);
+const waterImmersionDay = ref([]);
+const waterLevelDay = ref([]);
+const DagiveanalarmDate = ref([]);
 
 // 预览对话框
 const previewDialogVisible = ref(false);
@@ -138,7 +146,7 @@ const fetchAlarmData = async (condition) => {
   return data;
 };
 
-// 主方法
+// 获取饼图数据法
 const getyearAllDeviceInfo = () => {
   try {
     const { start, end } = generateYearDateRange();
@@ -176,6 +184,57 @@ const getyearAllDeviceInfo = () => {
   }
 };
 
+//获取报警月统计数据
+const getobtainMonthlyData = async () => {
+  loading.value = true;
+  try {
+    const { start, end } = generateYearDateRange();
+    const res = await request.get("/manholeData/getMonthlyDataCount", {
+      params: {
+        startDate: start,
+        endDate: end,
+      },
+    });
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    flipDataMonthly.value = res.data.alarm_status;
+    waterImmersionMonthly.value = res.data.water_infiltration_alarm_status;
+    waterLevelMonthly.value = res.data.water_level_alarm_status;
+  } catch (error) {
+    ElMessage.error("获取报警月统计数据失败");
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+//获取报警日统计数据
+const getobtainDayData = async () => {
+  loading.value = true;
+  try {
+    const { start, end } = generateYearDateRange();
+    const res = await request.get("/manholeData/getDailyDataCountThisMonth", {});
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    const array = [...Array(res.data.alarm_status.length).keys()].map((i) => i + 1);
+    DagiveanalarmDate.value = array;
+    flipDataDay.value = res.data.alarm_status;
+    waterImmersionDay.value = res.data.water_infiltration_alarm_status;
+    waterLevelDay.value = res.data.water_level_alarm_status;
+  } catch (error) {
+    ElMessage.error("获取报警月统计数据失败");
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+getobtainDayData();
+getobtainMonthlyData();
 getyearAllDeviceInfo();
 
 const handleSearch = () => {
@@ -459,21 +518,30 @@ onMounted(() => {
             <span class="font-bold">井盖统计</span>
           </div>
         </template>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div class="stat-card bg-blue-50 p-4 rounded-lg">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-100">
+          <div class="stat-card bg-blue-50 p-4 rounded-lg h-100">
             <div class="text-blue-500 text-lg font-medium">报警年统计</div>
             <div class="h-80">
               <!-- <EchartsTyp></EchartsTyp> -->
               <pieChart :message="PieChartDataTwo"></pieChart>
             </div>
           </div>
-          <div class="stat-card bg-green-50 p-4 rounded-lg">
+          <div class="stat-card bg-green-50 p-4 rounded-lg h-100">
             <div class="text-green-500 text-lg font-medium">报警月统计</div>
-            <EchartsTyp></EchartsTyp>
+            <EchartsTyp
+              :flipData="flipDataMonthly"
+              :waterImmersion="waterImmersionMonthly"
+              :waterLevel="waterLevelMonthly"
+            ></EchartsTyp>
           </div>
-          <div class="stat-card bg-red-50 p-4 rounded-lg">
+          <div class="stat-card bg-red-50 p-4 rounded-lg h-100">
             <div class="text-red-500 text-lg font-medium">报警日统计</div>
-            <riEcharts></riEcharts>
+            <riEcharts
+              :flipData="flipDataDay"
+              :waterImmersion="waterImmersionDay"
+              :waterLevel="waterLevelDay"
+              :DagiveanalarmDate="DagiveanalarmDate"
+            ></riEcharts>
           </div>
         </div>
       </el-card>

vite.config.js

@@ -36,9 +36,9 @@ export default defineConfig(({ mode, command }) => {
         },
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          // target: 'http://192.168.110.235:8100/background',
+          target: 'http://192.168.110.235:8100/background',
           // target: 'http://localhost:8100/background',
-          target: 'http://localhost:8101/',
+          // target: 'http://localhost:8101/',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },