CentralizedMonitoring/CentralizedMonitoringView/src/views/CarLine/components/PortInfo.vue

<template>
  <el-scrollbar :height="WindowsHeight*0.9" style="width: 100%">
    <el-row style="width: 100%;">
      <el-col :span="24/rowNum" v-for="item in portInfoMapIterator">
        <el-card class="box-card" v-loading="item.loading">
          <template #header style="padding: 3px">
            <div class="card-header">
              <span style="width: 100%">{{ item.STANAME + '-' + item.labelName }}</span>
              <el-button :icon="Search" type="primary" circle style="margin-top: 0px;z-index: 0;"
                         @click="openSelectLogs(item.STANO + '-' + item.PORTNO,item.STANAME + '-' +item.labelName)"
              />
            </div>
          </template>
          <div class="text item">
            <el-row>
              <el-row style="width: 100%">
                <el-image
                    :src="'data:image/png;base64,'+item.imgBase64"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="['data:image/png;base64,'+item.imgBase64]"
                    style="min-width:60%;height: 120px"
                    fit="cover"
                >
                </el-image>
              </el-row>
              <el-row style="width: 100%" @mouseenter="stopAutoLoad(item.key)" @mouseleave="startAutoLoad(item.key)">
                <el-scrollbar :ref="'scrollbar'+item.key" class="radius" height="180px" style="width: 100%"
                >
                  <div :ref="'div'+item.key">
                    <p v-for="str in item.COMLIST" :key="item"
                       :style="spanStyle">
                      <span class="scrollbar-demo-item" style="color: red" v-if="str.kind==2">{{ str.text }}</span>
                      <span class="scrollbar-demo-item" v-if="str.kind!=2">{{ str.text }}</span>
                    </p>
                  </div>
                </el-scrollbar>
              </el-row>
              <span class="carinfo" v-html="item.CarInfo" :style="textStyle"></span>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-scrollbar>
  <el-dialog
      v-model="logsDialog"
      draggable
      :title="labelName+'历史日志'"
      destroy-on-close
      width="60%"
  >
    <select-logs :staNoPortNo="staNoPortNo" :labelName="labelName"></select-logs>
  </el-dialog>
</template>

<script>
import {v4} from 'uuid'
import axios from "axios";
import qs from 'qs'
import selectLogs from './selectLogs.vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

