新增锂电状态

whychdw

2021-11-13 00e0f5e91bdbef84b6730a1219367af5936efa2d

新增锂电状态

 src/pages/dataTest/components/DevStateList/DevTypeItem.vue

New file
@@ -0,0 +1,82 @@
<template>
  <div class="dev-type-item">
    <span class="state-light" :class="{'state-list-on':state}"></span>
    <span class="state-text">{{ text }}</span>
    <div class="state-image">
      <img :src="imgSrc" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "DevTypeItem",
  props: {
    state: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: "",
    },
    on: {
      type: String,
      default: ""
    },
    off: {
      type: String,
      default: ""
    },
  },
  data() {
    return {};
  },
  computed: {
    imgSrc() {
      return this.state?this.on:this.off;
    }
  },
}
</script>

<style scoped>
.dev-type-item {
  display: inline-block;
  margin-left: 16px;
  margin-right: 16px;
}
.state-light {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #6cb946;
  border-radius: 8px;
  margin-right: 4px;
}
.state-light.state-list-on {
  background-color: #FF3801;
  animation-name: stateOn;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.state-text {
  color: #0c2452;
  font-size: 14px;
  font-weight: bold;
}
.state-image {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.state-image img {
  width: auto;
  height: 32px;
}
@keyframes stateOn {
  0%   {background-color:#FF3801;}
  50%  {background-color: #673e32;}
  100% {background-color:#FF3801;}
}
</style>

 src/pages/dataTest/components/DevStateList/images/chargeOff.png

 src/pages/dataTest/components/DevStateList/images/chargeOn.png

 src/pages/dataTest/components/DevStateList/images/dischargeOff.png

 src/pages/dataTest/components/DevStateList/images/dischargeOn.png

 src/pages/dataTest/components/DevStateList/images/floatOff.png

 src/pages/dataTest/components/DevStateList/images/floatOn.png

 src/pages/dataTest/components/DevStateList/index.vue

New file
@@ -0,0 +1,57 @@
<template>
  <div class="dev-state-list">
    <dev-type-item :state="floatState" text="浮充:" :on="floatOn" :off="floatOff"></dev-type-item>
    <dev-type-item :state="dischargeState" text="放电:" :on="dischargeOn" :off="dischargeOff"></dev-type-item>
    <dev-type-item :state="chargeState" text="充电:" :on="chargeOn" :off="chargeOff"></dev-type-item>
  </div>
</template>

<script>
import floatOn from "./images/floatOn.png";
import floatOff from "./images/floatOff.png";
import chargeOn from "./images/chargeOn.png";
import chargeOff from "./images/chargeOff.png";
import dischargeOn from "./images/dischargeOn.png";
import dischargeOff from "./images/dischargeOff.png";
import DevTypeItem from "@/pages/dataTest/components/DevStateList/DevTypeItem";
export default {
  name: "DevStateList",
  components: {DevTypeItem},
  props: {
    state: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      floatOn: floatOn,
      floatOff: floatOff,
      chargeOn: chargeOn,
      chargeOff: chargeOff,
      dischargeOn: dischargeOn,
      dischargeOff: dischargeOff,
    };
  },
  computed: {
    floatState() {
      return  this.state == 0?true:false;
    },
    dischargeState() {
      return this.state == 1?true:false;
    },
    chargeState() {
      return this.state == 2?true:false;
    },
  },
}
</script>

<style scoped>
.dev-state-list {
  display: inline-block;
  padding: 12px;
  background-color: #f69f41;
  border-radius: 8px;
}
</style>

 src/pages/dataTest/diagrams/lithium/index.vue

@@ -1,5 +1,8 @@
<template>
  <div class="diagram-content">
    <div class="dev-state-wrapper">
      <dev-state-list :state="type"></dev-state-list>
    </div>
    <div class="diagram-stc" ref="static"></div>
    <div class="diagram-flush" ref="flush"></div>
    <div class="diagram-box" :style="dcDcStyle" @click="dialog = true"></div>
@@ -26,9 +29,11 @@
import insideParams from "./dialog/insideParams";
import circuitDiagram from "./js/circuitDiagram";
import diagramStates from "./js/diagramStates";
import DevStateList from "@/pages/dataTest/components/DevStateList";
let diagram;
export default {
  components: {
    DevStateList,
    insideParams,
  },
  props: {
@@ -189,4 +194,12 @@
  cursor: pointer;
  z-index: 99;
}
.dev-state-wrapper {
  position: absolute;
  top: 8px;
  width: 100%;
  height: 20px;
  text-align: center;
  z-index: 99;
}
</style>

 src/pages/dataTest/diagrams/lithium/js/circuitDiagram.js

@@ -9,7 +9,7 @@
let springGreen = "#78e5a1";
let red = '#ff686b';
let lineWidth = 3;
let start = [0, 300];
let start = [0, 360];
let end = 90;
let loaderWidth = 86;
function circuitDiagram(stc, flush) {

 src/pages/dataTest/realTime.vue

@@ -410,6 +410,7 @@
              <bar-chart
                  ref="monConnRes"
                  id="monConnRes"
                  unit="mΩ"
                  :show-tools="true"
                  @right-click="chartRightCLick"
              ></bar-chart>
@@ -1642,7 +1643,7 @@
      monConnRes = {
        title: {
          show: true,
          text: "最大值=0;最小值=0;平均值=0",
          text: "最大值=0mΩ;最小值=0mΩ;平均值=0mΩ",
          x: "center",
          textStyle: {
            fontSize: "14",
@@ -2211,7 +2212,6 @@
        let rs = JSON.parse(res.data.result);
        let data = [];
        if (rs.code == 1 && diagramType != -1) {
          console.log(rs.data);
          data = rs.data.map((item) => {
            return {
              num1: "#" + item.mon_num,
@@ -2357,11 +2357,11 @@
        monConnRes.title.text =
            "最大值=" +
            connResBarNum.max.toFixed(1) +
            ";最小值=" +
            "mΩ;最小值=" +
            connResBarNum.min.toFixed(1) +
            ";平均值=" +
            "mΩ;平均值=" +
            connResBarNum.avg.toFixed(1) +
            "";
            "mΩ";
        monConnRes.series[0].data = monConnResData;
        // 更新电压图表
        this.setChart();