内容提交

longyvfengyun

2022-04-12 dfde61157722501a47be651b823f6973a64003a7

内容提交

 src/components/myCharts/BaseChart.vue

@@ -115,6 +115,9 @@
      if (chart) {
        chart.clear();
      }
    },
    getChart() {
      return this.$options.chart;
    }
  },
  mounted() {

 src/components/myCharts/DivideBar.vue

@@ -58,10 +58,11 @@
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#07ecd9"
                },
                color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#07ecd9"
                  },
                  {
                    offset: 1,
                    color: "#034881"
@@ -72,12 +73,12 @@
            data: sData,
            z: 10,
            zlevel: 0,
            "label": {
              "show": true,
              "position": "top",
              "distance": 10,
              "fontSize": 12,
              "color": "#01fff4"
            label: {
              show: true,
              position: "top",
              distance: 10,
              fontSize: 12,
              color: "#01fff4"
            }
          },
          {

 src/pages/dataTest/components/lithiumPackTab.vue

@@ -6,14 +6,17 @@
       element-loading-background="rgba(0, 0, 0, 0.2)">
    <div class="module-content-item">
      <layout-box>
        <div class="ele-mon-pack">
          <flex-box title="锂电池包" size="mini">
            <el-row :span="16">
              <el-col :span="8" v-for="(item, key) in list" :key="'key'+key">
                <mon-lithium-pack :info="item" @click="changPack"></mon-lithium-pack>
              </el-col>
            </el-row>
          </flex-box>
        <div class="layout-content">
          <div class="mon-vol-bar">
            <flex-box title="锂电池包电压" size="mini">
              <divide-bar ref="packVol" name="锂电池包电压" unit="V"></divide-bar>
            </flex-box>
          </div>
          <div class="mon-temp-bar">
            <flex-box title="锂电池包电流" size="mini">
              <divide-bar ref="packCurr" name="锂电池包电流" unit="A"></divide-bar>
            </flex-box>
          </div>
        </div>
      </layout-box>
    </div>
@@ -21,12 +24,12 @@
      <layout-box>
        <div class="layout-content">
          <div class="mon-vol-bar">
            <flex-box title="单体电压" size="mini">
            <flex-box :title="monVolText" size="mini">
              <divide-bar ref="monVol" name="单体电压" unit="V"></divide-bar>
            </flex-box>
          </div>
          <div class="mon-temp-bar">
            <flex-box title="单体温度" size="mini">
            <flex-box :title="monTempText" size="mini">
              <divide-bar ref="monTemp" name="单体温度" unit="℃"></divide-bar>
            </flex-box>
          </div>
@@ -106,6 +109,16 @@
  methods: {
    resize() {
      this.$nextTick(()=>{
        // 锂电池包电压
        if(this.$refs.packVol) {
          this.$refs.packVol.resize();
        }

        // 锂电池包电流
        if(this.$refs.packCurr) {
          this.$refs.packCurr.resize();
        }

        // 单体电压图表
        if(this.$refs.monVol) {
          this.$refs.monVol.resize();
@@ -121,10 +134,11 @@
     * 切换锂电池包
     * @param item
     */
    changPack(item) {
    changPack(index) {
      this.clearActivePack();
      this.$nextTick(()=>{
        item.active = true;
        //item.active = true;
        this.list[index].active = true;
      });
      this.loading = true;
      setTimeout(()=>{
@@ -148,6 +162,34 @@
        });
      }
      this.list[0].active = true;

      // 包电压
      let packVol = {
        xLabel: [],
        sData: []
      };

      // 包电流
      let packCurr = {
        xLabel: [],
        sData: []
      };
      for(let i=0; i<this.packNum; i++) {
        let label = "包"+(i+1);
        packVol.xLabel.push(label);
        packVol.sData.push(0);

        packCurr.xLabel.push(label);
        packCurr.sData.push(0);
      }

      if(this.$refs.packVol) {
        this.$refs.packVol.setData(packVol);
      }

      if(this.$refs.packCurr) {
        this.$refs.packCurr.setData(packCurr);
      }
    },
    changeListInfo() {
      if(!this.update) {
@@ -160,6 +202,36 @@
        let packCurr = packCurrs[i];
        this.list[i].vol = packVol?packVol:0;
        this.list[i].curr = packCurr?packCurr:0;
      }

      // 包电压
      let packVol = {
        xLabel: [],
        sData: []
      };

      // 包电流
      let packCurr = {
        xLabel: [],
        sData: []
      };
      for(let i=0; i<this.packNum; i++) {
        let vol = packVols[i];
        let curr = packCurrs[i];
        let label = "包"+(i+1);
        packVol.xLabel.push(label);
        packVol.sData.push(vol?vol:0);

        packCurr.xLabel.push(label);
        packCurr.sData.push(curr?curr:0);
      }

      if(this.$refs.packVol) {
        this.$refs.packVol.setData(packVol);
      }

      if(this.$refs.packCurr) {
        this.$refs.packCurr.setData(packCurr);
      }
    },
    setMonData() {
@@ -181,7 +253,7 @@
        sData: []
      };
      for(let i=0; i<monVolValues.length; i++) {
        monVol.xLabel.push("单体"+(i+1));
        monVol.xLabel.push("#"+(i+1));
        monVol.sData.push(monVolValues[i]);
      }
      if(this.$refs.monVol) {
@@ -199,7 +271,7 @@
        sData: []
      };
      for(let i=0; i<monTempValues.length; i++) {
        monTemp.xLabel.push("单体"+(i+1));
        monTemp.xLabel.push("#"+(i+1));
        monTemp.sData.push(monTempValues[i]);
      }
      if(this.$refs.monTemp) {
@@ -229,9 +301,47 @@
      return values;
    }
  },
  computed: {
    activePack() {
      let list = this.list;
      let index = 1;
      for(let i=0; i<list.length; i++) {
        let item = list[i];
        if(item.active) {
          index = item.num;
        }
      }
      return index+"";
    },
    monVolText() {
      return "包"+this.activePack+"-单体电压";
    },
    monTempText() {
      return "包"+this.activePack+"-单体温度";
    }
  },
  mounted() {
    this.setMonPackData();
    this.setMonData();

    // 锂电池包点击事件
    let packVolChart = this.$refs.packVol.getChart();
    packVolChart.getZr().on('click', params=>{
      const points = [params.offsetX, params.offsetY];
      if(packVolChart.containPixel('grid', points)) {
        let dataIndex = packVolChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
        this.changPack(dataIndex);
      }
    });
    // 锂电池包点击事件
    let packCurrChart = this.$refs.packCurr.getChart();
    packCurrChart.getZr().on('click', params=>{
      const points = [params.offsetX, params.offsetY];
      if(packCurrChart.containPixel('grid', points)) {
        let dataIndex = packCurrChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
        this.changPack(dataIndex);
      }
    });
  }
}
</script>

 src/pages/index.vue

@@ -881,6 +881,7 @@
                        })
                            .then((res) => {
                                let rs = JSON.parse(res.data.result);
                console.log(rs);
                                homeData.nums = rs;
                                if (this.mapName) {
                                    this.changeChartPanelStatus(homeData);
@@ -1114,6 +1115,7 @@
                });
        },
        changeChartPanelStatus(homeData) {
      console.log(homeData);
            //panel面板状态改变
            this.isShowInfoPanel = true;
            let poit = this.convertMain(homeData.longitude, homeData.latitude);