内容修改

longyvfengyun

2024-04-24 2ea742e653a2f6e4f14bb183297ca48da1130d09

内容修改

 src/views/dataTest/components/IntelDevStateTools.vue

@@ -1,23 +1,23 @@
<script>
import HdwLight from "@/components/HdwLight.vue";
import {getLabelByValue} from "../../../assets/js/tools";
import { getLabelByValue } from "../../../assets/js/tools";

export default {
  name: "IntelDevStateTools",
  methods: {getLabelByValue},
  components: {HdwLight},
  methods: { getLabelByValue },
  components: { HdwLight },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
      },
    },
  },
  data() {
    return {}
  }
}
    return {};
  },
};
</script>

<template>
@@ -29,16 +29,22 @@
        <td>DCDC1</td>
        <td>DCDC2</td>
      </tr>
      <tr v-for="(item, key) in list" :key="'key'+key">
      <tr v-for="(item, key) in list" :key="'key' + key">
        <td class="item-label">{{ item.label }}</td>
        <td>
          <hdw-light v-if="item.type === 'light'" :type="item.value1"></hdw-light>
          <hdw-light
            v-if="item.type === 'light'"
            :type="item.value1"
          ></hdw-light>
          <span v-else>
            {{ getLabelByValue(item.value1, item.list) }}
          </span>
        </td>
        <td>
          <hdw-light v-if="item.type === 'light'" :type="item.value1"></hdw-light>
          <hdw-light
            v-if="item.type === 'light'"
            :type="item.value2"
          ></hdw-light>
          <span v-else>
            {{ getLabelByValue(item.value2, item.list) }}
          </span>

 src/views/dataTest/components/diagrams/intelCircuit/index.vue

@@ -1,26 +1,67 @@
<script>
import circuitDiagram from './js/circuitDiagram';
import state from './js/state';
import circuitDiagram from "./js/circuitDiagram";
import state from "./js/state";
export default {
  name: "intelCircuit",
  diagram: "",
  option() {
    return {
      dcdc1Errcode: 0,
      dcdc1Inputcurr: 0,
      dcdc1Inputvol: 0,
      dcdc1Outputcurr: 0,
      dcdc1Outputvol: 0,
      dcdc1Temp: 0,
      dcdc2Errcode: 0,
      dcdc2Inputcurr: 0,
      dcdc2Inputvol: 0,
      dcdc2Outputcurr: 0,
      dcdc2Outputvol: 0,
      dcdc2Temp: 0,
      devId: 0,
      num: 0,
      recordTime: "1980-01-01 00:00:00",
    };
  },
  props: {
    update: {
      type: Number,
      default: 0
      default: 0,
    },
    isConnect: {
      type: Boolean,
      default: false
      default: false,
    },
    option: {
      type: Object,
      default() {
        return {
          dcdc1Errcode: 0,
          dcdc1Inputcurr: 0,
          dcdc1Inputvol: 0,
          dcdc1Outputcurr: 0,
          dcdc1Outputvol: 0,
          dcdc1Temp: 0,
          dcdc2Errcode: 0,
          dcdc2Inputcurr: 0,
          dcdc2Inputvol: 0,
          dcdc2Outputcurr: 0,
          dcdc2Outputvol: 0,
          dcdc2Temp: 0,
          devId: 0,
          num: 0,
          recordTime: "1980-01-01 00:00:00",
        };
      },
    },
  },
  watch: {
    update() {
      this.changeInfo();
    }
    },
  },
  data() {
    return {}
    return {};
  },
  methods: {
    init() {
@@ -29,15 +70,83 @@
    changeInfo() {
      let diagram = this.$options.diagram;
      let isConnect = this.isConnect;
      state(diagram, {});
      let option = isConnect ? this.option : this.$options.option();

      diagram.setOption(
        "dcDc1InVol",
        "text",
        "输入电压：" + option.dcdc1Inputvol + "V"
      );

      diagram.setOption(
        "dcDc1InCurr",
        "text",
        "输入电流：" + option.dcdc1Inputcurr + "A"
      );

      diagram.setOption(
        "dcDc1OutVol",
        "text",
        "输出电压：" + option.dcdc1Outputvol + "V"
      );

      diagram.setOption(
        "dcDc1OutCurr",
        "text",
        "输出电流：" + option.dcdc1Outputcurr + "A"
      );

      diagram.setOption(
        "dcDc1Temp",
        "text",
        "模块温度：" + option.dcdc1Temp + "℃"
      );

      diagram.setOption(
        "dcDc2InVol",
        "text",
        "输入电压：" + option.dcdc2Inputvol + "V"
      );

      diagram.setOption(
        "dcDc2InCurr",
        "text",
        "输入电流：" + option.dcdc2Inputcurr + "A"
      );

      diagram.setOption(
        "dcDc2OutVol",
        "text",
        "输出电压：" + option.dcdc2Outputvol + "V"
      );

      diagram.setOption(
        "dcDc2OutCurr",
        "text",
        "输出电流：" + option.dcdc2Outputcurr + "A"
      );

      diagram.setOption(
        "dcDc2Temp",
        "text",
        "模块温度：" + option.dcdc2Temp + "℃"
      );

      state(diagram, {
        isConnect,
      });
    },
  },
  mounted() {
    this.$options.diagram = circuitDiagram(this.$refs.static, this.$refs.flush, this.start);
    this.$options.diagram = circuitDiagram(
      this.$refs.static,
      this.$refs.flush,
      this.start
    );
    // 初始化数据
    this.init();
  }
}
  },
};
</script>

