内容提交

longyvfengyun

2023-03-23 4e4aa417222b1c79b34992ba08ea539b545bda74

内容提交

 src/components/bigScreenPage/big_screen_page.vue

@@ -14,17 +14,17 @@
              <div class="card-container">
                <big-screen-card title="交流ABC">
                  <div class="ac-container">
                    <ac-info-box title="过压数量" :box-style="{top: '4px',left: '100px'}"></ac-info-box>
                    <ac-info-box title="欠压数量" :box-style="{top: '4px',right: '100px'}"></ac-info-box>
                    <ac-info-box title="缺项数量" :box-style="{bottom: '30px',left: '36px'}"></ac-info-box>
                    <ac-info-box title="过流数量" :box-style="{bottom: '30px',right: '36px'}"></ac-info-box>
                    <ac-info-box title="过压数量" :value="acInfo.overVol" :box-style="{top: '4px',left: '100px'}"></ac-info-box>
                    <ac-info-box title="欠压数量" :value="acInfo.lowVol" :box-style="{top: '4px',right: '100px'}"></ac-info-box>
                    <ac-info-box title="缺项数量" :value="acInfo.lackVol" :box-style="{bottom: '30px',left: '36px'}"></ac-info-box>
                    <ac-info-box title="过流数量" :value="acInfo.overCurr" :box-style="{bottom: '30px',right: '36px'}"></ac-info-box>
                    <div class="ac-widget-box"></div>
                  </div>
                </big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="电池统计">
                  <battery-pie-chart></battery-pie-chart>
                  <battery-pie-chart ref="batteryChart"></battery-pie-chart>
                </big-screen-card>
              </div>
              <div class="card-container">
@@ -97,7 +97,7 @@
              </div>
              <div class="card-container">
                <big-screen-card title="设备状态">
                  <radar-chart></radar-chart>
                  <radar-chart ref="devState"></radar-chart>
                </big-screen-card>
              </div>
              <div class="card-container">
@@ -161,7 +161,13 @@
      powerImage,
      batteryImage,
      xuHangImage,
      mapName: 'zhongguo'
      mapName: 'zhongguo',
      acInfo: {
        overVol: 0,   // 过压
        lowVol: 0,    // 欠压
        overCurr: 0,  // 过流
        lackVol: 0,   // 缺项
      },
    }
  },
  methods: {
@@ -173,7 +179,50 @@
    },
    onWSMessage(res) {
      let rs = JSON.parse(res.data);
      console.log(rs);
      if(rs.code == 1) {
        // 设置交流ABC
        let acABC = rs.data.acABC;
        if(acABC.code == 1 && acABC.data) {
          this.setAcInfo(acABC.data2[0]);
        }else {
          this.setAcInfo({
            "过压": 1,
            "欠压": 0,
            "过流": 0,
            "缺项": 0
          });
        }

        // 设置设备状态
        let devStates = rs.data.devStates;
        if(devStates.code == 1 && devStates.data) {
          this.setDevStates(devStates.data2);
        }else {
          this.setDevStates({
            "内阻测试数量":0,
            "核容测试数量":0,
            "在线浮充数量":0,
            "通讯故障数量":0,
            "预充电数量":0
          });
        }
      }
    },
    setAcInfo(data) {
      this.acInfo.overVol = data["过压"];
      this.acInfo.lowVol = data["欠压"];
      this.acInfo.overCurr = data["过流"];
      this.acInfo.lackVol = data["缺项"];
    },
    setDevStates(data) {
      let values = [];
      Object.keys(data).forEach(key=>{
        values.push({
          name: key,
          value: data[key]
        })
      });
      this.$refs.devState.setData(values);
    }
  },
  mounted() {

 src/components/myCharts/BatteryPieChart.vue

@@ -7,11 +7,16 @@
    return {};
  },
  methods: {
    setData() {
      let option = this.getOption();
    setData(nom2VolValue, nom12VolValue, brandInfos) {
      let option = this.getOption(nom2VolValue, nom12VolValue, brandInfos);
      this.setOption(option);
    },
    getOption() {
    getOption(nom2VolValue, nom12VolValue, brandInfos) {
      let value1 = nom2VolValue?nom2VolValue:0;
      let value2 = nom12VolValue?nom12VolValue:0;
      let brands = brandInfos.map(item=>{
        return item.name;
      });
      return {
        tooltip: {
          trigger: 'item',
@@ -21,17 +26,20 @@
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
          data:['直达','营销广告','搜索引擎','邮件营销','其他']
          data: brands
        },
        series: [
          {
            name:'访问来源',
            name:'标称电压统计',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '38%'],
            radius: [0, '56%'],
            label: {
              normal: {
                position: 'inner'
                formatter: "{b}\n{d}%",
                position: 'inner',
                color: '#000000',
                fontWeight: 'bold'
              }
            },
            labelLine: {
@@ -39,35 +47,37 @@
                show: false
              }
            },
            itemStyle: {
              color(params) {
                let colors = ["#00FEFF", "#F78DB3"];
                return colors[params.dataIndex%colors.length];
              }
            },
            data:[
              {
                value:335,
                value: value1,
                name:'2V电池',
              },
              {
                value:679,
                value: value2,
                name:'12V电池',
              }
            ]
          },
          {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            data:[
              {value:335, name:'直达'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'搜索引擎'},
              {value:102, name:'其他'}
            ]
            name: '电池品牌',
            type: 'pie',
            radius: ['60%', '80%'],
            data: brandInfos
          }
        ]
      };
    }
  },
  mounted() {
    this.setData();
    this.setData(0, 0, [
      {name: "电池品牌", value: 0}
    ]);
  }
}
</script>

 src/components/myCharts/RadarChart.vue

@@ -1,5 +1,6 @@
<script>
import BaseChart from "./BaseChart.vue";
import getMaxValue from "@/assets/js/tools/getMaxValue";
export default {
  name: "RadarChart",
  extends: BaseChart,
@@ -7,34 +8,17 @@
    return {};
  },
  methods: {
    setData() {
      let option = this.getOption();
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },
    getOption() {
      let indicator = [
        {
          name: '内阻测试数量:',
          max: 64
        },
        {
          name: '在线浮充数量:',
          max: 64
        },
        {
          name: '核容数量:',
          max: 64
        },
        {
          name: '故障数量:',
          max: 64
        },
        {
          name: '充电数量:',
          max: 64
        }
      ];
      let data = [0, 40, 3, 10, 0];
    getOption(list) {
      let data = list.map((item)=>item.value);
      let max = getMaxValue(data);
      let indicator = list.map(item=>{
        item.max = max;
        return item;
      });
      let contains = this.contains;
      return {
        radar: {
@@ -134,7 +118,28 @@
    }
  },
  mounted() {
    this.setData();
    this.setData([
      {
        name: '内阻测试数量:',
        value: 0
      },
      {
        name: '在线浮充数量:',
        value: 10
      },
      {
        name: '核容数量:',
        value: 6
      },
      {
        name: '故障数量:',
        value: 5
      },
      {
        name: '充电数量:',
        value: 1
      }
    ]);
  }
}
</script>

 src/views/home/home-manage.vue

@@ -29,9 +29,7 @@
      uRole: clientName=="sxty"?userPower:-1,
    }
  },
  mounted() {
    console.log(123);
  }
  mounted() {}
}
</script>