gengxin

src/api/gx.ts

@@ -1,5 +1,3 @@
-import request from "@/utils/request";
-
 const gxToken = 'test'
 
 /**
@@ -2568,12 +2566,25 @@ export function getWaterLevelAndFlowListOfPageByStcd(data: any) {
  * 雨量多站最新数据
  */
 export function getRainfallLatest(data: any) {
-  data.accessToken = gxToken
-  return request({
-    url: '/gx_api/gx/yq/rainfall/latest',
-    method: 'get',
-    params: data,
-    timeout: 1000 * 60
+  // data.accessToken = gxToken
+  // return request({
+  //   url: '/gx_api/gx/yq/rainfall/latest',
+  //   method: 'get',
+  //   params: data,
+  //   timeout: 1000 * 60
+  // })
+
+  return Promise.resolve({
+    "msg": "操作成功",
+    "code": 200,
+    "data": [
+      {
+        "stcd": "63304700",
+        "stnm": "太师桥",
+        "tm": "2024-12-06 10:10:00",
+        "drp": 0
+      }
+    ]
   })
 }
 

src/components/DeviceComponent/WaterFlow.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import Chart from "@/components/Chart.vue";
+import {getWaterLevelAndFlowListOfPageByStcd} from "@/api/gx";
+import {formatd} from "@/utils/ruoyi";
+
+const route = useRoute()
+const chartRef = ref(null)
+
+async function reloadChart() {
+  const sevenDayAgo = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)
+  const flowData = await getWaterLevelAndFlowListOfPageByStcd({
+    stcd: route.params.stcd,
+    startTime: formatd(sevenDayAgo),
+    endTime: formatd(new Date())
+  }).then(res => {
+    return res.rows
+  })
+  const option = {
+    // backgroundColor: "#0B2D55",
+    tooltip: {
+      trigger: 'axis'
+    },
+    grid: {
+      top: '13%',
+      left: '2%',
+      right: '2%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLabel: { // 坐标轴刻度标签的相关设置
+        color: '#02cacf'
+      },
+      axisTick: {show: false},
+      data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
+    }],
+    yAxis: [{
+      name: 'm³/s',
+      nameTextStyle: {
+        color: '#02cacf'
+      },
+      min: value => (value.min - 10).toFixed(0),
+      max: value => (value.max + 10).toFixed(0),
+      axisLabel: {
+        color: '#02cacf'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLine: {
+        show: true
+      }
+    }],
+    series: [{
+      name: '流量',
+      type: 'line',
+      areaStyle: {},
+      smooth: true, //是否平滑曲线显示
+      lineStyle: {
+        color: '#3deaff'
+      },
+      // barWidth: 18,
+      // label: {
+      //   show: true,
+      //   position: 'top'
+      // },
+      data: flowData.map(item => item.q)
+    }
+    ]
+  }
+  chartRef.value.loadChart(option)
+}
+
+onMounted(() => {
+  reloadChart()
+})
+</script>
+<template>
+  <chart ref="chartRef"></chart>
+</template>

src/components/tag/DataTag.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { getCurrentInstance } from 'vue'
-import { onMounted, reactive, ref } from 'vue'
+import {getCurrentInstance, ref} from 'vue'
 
 defineProps({
-  data: { type: Object, default: () => ({}) }
+  data: {type: Object, default: () => ({})}
 })
 
-const { props } = getCurrentInstance()
+const {props} = getCurrentInstance()
 const imgSrc = ref(new URL('@/assets/images/szpj.png', import.meta.url).href)
 const szpjTitleSrc = ref(new URL('@/assets/images/szpj_title.png', import.meta.url).href)
 const tempImg = ref(new URL('@/assets/images/temperature.png', import.meta.url).href)
@@ -17,9 +16,10 @@ const tempImg = ref(new URL('@/assets/images/temperature.png', import.meta.url).
     <el-row>
       <el-col :span="12">
         <div style="position: relative;display: flex;justify-content: center;">
-          <div style="position: absolute;bottom:35%;font-size:36px;">Ⅳ</div>
-          <img :src="szpjTitleSrc" style="position: absolute;bottom:10%;" />
-          <img :src="imgSrc" style="height: 140px;" />
+          <!-- Ⅰ Ⅱ  Ⅲ  Ⅳ Ⅴ Ⅵ   -->
+          <div style="position: absolute;bottom:35%;font-size:36px;">Ⅲ</div>
+          <img :src="szpjTitleSrc" style="position: absolute;bottom:10%;"/>
+          <img :src="imgSrc" style="height: 140px;"/>
         </div>
       </el-col>
       <el-col :span="12">
@@ -51,7 +51,8 @@ const tempImg = ref(new URL('@/assets/images/temperature.png', import.meta.url).
           <span style="padding-right: 10px;font-size: 20px;font-weight: bold;">{{ data.d5 }}</span>
         </el-row>
         <el-row>
-          <div style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
+          <div
+            style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
         </el-row>
       </el-col>
       <el-col :span="12">
@@ -63,7 +64,8 @@ const tempImg = ref(new URL('@/assets/images/temperature.png', import.meta.url).
           <span style="padding-right: 10px;font-size: 20px;font-weight: bold;">{{ data.d6 }}</span>
         </el-row>
         <el-row>
-          <div style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
+          <div
+            style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
         </el-row>
       </el-col>
     </el-row>
@@ -77,7 +79,8 @@ const tempImg = ref(new URL('@/assets/images/temperature.png', import.meta.url).
           <span style="padding-right: 10px;font-size: 20px;font-weight: bold;">{{ data.d7 }}</span>
         </el-row>
         <el-row>
-          <div style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
+          <div
+            style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
         </el-row>
       </el-col>
       <el-col :span="12">
@@ -89,7 +92,8 @@ const tempImg = ref(new URL('@/assets/images/temperature.png', import.meta.url).
           <span style="padding-right: 10px;font-size: 20px;font-weight: bold;">{{ data.d8 }}</span>
         </el-row>
         <el-row>
-          <div style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
+          <div
+            style="height: 5px;width: 200px;background:linear-gradient(to right, #00cbe6, #beebf1);margin-left: 10px;margin-top:6px;border-radius: 5px;"></div>
         </el-row>
       </el-col>
     </el-row>

src/views/Device.vue

@@ -14,6 +14,7 @@ import WaterQualityAnalysis from "@/components/DeviceComponent/WaterQualityAnaly
 import WaterLevel from "@/components/DeviceComponent/WaterLevel.vue";
 import Rainfall from "@/components/DeviceComponent/Rainfall.vue";
 import AdcpFlow from "@/components/DeviceComponent/AdcpFlow.vue";
+import WaterFlow from "@/components/DeviceComponent/WaterFlow.vue";
 
 const route = useRoute()
 const right3Ref = ref(null)
@@ -357,9 +358,8 @@ onUnmounted(() => {
       </template>
       <template v-if="deviceType=== 'flow'">
         <card01 style="height: 36%" title="流量监测">
-          <adcp-flow></adcp-flow>
-          <!--          <adcp-flow v-if="device.ueDeviceName === '无人船'"></adcp-flow>-->
-          <!--          <flow v-else></flow>-->
+          <adcp-flow v-if="device.ueDeviceName === '无人船'"/>
+          <water-flow v-else/>
         </card01>
       </template>
       <template v-if="deviceType=== 'waterQuality'">