内容提交

longyvfengyun

2022-04-13 8a4b1fc1591ed68da3f9a7a8aa26013d50e7bc17

内容提交

 src/assets/js/tools/getMaxValue.js

New file
@@ -0,0 +1,10 @@
function getMaxValue(list) {
  let max = -Infinity;
  for(let i=0; i<list.length; i++) {
    let item = list[i];
    max = item>max?item:max;
  }
  return max;
}

export default getMaxValue;

 src/components/myCharts/DivideCubeBar.vue

New file
@@ -0,0 +1,298 @@
<script>
import ECharts from "echarts";
import BaseChart from "@/components/myCharts/BaseChart";
import getYMax from "@/components/chart/js/getYMax";
import getMaxValue from "@/assets/js/tools/getMaxValue";
export default {
  name: "DivideCubeBar",
  extends: BaseChart,
  props: {
    name: {
      type: String,
      default: "",
    },
    unit: {
      type: String,
      default: ""
    },
    max: {
      type: Number,
      default: 10
    },
  },
  data() {
    return {}
  },
  methods: {
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },
    getOption(data) {
      let xLabel = data.xLabel;
      let sData = data.sData;
      let yName = this.yName;
      let min = sData.length == 0?0:null;
      let max = sData.length == 0?0:null;
      max = getMaxValue(sData);
      const CubeLeft = ECharts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          //中间柱子
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y - 4];
          const c1 = [shape.x - 15, shape.y - 8]; //左上
          const c2 = [xAxisPoint[0] - 15, xAxisPoint[1] - 5]; //左下
          const c3 = [xAxisPoint[0], xAxisPoint[1] - 1];
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
      });
      const CubeRight = ECharts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y - 4];
          const c2 = [xAxisPoint[0] + 1, xAxisPoint[1] - 1]; //右矩形左下
          const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 9]; //右下
          const c4 = [shape.x + 10, shape.y - 9]; //右上
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
      });
      const CubeTop = ECharts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y - 4]; //bottom
          const c2 = [shape.x + 9, shape.y - 9]; //right
          const c3 = [shape.x - 2, shape.y - 13]; //top
          const c4 = [shape.x - 15, shape.y - 8]; //left
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
      });
      ECharts.graphic.registerShape('CubeLeft', CubeLeft);
      ECharts.graphic.registerShape('CubeRight', CubeRight);
      ECharts.graphic.registerShape('CubeTop', CubeTop);
      const MAX = sData.map(item=>{
        return max*1.2>this.max?max*1.2:this.max;
      });
      const VALUE = sData.map(item=>{
        return item;
      });
      return {
        animation: false,
        tooltip:{
          show: false,
        },
        grid: {
          top: "28px",
          left: '1%',
          right: '1%',
          bottom: '8px',
          containLabel: true
        },
        xAxis:[
          {
            type: 'category',
            data: xLabel,
            offset: 20, //x轴标签距离x轴距离
            axisTick: {
              //刻度线
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#7DFFFD',
              },
            },
            axisLabel: {
              fontSize: 12, //x轴标签文字 大小
            },
          },
          {
            type: 'category',
            show: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              margin: -10,
              color: '#FFFFFF',
              fontSize: '10',
            },
            data: VALUE,
          },
        ],
        yAxis: {
          name: yName,
          type: "value",
          boundaryGap: [0, '10%'],
        },
        series: [
          {
            type: 'custom', //色块
            renderItem: function (params, api) {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: { stroke: '#39b8da', fill: 'rgba(1,178,245,.3)' },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      stroke: '#39b8da',
                      fill: 'rgba(1,178,245,.2)', //柱子右侧
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      stroke: '#39b8da',
                      fill: 'rgba(1,178,245,.3)', //顶
                    },
                  },
                ],
              };
            },
            data: MAX,
          },
          {
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      stroke: '#39b8da',
                      fill: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#0195ee', //color: '#3B80E2'
                        },
                        {
                          offset: 1,
                          color: 'rgb(2,70,118)', //'#49BEE5'
                        },
                      ]),
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      stroke: '#0195ee',
                      fill: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#49BEE5',
                        },
                        {
                          offset: 1,
                          color: 'rgb(2,70,118)',
                        },
                      ]),
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      stroke: '#39b8da', //底
                      fill: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#39b8da',
                        },
                        {
                          offset: 1,
                          color: '#39b8da',
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: VALUE,
          },
        ]
      }
    }
  },
  computed: {
    yName() {
      let unit = this.unit;
      return unit?"Y("+unit+")": "Y";
    },
  },
  mounted() {
    this.setData({
      xLabel: [],
      sData: [],
    });
  }
}
</script>

 src/components/myCharts/DivideDotBar.vue

