趋势图接口调试

src/components/headerBox/header2.vue

@@ -502,6 +502,7 @@ h1 {
   left: 1.5rem;
   font-size: 3rem;
   color: #fff;
+  cursor: pointer;
 }
 .comeBack > i {
   font-size: 3rem;

src/http/Trend/index.ts

@@ -0,0 +1,15 @@
+/*
+ * @FilePath: \wwwd:\code\screenFront\src\http\realtimeSecurity\index.ts
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-14 08:45:45
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+ */
+import {get,post} from "@/utils/http"
+
+//气压
+export function getCurrent24Trend(id:string){
+    return get('/dataTrend/getCurrent24Trend',{id})
+}

src/locales/lang/en.ts

@@ -272,5 +272,6 @@ export default {
         '危废暂存间':'dangerous waste temporary storage room',
         '历史数据':'Historical Data',
         '环境 实时监测系统':'环境 实时监测系统',
+        '传感器监测走势图':'传感器监测走势图',
       }
   }

src/locales/lang/zh.ts

@@ -272,5 +272,6 @@ export default {
         '危废暂存间':'危废暂存间',
         '历史数据':'历史数据',
         '环境 实时监测系统':'环境 实时监测系统',
+        '传感器监测走势图':'传感器监测走势图',
       }
   }

src/views/TrendChart/index.vue

@@ -2,12 +2,13 @@
   <div :class="$style['container']">
     <div class="header">
       <div class="title">
-        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'传感器24H趋势图'" :titleTip="[]" :typeFun="['time']"
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.传感器监测走势图')" :titleTip="[]"
-          :alarmType="[]"></header2>
+          :typeFun="['comback', 'time']" :alarmType="[]"></header2>
       </div>
     </div>
     <div class="content">
-      <lineChart v-for="(calc, index) in calcArr" :style="{width:width+'px',height:height+'px','min-width':'calc(25% - 20px)'}" :calc="calc">
+      <lineChart v-for="(calc, index) in calcArr"
+        :style="{ width: width + 'px', height: height + 'px', 'min-width': 'calc(25% - 20px)' }" :calc="calc">
       </lineChart>
     </div>
   </div>
@@ -17,47 +18,88 @@
 import { ref, reactive, onMounted, onUnmounted } from "vue"
 import Header2 from "@/components/headerBox/header2.vue"
 import lineChart from "./lineChart.vue";
+import { getCurrent24Trend } from '@/http/Trend/index'
+import { useRoute } from "vue-router";
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+let route = useRoute()
+let ids = route.query.ids as string
+let unit = route.query.unit as string
+let timer = null
 type calcType = {
   name: string,
-  type: string,
+  math: {
+            key: string,
+            value: {
                 max: number,
                 min: number,
                 avg: number,
                 data: any[]
             }
+        }[],
+  data: any[]
+}
 let calcArr = ref<calcType[]>()
 let width = ref(1500)
 let height = ref(700)
