趋势图接口调试

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,61 +18,108 @@
 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 = {}
-    calcArr.value = data
+    res.data.forEach((item: any) => {
-    if (data.length<=4) {
+      if (tempData.hasOwnProperty(item.id)) {
-      width.value = 1900 / data.length-(data.length-1)*20;
+        tempData[item.id].data.push({
-    } else if (data.length>4&&data.length<=8) {
+          name: item.type,
-      width.value = width.value / 4-3*20;
+          type: 'line',
-      height.value = 950 / 2-40;
+          showSymbol: false,
-    } else {
+          data: item.date.map((key, value) => [key, item.value[value]]),
-      width.value = width.value / 4-3*20;
+          smooth: true,
-      height.value = 950 / 3-60;
+        })
+        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;
+    } else if (data.length > 4 && data.length <= 8) {
+      width.value = width.value / 4 - 3 * 20;
+      height.value = 950 / 2 - 40;
+    } else {
+      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

@@ -1,11 +1,14 @@
 <template>
-<div>
+  <div>
     <!-- <div class="topTip">
     <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>
@@ -19,78 +22,104 @@
         <el-col :span="12">
           <pipe ref="pipe1" :title="t('messages.PipelinePressure_Mpa')"></pipe>
         </el-col>
-</el-row>
+      </el-row>
     </div>
 
-</div>
+  </div>
 </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"
-import {onMounted, reactive, ref, watch} from "vue"
+import { onMounted, reactive, ref, watch } from "vue"
 import { calcWH } from "@/components/ts/selfAdaption";
 import verticalNumLoop from './chart/verticalNumLoop.vue'
 // import { getPressureData,getSafeWarningData } from "@/http/environment";
-import { getPressureData,getSafeWarningData,getpipeData } from "@/http/realtimeSecurity";
+import { getPressureData, getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
 import { useSocketStore } from "@/store/moduleSocket"
-import {gettime,clacendTime} from "@/utils/time"
+import { useRouter } from "vue-router"
+import { gettime, clacendTime } from "@/utils/time"
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
+let router = useRouter()
 const store = useSocketStore()
-let props=defineProps<{
+let props = defineProps<{
-    width:number,
+  width: number,
-    height:number,
+  height: number,
-    }>()
+}>()
-watch(()=>props,(newVal, oldVal)=>{
+watch(() => props, (newVal, oldVal) => {
   //监听父组件宽高变化，随时重置本组件尺寸  
 
   reset(newVal)
-},{immediate:true,deep:true,flush:'post'})
+}, { immediate: true, deep: true, flush: 'post' })
 
 // let toptip1=ref()
-let perssure1=ref()
+let perssure1 = ref()
-let perssure2=ref()
+let perssure2 = ref()
-let pipe1=ref()
+let pipe1 = ref()
 
 const verticalType = {
-  'TVOC': {icon: 'icon-TVOC-Outlined',title:t('messages.TVOCDetection'), unit: 'mg/m³'},
+  'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
-  'Smoke': {icon: 'icon-yanwubaojingqi',title:t('messages.smokeDetection'), unit: "ppm"},
+  'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: "ppm" },
-  'Methane': {icon: 'icon-ranqi',title:t('messages.gasDetection'), unit: null},
+  'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
-  'CH2O': {icon: 'icon-app_icons--',title:t('messages.CH2ODetection'), unit: 'mg/m³'},
+  'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
-  'FIRE': {icon: 'icon-weibiaoti1',title:t('messages.flameDetection'), unit: null},
+  '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){
+function reset(val: any) {
   //宽高为0时跳出该方法
 
-  if(!val.width && !val.height) return
+  if (!val.width && !val.height) return
 
   //重置盒子尺寸
-  PressureBox(val.width,val.height)
+  PressureBox(val.width, val.height)
-  pipeBox(val.width,val.height)
+  pipeBox(val.width, val.height)
-  verticalNumBox(val.width,val.height)
+  verticalNumBox(val.width, val.height)
   // toptip1.value.setchartWH()
 }
-const PressureBox=(width:any,height:any)=>{
+const PressureBox = (width: any, height: any) => {
-  let a=calcWH(height,width,3,4,0)
+  let a = calcWH(height, width, 3, 4, 0)
   //修改高度
-  perssure1.value.setchartWH(a.oWidth-50,a.oHeight*2)
+  perssure1.value.setchartWH(a.oWidth - 50, a.oHeight * 2)
-  perssure2.value.setchartWH(a.oWidth-50,a.oHeight*2)
+  perssure2.value.setchartWH(a.oWidth - 50, a.oHeight * 2)
 }
 
-const pipeBox=(width:any,height:any)=>{
+const pipeBox = (width: any, height: any) => {
-  let a=calcWH(height,width,3,2,0)
+  let a = calcWH(height, width, 3, 2, 0)
   //修改高度
   // pipe1.value.setchartWH(a.oWidth-50,a.oHeight*2)
-  pipe1.value.setchartWH(a.oWidth-50,a.oHeight*2)
+  pipe1.value.setchartWH(a.oWidth - 50, a.oHeight * 2)
 }
 
-const verticalNumBox=(width:any,height:any)=>{
+const verticalNumBox = (width: any, height: any) => {
-  let a=calcWH(height,width,3,5,0)
+  let a = calcWH(height, width, 3, 5, 0)
-  a.oHeight=a.oHeight-40
+  a.oHeight = a.oHeight - 40
 }
 
 watch(
@@ -98,35 +127,35 @@ watch(
   (newVal, oldVal) => {
     //动态更新echarts
     //泵房气压
-    perssure1.value.setData(newVal.east,2)
+    perssure1.value.setData(newVal.east, 2)
-    perssure2.value.setData(newVal.west,2)
+    perssure2.value.setData(newVal.west, 2)
   },
   { deep: true, flush: "post" }
 );
-async function getPressureDatafun(){
+async function getPressureDatafun() {
-  let result:any = await getPressureData()
+  let result: any = await getPressureData()
 
-  if(result.code==200){
+  if (result.code == 200) {
-    perssure1.value.setData(result.data.east,1)
+    perssure1.value.setData(result.data.east, 1)
-    perssure2.value.setData(result.data.west,1)
+    perssure2.value.setData(result.data.west, 1)
-    store.changePressure({east: result.data.east, west: result.data.west})
+    store.changePressure({ east: result.data.east, west: result.data.west })
   }
 }
-let vertical= reactive([]) 
+let vertical = reactive([])
-async function getSafeWarningDatafun(){
+async function getSafeWarningDatafun() {
-  let result:any = await getSafeWarningData()
+  let result: any = await getSafeWarningData()
-  if(result.code==200){
+  if (result.code == 200) {
     let datetime = new Date().getTime();
-    let handle_vertical = result.data.map((item:any)=>{
+    let handle_vertical = result.data.map((item: any) => {
       item.value.forEach(element => {
         if (element.name.includes("TVOC")) {
           element.name = element.name.split('TVOC')[0] + verticalType[item.type].title
         }
 
-        if (element.val>item.limit) {          
+        if (element.val > item.limit) {
           element.date = gettime(element.ts),
-          element.time = element.ts||datetime
+            element.time = element.ts || datetime
-          element.continuous = clacendTime(datetime,element.ts||datetime)
+          element.continuous = clacendTime(datetime, element.ts || datetime)
         } else {
           element.date = null
           element.time = null
@@ -134,12 +163,12 @@ async function getSafeWarningDatafun(){
         }
       });
       return {
-        type:item.type,
+        type: item.type,
-        icon:verticalType[item.type].icon,
+        icon: verticalType[item.type].icon,
-        title:verticalType[item.type].title,
+        title: verticalType[item.type].title,
-        limit:item.limit,
+        limit: item.limit,
-        unit:verticalType[item.type].unit,
+        unit: verticalType[item.type].unit,
-        value:item.value
+        value: item.value
       }
     })
 
@@ -152,23 +181,23 @@ watch(
   (newVal, oldVal) => {
     //动态更新echarts
     //泵房气压
-    pipe1.value.setData(newVal,2)
+    pipe1.value.setData(newVal, 2)
   },
   { deep: true, flush: "post" }
 );
-async function getpipeDatafun(){
+async function getpipeDatafun() {
-  let result:any = await getpipeData({})
+  let result: any = await getpipeData({})
 
-  if(result.code==200){
+  if (result.code == 200) {
     //设置组件样式
-    pipe1.value.setData({listData:result.data.listData,top:result.data.top},1)
+    pipe1.value.setData({ listData: result.data.listData, top: result.data.top }, 1)
 
     //将数据存入pinia
-    store.changePipe({listData:result.data.listData,top:result.data.top})
+    store.changePipe({ listData: result.data.listData, top: result.data.top })
   }
 }
 
-onMounted(()=>{
+onMounted(() => {
   getPressureDatafun()
   getSafeWarningDatafun()
   getpipeDatafun()
@@ -177,8 +206,7 @@ onMounted(()=>{
 </script>
 
 <style scoped>
-.topTip{
+.topTip {
-  width:100%;
+  width: 100%;
-  height:150px;
+  height: 150px;
-}
+}</style>
-</style>