<template>

 src/views/dataTest/components/diagrams/intelCircuit/js/circuitDiagram.js

@@ -323,6 +323,176 @@
    point: [line9[1][0]-16, line9[1][1]-18]
  });

  // diagram.arrow({
  //   strokeStyle: springGreen,
  //   lineWidth: lineWidth,
  //   point: line11[1]
  // })
  let rect5Width = 140;
  let rect5Height = 80;
  let rect5Point = [line14[1][0]-rect5Width/2, line11[1][1]-rect5Height/2]
  let rect5 = diagram.drawRect({
    point: rect5Point,
    size: {
      width: rect5Width,
      height: rect5Height,
    },
  });
  diagram.text({
    text: "监控",
    align: 'center',
    fontSize: 20,
    fontWeight: true,
    fillStyle: "#FFFFFF",
    baseline: 'middle',
    point: [line14[1][0], line11[1][1]]
  });

  let line18 = diagram.line({
    id: 'line18',
    strokeStyle: springGreen,
    lineWidth: lineWidth*2,
    points: [
      [line13[1][0], line11[1][1]-splitWidth*3/2],
      [line13[1][0], line11[1][1]+splitWidth*3/2],
    ]
  });

  let diffHt = line18[1][1] - line18[0][1];
  let line19 = diagram.line({
    id: "line19",
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      [line18[0][0], rect5.left[1]],
      rect5.left,
    ]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'left',
    point: line19[0]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'right',
    point: line19[1]
  });

  let line20 = diagram.line({
    id: "line20",
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      [line18[0][0], line18[0][1]+diffHt/10],
      [rect2.bottom[0], line18[0][1]+diffHt/10],
    ]
  });

  let line21 = diagram.line({
    id: "line21",
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      line20[1],
      rect2.bottom,
    ]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'left',
    point: line20[0]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'up',
    point: line21[1]
  });

  let line22 = diagram.line({
    id: "line22",
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      [line18[0][0], line18[0][1]+diffHt/10*9],
      [rect4.tl[0], line18[0][1]+diffHt/10*9],
    ]
  });

  let line23 = diagram.line({
    id: "line23",
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      line22[1],
      rect4.tl,
    ]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'left',
    point: line22[0]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'down',
    point: line23[1]
  });

  let line24 = diagram.line({
    id: "line24",
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      rect5.right,
      [rect5.right[0]+splitWidth, rect5.right[1]],
    ]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'left',
    point: line24[0]
  });

  diagram.arrow({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    direction: 'right',
    point: line24[1]
  });

  let rect6 = diagram.drawRect({
    point: [line24[1][0], line24[1][1]-rect5Height/4],
    size: {
      width: rect5Width,
      height: rect5Height/2,
    },
  });

  diagram.text({
    text: "按键、显示",
    align: 'center',
    fontSize: 20,
    fontWeight: true,
    fillStyle: "#FFFFFF",
    baseline: 'middle',
    point: [rect6.top[0], rect5.left[1]]
  });

  return diagram;
}


 src/views/dataTest/components/diagrams/intelCircuit/js/state.js

@@ -3,15 +3,23 @@
let scalcRadius = 9;

function state(diagram, option) {
  let {
    isConnect
  } = option;

  // 清除电流
  diagram.del(/^line.*dot$/);

  // 未连接
  if(!isConnect) {
    return;
  }

  normal1(diagram, option);
  // normal2(diagram, option);
  dcDc1(diagram, option);
  normal2(diagram, option);
  // dcDc1(diagram, option);
  // dcDc2(diagram, option);
}


function normal1(diagram, option) {
  // 绘制可移动的点
@@ -274,4 +282,5 @@
  });

}

export default state;

 src/views/dataTest/diagram/index.js

@@ -1405,6 +1405,89 @@
  }
}

Diagram.prototype.arrow = function(option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let opts = this.opts;
  let lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth;
  let strokeStyle = option.strokeStyle ? option.strokeStyle : "#b370fe";
  let width = option.width?option.width:10;
  switch (option.direction) {
    case 'left':
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]+width, point[1]+width]
        ]
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]+width, point[1]-width]
        ]
      });
      break;
    case 'right':
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]-width, point[1]+width]
        ]
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]-width, point[1]-width]
        ]
      });
      break;
    case 'up':
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]-width, point[1]+width],
          point,
        ]
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]+width, point[1]+width],
          point,
        ]
      });
      break;
    default:
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]-width, point[1]-width],
          point,
        ]
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]+width, point[1]-width],
          point,
        ]
      });
      break;
  }
}