-function ajax() {
+async function ajax() {
-  setTimeout(() => {
+  const res: any = await getCurrent24Trend(ids);
   let data = []
-    let length = 2
+  if (res.code == 200) {
-    let element = {
+    // data = res.data.map((item: any) => {
-        name: '甲醛',
+    //   if (unit) {
-        type: 'CH2O',
+    //     item.name = item.name + '(' + unit + ')'
-        max: 0.1,
+    //   }
-        min: 0.01,
+    //   return {
-        avg: 0.05,
+    //     name: item.name,
-        data: [
+    //     type: item.type,
-          ['2021-06-01 00:00:00', 10],
+    //     max: item.max,
-          ['2021-06-01 00:00:10', 20],
+    //     min: item.min,
-          ['2021-06-01 00:00:40', 50],
+    //     avg: item.avg,
-          ['2021-06-01 00:01:20', 90],
+    //     data: item.date.map((key, value) => [key, item.value[value]])
-          ['2021-06-01 00:01:30', 100],
+    //   }
-          ['2021-06-01 00:01:40', 110],
+    // })
-          ['2021-06-01 00:01:50', 120],
-          ['2021-06-01 00:02:30', 160],
-          ['2021-06-01 00:02:40', 170],
-          ['2021-06-01 00:03:10', 200],
-          ['2021-06-01 00:03:20', 210],
-          ['2021-06-01 00:03:30', 220],
-          ['2021-06-01 00:04:20', 270]
-        ]
-      }
-    for (let index = 0; index < length; index++) {
-      data.push(element)
 
+    let tempData = {}
+    res.data.forEach((item: any) => {
+      if (tempData.hasOwnProperty(item.id)) {
+        tempData[item.id].data.push({
+          name: item.type,
+          type: 'line',
+          showSymbol: false,
+          data: item.date.map((key, value) => [key, item.value[value]]),
+          smooth: true,
+        })
+        tempData[item.id].math.push({
+          key: item.type,
+          value: {
+            max: item.max,
+            min: item.min,
+            avg: item.avg
           }
+        })
+      } else {
+        tempData[item.id] = {
+          name: item.name,
+          data: [{
+            name: item.type,
+            type: 'line',
+            showSymbol: false,
+            data: item.date.map((key, value) => [key, item.value[value]]),
+            smooth: true,
+          }],
+          math: [{
+            key: item.type,
+            value: {
+              max: item.max,
+              min: item.min,
+              avg: item.avg
+            }
+          }]
+        }
+      }
+    })
+    data = Object.values(tempData)
     calcArr.value = data
     if (data.length <= 4) {
       width.value = 1900 / data.length - (data.length - 1) * 20;
@@ -68,10 +110,16 @@ function ajax() {
       width.value = width.value / 4 - 3 * 20;
       height.value = 950 / 3 - 60;
     }
-  })
+  }
 }
 onMounted(() => {
   ajax()
+  timer = setInterval(() => {
+    ajax()
+  }, 1000 * 60 * 10)
+})
+onUnmounted(() => {
+  clearInterval(timer)
 })
 </script>
 <style module>

src/views/TrendChart/lineChart.vue

@@ -1,11 +1,21 @@
 <template>
     <div class="container">
         <div class="chart" ref="chart"></div>
-        <ul>
+        <div class="math-box">
-            <li><text class="key">最大值</text><text>{{ calc.max }}</text></li>
+            <div class="math-content">
-            <li><text class="key">最小值</text><text>{{ calc.min }}</text></li>
+                <div style="height: 25%;"> </div>
-            <li><text class="key">平均值</text><text>{{ calc.avg }}</text></li>
+                <div class="key">最大值</div>
-        </ul>
+                <div class="key">最小值</div>
+                <div class="key">平均值</div>
+            </div>
+            <div class="math-content" v-for="(item,index) in calc.math">
+                <div :style="{color:color[index]}">{{ item.key }}</div>
+                <div>{{ item.value.max }}</div>
+                <div>{{ item.value.min }}</div>
+                <div>{{ item.value.avg }}</div>
+            </div>
+        </div>
+        
     </div>
 </template>
 
@@ -14,17 +24,23 @@ import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
 const prop = defineProps<{
     calc: {
         name: string,
-        type: string,
+        math: {
+            key: string,
+            value: {
                 max: number,
                 min: number,
                 avg: number,
-        data: number[]
+                data: any[]
+            }
+        }[],
+        data: any
     }
 }>()
 const { proxy } = getCurrentInstance() as any
 const chart = ref()
 let myChart = null
 let data = prop.calc.data
+let color = ['#4281E5','#78F7AE','#FF6E40']
 function init() {
     myChart = proxy.$echarts.init(chart.value, 'dark');
     const option = {
@@ -33,6 +49,7 @@ function init() {
             top: "5%",
             left: "5%"
         },
+        color: color,
         tooltip: {
             trigger: 'axis',
         },
@@ -52,15 +69,7 @@ function init() {
         yAxis: {
             type: 'value',
         },
-        series: [
+        series: data
-            {
-                name: prop.calc.type,
-                type: 'line',
-                showSymbol: false,
-                data: data,
-                smooth: true,
-            }
-        ]
     };
     myChart.setOption(option);
 }
@@ -96,32 +105,24 @@ onMounted(() => {
 }
 
 .chart {
-    height: calc(100% - 60px);
+    height: calc(100% - 90px);
     width: 100%;
 }
-
+.math-box {
-ul {
+    height: 90px;
-    height: 60px;
     width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: end;
     align-items: center;
 }
-
+.math-content {
-ul li {
+    width: 100%;
     height: 100%;
-    width: 33%;
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
     align-items: center;
 }
-
-ul>li:nth-child(2) {
-
-    border-right: 1px solid #fff;
-    border-left: 1px solid #fff;
-}
-
 .key {
     color: #ff6e40;
 }

src/views/generalEnvironmentMechanical/index.vue

@@ -11,10 +11,10 @@
             <div class="top-box">
                 <div style="width: 12%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
                     v-for="item in store.newVerticalNum">
-                    <verticalNumLoop :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
+                    <verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
                         :value="item.value"></verticalNumLoop>
                 </div>
-                <div style="width: 12%;height: 250px;margin-bottom: 10px;">
+                <div style="width: 12%;height: 250px;margin-bottom: 10px;" @click="gotoTrendChart(store.pm, 'μg/m3')">
                     <border13>
                         <template v-slot>
                             <pm :value="{ two: store.pm[pmindex].pm10, ten: store.pm[pmindex].pm2 }"
@@ -54,6 +54,7 @@
 </template>
 
 <script setup lang='ts'>
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import header2 from '@/components/headerBox/header2.vue'
 import verticalNumLoop from './components/verticalNumLoop.vue'
@@ -70,9 +71,10 @@ import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
 import { useSocketStore } from "@/store/moduleSocketMechanics";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { gettime, clacendTime } from "@/utils/time"
-
+import {useRouter} from 'vue-router'
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
+let router = useRouter()
 const store = useSocketStore();
 let deptIds = '6,7,9,10,11'
 let titleTip = [
@@ -109,6 +111,29 @@ let verticalList: any[] = reactive([])
 let pmtimer = null
 let humittimer = null
 
+/**
+ * 跳转到趋势图
+ */
+ function gotoTrendChart(value, unit) {
+  let ids = value.map((item) => item.devId).toString();
+  ElMessageBox.confirm(
+    '即将跳转到传感器监测走势图页面，是否继续？',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'info',
+    }
+  )
+    .then(() => {
+      router.push({ path: '/TrendChart', query: { ids: ids, unit: unit } })
+    })
+    .catch(() => {
+
+    })
+
+}
+
 
 //获取传感器实时数据
 async function getSensorData() {
@@ -373,6 +398,7 @@ onMounted(() => {
 })
 onUnmounted(() => {
     closeWebsocket();
+    clearInterval(pmtimer)
 })
 </script>
 

src/views/realtimeSecurity/content/content.vue

@@ -4,8 +4,11 @@
     <toptip ref="toptip1"></toptip>
   </div> -->
     <div style="display: flex;">
-    <div style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;" v-for="item in store.newVerticalNum">
+      <div
-      <verticalNumLoop :title="item.title"  :icon="item.icon" :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
+        style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
+        v-for="item in store.newVerticalNum">
+        <verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
+          :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
       </div>
     </div>
     <div>
@@ -26,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
 import pressure from "./chart/pressure.vue"
 import pipe from "./chart/pipe.vue"
 // import toptip from "./chart/toptip.vue"
@@ -35,9 +39,11 @@ import verticalNumLoop from './chart/verticalNumLoop.vue'
 // import { getPressureData,getSafeWarningData } from "@/http/environment";
 import { getPressureData, getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
 import { useSocketStore } from "@/store/moduleSocket"
+import { useRouter } from "vue-router"
 import { gettime, clacendTime } from "@/utils/time"
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
+let router = useRouter()
 const store = useSocketStore()
 let props = defineProps<{
   width: number,
@@ -62,6 +68,29 @@ const verticalType = {
   'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
 }
 
+/**
+ * 跳转到趋势图
+ */
+function gotoTrendChart(value, unit) {
+  let ids = value.map((item) => item.devId).toString();
+  ElMessageBox.confirm(
+    '即将跳转到趋势图页面，是否继续？',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'info',
+    }
+  )
+    .then(() => {
+      router.push({ path: '/TrendChart', query: { ids: ids, unit: unit } })
+    })
+    .catch(() => {
+
+    })
+
+}
+
 
 function reset(val: any) {
   //宽高为0时跳出该方法
@@ -180,5 +209,4 @@ onMounted(()=>{
 .topTip {
   width: 100%;
   height: 150px;
-}
+}</style>
-</style>