数据模块对接

whyczyk

2021-03-19 d8bff9dff0c9c0c8e88e9e4be85c66de2b5b43ff

数据模块对接

 src/assets/js/api.js

@@ -21,3 +21,53 @@
    data: data
  })
}

/* 放电和 充电电流
 */
export const chargeAnalysis = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/chargeAnalysis",
    params: data
  })
}

/* 整流器
 */
export const rectifier = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/rectifier",
    params: data
  })
}

/* 电池组
 */
export const batteryGroup = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/batteryGroup",
    params: data
  })
}

/* 电池状态
 */
export const batteryStatus = (data) => {
  return axios({
    method: "GET",
    url: "/battery/status",
    params: data
  })
}

/* 电源状态
 */
export const powerAlarmStatus = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/status",
    params: data
  })
}

 src/components/charts/abeamProChart.vue

@@ -16,6 +16,9 @@
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    batteryStatus
  } from '@/assets/js/api'
  export default {
    name: "abeamProChart",
    chart: "",
@@ -36,14 +39,13 @@
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let dataColor = sendData.color;
        let bgColor = sendData.bgColor;
        let yData = sendData.yData;
      organizeData(posData) {
        let dataColor = posData.color;
        let bgColor = posData.bgColor;
        let yData = posData.yData;
        let radius = (this.$refs.chart.clientHeight / 3 - 7) > 0 ? this.$refs.chart.clientHeight / 3 - 7 : 0;
        let data = sendData.data;
        let max = data[0];
        let data = posData.data;
        let max = posData[0];
        data.map(item => {
          if (item > max) {
            max = item;
@@ -166,10 +168,42 @@
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          let userId = localStorage.getItem('userId');
          let params = {
            userId: userId
          }
          batteryStatus(params).then((res) => {
            if (res.data.code == 1) {
              let optionData = {
                yData: [],
                color: ['#f58881', '#b4d465', '#ffcb29'],
                bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
                data: []
              }
              let resData = res.data.data;
              for (let key in resData) {
                optionData.yData.push(key);
                optionData.data.push(resData[key]);
              }
              this.$options.chartData = optionData;
              this.organizeData(optionData)
            }
          }).catch((err) => {
            console.log(err)
          });
        }
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
          this.setData(this.$options.chartData);
          }
        }, 300)
      }
    },

 src/components/charts/imgPieChart.vue

@@ -12,6 +12,9 @@
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    rectifier
  } from '@/assets/js/api'
  const pieImg = require('../../assets/images/rectifier-img.png');
  export default {
    name: "imgPieChart",
@@ -33,8 +36,7 @@
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
      organizeData(data) {
        let imgWidth = this.$refs.chart.clientWidth * 0.14;
        let imgheight = imgWidth / 0.82;
        let centerx = this.$refs.chart.clientWidth / 2;
@@ -96,7 +98,7 @@
                  }
                }
              },
              data: sendData.data,
              data: data.data,
              zlevel: 1
            },
            {
@@ -161,10 +163,41 @@
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          let userId = localStorage.getItem('userId');
          let params = {
            userId: userId
          }
          rectifier(params).then((res) => {
            if (res.data.code == 1) {
              let optionData = {
                data: []
              }
              let resData = res.data.data;
              for (let key in resData) {
                let obj = {};
                obj.name = key;
                obj.value = resData[key];
                optionData.data.push(obj)
              }
              this.$options.chartData = optionData;
              this.organizeData(optionData)
            }
          }).catch((err) => {
            console.log(err)
          });
        }
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
          this.setData(this.$options.chartData);
          }
        }, 300)
      }
    },

 src/components/charts/latticeBar.vue

