From 6a4254ee140fa16d922db221ddf06e66c2164057 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期五, 14 七月 2023 11:48:17 +0800
Subject: [PATCH] 提交代码

---
 src/views/HomeView.vue |  676 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 670 insertions(+), 6 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0b0a271..e5b0021 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,15 +1,679 @@
 <template>
-  <div class="home">
-    {{ state.name }}
+  <div class="main_contain">
+    <div class="ec_header">
+      <div class="ec_header_left">
+        <div class="ec_header_left_view">{{ pointName }}</div>
+        <div class="ec_header_left_view">
+          <span class="ec_header_val">{{
+            state.currentRecordParas.RecordValue
+          }}</span>
+        </div>
+      </div>
+      <div class="ec_header_right">
+        <div class="ec_header_right_view">
+          <div>鐘舵��:{{ state.currentRecordParas.RecordStatusName }}</div>
+          <div>璀︽姤:{{ state.currentRecordParas.AlarmNumber }}</div>
+        </div>
+        <div class="ec_header_right_view">
+          <div>{{ state.currentRecordParas.RecordTime }}</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">
+      <van-collapse v-model="state.activeNames">
+        <van-collapse-item name="1">
+          <template #title>
+            <div>璇︽儏</div>
+          </template>
+          <van-cell :value="state.MonitorPointID">
+            <template #title>
+              <div class="custom-title">娴嬬偣缂栧彿</div>
+            </template>
+          </van-cell>
+          <van-cell value="鐬椂鍘嬪姏">
+            <template #title>
+              <div class="custom-title">鐩戞帶鍚嶇О</div>
+            </template>
+          </van-cell>
+          <van-cell value="MPa">
+            <template #title>
+              <div class="custom-title">鍗曚綅</div>
+            </template>
+          </van-cell>
+          <van-cell value="">
+            <template #title>
+              <div class="custom-title">涓婃鎶ヨ</div>
+            </template>
+          </van-cell>
+          <van-cell>
+            <template #title>
+              <div class="custom-title">鏄惁鏄剧ず鎶ヨ鐐�</div>
+            </template>
+            <template #value>
+              <van-switch v-model="state.checked" size="24px" />
+            </template>
+          </van-cell>
+          <van-cell value="闃堝��">
+            <template #title>
+              <div class="custom-title">璀︽姤绫诲瀷</div>
+            </template>
+          </van-cell>
+        </van-collapse-item>
+      </van-collapse>
+    </div> -->
+    <div class="ykt-detail-wrapers">
+      <div class="hykt_header" style="margin-bottom: 5px">
+        <div class="hykt_span">鏃堕棿</div>
+        <div
+          class="hykt_span"
+          @click="changeMonitorStatus"
+          :style="state.isMonitorChange ? 'color:red;' : ''"
+        >
+          鐘舵��
+        </div>
+        <div class="hykt_span">鐩戞帶鍊�</div>
+      </div>
+      <div
+        class="hykt_li"
+        v-for="(monitor, index) in state.c_monitorList"
+        :key="index"
+      >
+        <div class="hykt_span">{{ monitor.RecordTime }}</div>
+        <div class="hykt_span">
+          {{
+            monitor.RecordStatusText.length > 0 &&
+            monitor.RecordStatusText[0] == "BJ"
+              ? "涓柇"
+              : "姝ｅ父"
+          }}
+        </div>
+
+        <div class="hykt_span">{{ monitor.RecordValue }}</div>
+      </div>
+    </div>
+    <!-- 鍒锋柊 -->
+    <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">
+      <van-icon
+        :name="state.isOnTapInterval ? 'exchange' : 'shrink'"
+        size="20px"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import {reactive, onMounted } from "vue"
+import { reactive, onMounted, ref, shallowRef, onBeforeUnmount } from "vue";
+import moment from "moment";
+import * as echarts from "echarts"; //寮曞叆echarts
+import axios from "axios";
+import { useRouter } from "vue-router";
+import { showLoadingToast, showFailToast, allowMultipleToast } from "vant";
+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({
-  name:'Hello World'
-})
+  currentRecordParas: {
+    RecordValue: "",
+    RecordStatusName: "",
+    AlarmNumber: 0,
+    RecordTime: "",
+  },
+  chartData: [],
+  x_yData: [],
+  activeNames: [""],
+  checked: false, //鏄惁鏄剧ず鎶ヨ鐐�
+  loading: false, //鍔犺浇鐘舵��
+  isMonitorChange: false, //鐩戞祴鐣岄潰 --- 鏄惁鍚敤鐘舵�佺瓫閫�
+  isOnTapInterval: false,
+  monitorList: [],
+  c_monitorList: [],
+  PointID: "",
+  CorpID: "",
+  token: "",
+});
 onMounted(() => {
+  state.PointID = router.currentRoute.value.query.PointID;
+  state.token = router.currentRoute.value.query.Token;
+  state.CorpID = router.currentRoute.value.query.CorpID;
+  allowMultipleToast();
+  if (state.token == "") {
+    showFailToast("token鏃犳晥,璇烽噸璇�");
+    return;
+  }
+  if (state.PointID == "") {
+    showFailToast("娴嬬偣ID闇�瑕�>0,璇烽噸璇�");
+    return;
+  }
+  if (state.CorpID == undefined || state.CorpID == "") {
+    showFailToast("CorpID闇�瑕�>0,璇烽噸璇�");
+    return;
+  }
+  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 = () => {
+  axios({
+    url: "http://47.101.141.88:9019/Run/MonitorRealRecord/Mobile/GetLastRecordByMonitorPointID@V1.0",
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${state.token}`,
+    },
+    params: {
+      CorpID: state.CorpID,
+      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) {
+    myChart.value.setOption({
+      yAxis: {
+        boundaryGap: ["0%", "0%"],
+        scale: true,
+      },
+    });
+    state.isOnTapInterval = true;
+    return;
+  }
+  if (state.isOnTapInterval) {
+    myChart.value.setOption({
+      yAxis: {
+        boundaryGap: ["15%", "15%"],
+        scale: false,
+      },
+    });
+    state.isOnTapInterval = false;
+    return;
+  }
+};
+//鍒濆鍖栬幏鍙栨暟鎹�
+const initialRealTimeRecord = () => {
+  let loading = showLoadingToast({
+    message: "鍔犺浇涓�...",
+    forbidClick: true,
+  });
+  axios({
+    url: "http://47.101.141.88:9019/Run/MonitorRealRecord/Mobile/GetByMonitorPointIDOfDay@V1.0",
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${state.token}`,
+    },
+    params: {
+      CorpID: state.CorpID,
+      MonitorPointID: state.PointID,
+      Day: state.currentRecordParas.RecordTime,
+    },
+  })
+    .then((res) => {
+      loading.close();
+      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 = [];
+      let monitor_List = [];
+      data.forEach((item) => {
+        let totalState = DataStatusTextEmun(item.DataStatus);
+        m_MonitorList.push({
+          RecordTime: subTime(item.DataTime, 11, 16),
+          RecordStatusText: totalState,
+          RecordValue: item.DataValue,
+        });
+      });
+      data.forEach((item) => {
+        let normalState = DataStatusTextEmun(item.DataStatus);
+        if (normalState == "姝ｅ父") {
+          monitor_List.push({
+            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涓婄殑瀹炰緥
+  let chartDom = echarts.getInstanceByDom(document.getElementById("chartMain"));
+  //鐒跺悗鍒ゆ柇瀹炰緥鏄惁瀛樺湪锛屽鏋滀笉瀛樺湪锛屽氨鍒涘缓鏂板疄渚�
+  if (chartDom == null) {
+    chartDom = echarts.init(document.getElementById("chartMain"));
+    myChart.value = chartDom;
+  }
+  let x_yData = [];
+  state.chartData.forEach((item) => {
+    x_yData.push({ value: [item.DataTime, item.DataValue] });
+  });
+  state.x_yData = x_yData;
+  let series_arr = [];
+  series_arr.push({
+    type: "line",
+    showSymbol: false,
+    emphasis: { scale: false },
+    data: state.x_yData,
+    itemStyle: {
+      color: "#4169E1",
+    },
+  });
+  let option = {
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      show: false,
+      fontSize: 12,
+      color: "#7e8390",
+    },
+    grid: {
+      left: "5%",
+      right: "5%",
+      bottom: "10%",
+      top: "12%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "time",
+      boundaryGap: false,
+      min: minDate,
+      max: maxDate,
+      axisLabel: {
+        showMaxLabel: true,
+        formatter: function (value) {
+          // 濡傛灉鏃堕棿鏄� 23:59:59 , 鏍煎紡鍖栦负 24:00
+          if (
+            value ===
+            new Date(
+              moment().endOf("day").format("YYYY-MM-DD HH:mm:ss")
+            ).getTime()
+          ) {
+            return moment(value).format("24:00");
+          } else {
+            // 鍏朵粬鐨勬椂闂磋繑鍥炴牸寮忓寲 00:00
+            return moment(value).format("HH:mm");
+          }
+        },
+      },
+      axisLine: { onZero: true, show: true },
+      minorTick: {
+        show: false,
+        splitNumber: 2,
+      },
+      splitLine: {
+        show: true, //鏄惁鏄剧ず鍒嗛殧绾�
+        interval: "auto", //鍧愭爣杞村垎闅旂嚎鐨勬樉绀洪棿闅�
+      },
+    },
+    yAxis: {
+      boundaryGap: ["20%", "20%"],
+
+      type: "value",
+      axisLabel: {
+        formatter: "{value}",
+      },
+      // 鏁存潯y杞�
+      axisLine: {
+        show: true,
+      },
+    },
+    dataZoom: [
+      {
+        type: "slider", //鍥捐〃涓嬫柟鐨勪几缂╂潯
+        show: true, //鏄惁鏄剧ず
+        realtime: true, //
+        start: 0, //浼哥缉鏉″紑濮嬩綅缃紙1-100锛夛紝鍙互闅忔椂鏇存敼
+        end: 100, //浼哥缉鏉＄粨鏉熶綅缃紙1-100锛夛紝鍙互闅忔椂鏇存敼
+        left: 10,
+        right: 15,
+        bottom: 5, //搴曢儴鐨勮窛绂�
+        fillerColor: "rgba(22,181,203,0.4)", //閫変腑鑼冨洿鐨勫～鍏呴鑹层��
+        borderColor: "#ddd", //杈规棰滆壊銆�
+        backgroundColor: "rgba(167,183,204,0.4)", //缁勪欢鐨勮儗鏅鑹�
+        throttle: 100, //璁剧疆瑙﹀彂瑙嗗浘鍒锋柊鐨勯鐜囥�傚崟浣嶄负姣锛坢s锛夈��
+        handleIcon:
+          "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
+        handleSize: "80%", //  鎺у埗鎵嬫焺鐨勫昂瀵革紝鍙互鏄儚绱犲ぇ灏忥紝涔熷彲浠ユ槸鐩稿浜� dataZoom 缁勪欢瀹藉害鐨勭櫨鍒嗘瘮锛岄粯璁よ窡 dataZoom 瀹藉害鐩稿悓銆�
+        handleStyle: {
+          color: "#16b5cb",
+          shadowBlur: 3, // shadowBlur鍥剧墖闃村奖妯＄硦鍊硷紝shadowColor闃村奖鐨勯鑹�
+          shadowColor: "#77CCD8",
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          opacity: 0.6,
+        },
+      },
+    ],
+    series: series_arr,
+  };
+  myChart.value.clear();
+  myChart.value.setOption(option, true);
+  window.addEventListener("resize", selfAdaption);
+  if (times.value) {
+    // 鍒ゆ柇娓呴櫎
+    clearInterval(times.value);
+  }
+  times.value = setInterval(countdown, 1000);
+};
+//  鑷�傚簲
+const selfAdaption = () => {
+  if (!myChart.value) return;
+  myChart.value.resize();
+  setTimeout(() => {
+    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: state.CorpID,
+      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 = () => {
+  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;
+    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 = "鎶ヨ";
+  }
+  if (value[0] == "BC") {
+    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;
+    color: #fff;
+    display: flex;
+
+    .ec_header_left {
+      width: 55%;
+      height: 82px;
+      background: linear-gradient(to left, #97d8e0, #16b5cb);
+      border-radius: 5px;
+      .ec_header_left_view {
+        height: 40px;
+        font-size: 20px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .ec_header_name {
+          font-size: 14px;
+        }
+      }
+    }
+    .ec_header_right {
+      width: 45%;
+
+      font-size: 10px;
+      .ec_header_right_view {
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        background: linear-gradient(45deg, #97d8e0, #16b5cb);
+        border-radius: 3px;
+        margin: 1px 1px;
+      }
+    }
+  }
+  .container {
+    /* position: relative; */
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    background-color: #fff;
+    border-radius: 3px;
+  }
+  .ykt-detail-wraper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 10px auto;
+    background: #fff;
+    border-radius: 3px;
+  }
+  .ykt-detail-wrapers {
+    padding: 8px 0px 0px 0px;
+    // background: #fff;
+    width: 100%;
+    height: auto;
+    // height: calc(100vh - 60px);
+    // overflow-y: auto;
+    font-size: 12px;
+    justify-content: center;
+  }
+  .hykt_header {
+    width: 100%;
+    min-height: 25px;
+    background-color: #16b5cb;
+    color: #fff;
+    font-weight: 600;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .hykt_span {
+      font-size: 12px;
+      height: 100%;
+      min-width: 100px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .hykt_li {
+    width: 100%;
+    min-height: 25px;
+    background-color: #fff;
+    color: #000;
+    font-weight: 500;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    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;
+  }
+  .icon_view {
+    font-size: 30px;
+    color: #fff;
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    right: 10px;
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #16b5cb;
+    border-radius: 5px;
+    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
+  }
+}
+.loading {
+  position: absolute;
+  padding-top: 75%;
+  padding-left: 45%;
+}
+</style>

--
Gitblit v1.9.3