// 根据id正则删除内容
Diagram.prototype.del = function (pattern) {
  // 清空options配置项

 src/views/dataTest/intelRealTime.vue

@@ -1,22 +1,54 @@
<script>
import HomeList from "@/views/dataTest/movingRingSystem/HomeList.vue";
import {getBattGroupInfo} from "@/views/dataMager/js/battGroupMager";
import { getBattGroupInfo } from "@/views/dataMager/js/battGroupMager";
import ContentBox from "@/components/ContentBox.vue";
import HdwLight from "@/components/HdwLight.vue";
import getIntelDevState from "@/views/dataTest/js/getIntelDevState";
import IntelDevStateTools from "@/views/dataTest/components/IntelDevStateTools.vue";
import IntelCircuit from "@/views/dataTest/components/diagrams/intelCircuit/index.vue";
import createWs from "@/assets/js/websocket";
import { getBit } from "@/assets/js/const/const_storage";

const WSMixin = createWs("Intelligent");

export default {
  name: "movingRingSysteRrealTime",
  components: {IntelCircuit, IntelDevStateTools, HdwLight, ContentBox, HomeList},
  mixins: [WSMixin],
  components: {
    IntelCircuit,
    IntelDevStateTools,
    HdwLight,
    ContentBox,
    HomeList,
  },
  data() {
    return {
      homeListShow: true,
      batt: {},
      acTabs: "eleLine",
      stateList: getIntelDevState(),
    }
      devData: {
        dcdc1Errcode: 0,
        dcdc1Inputcurr: 0,
        dcdc1Inputvol: 0,
        dcdc1Outputcurr: 0,
        dcdc1Outputvol: 0,
        dcdc1Temp: 0,
        dcdc2Errcode: 0,
        dcdc2Inputcurr: 0,
        dcdc2Inputvol: 0,
        dcdc2Outputcurr: 0,
        dcdc2Outputvol: 0,
        dcdc2Temp: 0,
        devId: 0,
        num: 0,
        recordTime: "1980-01-01 00:00:00",
      },
      diagram: {
        isConnect: false,
        update: 0,
      },
    };
  },
  watch: {
    "$route.params.BattGroupId"(battGroupId) {
@@ -46,13 +78,56 @@
    },
    leafClick(data) {
      this.batt = data;
      this.$nextTick(() => {
        // 开启循环请求
        this.sendMessage();
      });
    },
    resize() {

    resize() {},
    tabClick() {},
    onWSOpen() {
      this.$nextTick(() => {
        this.sendMessage();
      });
    },
    tabClick() {
    sendMessage() {
      let batt = this.batt;
      if (!batt.battGroupId || !this.isWSOpen) {
        return false;
      }
      // console.log("=====9=", params, JSON.stringify(params));
      this.SOCKET.send(batt.fbsdeviceId);
    },
    onWSMessage(res) {
      let rs = JSON.parse(res.data);
      if (rs.code === 1 && rs.data) {
        this.devData = rs.data2;
      }
      let data = this.devData;
      // 判断是否超时
      let outTime = 2 * 60; //设备超时时间(2分钟)
      let nowTime = new Date(rs.data3).getTime(); //当前时间
      let record = new Date(data.recordTime).getTime();

    }
      // 超过2分钟
      if (false) {
        // if (Math.abs(nowTime - record) / 1000 > outTime) {
        this.diagram.isConnect = false;
        this.stateList.map((item) => {
          item.value1 = -1;
          item.value2 = -1;
        });
      } else {
        this.diagram.isConnect = true;
        this.stateList.map((item) => {
          item.value1 = getBit(data.dcdc1Errcode, item.bit);
          item.value2 = getBit(data.dcdc2Errcode, item.bit);
        });
      }

      // 更新数据
      this.diagram.update = Math.random();
    },
  },
  computed: {
    battFullName() {
@@ -69,8 +144,8 @@
    if (battGroupId) {
      this.getBattGroupInfo(battGroupId);
    }
  }
}
  },
};
</script>

<template>
@@ -79,15 +154,21 @@
      v-if="homeListShow"
      slot="header"
      @toggleChange="toggleChange"
      @leaf-click="leafClick"></home-list>
      @leaf-click="leafClick"
    ></home-list>
    <content-box
      style="margin-left: 4px; margin-right: 4px"
      :title="battFullName">
      :title="battFullName"
    >
      <div class="page-content">
        <div class="state-tools-wrapper">
          <intel-dev-state-tools :list="stateList"></intel-dev-state-tools>
        </div>
        <intel-circuit></intel-circuit>
        <intel-circuit
          :option="devData"
          :update="diagram.update"
          :is-connect="diagram.isConnect"
        ></intel-circuit>
      </div>
    </content-box>
  </flex-layout>