IStation/Web.PHM.V1.git

<!--  -->
<template>
  <div style="width: 100%; height: 100%; display: flex">
    <left-tree @click="handleNodeClick"></left-tree>
    <div class="boxright">
      <title-box-vue title="机组监测"> </title-box-vue>
      <div style="height: calc(100% - 40px); overflow: auto">
        <div class="imgBox" :style="`background-image:url(${pumpimg});`">
          <svg
            v-if="true"
            height="760px"
            version="1.1"
            width="1450px"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            style="overflow: hidden; position: absolute; left: 0px; top: 0px"
            id="svgbox"
          ></svg>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { getDay } from "@/utils/istation/common";
import * as echarts from "echarts";
import titleBoxVue from "@/views/main/components/titleBox.vue";
import leftTree from "@/views/main/components/leftTree.vue";
import x6view from "@/views/main/istation/viewFlowX6.vue";
// import pumpimg from "@/assets/images/pump/pumpimg.png";
import pumpimg from "@/assets/images/pump/12.gif";
 
export default {
  name: "pumpMonitor",
  components: {
    titleBoxVue,
    leftTree,
    x6view,
  },
  data() {
    return {
      pumpimg,
    };
  },
  created() {},
  mounted() {
    this.initSvg();
  },
  computed: {},
  watch: {},
  methods: {
    handleNodeClick(data) {
      console.log(data, 74);
    },
    initSvgBox(row) {
      let titlex = row.rect.x + row.rect.w / 2;
      let titley = row.rect.y + 10;
      let str = `<ellipse  cx="${row.point.x}" cy="${row.point.y}" rx="5" ry="5" fill="#ff8030" stroke="none" fill-opacity="1" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 1; cursor: move;"></ellipse>`;
      str += `<rect x="${row.rect.x}" y="${row.rect.y}" width="${row.rect.w}" height="${row.rect.h}" rx="0" ry="0" fill="#15a4fa" stroke="#efefef" fill-opacity="1" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 1; cursor: move;"></rect>`;
      str += `<rect x="${row.rect.x + 2}" y="${row.rect.y + 22}" width="${
        row.rect.w - 4
      }" height="18" rx="0" ry="0" fill="#787878" stroke="#787878" fill-opacity="1" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill-opacity: 1; cursor: move;"></rect>`;
      str += `<text x="${titlex}" y="${titley}" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#ffffff" font="12px 黑体" opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 12px 黑体; opacity: 1; cursor: pointer;"><tspan  dy="3.887187499999996" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> ${row.title.name} </tspan></text>`;
      str += `<text x="${titlex}" y="${
        titley + 20
      }"  text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#00ff00" font="12px 黑体" opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 12px 黑体; opacity: 1; cursor: pointer;"><tspan id="monitor_${
        row.id
      }" dy="3.887187499999996" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> ${
        row.title.value
      } </tspan></text>`;
      str += `<path fill="none" stroke="#ff8030" d="M${row.pointstart.x},${row.pointstart.y}L${row.point.x},${row.point.y}" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>`;
      str += ``;
      str += ``;
      return str;
    },
    initSvg() {
      const arr = [
        {
          id: 1,
          rect: { x: 309, y: 140, w: 80, h: 40 },
          point: { x: 446, y: 350 },
          pointstart: { x: 389, y: 160 },
          title: { name: "启停", value: "0.0" },
        },
        {
          id: 2,
          rect: { x: 309, y: 200, w: 80, h: 40 },
          point: { x: 446, y: 350 },
          pointstart: { x: 389, y: 220 },
          title: { name: "转速", value: "0.0 rpm" },
        },
        {
          id: 3,
          rect: { x: 439, y: 140, w: 85, h: 40 },
          point: { x: 480, y: 280 },
          pointstart: { x: 469, y: 180 },
          title: { name: "电机非驱动端x", value: "0.1 mm/s" },
        },
        {
          id: 4,
          rect: { x: 439, y: 200, w: 85, h: 40 },
          point: { x: 480, y: 350 },
          pointstart: { x: 469, y: 240 },
          title: { name: "电机非驱动端y", value: "0.12 mm/s" },
        },
        {
          id: 5,
          rect: { x: 570, y: 80, w: 80, h: 40 },
          point: { x: 675, y: 310 },
          pointstart: { x: 650, y: 100 },
          title: { name: "电机驱动端x", value: "0.12 mm/s" },
        },
        {
          id: 6,
          rect: { x: 570, y: 140, w: 80, h: 40 },
          point: { x: 675, y: 380 },
          pointstart: { x: 650, y: 160 },
          title: { name: "电机驱动端y", value: "0.12 mm/s" },
        },
        {
          id: 7,
          rect: { x: 570, y: 200, w: 80, h: 40 },
          point: { x: 685, y: 340 },
          pointstart: { x: 650, y: 220 },
          title: { name: "电机驱动端z", value: "0.11 mm/s" },
        },
        {
          id: 8,
          rect: { x: 829, y: 80, w: 80, h: 40 },
          point: { x: 840, y: 310 },
          pointstart: { x: 869, y: 120 },
          title: { name: "泵驱动端x", value: "0.12 mm/s" },
        },
        {
          id: 9,
          rect: { x: 829, y: 140, w: 80, h: 40 },
          point: { x: 840, y: 360 },
          pointstart: { x: 869, y: 180 },
          title: { name: "泵驱动端y", value: "0.12 mm/s" },
        },
        {
          id: 10,
          rect: { x: 829, y: 200, w: 80, h: 40 },
          point: { x: 830, y: 330 },
          pointstart: { x: 869, y: 240 },
          title: { name: "泵驱动端z", value: "0.11 mm/s" },
        },
        {
          id: 11,
          rect: { x: 1060, y: 140, w: 80, h: 40 },
          point: { x: 1160, y: 310 },
          pointstart: { x: 1140, y: 160 },
          title: { name: "泵非驱动端x", value: "0.1 mm/s" },
        },
        {
          id: 12,
          rect: { x: 1060, y: 200, w: 80, h: 40 },
          point: { x: 1160, y: 350 },
          pointstart: { x: 1140, y: 220 },
          title: { name: "泵非驱动端y", value: "0.12 mm/s" },
        },
      ];
 
      let str = "";
      arr.forEach((x) => {
        str += this.initSvgBox(x);
      });
      let svg = document.getElementById("svgbox");
      svg.innerHTML = str;
 
      setInterval(() => {
        arr.forEach((x) => {
            if(x.id==1){
                let str = `${1} `
                let idstr = "#monitor_"+x.id
                if(document.querySelector(idstr)){
                    document.querySelector(idstr).innerHTML=str
                }
                
            }
            else if(x.id==2){
                let val = this.getValueByMaxMin(1000,700,0)
                let str = `${val} rpm`
                let idstr = "#monitor_"+x.id
                if(document.querySelector(idstr)){
                    document.querySelector(idstr).innerHTML=str
                }
            }
            else{
                let val = this.getValueByMaxMin(0.1,0,2)
                let str = `${val} mm/s`
                let idstr = "#monitor_"+x.id
                if(document.querySelector(idstr)){
                    document.querySelector(idstr).innerHTML=str
                }
            }
        });
      }, 1000 * 60 * 2);
    },
    getValueByMaxMin(max,min,l){
        let val = parseFloat((Math.random()*(max-min)+min).toFixed(l)) 
        return val
    },
  },
};
</script>
    <style scoped>
.boxright {
  flex: 1;
  height: 100%;
  overflow: auto;
  background: #fff;
  margin-left: 20px;
}
.imgBox {
  width: 1450px;
  height: 760px;
  background-size: cover;
  position: relative;
}
</style>