New file
@@ -0,0 +1,148 @@
<script>
import ECharts from "echarts";
import BaseChart from "@/components/myCharts/BaseChart";
export default {
  name: "DivideDotBar",
  extends: BaseChart,
  props: {
    name: {
      type: String,
      default: "",
    },
    unit: {
      type: String,
      default: ""
    },
    max: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {}
  },
  methods: {
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },
    getOption(data) {
      let xLabel = data.xLabel;
      let sData = data.sData;
      let sName = this.name;
      let yName = this.yName;
      let min = sData.length == 0?0:null;
      let max = sData.length == 0?0:null;
      const MAX = sData.map(item=>{
        return max*1.2>this.max?max*1.2:this.max;
      });
      return {
        animation: false,
        tooltip:{
          show: false
        },
        grid: {
          top: "28px",
          left: '1%',
          right: '1%',
          bottom: '8px',
          containLabel: true
        },
        xAxis: [
          {
            data: xLabel,
          },
          {
            type: 'category',
            show: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              margin: 2,
              color: '#FFFFFF',
              fontSize: '10',
            },
            data: sData,
          },
        ],
        yAxis: [
          {
            name: yName,
            type: "value",
          },
        ],
        series: [
          {
            name: sName,
            type: "bar",
            data: sData,
            barGap: "45%",
            barWidth: "50%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(199,190,90,0.8)",
                    },
                    {
                      offset: 1,
                      color: "rgba(186,86,208,0.5)",
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            label: {
              show: false,
              position: "top",
              distance: 10,
              fontSize: 12,
              color: "#FFFFFF"
            }
          },
          {
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color:'#FFFFFF'
              },
            },
            barWidth: "50%",
            barGap: "-100%",
            symbolRepeat: "fixed", //使图形元素重复order
            symbolSize: [ "100%", "22.5%"],
            symbolMargin: 2,
            symbol: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAKCAYAAAD7CH02AAAAO0lEQVRIiWPkTl34n4E4wPhlVhwDAwMDA0/aIgYGBoZBqY+JSMOHDBj10GAHox4a7GDUQ4MdjHposAMAHHwOJKeijY8AAAAASUVORK5CYII=`,
            data: MAX,
          }
        ]
      }
    }
  },
  computed: {
    yName() {
      let unit = this.unit;
      return unit?"Y("+unit+")": "Y";
    },
  },
  mounted() {
    this.setData({
      xLabel: [],
      sData: [],
    });
  }
}
</script>

 src/components/myCharts/DivideGradientBar.vue

New file
@@ -0,0 +1,98 @@
<script>
import ECharts from "echarts";
import BaseChart from "@/components/myCharts/BaseChart";
export default {
  name: "DivideGradientBar",
  extends: BaseChart,
  props: {
    name: {
      type: String,
      default: "",
    },
    unit: {
      type: String,
      default: ""
    },
  },
  data() {
    return {}
  },
  methods: {
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },
    getOption(data) {
      let xLabel = data.xLabel;
      let sData = data.sData;
      let sName = this.name;
      let yName = this.yName;
      let min = sData.length == 0?0:null;
      let max = sData.length == 0?0:null;

      return {
        animation: false,
        tooltip:{},
        grid: {
          top: "28px",
          left: '1%',
          right: '1%',
          bottom: '8px',
          containLabel: true
        },
        xAxis: {
          data: xLabel,
        },
        yAxis: [
          {
            name: yName,
            type: "value",
            min: min,
            max: max,
          },
        ],
        series: [
          {
            name: sName,
            type: "bar",
            barWidth: '50%',
            data: sData,
            itemStyle: {
              normal: {
                color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
              }
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              fontSize: 12,
              color: "#FFFFFF"
            }
          },
        ]
      }
    }
  },
  computed: {
    yName() {
      let unit = this.unit;
      return unit?"Y("+unit+")": "Y";
    },
  },
  mounted() {
    this.setData({
      xLabel: [],
      sData: [],
    });
  }
}
</script>

 src/pages/dataTest/components/lithiumPackTab.vue

@@ -9,12 +9,12 @@
        <div class="layout-content">
          <div class="mon-vol-bar">
            <flex-box title="锂电池包电压" size="mini">
              <divide-bar ref="packVol" name="锂电池包电压" unit="V"></divide-bar>
              <divide-gradient-bar ref="packVol" name="锂电池包电压" unit="V"></divide-gradient-bar>
            </flex-box>
          </div>
          <div class="mon-temp-bar">
            <flex-box title="锂电池包电流" size="mini">
              <divide-bar ref="packCurr" name="锂电池包电流" unit="A"></divide-bar>
              <divide-dot-bar ref="packCurr" name="锂电池包电流" unit="A"></divide-dot-bar>
            </flex-box>
          </div>
        </div>
@@ -25,12 +25,12 @@
        <div class="layout-content">
          <div class="mon-vol-bar">
            <flex-box :title="monVolText" size="mini">
              <divide-bar ref="monVol" name="单体电压" unit="V"></divide-bar>
              <divide-gradient-bar ref="monVol" name="单体电压" unit="V"></divide-gradient-bar>
            </flex-box>
          </div>
          <div class="mon-temp-bar">
            <flex-box :title="monTempText" size="mini">
              <divide-bar ref="monTemp" name="单体温度" unit="℃"></divide-bar>
              <divide-cube-bar ref="monTemp" name="单体温度" unit="℃" :max="100"></divide-cube-bar>
            </flex-box>
          </div>
        </div>
@@ -43,13 +43,18 @@
import LayoutBox from "@/pages/dataTest/components/layout-box";
import FlexBox from "@/components/FlexBox";
import DivideBar from "@/components/myCharts/DivideBar";
import {getValByKey} from "@/assets/js/tools";
import DivideCubeBar from "@/components/myCharts/DivideCubeBar";
import MonLithiumPack from "@/pages/dataTest/components/monLithiumPack";
import DivideGradientBar from "@/components/myCharts/DivideGradientBar";
import DivideDotBar from "@/components/myCharts/DivideDotBar";
export default {
  name: "lithiumPackTab",
  components: {
    MonLithiumPack,
    DivideBar,
    DivideCubeBar,
    DivideGradientBar,
    DivideDotBar,
    LayoutBox,
    FlexBox
  },

 src/pages/dataTest/history.vue

@@ -614,7 +614,14 @@
                    monNumList: [],
                    dataList: [],
                };
                for (let i = 1; i <= batt.MonCount; i++) {
                let monCount = batt.MonCount;
                console.log(batt);
                // 锂电池包
                if(regEquipType(batt.FBSDeviceId, "lithiumPack")) {
                  monCount = monCount*batt.packCount;
                }
                console.log(monCount);
                for (let i = 1; i <= monCount; i++) {
                    allData.monNumList[i - 1] = ("#" + i);
                }
                // 单体折线信息