hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

趋势图接口调试

Browse Source
This commit is contained in:
hzz 2023-06-08 15:58:40 +08:00
parent 9b27dae485
commit 644dc8a06e
8 changed files with 296 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/headerBox/header2.vue
View File

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

15
src/http/Trend/index.ts Normal file
View File

@ -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})
}

1
src/locales/lang/en.ts
View File

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

1
src/locales/lang/zh.ts
View File

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

136
src/views/TrendChart/index.vue
View File

@ -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']"
:alarmType="[]"></header2>
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.传感器监测走势图')" :titleTip="[]"
: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,
max: number,
min: number,
avg: number,
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() {
setTimeout(() => {
let data = []
let length = 2
let element = {
name: '甲醛',
type: 'CH2O',
max: 0.1,
min: 0.01,
avg: 0.05,
data: [
['2021-06-01 00:00:00', 10],
['2021-06-01 00:00:10', 20],
['2021-06-01 00:00:40', 50],
['2021-06-01 00:01:20', 90],
['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)
async function ajax() {
const res: any = await getCurrent24Trend(ids);
let data = []
if (res.code == 200) {
// data = res.data.map((item: any) => {
// if (unit) {
// item.name = item.name + '(' + unit + ')'
// }
// return {
// name: item.name,
// type: item.type,
// max: item.max,
// min: item.min,
// avg: item.avg,
// data: item.date.map((key, value) => [key, item.value[value]])
// }
// })
}
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;
} else if (data.length>4&&data.length<=8) {
width.value = width.value / 4-3*20;
height.value = 950 / 2-40;
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;
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>

69
src/views/TrendChart/lineChart.vue
View File

@ -1,11 +1,21 @@
<template>
<div class="container">
<div class="chart" ref="chart"></div>
<ul>
<li><text class="key">最大值</text><text>{{ calc.max }}</text></li>
<li><text class="key">最小值</text><text>{{ calc.min }}</text></li>
<li><text class="key">平均值</text><text>{{ calc.avg }}</text></li>
</ul>
<div class="math-box">
<div class="math-content">
<div style="height: 25%;"> </div>
<div class="key">最大值</div>
<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,
max: number,
min: number,
avg: number,
data: number[]
math: {
key: string,
value: {
max: number,
min: number,
avg: 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: [
{
name: prop.calc.type,
type: 'line',
showSymbol: false,
data: data,
smooth: true,
}
]
series: data
};
myChart.setOption(option);
}
@ -96,32 +105,24 @@ onMounted(() => {
}
.chart {
height: calc(100% - 60px);
height: calc(100% - 90px);
width: 100%;
}
ul {
height: 60px;
.math-box {
height: 90px;
width: 100%;
display: flex;
justify-content: space-around;
justify-content: end;
align-items: center;
}
ul li {
.math-content {
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;
}

32
src/views/generalEnvironmentMechanical/index.vue
View File

@ -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>

202
src/views/realtimeSecurity/content/content.vue
View File

@ -1,96 +1,125 @@
<template>
<div>
<!-- <div class="topTip">
<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">
<verticalNumLoop :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
<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">
<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>
<el-row>
<el-col :span="6">
<pressure ref="perssure1" name="east" :title="t('messages.EastPumpPressure_Mpa')"></pressure>
</el-col>
<el-col :span="6">
<pressure ref="perssure2" name="west" :title="t('messages.WestPumpPressure_Mpa')"></pressure>
</el-col>
<el-col :span="12">
<pipe ref="pipe1" :title="t('messages.PipelinePressure_Mpa')"></pipe>
</el-col>
</el-row>
</div>
</div>
<div>
<el-row>
<el-col :span="6">
<pressure ref="perssure1" name="east" :title="t('messages.EastPumpPressure_Mpa')"></pressure>
</el-col>
<el-col :span="6">
<pressure ref="perssure2" name="west" :title="t('messages.WestPumpPressure_Mpa')"></pressure>
</el-col>
<el-col :span="12">
<pipe ref="pipe1" :title="t('messages.PipelinePressure_Mpa')"></pipe>
</el-col>
</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<{
width:number,
height:number,
}>()
watch(()=>props,(newVal, oldVal)=>{
let props = defineProps<{
width: number,
height: number,
}>()
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 perssure2=ref()
let pipe1=ref()
let perssure1 = ref()
let perssure2 = ref()
let pipe1 = ref()
const verticalType = {
'TVOC': {icon: 'icon-TVOC-Outlined',title:t('messages.TVOCDetection'), unit: 'mg/m³'},
'Smoke': {icon: 'icon-yanwubaojingqi',title:t('messages.smokeDetection'), unit: "ppm"},
'Methane': {icon: 'icon-ranqi',title:t('messages.gasDetection'), unit: null},
'CH2O': {icon: 'icon-app_icons--',title:t('messages.CH2ODetection'), unit: 'mg/m³'},
'FIRE': {icon: 'icon-weibiaoti1',title:t('messages.flameDetection'), unit: null},
'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: "ppm" },
'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
'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)
pipeBox(val.width,val.height)
verticalNumBox(val.width,val.height)
PressureBox(val.width, val.height)
pipeBox(val.width, val.height)
verticalNumBox(val.width, val.height)
// toptip1.value.setchartWH()
}
const PressureBox=(width:any,height:any)=>{
let a=calcWH(height,width,3,4,0)
const PressureBox = (width: any, height: any) => {
let a = calcWH(height, width, 3, 4, 0)
//修改高度
perssure1.value.setchartWH(a.oWidth-50,a.oHeight*2)
perssure2.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)
}
const pipeBox=(width:any,height:any)=>{
let a=calcWH(height,width,3,2,0)
const pipeBox = (width: any, height: any) => {
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)=>{
let a=calcWH(height,width,3,5,0)
a.oHeight=a.oHeight-40
const verticalNumBox = (width: any, height: any) => {
let a = calcWH(height, width, 3, 5, 0)
a.oHeight = a.oHeight - 40
}
watch(
@ -98,35 +127,35 @@ watch(
(newVal, oldVal) => {
//动态更新echarts
//泵房气压
perssure1.value.setData(newVal.east,2)
perssure2.value.setData(newVal.west,2)
perssure1.value.setData(newVal.east, 2)
perssure2.value.setData(newVal.west, 2)
},
{ deep: true, flush: "post" }
);
async function getPressureDatafun(){
let result:any = await getPressureData()
async function getPressureDatafun() {
let result: any = await getPressureData()
if(result.code==200){
perssure1.value.setData(result.data.east,1)
perssure2.value.setData(result.data.west,1)
store.changePressure({east: result.data.east, west: result.data.west})
if (result.code == 200) {
perssure1.value.setData(result.data.east, 1)
perssure2.value.setData(result.data.west, 1)
store.changePressure({ east: result.data.east, west: result.data.west })
}
}
let vertical= reactive([])
async function getSafeWarningDatafun(){
let result:any = await getSafeWarningData()
if(result.code==200){
let vertical = reactive([])
async function getSafeWarningDatafun() {
let result: any = await getSafeWarningData()
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.continuous = clacendTime(datetime,element.ts||datetime)
element.time = 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,
icon:verticalType[item.type].icon,
title:verticalType[item.type].title,
limit:item.limit,
unit:verticalType[item.type].unit,
value:item.value
type: item.type,
icon: verticalType[item.type].icon,
title: verticalType[item.type].title,
limit: item.limit,
unit: verticalType[item.type].unit,
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(){
let result:any = await getpipeData({})
async function getpipeDatafun() {
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{
width:100%;
height:150px;
}
</style>
.topTip {
width: 100%;
height: 150px;
}</style>