34

chenyc

2025-01-20 5c7adfc5605a9f050a7e10ec8e7d07da23277608

 src/views/Home.vue

@@ -10,7 +10,6 @@
    >
      <el-row
        v-if="deviceData.患者姓名 !== ''"
        @click="showgaojing"
        :style="{ backgroundColor: background }"
        :class="{ blink2: isbaioji }"
        style="
@@ -54,13 +53,15 @@
            display: grid;
            padding: 5px;
            font-size: 300%;
            height: 100%
          "
        >
          <span
            v-if="
              deviceData.iot_跨膜压 >= 200 && Number(deviceData.透析状态) === 2
            "
            style="color: #303133"
             class="grid-container"
          style="margin-left: 5%; height: 100%;color: #303133"
          >
            TMP↑
          </span>
@@ -190,7 +191,7 @@
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="70"
                    :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
                  />
                </div>
                <div style="height: 20%">
@@ -209,7 +210,7 @@
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="80"
                    :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
                    status="success"
                  />
                </div>
@@ -456,18 +457,59 @@
        </el-col>
      </el-row>
    </div>
    <!-- 设置按钮 -->
    <button id="settingsButton" class="fixed-bottom-right" @click="centerDialogVisible=true">⚙️</button>
    <el-dialog
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      title="提示"
      v-model="centerDialogVisible"
      width="500px"
      center>
      <span>
        <el-form label-position="left" label-width="auto" style="max-width: 600px">
          <el-space fill>
            <el-alert type="warning" show-icon :closable="false">
              <p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
            </el-alert>
            <el-form-item label="设备编号">
              <el-input v-model="deviceCode" />
            </el-form-item>
          </el-space>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSet">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  <script lang="ts" setup>
import TQS88 from "../img/TQS88.png";
import maibo from '../img/maibo.png'
import xueya from '../img/xueya.png'
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
import {EventSourcePolyfill} from 'event-source-polyfill';
import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch } from "vue";
import { Local } from '../utils/storage';
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
const { proxy } = getCurrentInstance() as any;
// 在需要使用的组件中引入
import { ChatDotSquare } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
// 连接服务器
const source = ref<EventSourcePolyfill | null>(null);
//接收到的sse数据
const sseData = ref({});
 // sse状态
const readyState = ref({ key: 0, value: "正在链接中" });
const deviceCode=ref('')
const deviceData = ref({
  iot_传输时间: "2025-01-10 19:15:24",
  iot_当前脱水量: 2.04,
@@ -789,7 +831,23 @@
    deep: true,
  }
);
onMounted(() => {});
onMounted(() => {
  let devcieCode=Local.get('devcieCode')
  if(devcieCode){
    deviceCode.value=devcieCode
    sourceInit()
  }else{
    centerDialogVisible.value=true
  }
});
const saveSet=()=>{
  if(deviceCode.value){
    Local.set('devcieCode',deviceCode.value)
    sourceInit()
  }else{
    ElMessage.warning('请先输入设备编号')
  }
}
watch(
  () => deviceData.value.设备变化,
  () => {
@@ -801,35 +859,80 @@
    }, 500);
  }
);
//创建链接对象
const creatSource = () => {
        const stateArr = [
        { key: 0, value: "正在链接中" },
        { key: 1, value: "已经链接并且可以通讯" },
        { key: 2, value: "连接已关闭或者没有链接成功" },
        ];
        try {
        source.value=  new EventSourcePolyfill(`https://hemobs.icoldchain.cn/sse/sseEvent/${deviceCode.value}`,{
            heartbeatTimeout:60000
        });
        source.value.onopen = (e) => {
            console.log('链接成功')
            readyState.value = stateArr[source.value?.readyState ?? 0];
            console.log(e)
        };
        source.value.onerror = (e) => {
            console.log(e,'异常情况-----')
            readyState.value = stateArr[source.value?.readyState ?? 0];
        };
        source.value.onmessage = (e) => {
            console.log('收到消息',e.data)
            if(e.data){
                const msg=e.data
                let dif=msg.indexOf('event:message')
                let beng=msg.indexOf('{')
                let end=msg.length-1
                if(beng!==-1&&end!==-1&&dif!==-1){
                  const datax=msg.slice(beng,end+1)
                  const dataBody=JSON.parse(datax)
                  console.log(dataBody) 
                  deviceData.value=dataBody.透析状态
                  deviceData.value.属性历史列表=dataBody.IOT信息.属性历史列表
                  deviceData.value.设备变化=Date.now() + 'DEV'
                }
            }

const showgaojing = () => {
  if (deviceData.value.监测血压是否低于百分之30) {
    centerDialogVisible.value = true;
    iscomfig.value = true;
    textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 监测血压下降至上机血压30%了，请及时处理`;
  }
  if (deviceData.value.跨膜压是否大于200) {
    centerDialogVisible.value = true;
    iscomfig.value = true;
    textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 跨膜压过高请及时处理`;
  }
        };
        } catch (error) {
            console.log(error);
        }
    };
//初始化
const sourceInit = () => {
    console.log('初始化see')
    if (!source.value|| source.value.readyState === 2) {
    creatSource();
    }
};
//  关闭 WebSocket
const closeSource = () => {
    console.log('断开')
    source.value?.close();
};
// 取消订阅
onBeforeMount(()=>{
    closeSource()
})
const initTupiao = () => {
  if (deviceData.value.患者姓名 !== "") {
    const seriesData = [
      {
        name: "",
        name: "11",
        type: "line",
        symbol: "triangle",
        symbolSize: 10,
        symbolRotate: 180,
        data: [],
        lineStyle: {
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
          color: "red",
        },
        itemStyle: {
          borderWidth: 3,
          borderWidth: 5,
          borderColor: "red",
          color: "red",
        },
@@ -853,10 +956,10 @@
        data: [],
        lineStyle: {
          color: "#409EFF",
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
        },
        itemStyle: {
          borderWidth: 3,
          borderWidth: 5,
          borderColor: "#409EFF",
          color: "#409EFF",
        },
@@ -883,7 +986,7 @@
        data: [],
        lineStyle: {
          color: "#D940FF",
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
        },
        markPoint: {
          data: [],
@@ -1290,4 +1393,23 @@
  font-weight: 600;
  /* 其他样式 */
}
/* 固定定位设置按钮 */
.fixed-bottom-right {
  position: fixed;
  bottom: 20px; /* 距离底部的距离 */
  right: 20px;  /* 距离右侧的距离 */
  z-index: 1000; /* 确保按钮位于页面内容之上 */
  padding: 5px 10px;
  background-color: #fbfdff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* 鼠标悬停时改变颜色 */
.fixed-bottom-right:hover {
  background-color: #0056b3;
}
</style>