联调接口

yangyin

2023-07-13 27d9a0bc91e065ae2e69a3425bb3e237a45fbece

联调接口

 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">
@@ -125,212 +114,59 @@
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);
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:07:46",
      DataValue: "4.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:08:46",
      DataValue: "5.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:09:46",
      DataValue: "6.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:10:46",
      DataValue: "7.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:12:46",
      DataValue: "9.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();
  }, 200);
  // 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) {
@@ -348,7 +184,47 @@
});

//刷新
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) {
@@ -371,6 +247,63 @@
    state.isOnTapInterval = false;
    return;
  }
};
//初始化获取数据
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);
    });
};
//  初始化echarts折线图
const drawBar = () => {
@@ -415,6 +348,8 @@
    xAxis: {
      type: "time",
      boundaryGap: false,
      min: minDate,
      max: maxDate,
      axisLabel: {
        showMaxLabel: true,
        formatter: function (value) {
@@ -496,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;
@@ -580,6 +580,8 @@
    // background: #fff;
    width: 100%;
    height: auto;
    // height: calc(100vh - 60px);
    // overflow-y: auto;
    font-size: 12px;
    justify-content: center;
  }
@@ -593,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;
    }
  }

@@ -609,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;