@@ -11,6 +11,9 @@
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    chargeAnalysis
  } from '@/assets/js/api'
  export default {
    name: "latticeBar",
    chart: "",
@@ -31,8 +34,7 @@
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
      organizeData(data) {
        let option = {
          tooltip: {
            trigger: 'axis',
@@ -103,9 +105,8 @@
          }],
          series: []
        };

        let max;
        sendData.series.map(item => {
        data.series.map(item => {
          max = item.data[0];
          item.data.map(jtem => {
            if (jtem > max) {
@@ -114,15 +115,15 @@
          })
        });
        option.yAxis[0].max = max;
        option.xAxis[0].data = sendData.xData;
        option.xAxis[0].data = data.xData;
        let legendData = [];
        sendData.series.map(item => {
        data.series.map(item => {
          legendData.push(item.name);
        })
        option.legend.data = legendData;
        for (let i = 0; i < sendData.series.length; i++) {
        for (let i = 0; i < data.series.length; i++) {
          let maxArr = [];
          sendData.series[i].data.map(() => {
          data.series[i].data.map(() => {
            maxArr.push(max)
          })
          let plusMinus = (i % 2);
@@ -133,11 +134,11 @@
            offset = '65%'
          }
          option.series.push({
            name: sendData.series[i].name,
            name: data.series[i].name,
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: sendData.series[i].color
              color: data.series[i].color
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
@@ -145,7 +146,7 @@
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -20,
            data: sendData.series[i].data,
            data: data.series[i].data,
          });
          option.series.push({
            name: 'bg',
@@ -166,10 +167,59 @@
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          let userId = localStorage.getItem('userId');
          let params = {
            userId: userId
          }
          chargeAnalysis(params).then((res) => {
            if (res.data.code == 1) {
              let optionData = {
                xData: [],
                series: [{
                  name: '放电',
                  data: [],
                  color: '#90ec7d'
                }, {
                  name: '充电',
                  data: [],
                  color: '#ff6b6b'
                }]
              }
              let resData = res.data.data;
              for (let key in resData.reCharge) {
                if (typeof resData.reCharge[key] == 'string') {
                  optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
                } else {
                  optionData.series[0].data.push(resData.reCharge[key])
                }
              }
              for (let key in resData.disCharge) {
                optionData.xData.push(key)
                if (typeof resData.disCharge[key] == 'string') {
                  optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
                } else {
                  optionData.series[1].data.push(resData.disCharge[key])
                }
              }
              this.$options.chartData = optionData;
              this.organizeData(optionData)
            }
          }).catch((err) => {
            console.log(err)
          });
        }
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
          this.setData(this.$options.chartData);
          }
        }, 300)
      }
    },

 src/components/charts/powerChart.vue

@@ -23,6 +23,9 @@

<script>
  import prossPieChart from "./prossPieChart"
  import {
    powerAlarmStatus
  } from '@/assets/js/api'
  export default {
    components: {
      prossPieChart
@@ -36,11 +39,73 @@
    methods: {
      setData(data) {
        this.$nextTick(() => {
          if (data) {
          data.map((item, i) => {
            let chart = this.$refs[`prossPieChart${i}`];
            chart.setData(item);
            chart.resize();
          })
          } else {
            let userId = localStorage.getItem('userId');
            let params = {
              userId: userId
            }
            powerAlarmStatus(params).then((res) => {
              if (res.data.code == 1) {
                let optionData = [{
                  title: '',
                  data: 0,
                  unit: '',
                  color: '#37a9b3',
                }, {
                  title: '',
                  data: 0,
                  unit: '',
                  color: '#f3535f'
                }, {
                  title: '',
                  data: 0,
                  unit: '',
                  color: '#ff8b00'
                }, {
                  title: '',
                  data: 0,
                  unit: '',
                  color: '#757ffb'
                }, {
                  title: '',
                  data: 0,
                  unit: '',
                  color: '#4ba0d9'
                }, {
                  title: '',
                  data: 0,
                  unit: '',
                  color: '#7fc57c'
                }]
                let index = 0;
                let resData = res.data.data;
                for (let key in resData) {
                  optionData[index].title = key;
                  if (typeof resData[key] == 'string') {
                    optionData[index].data = Number(resData[key].split('%')[0]);
                    optionData[index].unit = '%';
                  } else {
                    optionData[index].data = resData[key];
                  }
                  index++;
                }
                optionData.map((item, i) => {
                  let chart = this.$refs[`prossPieChart${i}`];
                  chart.setData(item);
                  chart.resize();
                })
              }
            }).catch((err) => {
              console.log(err)
            });
          }

        })
      },
      resize() {

 src/components/charts/triangleBarChart.vue

@@ -12,6 +12,9 @@
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  import {
    batteryGroup
  } from '@/assets/js/api'
  export default {
    name: "triangleBarChart",
    chart: "",
@@ -32,11 +35,14 @@
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
      organizeData(data) {
        let inData = []
        sendData.data.map(item => {
        data.data.map(item => {
          if (item > 10) {
          inData.push(item - 10);
          } else {
            inData.push(item);
          }
        })
        let option = {
          tooltip: {
@@ -62,7 +68,7 @@
          },
          xAxis: [{
            type: 'category',
            data: sendData.xData,
            data: data.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
@@ -79,7 +85,7 @@
          }, {
            show: false,
            type: 'category',
            data: sendData.xData,
            data: data.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
@@ -118,7 +124,7 @@
            name: 'outData',
            type: 'pictorialBar',
            xAxisIndex: 0,
            data: sendData.data,
            data: data.data,
            barCategoryGap: "0%",
            barWidth: '50%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
@@ -161,10 +167,40 @@
        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          let userId = localStorage.getItem('userId');
          let params = {
            userId: userId
          }
          batteryGroup(params).then((res) => {
            if (res.data.code == 1) {
              let optionData = {
                xData: [],
                data: []
              }
              let resData = res.data.data;
              for (let key in resData) {
                optionData.xData.push(key);
                optionData.data.push(resData[key]);
              }
              this.$options.chartData = optionData;
              this.organizeData(optionData)
            }
          }).catch((err) => {
            console.log(err)
          });
        }
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
          this.setData(this.$options.chartData);
          }
        }, 300)
      }
    },

 src/pages/exhibition.vue

@@ -83,7 +83,6 @@
                  this.screenBg = item.img;
                }
              });

              item.x *= clientWidth;
              item.y *= clientHeight;
              item.w *= clientWidth;
@@ -100,7 +99,7 @@
                  nowBox[0].appendChild(chartModular.$el)
                  this.modularArr.push(chartModular);
                }
                chartModular.setData(item.setData);
                chartModular.setData();
                chartModular.resize();
              }, 0)


 src/pages/index.vue

@@ -111,11 +111,12 @@
      getData() {
        let self = this;
        let opt = self.$route.query;
        localStorage.setItem('userId', self.$route.query.userId);
        console.log(opt)
        self.$axios({
          method: "get",
          url: "/application/all",
          data: {
          params: {
            userId:opt.userId || "1001"
          }
        }).then(res => {