export default {
  name: "PortInfo",
  components: {
    selectLogs
  },
  data() {
    return {
      spanStyle: 'font-size: 15px;margin-top: 2px;margin-bottom: 2px',
      textStyle: ' font-size: 14px;',
      rowNum: 6,
      WindowsHeight: 20,
      itemNum: 20,
      socket: null,
      Search,
      socketLoading: true,
      baseUrl: axios.defaults.baseURL.replaceAll("http://", ''),
      socketId: v4(),
      portInfoMap: new Map,
      portInfoMapIterator: null,
      logsDialog: false,
      staNoPortNo: '',
      labelName: '',
      getUntitled: '',
      manNo: localStorage.getItem("mannoDe")
    }
  },
  watch: {
    rowNum: {
      handler(newValue, oldValue) {
        if (newValue == 8) {
          this.textStyle = 'font-size: 9px;'
          this.spanStyle = 'font-size: 12px;margin-top: 2px;margin-bottom: 2px'
        } else {
          this.textStyle = 'font-size: 14px;'
          this.spanStyle = 'font-size: 15px;margin-top: 2px;margin-bottom: 2px'
        }
      },
    }
  },
  methods: {
    changeSelect(data, checked) {
      const _this = this;
      const staNoPortNo = data.STANO + '-' + data.PORTNO;
      data.key = staNoPortNo
      data.COMLIST = []
      data.imgBase64 = ""
      data.CarInfo = ""
      if (checked) {
        data.loading = true
      } else {
        data.loading = false
      }
      this.portInfoMap.set(staNoPortNo, data);
      this.portInfoMapIterator = this.portInfoMap.values()
      this.$nextTick(() => {
        _this.openAutoLoadCom(staNoPortNo, checked);
      })
    },
    openAutoLoadCom(staNoPortNo, isLoad) {
      const _this = this;
      const data = this.portInfoMap.get(staNoPortNo);
      if (isLoad) {
        data.AUTOLOAD = setInterval(() => {
          this.itemNum++
          const scrollbarRef = 'scrollbar' + staNoPortNo;
          const divRef = 'div' + staNoPortNo;
          this.$nextTick(() => {
            _this.$refs[scrollbarRef][0].setScrollTop(_this.$refs[divRef][0].clientHeight)
          })
        }, 1000)
        this.portInfoMap.set(staNoPortNo, data);
      } else {
        clearInterval(data.AUTOLOAD)
        this.portInfoMap.delete(staNoPortNo)
      }
      this.portInfoMapIterator = this.portInfoMap.values()
      if (isLoad) {
        this.onSend(staNoPortNo, 'open')
      } else {
        this.onSend(staNoPortNo, 'close')
      }
      this.$emit('closeTreeLoading')
    },
    initSocket() {
      const WebSocketUrl = "ws://" + this.baseUrl + "/CentralizedMonitoring/WebSocket?socketId=" + this.socketId
      this.socket = new WebSocket(WebSocketUrl);
      this.socketOnClose(); //关闭
      this.socketOnOpen(); //
      this.socketOnError();
      this.socketOnMessage();
    },
    socketOnOpen() {
      this.socket.onopen = () => {
        this.$emit('changeLoading', false)
        this.socketLoading = false
        const _this = this;
        this.$emit('reCheckData')
        let _bar = {"manNo": this.manNo, "command": "Untitled", "staNo": "", "isFirst": true}
        this.socket.send(JSON.stringify(_bar));
      };
    },
    socketOnMessage: function () {
      this.socket.onmessage = res => {
        const data = JSON.parse(res.data);
        const mapData = this.portInfoMap.get(data.staNoPortNo)
        if (data.type == 'ComStrList') {
          mapData.loading = false
          let logDatas = JSON.parse(data.value);
          mapData.COMLIST = logDatas
          const stat = logDatas[logDatas.length - 1].stat;
          if (stat != null && stat != '') {
            this.$emit('changeTreeSta', mapData.treeId, stat == 1)
          }
        } else if (data.type == 'ComStr' || data.type == 'ImgBase64') {
          mapData.loading = false
          if (data.type == 'ComStr') {
            let logData = JSON.parse(data.value);
            mapData.COMLIST = this.addList(mapData.COMLIST, logData)
            if (logData.stat != null && logData.stat != '') {
              this.$emit('changeTreeSta', mapData.treeId, logData.stat == 1)
            }
          } else if (data.type == 'ImgBase64') {
            mapData.imgBase64 = data.value
          }
        } else if (data.type == 'CarInfo') {
          if (mapData != null) {
            mapData.CarInfo = data.value;
          }
        } else if (data.type == 'Untitled') {
          this.$emit('changeUntitledData', JSON.parse(data.value))
          const _this = this;
          setTimeout( () => {
            ///调取接口
             _this.sendUntitled("");
          }, 1000)
        }
        if (data.type == 'CarInfo' || data.type == 'ImgBase64' || data.type == 'ComStr' || data.type == 'ComStrList') {
          this.portInfoMap.set(data.staNoPortNo, mapData);
          this.portInfoMapIterator = this.portInfoMap.values()
        }
      };
    },
    addList(list, data) {
      if (list != null && list.length > 80) {
        for (let i = 0; i < list.length; i++) {
          if (i < list.length - 1) {
            list[i] = list[i + 1]
          } else {
            list[i] = data;
          }
        }
      } else if (list.length <= 80) {
        list[list.length] = data
      } else {
        return [];
      }
      return list;
    },
    socketOnClose() {
      this.socket.onclose = () => {
        console.log("close socket");
        this.initSocket();
      };
    },
    socketOnError() {
      this.socket.onerror = () => {
        this.socketIsNoOpen = true;
        console.log("socket 链接失败 重新链接");
        this.socketOnClose();
        this.initSocket();
        console.log("socket 链接失败");
      };
    },
    //特殊处理
    onSend(staNoPortNo, data) {
      let _bar = {"staNoPortNo": staNoPortNo, "command": data}
      this.socket.send(JSON.stringify(_bar));
    },
    startAutoLoad(staNoPortNo) {
      const _this = this;
      const data = this.portInfoMap.get(staNoPortNo);
      data.AUTOLOAD = setInterval(() => {
        this.itemNum++
        const scrollbarRef = 'scrollbar' + staNoPortNo;
        const divRef = 'div' + staNoPortNo;
        this.$nextTick(() => {
          _this.$refs[scrollbarRef][0].setScrollTop(_this.$refs[divRef][0].clientHeight)
        })
      }, 1000)
      this.portInfoMap.set(staNoPortNo, data);
      this.portInfoMapIterator = this.portInfoMap.values()
    },
    stopAutoLoad(staNoPortNo) {
      const data = this.portInfoMap.get(staNoPortNo);
      clearInterval(data.AUTOLOAD)
      this.portInfoMap.set(staNoPortNo, data);
      this.portInfoMapIterator = this.portInfoMap.values()
    },
    openSelectLogs(staNoPortNo, stanLabelName) {
      this.staNoPortNo = staNoPortNo
      this.labelName = stanLabelName
      this.logsDialog = true
    },
    sendUntitled(staNo) {
      let _bar = {"manNo": this.manNo, "command": "Untitled", "staNo": staNo, "isFirst": false}
      this.socket.send(JSON.stringify(_bar));
    }
  },
  mounted() {
    this.WindowsHeight = document.documentElement.clientHeight;
    window.onresize = () => {
      this.WindowsHeight = document.documentElement.clientHeight;
    }
    this.initSocket();
  },
  beforeUnmount() {
    this.socketOnClose();
  }
}
</script>

<style scoped>
.carinfo {
  font-weight: bolder;
  line-height: 30px;
  font-size: 14px;
}

.el-card:deep(.el-card__header) {
  padding: 3px !important;
}

.el-card:deep(.el-card__body) {
  /*--el-card-padding:5px !important;*/
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  height: 400px;
  margin: 5px;
}

.radius {
  border: 1px solid var(--el-border-color);
  border-radius: 10px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /*height: 50px;*/
  /*margin: 10px;*/
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  /*color: var(--el-color-primary);*/
}
</style>