From 27d9a0bc91e065ae2e69a3425bb3e237a45fbece Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期四, 13 七月 2023 17:39:23 +0800
Subject: [PATCH] 联调接口
---
src/views/HomeView.vue | 506 +++++++++++++++++++++++++++++--------------------------
1 files changed, 266 insertions(+), 240 deletions(-)
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 470a72c..b913d58 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -6,9 +6,6 @@
<div class="ec_header_left_view">
<span class="ec_header_val">{{
state.currentRecordParas.RecordValue
- }}</span
- ><span class="ec_header_name">{{
- pointUnit == null ? "" : pointUnit
}}</span>
</div>
</div>
@@ -19,47 +16,41 @@
</div>
<div class="ec_header_right_view">
<div>{{ state.currentRecordParas.RecordTime }}</div>
- <div>{{ lastRefreshTime }}鍚庡埛鏂�</div>
+ <div>{{ lastRefreshTime }}s鍚庡埛鏂�</div>
</div>
</div>
</div>
-
<div class="container">
<div id="chartMain" style="width: 100%; height: 418px"></div>
</div>
- <!-- -->
- <div class="ykt-detail-wraper">
+ <!--鍏堥殣钘忚鎯咃紝鐩墠鎺ュ彛杩斿洖鍊�
+ <div class="ykt-detail-wraper">
<van-collapse v-model="state.activeNames">
<van-collapse-item name="1">
<template #title>
<div>璇︽儏</div>
</template>
- <van-cell value="1595655565995020288">
- <!-- 浣跨敤 title 鎻掓Ы鏉ヨ嚜瀹氫箟鏍囬 -->
+ <van-cell :value="state.MonitorPointID">
<template #title>
<div class="custom-title">娴嬬偣缂栧彿</div>
</template>
</van-cell>
<van-cell value="鐬椂鍘嬪姏">
- <!-- 浣跨敤 title 鎻掓Ы鏉ヨ嚜瀹氫箟鏍囬 -->
<template #title>
<div class="custom-title">鐩戞帶鍚嶇О</div>
</template>
</van-cell>
<van-cell value="MPa">
- <!-- 浣跨敤 title 鎻掓Ы鏉ヨ嚜瀹氫箟鏍囬 -->
<template #title>
<div class="custom-title">鍗曚綅</div>
</template>
</van-cell>
<van-cell value="">
- <!-- 浣跨敤 title 鎻掓Ы鏉ヨ嚜瀹氫箟鏍囬 -->
<template #title>
<div class="custom-title">涓婃鎶ヨ</div>
</template>
</van-cell>
<van-cell>
- <!-- 浣跨敤 title 鎻掓Ы鏉ヨ嚜瀹氫箟鏍囬 -->
<template #title>
<div class="custom-title">鏄惁鏄剧ず鎶ヨ鐐�</div>
</template>
@@ -68,14 +59,13 @@
</template>
</van-cell>
<van-cell value="闃堝��">
- <!-- 浣跨敤 title 鎻掓Ы鏉ヨ嚜瀹氫箟鏍囬 -->
<template #title>
<div class="custom-title">璀︽姤绫诲瀷</div>
</template>
</van-cell>
</van-collapse-item>
</van-collapse>
- </div>
+ </div> -->
<div class="ykt-detail-wrapers">
<div class="hykt_header" style="margin-bottom: 5px">
<div class="hykt_span">鏃堕棿</div>
@@ -94,22 +84,21 @@
:key="index"
>
<div class="hykt_span">{{ monitor.RecordTime }}</div>
- <div
- class="hykt_span"
- style="color: red"
- v-if="monitor.RecordStatusText == '涓柇'"
- >
- {{ monitor.RecordStatusText }}
+ <div class="hykt_span">
+ {{
+ monitor.RecordStatusText.length > 0 &&
+ monitor.RecordStatusText[0] == "BJ"
+ ? "涓柇"
+ : "姝ｅ父"
+ }}
</div>
- <div class="hykt_span" v-else>
- {{ monitor.RecordStatusText }}
- </div>
+
<div class="hykt_span">{{ monitor.RecordValue }}</div>
</div>
</div>
<!-- 鍒锋柊 -->
- <div style="bottom: 140px" @click="onTapRefresh" class="icon_view">
- <van-icon name="revoke" size="20px" />
+ <div style="bottom: 140px" class="icon_view">
+ <van-icon name="revoke" size="20px" @click="onTapRefresh()" />
</div>
<!-- 闂撮殧 -->
<div style="bottom: 200px" class="icon_view" @click="onTapInterval">
@@ -122,189 +111,120 @@
</template>
<script setup>
-import { reactive, onMounted, ref, shallowRef } from "vue";
+import { reactive, onMounted, ref, shallowRef, onBeforeUnmount } from "vue";
import moment from "moment";
import * as echarts from "echarts"; //寮曞叆echarts
-const pointName = ref("鐢垫祦");
-const pointUnit = ref("A");
+import axios from "axios";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const pointName = ref("");
const myChart = shallowRef(null);
-let g_refreshTime = 120;
-const lastRefreshTime = ref(g_refreshTime);
+const lastRefreshTime = ref(120);
+let times = ref(null);
+const now = new Date();
+const minDate = new Date(
+ now.getFullYear(),
+ now.getMonth(),
+ now.getDate(),
+ 0,
+ 0,
+ 0
+);
+const maxDate = new Date(
+ now.getFullYear(),
+ now.getMonth(),
+ now.getDate(),
+ 23,
+ 59,
+ 59
+);
let state = reactive({
currentRecordParas: {
- RecordValue: "23",
- RecordStatusName: "姝ｅ父",
+ RecordValue: "",
+ RecordStatusName: "",
AlarmNumber: 0,
- RecordTime: "2023-7-12",
+ RecordTime: "",
},
- chartData: [
- {
- DataStatus: [],
- DataTime: "2023-07-12 06:06:46",
- DataValue: "0.319",
- MonitorPointID: "1595655565995020288",
- SignalID: "1595655566003408896",
- },
- {
- DataStatus: [],
- DataTime: "2023-07-12 06:06:46",
- DataValue: "8.23",
- MonitorPointID: "1595655566146015232",
- SignalID: "1595655566154403840",
- },
- ],
+ chartData: [],
+ x_yData: [],
activeNames: [""],
checked: false, //鏄惁鏄剧ず鎶ヨ鐐�
loading: false, //鍔犺浇鐘舵��
isMonitorChange: false, //鐩戞祴鐣岄潰 --- 鏄惁鍚敤鐘舵�佺瓫閫�
isOnTapInterval: false,
- monitorList: [
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- ],
- c_monitorList: [
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- {
- RecordTime: "12:06",
- RecordStatusText: "姝ｅ父",
- RecordValue: "0.32",
- },
- ],
+ monitorList: [],
+ c_monitorList: [],
+ // PointID: "1620681990539972608",
+ PointID: "",
+ // token:
+ // "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySUQiOjEsIkxvZ2luTmFtZSI6Inl3YWRtaW4iLCJMb2dpblB3ZCI6ImFkbWluIiwiQ29ycElEIjoxLCJJc0FkbWluIjp0cnVlLCJpYXQiOjE2ODkyMTg3NzEsIm5iZiI6MTY4OTIxODc3MSwiZXhwIjoxNjg5MzA1MTcxLCJpc3MiOiJpc3RhdGlvbiIsImF1ZCI6ImlzdGF0aW9uIn0.cUxpJbn8krlTpaHkmd_nTgzc6YQzPxBn6pCJ0mFHAS8",
+ token: "",
});
onMounted(() => {
- setTimeout(() => {
- drawBar();
- });
+ // console.log(router.currentRoute.value.query, 162);
+ state.PointID = router.currentRoute.value.query.PointID;
+ state.token = router.currentRoute.value.query.Token;
+ state.currentRecordParas.RecordTime = moment().format("YYYY-MM-DD");
+ initialRealTimeRecord();
+ getRecordDetail();
});
+const countdown = () => {
+ if (lastRefreshTime.value === 0) {
+ onTapRefresh();
+ lastRefreshTime.value = 120;
+ return;
+ } else {
+ lastRefreshTime.value--;
+ }
+};
+onBeforeUnmount(() => {
+ console.log("mounted!", 307);
+ clearInterval(times.value);
+ times.value = null;
+});
+
//鍒锋柊
-const onTapRefresh = () => {};
+const onTapRefresh = () => {
+ axios({
+ url: "http://47.101.141.88:9019/Run/MonitorRealRecord/Mobile/GetLastRecordByMonitorPointID@V1.0",
+ method: "GET",
+ headers: {
+ Authorization: `Bearer ${state.token}`,
+ },
+ params: {
+ CorpID: 14,
+ MonitorPointID: state.PointID,
+ },
+ })
+ .then((res) => {
+ if (res.data.Code != 0) {
+ return;
+ }
+ if (res.data.Data == null || res.data.Data == "") {
+ return;
+ }
+ var refreshData = res.data.Data;
+ var last_record = state.chartData[state.chartData.length - 1]; //鑾峰彇鏈�鍚庝竴鏉℃暟鎹�
+ refreshData.forEach((item) => {
+ let getStatus = DataStatusTextEmun(item.DataStatus);
+ state.currentRecordParas.RecordStatusName = getStatus;
+ state.currentRecordParas.RecordValue = item.DataValue;
+ if (
+ item.DataValue != last_record.DataValue ||
+ item.DataTime != last_record.DataTime
+ ) {
+ state.chartData.push(item);
+ }
+ });
+
+ setTimeout(() => {
+ drawBar();
+ }, 200);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+};
//鐩戞帶鍥炬爣闂撮殧
const onTapInterval = () => {
if (!state.isOnTapInterval) {
@@ -328,23 +248,63 @@
return;
}
};
-const now = new Date();
-const minDate = new Date(
- now.getFullYear(),
- now.getMonth(),
- now.getDate(),
- 0,
- 0,
- 0
-);
-const maxDate = new Date(
- now.getFullYear(),
- now.getMonth(),
- now.getDate(),
- 23,
- 59,
- 59
-);
+//鍒濆鍖栬幏鍙栨暟鎹�
+const initialRealTimeRecord = () => {
+ axios({
+ url: "http://47.101.141.88:9019/Run/MonitorRealRecord/Mobile/GetByMonitorPointIDOfDay@V1.0",
+ method: "GET",
+ headers: {
+ Authorization: `Bearer ${state.token}`,
+ },
+ params: {
+ CorpID: 14,
+ MonitorPointID: state.PointID,
+ Day: state.currentRecordParas.RecordTime,
+ },
+ })
+ .then((res) => {
+ if (res.data.Code != 0) {
+ return;
+ }
+ if (res.data.Data == null || res.data.Data == "") {
+ return;
+ }
+ var data = res.data.Data || [];
+ state.chartData = data;
+ var last_record = state.chartData[state.chartData.length - 1]; //鑾峰彇鏈�鍚庝竴鏉℃暟鎹�
+ state.currentRecordParas.RecordStatusName = DataStatusTextEmun(
+ last_record.DataStatus
+ );
+ state.currentRecordParas.RecordValue = last_record.DataValue;
+ let m_MonitorList = data.map((item) => {
+ let totalState = DataStatusTextEmun(item.DataStatus);
+ return {
+ RecordTime: subTime(item.DataTime, 11, 16),
+ RecordStatusText: totalState,
+ RecordValue: item.DataValue,
+ };
+ });
+ let monitor_List = data.map((item) => {
+ let normalState = DataStatusTextEmun(item.DataStatus);
+ if (normalState == "姝ｅ父") {
+ return {
+ RecordTime: subTime(item.DataTime, 11, 16),
+ RecordStatusText: normalState,
+ RecordValue: item.DataValue,
+ };
+ }
+ });
+ state.monitorList = m_MonitorList; //婧愭暟鎹�
+ state.c_monitorList = monitor_List.reverse(); //鍒囨崲鏁版嵁
+
+ setTimeout(() => {
+ drawBar();
+ }, 200);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+};
// 鍒濆鍖杄charts鎶樼嚎鍥�
const drawBar = () => {
//鍏堣幏鍙朌om涓婄殑瀹炰緥
@@ -360,7 +320,6 @@
});
state.x_yData = x_yData;
let series_arr = [];
-
series_arr.push({
type: "line",
showSymbol: false,
@@ -370,7 +329,6 @@
color: "#4169E1",
},
});
-
let option = {
tooltip: {
trigger: "axis",
@@ -381,7 +339,7 @@
color: "#7e8390",
},
grid: {
- left: "3%",
+ left: "5%",
right: "5%",
bottom: "10%",
top: "12%",
@@ -462,20 +420,8 @@
};
myChart.value.clear();
myChart.value.setOption(option, true);
- // var drawRefreshTimeText = lastRefreshTime.value + "s鍚庡埛鏂�";
- // //瀹氭椂鍣�
- // var intervalRefreshTime = setInterval(function () {
- // var lastRefreshTime = lastRefreshTime.value;
- // lastRefreshTime.value = lastRefreshTime.value - 1;
- // if (lastRefreshTime.value <= 0) {
- // var drawRefreshTimeText = "鍒锋柊涓�";
- // lastRefreshTime.value = g_refreshTime;
- // //鏇存柊鏁版嵁
- // console.log("椹笂鍒锋柊");
- // // that.refreshRealTimeValue();
- // }
- // });
window.addEventListener("resize", selfAdaption);
+ times.value = setInterval(countdown, 1000);
};
// 鑷�傚簲
const selfAdaption = () => {
@@ -485,27 +431,92 @@
drawBar();
}, 100);
};
+//鑾峰彇璇︽儏
+const getRecordDetail = () => {
+ axios({
+ url: "http://47.101.141.88:9019/Monitor/MonitorPoint/GetByID@V1.0",
+ method: "GET",
+ headers: {
+ Authorization: `Bearer ${state.token}`,
+ },
+ params: {
+ CorpID: 14,
+ ID: state.PointID,
+ },
+ })
+ .then((res) => {
+ let getDetailData = res.data.Data || [];
+ if (res.data.Code != 0) {
+ return;
+ }
+ if (getDetailData == null || getDetailData == "") {
+ return;
+ }
+ pointName.value = getDetailData.Name;
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+};
//鍒囨崲鐘舵��(姝ｅ父/涓柇)
const changeMonitorStatus = () => {
- var monitorStatus = [];
- if (state.isMonitorChange) {
- state.isMonitorChange = false;
- state.c_monitorList = state.monitorList;
- } else {
+ if (!state.isMonitorChange) {
+ let arr = [];
+ state.monitorList.forEach((item) => {
+ if (item.RecordStatusText != "姝ｅ父") {
+ arr.push({
+ RecordTime: item.RecordTime,
+ RecordStatusText: item.RecordStatusText,
+ RecordValue: item.RecordValue,
+ });
+ }
+ });
state.isMonitorChange = true;
- let monitorError = {
- RecordTime: "12:06",
- RecordStatusText: "涓柇",
- RecordValue: "0.32",
- };
- monitorStatus.push(monitorError);
- state.c_monitorList = monitorStatus;
+ state.c_monitorList = arr.reverse();
+ return;
+ } else {
+ let arr = [];
+ state.monitorList.forEach((item) => {
+ if (item.RecordStatusText == "姝ｅ父") {
+ arr.push({
+ RecordTime: item.RecordTime,
+ RecordStatusText: item.RecordStatusText,
+ RecordValue: item.RecordValue,
+ });
+ }
+ });
+ state.isMonitorChange = false;
+ state.c_monitorList = arr.reverse();
+ return;
}
+};
+const DataStatusTextEmun = (value) => {
+ if (value.length == 0) return "姝ｅ父";
+ let text = "";
+ if (value[0] == "GLSB") {
+ text = "杩囨护澶辫触";
+ }
+ if (value[0] == "SZGSCW") {
+ text = "鏁版嵁鏍煎紡閿欒";
+ }
+ if (value[0] == "ZHSB") {
+ text = "杞崲澶辫触";
+ }
+ if (value[0] == "BJ") {
+ text = "鎶ヨ";
+ }
+ return text;
+};
+//鍒囧壊鏁板瓧
+const subTime = (val, start, end) => {
+ var getVal = val.substring(start, end);
+ return getVal;
};
</script>
<style scoped lang="scss">
.main_contain {
background-color: #efeff4;
+ // overflow-y: unset;
.ec_header {
width: 100%;
font-size: 10px;
@@ -569,6 +580,8 @@
// background: #fff;
width: 100%;
height: auto;
+ // height: calc(100vh - 60px);
+ // overflow-y: auto;
font-size: 12px;
justify-content: center;
}
@@ -582,9 +595,14 @@
display: flex;
align-items: center;
flex-wrap: wrap;
- justify-content: space-around;
+ justify-content: space-between;
.hykt_span {
font-size: 12px;
+ height: 100%;
+ min-width: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
}
@@ -598,8 +616,16 @@
display: flex;
align-items: center;
flex-wrap: wrap;
- justify-content: space-around;
+ justify-content: space-between;
margin-bottom: 5px;
+ .hykt_span {
+ font-size: 12px;
+ height: 100%;
+ min-width: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
}
.custom-title {
text-align: left;
--
Gitblit v1.9.3