提交内容

whychdw

2021-01-14 605c7703753390c6b0c36b2720024aafe51c9d93

提交内容

 public/theme/science-black.css

@@ -451,6 +451,9 @@
.el-science-blue .el-table .table-list-name.no-border {
    border-right: none;
}
.el-science-blue .el-table th.table-list-value {
    color: #00fefe;
}
.el-science-blue .el-table .table-list-value {
    color: #fef200;
}

 public/theme/science-blue.css

@@ -452,6 +452,9 @@
.el-science-blue .el-table .table-list-name.no-border {
    border-right: none;
}
.el-science-blue .el-table th.table-list-value {
    color: #00fefe;
}
.el-science-blue .el-table .table-list-value {
    color: #fef200;
}

 src/components/chart/CirclePieChart.vue

@@ -66,6 +66,13 @@
          default: ""
        }
    },
    watch: {
      value() {
        this.$nextTick(()=>{
          this.setOption();
        });
      },
    },
    data() {
        return {
            fullScreenState: false,
@@ -81,12 +88,13 @@
    },
    methods: {
        getOption() {
            let value = this.value;
            let value = this.value>=0?this.value:-this.value;
            let max = this.max;
            let color = this.color;
            let resColor = this.resColor;
            let title = this.getTitle();
            let option = {
                animation: false,
                title: title,
                tooltip: {
                    show: false,
@@ -108,7 +116,7 @@
                    },
                    hoverAnimation: false,
                    data: [{
                        value: value,
                        value: max<value?max:value,
                        name: '占比',
                        itemStyle: {
                            normal: {
@@ -123,7 +131,7 @@
                        }
                    }, {
                        name: '剩余',
                        value: max-value,
                        value: max<value?0:max-value,
                        itemStyle: {
                            normal: {
                                color: resColor

 src/pages/dataMager/components/AnalogTabPane.vue

@@ -60,19 +60,24 @@
    </div>
    <div class="page-flex-footer page-right-width">
      <div class="h500" v-if="reset">
        <table-list title="整流器输出电流（A）">
          <el-table :data="simulation" stripe :show-header="false" height="100%"
        <table-list title="整流器输出">
          <el-table :data="simulation" stripe height="100%"
                    size="small">
            <el-table-column
                prop="name"
                label="名称"
                label="整流器编号"
                align="center"
                min-width="100"
                class-name="table-list-name">
            </el-table-column>
            <el-table-column
                prop="value1"
                label="输出电压"
                align="center"
                class-name="table-list-value"></el-table-column>
            <el-table-column
                prop="value"
                label="值"
                label="输出电流"
                align="center"
                class-name="table-list-value"></el-table-column>
          </el-table>
@@ -199,22 +204,16 @@
            color: '#f3535f',
          },
          {
            key: 'battGroup1Vol',
            key: 'battgroup1Vol',
            label: '电池组1\n\n电压',
            value: 0,
            color: '#f1e287',
          },
          {
            key: 'battGroup2Vol',
            key: 'battgroup2Vol',
            label: '电池组2\n\n电压',
            value: 0,
            color: '#00fefe',
          },
          {
            key: 'mOutputVol',
            label: '整流器\n\n输出电压',
            value: 0,
            color: '#0081ff',
          },
        ]
      },
@@ -226,35 +225,35 @@
            value: 0,
          },
          {
            key: 'battGroup1Curr',
            key: 'battgroup1Curr',
            name: '电池组1电流',
            value: 0,
          },
          {
            key: 'battGroup2Curr',
            key: 'battgroup2Curr',
            name: '电池组2电流',
            value: 0
          }
        ],
      },
      amTemp: {key:"temperature", name: '环境温度', value: 23.1},
      amTemp: {key:"temprature", name: '环境温度', value: 0},
      simulation: [
        {key: 'm1OutCurr', name: '整流器1输出电流', value: 0},
        {key: 'm2OutCurr', name: '整流器2输出电流', value: 0},
        {key: 'm3OutCurr', name: '整流器3输出电流', value: 0},
        {key: 'm4OutCurr', name: '整流器4输出电流', value: 0},
        {key: 'm5OutCurr', name: '整流器5输出电流', value: 0},
        {key: 'm6OutCurr', name: '整流器6输出电流', value: 0},
        {key: 'm7OutCurr', name: '整流器7输出电流', value: 0},
        {key: 'm8OutCurr', name: '整流器8输出电流', value: 0},
        {key: 'm9OutCurr', name: '整流器9输出电流', value: 0},
        {key: 'm10OutCurr', name: '整流器10输出电流', value: 0},
        {key: 'm11OutCurr', name: '整流器11输出电流', value: 0},
        {key: 'm12OutCurr', name: '整流器12输出电流', value: 0},
        {key: 'm13OutCurr', name: '整流器13输出电流', value: 0},
        {key: 'm14OutCurr', name: '整流器14输出电流', value: 0},
        {key: 'm15OutCurr', name: '整流器15输出电流', value: 0},
        {key: 'm16OutCurr', name: '整流器16输出电流', value: 0},
        {key: 'm1OutCurr', name: '整流器1', value: 0, key1: 'm1OutVol', value1: 0},
        {key: 'm2OutCurr', name: '整流器2', value: 0, key1: 'm2OutVol', value1: 0},
        {key: 'm3OutCurr', name: '整流器3', value: 0, key1: 'm3OutVol', value1: 0},
        {key: 'm4OutCurr', name: '整流器4', value: 0, key1: 'm4OutVol', value1: 0},
        {key: 'm5OutCurr', name: '整流器5', value: 0, key1: 'm5OutVol', value1: 0},
        {key: 'm6OutCurr', name: '整流器6', value: 0, key1: 'm6OutVol', value1: 0},
        {key: 'm7OutCurr', name: '整流器7', value: 0, key1: 'm7OutVol', value1: 0},
        {key: 'm8OutCurr', name: '整流器8', value: 0, key1: 'm8OutVol', value1: 0},
        {key: 'm9OutCurr', name: '整流器9', value: 0, key1: 'm9OutVol', value1: 0},
        {key: 'm10OutCurr', name: '整流器10', value: 0, key1: 'm10OutVol', value1: 0},
        {key: 'm11OutCurr', name: '整流器11', value: 0, key1: 'm11OutVol', value1: 0},
        {key: 'm12OutCurr', name: '整流器12', value: 0, key1: 'm12OutVol', value1: 0},
        {key: 'm13OutCurr', name: '整流器13', value: 0, key1: 'm13OutVol', value1: 0},
        {key: 'm14OutCurr', name: '整流器14', value: 0, key1: 'm14OutVol', value1: 0},
        {key: 'm15OutCurr', name: '整流器15', value: 0, key1: 'm15OutVol', value1: 0},
        {key: 'm16OutCurr', name: '整流器16', value: 0, key1: 'm16OutVol', value1: 0},
      ],
    }
  },
@@ -320,8 +319,10 @@
    // 设置整流器输出电流的值
    setSimulation(data) {
      this.simulation.map(item=>{
        let value = getValByKey(item.key, data, '未知');
        let value = getValByKey(item.key, data, 0);
        item.value = value;
        let value1 = getValByKey(item.key1, data, 0);
        item.value1 = value1;
      });
    },
    // 设置三相交流电压
@@ -344,7 +345,7 @@
    setVolChart(data) {
      let list = this.volChart.data;
      list.map(item=>{
        let value = getValByKey(item.key, data);
        let value = getValByKey(item.key, data, 0);
        item.value = value;
      });
    },
@@ -352,7 +353,7 @@
    setCurrChart(data) {
      let list = this.currChart.data;
      list.map(item=>{
        let value = getValByKey(item.key, data);
        let value = getValByKey(item.key, data, 0);
        item.value = value;
      });
    },

 src/pages/dataMager/components/ChargerStatusTabPane.vue

@@ -1,90 +1,90 @@
<template>
  <flex-layout direction="row" class="padding0404">
    <div class="h50-percent">
      <div class="h50-percent padding-box padding0880">
        <flex-box title="记录日期">
          <div class="center-content">
            <calendar-time :date="updateTime"></calendar-time>
          </div>
        </flex-box>
      </div>
      <div class="h50-percent padding-box padding0880">
        <el-row :gutter="8" class="full-height">
          <el-col :span="8" class="full-height">
            <flex-box title="系统状态">
              <div class="flex-center">
                <card-box :icon="sysStateInfo.icon" :text="sysStateInfo.text">
                  <hdw-light :type="sysStateInfo.state"></hdw-light>
                </card-box>
              </div>
            </flex-box>
          </el-col>
          <el-col :span="8" class="full-height">
            <flex-box title="充电机输出电压">
              <circle-pie-chart
                  :ref="chargerVol.id" :id="chargerVol.id"
                  :color="chargerVol.color" :max="chargerVol.max"
                  :unit="chargerVol.unit" :value="chargerVol.value"
                  :name="chargerVol.name"></circle-pie-chart>
            </flex-box>
          </el-col>
          <el-col :span="8" class="full-height">
            <flex-box title="充电机输出电流">
              <circle-pie-chart
                  :ref="chargerCurr.id" :id="chargerCurr.id"
                  :color="chargerCurr.color" :max="chargerCurr.max"
                  :unit="chargerCurr.unit" :value="chargerCurr.value"
                  :name="chargerCurr.name"></circle-pie-chart>
            </flex-box>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="h50-percent padding-box padding0880">
      <flex-box title="充电机输出电流">
    <flex-layout direction="row" class="padding0404">
        <div class="h50-percent">
          <el-row class="full-height">
            <el-col
            :span="8" class="full-height"
            v-for="item in paramModule1" :key="item.name">
              <div class="center-content">
                <param-module :name="item.name" :value="item.value"></param-module>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="h50-percent">
          <el-row class="full-height">
            <el-col
                :span="8" class="full-height"
                v-for="item in paramModule2" :key="item.name">
              <div class="center-content">
                <param-module :name="item.name" :value="item.value"></param-module>
              </div>
            </el-col>
          </el-row>
        </div>
      </flex-box>
    </div>
    <div slot="footer" class="w400 full-height">
      <div class="h50-percent padding-box padding0088">
        <flex-box title="纹波峰值系数">
          <water-polo id="peakCoe" ref="peakCoe"></water-polo>
        </flex-box>
      </div>
      <div class="h50-percent padding-box padding0088">
        <flex-box title="纹波峰值">
          <div class="peak-value-wrapper" ref="peakVal"></div>
          <div class="flex-center peak-value-text full-height">
            <div class="peak-value-text-wrapper">
              <div class="peak-number">0</div>
              <div class="peak-number-text">纹波峰值</div>
            <div class="h50-percent padding-box padding0880">
                <flex-box title="记录日期">
                    <div class="center-content">
                        <calendar-time :date="updateTime"></calendar-time>
                    </div>
                </flex-box>
            </div>
          </div>
        </flex-box>
      </div>
    </div>
  </flex-layout>
            <div class="h50-percent padding-box padding0880">
                <el-row :gutter="8" class="full-height">
                    <el-col :span="8" class="full-height">
                        <flex-box title="系统状态">
                            <div class="flex-center">
                                <card-box :icon="sysStateInfo.icon" :text="sysStateInfo.text">
                                    <hdw-light :type="sysStateInfo.state"></hdw-light>
                                </card-box>
                            </div>
                        </flex-box>
                    </el-col>
                    <el-col :span="8" class="full-height">
                        <flex-box title="充电机输出电压">
                            <circle-pie-chart
                                :ref="chargerVol.id" :id="chargerVol.id"
                                :color="chargerVol.color" :max="chargerVol.max"
                                :unit="chargerVol.unit" :value="chargerVol.value"
                                :name="chargerVol.name"></circle-pie-chart>
                        </flex-box>
                    </el-col>
                    <el-col :span="8" class="full-height">
                        <flex-box title="充电机输出电流">
                            <circle-pie-chart
                                :ref="chargerCurr.id" :id="chargerCurr.id"
                                :color="chargerCurr.color" :max="chargerCurr.max"
                                :unit="chargerCurr.unit" :value="chargerCurr.value"
                                :name="chargerCurr.name"></circle-pie-chart>
                        </flex-box>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="h50-percent padding-box padding0880">
            <flex-box title="充电机输入">
                <div class="h50-percent">
                    <el-row class="full-height">
                        <el-col
                            :span="8" class="full-height"
                            v-for="item in paramModule1" :key="item.name">
                            <div class="center-content">
                                <param-module :name="item.name" :value="item.value" :unit="item.unit"></param-module>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="h50-percent">
                    <el-row class="full-height">
                        <el-col
                            :span="8" class="full-height"
                            v-for="item in paramModule2" :key="item.name">
                            <div class="center-content">
                                <param-module :name="item.name" :value="item.value" :unit="item.unit"></param-module>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </flex-box>
        </div>
        <div slot="footer" class="w400 full-height">
            <div class="h50-percent padding-box padding0088">
                <flex-box title="纹波峰值系数">
                    <water-polo id="peakCoe" ref="peakCoe"></water-polo>
                </flex-box>
            </div>
            <div class="h50-percent padding-box padding0088">
                <flex-box title="纹波峰值">
                    <div class="peak-value-wrapper" ref="peakVal"></div>
                    <div class="flex-center peak-value-text full-height">
                        <div class="peak-value-text-wrapper">
                            <div class="peak-number">{{ peakData }}<span class="peak-number-unit">V</span></div>
                            <div class="peak-number-text">纹波峰值</div>
                        </div>
                    </div>
                </flex-box>
            </div>
        </div>
    </flex-layout>
</template>

<script>
@@ -96,168 +96,240 @@
import CardBox from "@/components/CardBox";
import HdwLight from "@/pages/dataMager/components/HdwLight";
import PeakValueCircle from "@/pages/dataMager/js/PeakValueCircle";
import {getValByKey} from "@/assets/js/tools";

export default {
  name: "ChargerStatusTabPane",
  components: {
    HdwLight,
    CardBox,
    WaterPolo,
    FlexBox,
    CalendarTime,
    CirclePieChart,
    paramModule
  },
  props: {
    name: {
      type: String,
      default: ""
    name: "ChargerStatusTabPane",
    components: {
        HdwLight,
        CardBox,
        WaterPolo,
        FlexBox,
        CalendarTime,
        CirclePieChart,
        paramModule
    },
  },
  watch: {
    "$store.state.theme.collapse"() {
      this.$nextTick(() => {
        this.resize();
      });
    props: {
        name: {
            type: String,
            default: ""
        },
        info: {
            type: Object,
            default() {
                return {}
            }
        },
    },
  },
  data() {
    return {
      sysState: 0,
      updateTime: '2021-01-01 00:00:00',
      chargerVol: {
        id: 'chargerVol',
        name: '电压',
        color: '#4AFD88',
        value: 220,
        unit: 'V',
        max: 480,
      },
      chargerCurr: {
        id: 'chargerCurr',
        name: '电流',
        color: '#F1545F',
        value: 10,
        unit: 'A',
        max: 120,
      },
      paramModule1: [
        {
          name: "参数名称：Uan",
          value: 0.00
    watch: {
        "$store.state.theme.collapse"() {
            this.$nextTick(() => {
                this.resize();
            });
        },
        {
          name: "参数名称：Ian",
          value: 0.00
        },
        {
          name: "参数名称：Ubn",
          value: 0.00
        info() {
            this.setInfo();
        }
      ],
      paramModule2: [
        {
          name: "参数名称：Ibn",
          value: 0.00
        },
        {
          name: "参数名称：Ucn",
          value: 0.00
        },
        {
          name: "参数名称：Icn",
          value: 0.00
        }
      ],
      peakCoe: {
        name: "",
        center: ["50%", "45%"], // 布局位置
        colorList: ["#37C478", "#165A5B"],
        radius: "60%",
        data: [60, 60],
        max: 100,
      },
      peakValue: ""
    }
  },
  methods: {
    resize() {
      this.$nextTick(() => {
        this.$refs.chargerVol.resize();
        this.$refs.chargerCurr.resize();
        this.$refs.peakCoe.resize();
        this.peakValue.resize();
      });
    },
  },
  computed: {
    sysStateInfo() {
      let info = {
        icon: "el-icon-2shi",
        text: "正常",
        state: this.sysState,
      };
      switch (this.sysState) {
        case 1:
          info.icon = "el-icon-3fou";
          info.text = "异常";
          break;
        case -1:
          info.icon = "el-icon-3fou";
          info.text = "未知";
          break;
      }
      return info;
    }
  },
  mounted() {
    this.peakValue = new PeakValueCircle(this.$refs.peakVal);
    this.peakValue.start(true);
    this.resize();
    this.$refs.peakCoe.setOption(this.peakCoe);
    data() {
        return {
            sysState: 0,
            chargerVol: {
                id: 'chargerVol',
                key: 'charOutputVol',
                name: '电压',
                color: '#4AFD88',
                value: 0,
                unit: 'V',
                max: 480,
            },
            chargerCurr: {
                id: 'chargerCurr',
                key: 'charOutputCurr',
                name: '电流',
                color: '#F1545F',
                value: 10,
                unit: 'A',
                max: 120,
            },
            paramModule1: [
                {
                    name: "A相电压",
                    key: 'charUan',
                    unit: "V",
                    value: 0.00
                },
                {
                    name: "B相电压",
                    key: 'charUbn',
                    unit: "V",
                    value: 0.00
                },
                {
                    name: "C相电压",
                    key: 'charUcn',
                    unit: "V",
                    value: 0.00
                },
            ],
            paramModule2: [
                {
                    name: "A相电流",
                    key: 'charIan',
                    unit: "A",
                    value: 0.00
                },
                {
                    name: "B相电流",
                    key: 'charIbn',
                    unit: "A",
                    value: 0.00
                },
                {
                    name: "C相电流",
                    key: 'charIcn',
                    unit: 'A',
                    value: 0.00
                }
            ],
            peakCoe: {
                name: "",
                center: ["50%", "45%"], // 布局位置
                colorList: ["#37C478", "#165A5B"],
                radius: "60%",
                data: [60, 60],
                max: 100,
            },
            peakValue: "",
            peakData: 0,
        }
    },
    methods: {
        resize() {
            this.$nextTick(() => {
                this.$refs.chargerVol.resize();
                this.$refs.chargerCurr.resize();
                this.$refs.peakCoe.resize();
                this.peakValue.resize();
            });
        },
        setInfo() {
            let info = this.info;
            // 设置chargerVol
            this.chargerVol.value = getValByKey(this.chargerVol.key, info, 0);
            // 设置chargerCurr
            this.chargerCurr.value = getValByKey(this.chargerCurr.key, info, 0);
            // 设置系统状态
            this.sysState = getValByKey("charSystemState", info, -1);
            // 设置setParamModule
            this.setParamModule();
            // 设置peakValue
            this.peakData = getValByKey("charPeakRipVol", info, 0);
            // 设置peakCoe
            this.setPeakCoe();
        },
        // 设置setParamModule
        setParamModule() {
            let info = this.info;

    // 添加resize事件
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    this.peakValue.stop();
    // 移除resize事件
    window.removeEventListener("resize", this.resize);
  }
            // paramModule1
            this.paramModule1.map(item => {
                item.value = getValByKey(item.key, info, 0);
            });

            // paramModule2
            this.paramModule2.map(item => {
                item.value = getValByKey(item.key, info, 0);
            });
        },
        // 设置peakCoe
        setPeakCoe() {
            let info = this.info;
            let value = getValByKey("charPeakRipParam", info, 0);
            this.peakCoe.data = [value, value];
            this.$refs.peakCoe.setOption(this.peakCoe);
        }
    },
    computed: {
        sysStateInfo() {
            let info = {
                icon: "el-icon-2shi",
                text: "正常",
                state: this.sysState,
            };
            switch (this.sysState) {
                case 1:
                    info.icon = "el-icon-3fou";
                    info.text = "异常";
                    break;
                case -1:
                    info.icon = "el-icon-3fou";
                    info.text = "未知";
                    break;
            }
            return info;
        },
        updateTime() {
            let recordTime = this.info.recordTime;
            return recordTime ? recordTime : "2020-01-01 00:00:00";
        },
    },
    mounted() {
        this.peakValue = new PeakValueCircle(this.$refs.peakVal);
        this.peakValue.start(true);
        this.resize();
        this.setPeakCoe();

        // 添加resize事件
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        this.peakValue.stop();
        // 移除resize事件
        window.removeEventListener("resize", this.resize);
    }
}
</script>

<style scoped>
.center-content {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.flex-center {
  height: 100%;
    height: 100%;
}

.peak-value-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.peak-value-text {
  position: relative;
  z-index: 1;
    position: relative;
    z-index: 1;
}

.peak-value-text-wrapper div {
  text-align: center;
  color: #103552;
    text-align: center;
    color: #103552;
}

.peak-number {
  font-size: 42px;
  font-weight: bold;
    font-size: 42px;
    font-weight: bold;
}
.peak-number-unit {
    font-size: 24px;
}
.peak-number-text {
  font-size: 18px;
    font-size: 18px;
}
</style>

 src/pages/dataMager/components/IsolatingDeviceTabPane.vue

@@ -1,163 +1,160 @@
<template>
    <div class="content-container padding0404">
        <div class="content-wrapper content-wrapper-main">
            <div class="h50-percent main-top">
                <el-row class="full-height">
                    <el-col :span="12" class="full-height">
                        <div class="h50-percent padding0880">
                            <flex-box title="记录时间">
                                <div class="center-content">
                                    <calendar-time size="mini" :date="updateTime"></calendar-time>
                                </div>
                            </flex-box>
                        </div>
                        <div class="h50-percent padding0880">
                            <flex-box title="绝缘监测模块系统状态">
                                <el-table
                                    :data="systemState" stripe
                                    :show-header="false" height="100%" size="small">
                                    <el-table-column
                                        prop="name"
                                        label="名称"
                                        align="center"
                                        min-width="100"
                                        class-name="table-list-name no-border white-color">
                                    </el-table-column>
                                    <el-table-column
                                        prop="value"
                                        label="值"
                                        align="center"
                                        class-name="table-list-value">
                                        <template slot-scope="scope">
                                            <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </flex-box>
                        </div>
                    </el-col>
                    <el-col :span="12" class="padding0888 full-height">
                        <flex-box title="充电机电压电流">
                            <el-row :gutter="16" class="h30-percent">
                                <el-col
                                    :span="12" class="full-height"
                                    v-for="item in volCurr.top" :key="item.id">
                                    <div class="circle-pie-chart-container">
                                        <div class="circle-pie-chart-wrapper">
                                            <circle-pie-chart
                                                :ref="item.id" :id="item.id"
                                                :color="item.color" :max="item.max"
                                                :unit="item.unit" :value="item.value"></circle-pie-chart>
                                        </div>
                                        <div class="circle-pie-chart-text">
                                            <span>绝缘监测模块</span><br>
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="16" class="h30-percent">
                                <el-col
                                    :span="12" class="full-height"
                                    v-for="item in volCurr.middle" :key="item.id">
                                    <div class="circle-pie-chart-container">
                                        <div class="circle-pie-chart-wrapper">
                                            <circle-pie-chart
                                                :ref="item.id" :id="item.id"
                                                :color="item.color" :max="item.max"
                                                :unit="item.unit" :value="item.value"></circle-pie-chart>
                                        </div>
                                        <div class="circle-pie-chart-text">
                                            <span>绝缘监测模块</span><br>
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="16" class="h30-percent">
                                <el-col
                                    :span="12" class="full-height"
                                    v-for="item in volCurr.bottom" :key="item.id">
                                    <div class="circle-pie-chart-container">
                                        <div class="circle-pie-chart-wrapper">
                                            <circle-pie-chart
                                                :ref="item.id" :id="item.id"
                                                :color="item.color" :max="item.max"
                                                :unit="item.unit" :value="item.value"></circle-pie-chart>
                                        </div>
                                        <div class="circle-pie-chart-text">
                                            <span>绝缘监测模块</span><br>
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </flex-box>
                    </el-col>
                </el-row>
            </div>
            <div class="h50-percent main-bottom">
                <div class="content-container">
                    <div class="content-wrapper content-wrapper-main padding0880">
                        <flex-box title="绝缘监测模块支路正/负对地电阻">
                            <line-chart ref="resLine" id="resLine"></line-chart>
                        </flex-box>
                    </div>
                    <div class="content-wrapper content-wrapper-w450 padding0888">
                        <flex-box title="绝缘监测模块电池信息">
                            <div class="flex-box-content">
                                <div class="battery-info">
                                    <div class="battery-icon-wrapper">
                                        <div class="battery-icon"><i class="iconfont el-icon-6dianchi"></i></div>
                                    </div>
                                    <div class="battery-text-wrapper">
                                        <span class="text-content">绝缘监测模块故障电池节数</span><br>
                                        <span class="text-value">23节</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-box-content">
                                <div class="circle-pie-chart-container">
                                    <div class="circle-pie-chart-wrapper">
                                        <circle-pie-chart
                                            ref="batteryRes" id="batteryRes"
                                            :color="batteryRes.color" :max="batteryRes.max"
                                            :unit="batteryRes.unit" :value="batteryRes.value"></circle-pie-chart>
                                    </div>
                                    <div class="circle-pie-chart-text">
                                        <span>绝缘监测模块电池对地电阻</span><br>
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                        </flex-box>
                    </div>
  <div class="content-container padding0404">
    <div class="content-wrapper content-wrapper-main">
      <div class="h50-percent main-top">
        <el-row class="full-height">
          <el-col :span="12" class="full-height">
            <div class="h50-percent padding0880">
              <flex-box title="记录时间">
                <div class="center-content">
                  <calendar-time size="mini" :date="updateTime"></calendar-time>
                </div>
              </flex-box>
            </div>
        </div>
        <div class="content-wrapper content-wrapper-w360 padding0088">
            <table-list title="绝缘监测模块接地支路号">
            <div class="h50-percent padding0880">
              <flex-box title="工作状态">
                <el-table
                    :data="branchNumber" stripe
                    :data="systemState" stripe
                    :show-header="false" height="100%" size="small">
                    <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                        min-width="100"
                        class-name="table-list-name no-border white-color">
                    </el-table-column>
                    <el-table-column
                        prop="value"
                        label="值"
                        align="center"
                        class-name="table-list-value">

                    </el-table-column>
                  <el-table-column
                      prop="name"
                      label="名称"
                      align="center"
                      min-width="100"
                      class-name="table-list-name no-border white-color">
                  </el-table-column>
                  <el-table-column
                      prop="value"
                      label="值"
                      align="center"
                      class-name="table-list-value">
                    <template slot-scope="scope">
                      <div class="hdw-light" :class="{'error-light':scope.row.value == 1}"></div>
                    </template>
                  </el-table-column>
                </el-table>
            </table-list>
              </flex-box>
            </div>
          </el-col>
          <el-col :span="12" class="padding0888 full-height">
            <flex-box title="监测数据">
              <el-row :gutter="16" class="h30-percent">
                <el-col
                    :span="12" class="full-height"
                    v-for="item in volCurr.top" :key="item.id">
                  <div class="circle-pie-chart-container">
                    <div class="circle-pie-chart-wrapper">
                      <circle-pie-chart
                          :ref="item.id" :id="item.id"
                          :color="item.color" :max="item.max"
                          :unit="item.unit" :value="item.value"></circle-pie-chart>
                    </div>
                    <div class="circle-pie-chart-text">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="16" class="h30-percent">
                <el-col
                    :span="12" class="full-height"
                    v-for="item in volCurr.middle" :key="item.id">
                  <div class="circle-pie-chart-container">
                    <div class="circle-pie-chart-wrapper">
                      <circle-pie-chart
                          :ref="item.id" :id="item.id"
                          :color="item.color" :max="item.max"
                          :unit="item.unit" :value="item.value"></circle-pie-chart>
                    </div>
                    <div class="circle-pie-chart-text">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="16" class="h30-percent">
                <el-col
                    :span="12" class="full-height"
                    v-for="item in volCurr.bottom" :key="item.id">
                  <div class="circle-pie-chart-container">
                    <div class="circle-pie-chart-wrapper">
                      <circle-pie-chart
                          :ref="item.id" :id="item.id"
                          :color="item.color" :max="item.max"
                          :unit="item.unit" :value="item.value"></circle-pie-chart>
                    </div>
                    <div class="circle-pie-chart-text">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </flex-box>
          </el-col>
        </el-row>
      </div>
      <div class="h50-percent main-bottom">
        <div class="content-container">
          <div class="content-wrapper content-wrapper-main padding0880">
            <flex-box title="支路正/负对地电阻KΩ">
              <line-chart ref="resLine" id="resLine"></line-chart>
            </flex-box>
          </div>
          <div class="content-wrapper content-wrapper-w450 padding0888">
            <flex-box title="电池信息">
              <div class="flex-box-content">
                <div class="battery-info">
                  <div class="battery-icon-wrapper">
                    <div class="battery-icon"><i class="iconfont el-icon-6dianchi"></i></div>
                  </div>
                  <div class="battery-text-wrapper">
                    <span class="text-content">故障电池节数</span><br>
                    <span class="text-value">{{batteryNumber}}节</span>
                  </div>
                </div>
              </div>
              <div class="flex-box-content">
                <div class="circle-pie-chart-container">
                  <div class="circle-pie-chart-wrapper">
                    <circle-pie-chart
                        ref="batteryRes" id="batteryRes"
                        :color="batteryRes.color" :max="batteryRes.max"
                        :unit="batteryRes.unit" :value="batteryRes.value"></circle-pie-chart>
                  </div>
                  <div class="circle-pie-chart-text">
                    <span>电池对地电阻</span><br>
                    <span></span>
                  </div>
                </div>
              </div>
            </flex-box>
          </div>
        </div>
      </div>
    </div>
    <div class="content-wrapper content-wrapper-w360 padding0088">
      <table-list title="接地支路号">
        <el-table
            :data="branchNumber" stripe
            :show-header="false" height="100%" size="small">
          <el-table-column
              prop="name"
              label="名称"
              align="center"
              min-width="100"
              class-name="table-list-name no-border white-color">
          </el-table-column>
          <el-table-column
              prop="value"
              label="值"
              align="center"
              class-name="table-list-value">

          </el-table-column>
        </el-table>
      </table-list>
    </div>
  </div>
</template>

<script>
@@ -166,375 +163,509 @@
import TableList from "@/components/TableList";
import FlexBox from "@/components/FlexBox";
import CalendarTime from "@/components/CalendarTime";
import {getValByKey} from "@/assets/js/tools";

export default {
    name: "IsolatingDeviceTabPane",
    components: {
        CalendarTime,
        CirclePieChart,
        LineChart,
        TableList,
        FlexBox
  name: "IsolatingDeviceTabPane",
  components: {
    CalendarTime,
    CirclePieChart,
    LineChart,
    TableList,
    FlexBox
  },
  props: {
    name: {
      type: String,
      default: ""
    },
    props: {
        name: {
            type: String,
            default: ""
        }
    },
    watch: {
      "$store.state.theme.collapse"() {
        this.$nextTick(() => {
          this.resize();
        });
      },
    },
    data() {
        let resLineConfig = {
            axisLineColor: "#125984",
            axisLineType: 'dashed',
            axisLabelColor: '#fff',
            line1Color: "#90ED7D",
            line2Color: '#F69F41',
            lineType: 'dashed',

        };
        return {
            updateTime: "2021-01-01 00:00:00",
            branchNumber: [
                {name: '模块1', value: '???'},
                {name: '模块2', value: '???'},
                {name: '模块3', value: '???'},
                {name: '模块4', value: '???'},
                {name: '模块5', value: '???'},
                {name: '模块6', value: '???'},
                {name: '模块7', value: '???'},
                {name: '模块8', value: '???'},
                {name: '模块9', value: '???'},
                {name: '模块10', value: '???'},
                {name: '模块11', value: '???'},
                {name: '模块12', value: '???'},
                {name: '模块13', value: '???'},
                {name: '模块14', value: '???'},
                {name: '模块15', value: '???'},
                {name: '模块16', value: '???'},
            ],
            systemState: [
                {name: '绝缘监测模块瞬时记录状态', value: 0},
                {name: '绝缘监测模块系统状态', value: 1},
                {name: '绝缘监测模块装置状态', value: 0},
            ],
            volCurr: {
                top: [
                    {
                        id: 'systemVol',
                        name: '系统电压',
                        color: '#F2535F',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                    {
                        id: 'volCurrACVol',
                        name: '交流电压',
                        color: '#4AFD88',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                ],
                middle: [
                    {
                        id: 'posFloorVol',
                        name: '正对地电压',
                        color: '#DCFD00',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                    {
                        id: 'nesFloorVol',
                        name: '负对地电压',
                        color: '#FA62E8',
                        value: 220,
                        unit: 'V',
                        max: 480,
                    },
                ],
                bottom: [
                    {
                        id: 'posFloorRes',
                        name: '正对地电阻',
                        color: '#F1E287',
                        value: 10,
                        unit: 'Ω',
                        max: 50,
                    },
                    {
                        id: 'NesFloorRes',
                        name: '负对地电阻',
                        color: '#00FEFF',
                        value: 10,
                        unit: 'Ω',
                        max: 50,
                    },
                ]
            },
            batteryRes: {
                name: '负对地电阻',
                color: '#00FEFF',
                value: 10,
                unit: 'Ω',
                max: 50,
            },
            resLine: {
                tooltip:  {
                    show: false
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: 0,
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: resLineConfig.axisLineColor,
                            type: resLineConfig.axisLineType,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: resLineConfig.axisLabelColor,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: resLineConfig.axisLineColor,
                            type: resLineConfig.axisLineType,
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: resLineConfig.axisLineColor,
                            type: resLineConfig.axisLineType,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: resLineConfig.axisLabelColor,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: resLineConfig.axisLineColor,
                            type: resLineConfig.axisLineType,
                        },
                    },
                    max: function (data) {
                        let max = data.max;
                        if (max == -Infinity) {
                            return 1;
                        }
                        return Math.ceil(max * 1.01);
                    }
                }],
                series: [
                    {
                        name: '绝缘监测模块支路正对地电阻',
                        smooth: false,
                        symbol: 'circle',
                        symbolSize: 8,
                        data: [
                            ['模块1', 10],
                            ['模块2', 20],
                            ['模块3', 10],
                            ['模块4', 20],
                            ['模块5', 10],
                            ['模块6', 20],
                            ['模块7', 10],
                            ['模块8', 20],
                            ['模块9', 10],
                            ['模块10', 20],
                            ['模块11', 10],
                            ['模块12', 20],
                            ['模块13', 10],
                            ['模块14', 20],
                            ['模块15', 10],
                            ['模块16', 20],
                        ],
                        itemStyle: {
                            normal:  {
                                color: resLineConfig.line1Color
                            },
                        },
                        lineStyle: {
                            color: resLineConfig.line1Color,
                            type: resLineConfig.lineType
                        }
                    },
                    {
                        name: '绝缘监测模块支路负对地电阻',
                        smooth: false,
                        symbol: 'circle',
                        symbolSize: 8,
                        data: [
                            ['模块1', 5],
                            ['模块2', 8],
                            ['模块3', 10],
                            ['模块4', 12],
                            ['模块5', 10],
                            ['模块6', 20],
                            ['模块7', 30],
                            ['模块8', 21],
                            ['模块9', 22],
                            ['模块10', 28],
                            ['模块11', 19],
                            ['模块12', 15],
                            ['模块13', 10],
                            ['模块14', 7],
                            ['模块15', 8],
                            ['模块16', 10],
                        ],
                        itemStyle: {
                            normal:  {
                                color: resLineConfig.line2Color,
                            },
                        },
                        lineStyle: {
                            color: resLineConfig.line2Color,
                            type: resLineConfig.lineType
                        }
                    },
                ]
            },
        }
    },
    methods: {
        // 绝缘装置图表重置大小
        resize() {
            this.$nextTick(() => {
                this.$refs.resLine.resize();
                this.$refs.batteryRes.resize();
                // 重置大小
                for (let key in this.volCurr) {
                    this.volCurr[key].map(item => {
                        this.$refs[item.id][0].resize();
                    });
                }
            });
        },
    },
    mounted() {
      this.$refs.resLine.setOption(this.resLine);
      this.resize();
      // 添加resize监听事件
      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      // 移除resize监听事件
      window.removeEventListener('resize', this.resize);
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    "$store.state.theme.collapse"() {
      this.$nextTick(() => {
        this.resize();
      });
    },
    name() {
      this.setInfo();
    },
    info() {
      this.setInfo();
    }
  },
  data() {
    let resLineConfig = {
      axisLineColor: "#125984",
      axisLineType: 'dashed',
      axisLabelColor: '#fff',
      line1Color: "#90ED7D",
      line2Color: '#F69F41',
      lineType: 'dashed',
    };
    return {
      branchNumber: [
        {key: 'insulatBranchNum1', name: '模块1', value: '???'},
        {key: 'insulatBranchNum2', name: '模块2', value: '???'},
        {key: 'insulatBranchNum3', name: '模块3', value: '???'},
        {key: 'insulatBranchNum4', name: '模块4', value: '???'},
        {key: 'insulatBranchNum5', name: '模块5', value: '???'},
        {key: 'insulatBranchNum6', name: '模块6', value: '???'},
        {key: 'insulatBranchNum7', name: '模块7', value: '???'},
        {key: 'insulatBranchNum8', name: '模块8', value: '???'},
        {key: 'insulatBranchNum9', name: '模块9', value: '???'},
        {key: 'insulatBranchNum10', name: '模块10', value: '???'},
        {key: 'insulatBranchNum11', name: '模块11', value: '???'},
        {key: 'insulatBranchNum12', name: '模块12', value: '???'},
        {key: 'insulatBranchNum13', name: '模块13', value: '???'},
        {key: 'insulatBranchNum14', name: '模块14', value: '???'},
        {key: 'insulatBranchNum15', name: '模块15', value: '???'},
        {key: 'insulatBranchNum16', name: '模块16', value: '???'},
      ],
      systemState: [
        {key: 'insulatRecordState', name: '瞬时记录状态', value: 0},
        {key: 'insulatSystemState', name: '系统状态', value: 0},
        {key: 'insulatState', name: '装置状态', value: 0},
      ],
      volCurr: {
        top: [
          {
            id: 'systemVol',
            key: 'insulatSystemVol',
            name: '系统电压',
            color: '#F2535F',
            value: 0,
            unit: 'V',
            max: 480,
          },
          {
            id: 'volCurrACVol',
            key: 'insulatAcVol',
            name: '交流电压',
            color: '#4AFD88',
            value: 0,
            unit: 'V',
            max: 480,
          },
        ],
        middle: [
          {
            id: 'posFloorVol',
            key: 'insulatGroundVol',
            name: '正对地电压',
            color: '#DCFD00',
            value: 0,
            unit: 'V',
            max: 480,
          },
          {
            id: 'nesFloorVol',
            key: 'insulatNegativeVol',
            name: '负对地电压',
            color: '#FA62E8',
            value: 0,
            unit: 'V',
            max: 480,
          },
        ],
        bottom: [
          {
            id: 'posFloorRes',
            key: 'insulatGroundRes',
            name: '正对地电阻',
            color: '#F1E287',
            value: 0,
            unit: 'kΩ',
            max: 50,
          },
          {
            id: 'NesFloorRes',
            key: 'insulatNegativeRes',
            name: '负对地电阻',
            color: '#00FEFF',
            value: 0,
            unit: 'KΩ',
            max: 50,
          },
        ]
      },
      batteryRes: {
        name: '负对地电阻',
        key: 'insulatBattRes',
        color: '#00FEFF',
        value: 0,
        unit: 'KΩ',
        max: 50,
      },
      resLine: {
        tooltip: {
          show: false
        },
        xAxis: [{
          type: 'category',
          boundaryGap: 0,
          axisLine: {
            onZero: false,
            lineStyle: {
              color: resLineConfig.axisLineColor,
              type: resLineConfig.axisLineType,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: resLineConfig.axisLabelColor,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: resLineConfig.axisLineColor,
              type: resLineConfig.axisLineType,
            },
          },
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            lineStyle: {
              color: resLineConfig.axisLineColor,
              type: resLineConfig.axisLineType,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: resLineConfig.axisLabelColor,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: resLineConfig.axisLineColor,
              type: resLineConfig.axisLineType,
            },
          },
          max: function (data) {
            let max = data.max;
            if (max == -Infinity) {
              return 1;
            }
            return Math.ceil(max * 1.01);
          }
        }],
        series: [
          {
            name: '绝缘监测模块支路正对地电阻',
            smooth: false,
            symbol: 'circle',
            symbolSize: 8,
            data: [
              ['模块1', 0],
              ['模块2', 0],
              ['模块3', 0],
              ['模块4', 0],
              ['模块5', 0],
              ['模块6', 0],
              ['模块7', 0],
              ['模块8', 0],
              ['模块9', 0],
              ['模块10', 0],
              ['模块11', 0],
              ['模块12', 0],
              ['模块13', 0],
              ['模块14', 0],
              ['模块15', 0],
              ['模块16', 0],
            ],
            itemStyle: {
              normal: {
                color: resLineConfig.line1Color
              },
            },
            lineStyle: {
              color: resLineConfig.line1Color,
              type: resLineConfig.lineType
            }
          },
          {
            name: '绝缘监测模块支路负对地电阻',
            smooth: false,
            symbol: 'circle',
            symbolSize: 8,
            data: [
              ['模块1', 0],
              ['模块2', 0],
              ['模块3', 0],
              ['模块4', ],
              ['模块5', 0],
              ['模块6', 0],
              ['模块7', 0],
              ['模块8', 0],
              ['模块9', 0],
              ['模块10', 0],
              ['模块11', 0],
              ['模块12', 0],
              ['模块13', 0],
              ['模块14', 0],
              ['模块15', 0],
              ['模块16', 0],
            ],
            itemStyle: {
              normal: {
                color: resLineConfig.line2Color,
              },
            },
            lineStyle: {
              color: resLineConfig.line2Color,
              type: resLineConfig.lineType
            }
          },
        ]
      },
    }
  },
  methods: {
    // 绝缘装置图表重置大小
    resize() {
      this.$nextTick(() => {
        this.$refs.resLine.resize();
        this.$refs.batteryRes.resize();
        // 重置大小
        for (let key in this.volCurr) {
          this.volCurr[key].map(item => {
            this.$refs[item.id][0].resize();
          });
        }
      });
    },
    setInfo() {
      // 设置branchNumber
      this.setBranchNumber();
      // 设置systemState
      this.setSystemState();
      // 设置volCurr
      this.setVolCurr();
      // 设置batteryRes
      this.batteryRes.value = getValByKey(this.batteryRes.key, this.info, 0);
      // 设置resLine
      this.setResLine();
    },
    // 设置branchNumber
    setBranchNumber() {
      let info = this.info;
      this.branchNumber.map(item=>{
        item.value = getValByKey(item.key, info, "???");
      });
    },
    // 设置systemState
    setSystemState() {
      let info = this.info;
      this.systemState.map(item=>{
        item.value = getValByKey(item.key, info, -1);
      });
    },
    // 设置volCurr
    setVolCurr() {
      let info = this.info;
      this.volCurr.top.map(item=>{
        item.value = getValByKey(item.key, info, 0);
      });
      this.volCurr.middle.map(item=>{
        item.value = getValByKey(item.key, info, 0);
      });
      this.volCurr.bottom.map(item=>{
        item.value = getValByKey(item.key, info, 0);
      });
    },
    // 设置resLine
    setResLine() {
      let info = this.info;
      let pos = this.getPosRes();
      let posList = pos.map(item=>{
        let value = getValByKey(item.key, info, 0);
        return [item.name, value];
      });

      let neg = this.getNegRes();
      let negList = neg.map(item=>{
        let value = getValByKey(item.key, info, 0);
        return [item.name, value];
      });
      this.resLine.series[0].data = posList;
      this.resLine.series[1].data = negList;
      this.$refs.resLine.setOption(this.resLine);
    },
    getPosRes() {
      return [
        {key: 'insulatBranchResIs1', name: "模块1", value: 0},
        {key: 'insulatBranchResIs2', name: "模块2", value: 0},
        {key: 'insulatBranchResIs3', name: "模块3", value: 0},
        {key: 'insulatBranchResIs4', name: "模块4", value: 0},
        {key: 'insulatBranchResIs5', name: "模块5", value: 0},
        {key: 'insulatBranchResIs6', name: "模块6", value: 0},
        {key: 'insulatBranchResIs7', name: "模块7", value: 0},
        {key: 'insulatBranchResIs8', name: "模块8", value: 0},
        {key: 'insulatBranchResIs9', name: "模块9", value: 0},
        {key: 'insulatBranchResIs10', name: "模块10", value: 0},
        {key: 'insulatBranchResIs11', name: "模块11", value: 0},
        {key: 'insulatBranchResIs12', name: "模块12", value: 0},
        {key: 'insulatBranchResIs13', name: "模块13", value: 0},
        {key: 'insulatBranchResIs14', name: "模块14", value: 0},
        {key: 'insulatBranchResIs15', name: "模块15", value: 0},
        {key: 'insulatBranchResIs16', name: "模块16", value: 0},
      ]
    },
    getNegRes() {
      return [
        {key: 'insulatBranchResNe1', name: "模块1", value: 0},
        {key: 'insulatBranchResNe2', name: "模块2", value: 0},
        {key: 'insulatBranchResNe3', name: "模块3", value: 0},
        {key: 'insulatBranchResNe4', name: "模块4", value: 0},
        {key: 'insulatBranchResNe5', name: "模块5", value: 0},
        {key: 'insulatBranchResNe6', name: "模块6", value: 0},
        {key: 'insulatBranchResNe7', name: "模块7", value: 0},
        {key: 'insulatBranchResNe8', name: "模块8", value: 0},
        {key: 'insulatBranchResNe9', name: "模块9", value: 0},
        {key: 'insulatBranchResNe10', name: "模块10", value: 0},
        {key: 'insulatBranchResNe11', name: "模块11", value: 0},
        {key: 'insulatBranchResNe12', name: "模块12", value: 0},
        {key: 'insulatBranchResNe13', name: "模块13", value: 0},
        {key: 'insulatBranchResNe14', name: "模块14", value: 0},
        {key: 'insulatBranchResNe15', name: "模块15", value: 0},
        {key: 'insulatBranchResNe16', name: "模块16", value: 0},
      ]
    }
  },
  computed: {
    updateTime() {
      let recordTime = this.info.recordTime;
      return recordTime?recordTime:"2020-01-01 00:00:00";
    },
    batteryNumber() {
      let number = this.info.insulatFaultNum;
      return number?number:0;
    }
  },
  mounted() {
    // 设置支路内阻折线图
    this.setResLine();
    this.resize();
    // 添加resize监听事件
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    // 移除resize监听事件
    window.removeEventListener('resize', this.resize);
  }
}
</script>

<style scoped>
.content-container {
    display: flex;
    height: 100%;
  display: flex;
  height: 100%;
}

.content-wrapper {
    height: 100%;
  height: 100%;
}

.content-wrapper-main {
    flex: 1;
  flex: 1;
}

.content-wrapper.content-wrapper-w360 {
    width: 360px;
  width: 360px;
}

.content-wrapper-w450 {
    width: 450px;
  width: 450px;
}

.h50-percent {
    box-sizing: border-box;
  box-sizing: border-box;
}

.padding0880 {
    box-sizing: border-box;
    padding: 0 8px 8px 0;
  box-sizing: border-box;
  padding: 0 8px 8px 0;
}

.padding0888 {
    box-sizing: border-box;
    padding: 0 8px 8px 8px;
  box-sizing: border-box;
  padding: 0 8px 8px 8px;
}

.padding0088 {
    box-sizing: border-box;
    padding: 0 0 8px 8px;
  box-sizing: border-box;
  padding: 0 0 8px 8px;
}

.circle-pie-chart-container {
    height: 100%;
  height: 100%;
}

.circle-pie-chart-wrapper {
    display: inline-block;
    width: 120px;
    height: 120px;
    vertical-align: middle;
  display: inline-block;
  width: 120px;
  height: 120px;
  vertical-align: middle;
}

.circle-pie-chart-text {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}

.center-content {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.flex-box-content {
    display: flex;
    height: 50%;
    justify-content: center;
    align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  align-items: center;
}

.battery-info {
    text-align: left;
    display: inline-block;
  text-align: left;
  display: inline-block;
}

.battery-icon-wrapper {
    display: inline-block;
    padding: 8px;
    border-radius: 50%;
  display: inline-block;
  padding: 8px;
  border-radius: 50%;
}

.battery-icon i {
    font-size: 88px;
    color: transparent;
    background: linear-gradient(to right, #ff9184, #ff3761);
    -webkit-background-clip: text;
  font-size: 88px;
  color: transparent;
  background: linear-gradient(to right, #ff9184, #ff3761);
  -webkit-background-clip: text;
}

.battery-text-wrapper {
    display: inline-block;
  display: inline-block;
}

.text-content {
    font-size: 14px;
  font-size: 14px;
}

.text-value {
    font-size: 24px;
    color: #ff3761;
  font-size: 24px;
  color: #ff3761;
}
</style>

 src/pages/dataMager/components/StateTabPane.vue

@@ -79,22 +79,22 @@
          {key: "isJunCharge", name: '整流器均浮充指示', value: '0'},
        ],
        onOff: [
          {key: "isACDCMod1Off", name: '整流器1开关机指示', value: '0'},
          {key: "isACDCMod2Off", name: '整流器2开关机指示', value: '0'},
          {key: "isACDCMod3Off", name: '整流器3开关机指示', value: '0'},
          {key: "isACDCMod4Off", name: '整流器4开关机指示', value: '0'},
          {key: "isACDCMod5Off", name: '整流器5开关机指示', value: '0'},
          {key: "isACDCMod6Off", name: '整流器6开关机指示', value: '0'},
          {key: "isACDCMod7Off", name: '整流器7开关机指示', value: '0'},
          {key: "isACDCMod8Off", name: '整流器8开关机指示', value: '0'},
          {key: "isACDCMod9Off", name: '整流器9开关机指示', value: '0'},
          {key: "isACDCMod10Off", name: '整流器10开关机指示', value: '0'},
          {key: "isACDCMod11Off", name: '整流器11开关机指示', value: '0'},
          {key: "isACDCMod12Off", name: '整流器12开关机指示', value: '0'},
          {key: "isACDCMod13Off", name: '整流器13开关机指示', value: '0'},
          {key: "isACDCMod14Off", name: '整流器14开关机指示', value: '0'},
          {key: "isACDCMod15Off", name: '整流器15开关机指示', value: '0'},
          {key: "isACDCMod16Off", name: '整流器16开关机指示', value: '0'},
          {key: "isAcdcMod1Off", name: '整流器1开关机指示', value: '0'},
          {key: "isAcdcMod2Off", name: '整流器2开关机指示', value: '0'},
          {key: "isAcdcMod3Off", name: '整流器3开关机指示', value: '0'},
          {key: "isAcdcMod4Off", name: '整流器4开关机指示', value: '0'},
          {key: "isAcdcMod5Off", name: '整流器5开关机指示', value: '0'},
          {key: "isAcdcMod6Off", name: '整流器6开关机指示', value: '0'},
          {key: "isAcdcMod7Off", name: '整流器7开关机指示', value: '0'},
          {key: "isAcdcMod8Off", name: '整流器8开关机指示', value: '0'},
          {key: "isAcdcMod9Off", name: '整流器9开关机指示', value: '0'},
          {key: "isAcdcMod10Off", name: '整流器10开关机指示', value: '0'},
          {key: "isAcdcMod11Off", name: '整流器11开关机指示', value: '0'},
          {key: "isAcdcMod12Off", name: '整流器12开关机指示', value: '0'},
          {key: "isAcdcMod13Off", name: '整流器13开关机指示', value: '0'},
          {key: "isAcdcMod14Off", name: '整流器14开关机指示', value: '0'},
          {key: "isAcdcMod15Off", name: '整流器15开关机指示', value: '0'},
          {key: "isAcdcMod16Off", name: '整流器16开关机指示', value: '0'},
        ]
      },
    }

 src/pages/dataMager/components/WarnTabPane.vue

@@ -212,32 +212,32 @@
          {key: "isAcIn2LessC", name: '交流C相缺相', value: '0'},
        ],
        AC: [
          {key: "isAcIn2PowerDown", name: '交流停电', value: '0'},
          {key: "isAcIn2Powerdown", name: '交流停电', value: '0'},
          {key: "isDcOutOverVol", name: '直流电压过高', value: '0'},
          {key: "isDcOutUnderVol", name: '直流电压过低', value: '0'},
        ],
        break: [
          {key: "isLoaderFuse", name: '负载熔断', value: '0'},
          {key: "isBattGroup1Fuse", name: '电池组1熔断', value: '0'},
          {key: "isBattGroup2Fuse", name: '电池组2熔断', value: '0'},
          {key: "isBattgroup1Fuse", name: '电池组1熔断', value: '0'},
          {key: "isBattgroup2Fuse", name: '电池组2熔断', value: '0'},
        ],
        fault: [
          {key: "isACDCMod1Err", name: '整流器1总故障', value: '0'},
          {key: "isACDCMod2Err", name: '整流器2总故障', value: '0'},
          {key: "isACDCMod3Err", name: '整流器3总故障', value: '0'},
          {key: "isACDCMod4Err", name: '整流器4总故障', value: '0'},
          {key: "isACDCMod5Err", name: '整流器5总故障', value: '0'},
          {key: "isACDCMod6Err", name: '整流器6总故障', value: '0'},
          {key: "isACDCMod7Err", name: '整流器7总故障', value: '0'},
          {key: "isACDCMod8Err", name: '整流器8总故障', value: '0'},
          {key: "isACDCMod9Err", name: '整流器9总故障', value: '0'},
          {key: "isACDCMod10Err", name: '整流器10总故障', value: '0'},
          {key: "isACDCMod11Err", name: '整流器11总故障', value: '0'},
          {key: "isACDCMod12Err", name: '整流器12总故障', value: '0'},
          {key: "isACDCMod13Err", name: '整流器13总故障', value: '0'},
          {key: "isACDCMod14Err", name: '整流器14总故障', value: '0'},
          {key: "isACDCMod15Err", name: '整流器15总故障', value: '0'},
          {key: "isACDCMod16Err", name: '整流器16总故障', value: '0'},
          {key: "isAcdcMod1Err", name: '整流器1总故障', value: '0'},
          {key: "isAcdcMod2Err", name: '整流器2总故障', value: '0'},
          {key: "isAcdcMod3Err", name: '整流器3总故障', value: '0'},
          {key: "isAcdcMod4Err", name: '整流器4总故障', value: '0'},
          {key: "isAcdcMod5Err", name: '整流器5总故障', value: '0'},
          {key: "isAcdcMod6Err", name: '整流器6总故障', value: '0'},
          {key: "isAcdcMod7Err", name: '整流器7总故障', value: '0'},
          {key: "isAcdcMod8Err", name: '整流器8总故障', value: '0'},
          {key: "isAcdcMod9Err", name: '整流器9总故障', value: '0'},
          {key: "isAcdcMod10Err", name: '整流器10总故障', value: '0'},
          {key: "isAcdcMod11Err", name: '整流器11总故障', value: '0'},
          {key: "isAcdcMod12Err", name: '整流器12总故障', value: '0'},
          {key: "isAcdcMod13Err", name: '整流器13总故障', value: '0'},
          {key: "isAcdcMod14Err", name: '整流器14总故障', value: '0'},
          {key: "isAcdcMod15Err", name: '整流器15总故障', value: '0'},
          {key: "isAcdcMod16Err", name: '整流器16总故障', value: '0'},
        ],
        total: [
          {key: "", name: '交流总故障', value: '0'},

 src/pages/dataMager/components/paramModule.vue

@@ -1,97 +1,108 @@
<template>
    <div class="paramModule">
        <div class="param-right">
      <div class="param-circle-wrapper" ref="paramCircle"></div>
        </div>
        <div class="param-left">
            <div class="title">{{name}}</div>
            <div class="dataCon">{{value}}</div>
        </div>
    </div>
    <div class="paramModule">
        <div class="param-right">
            <div class="param-circle-wrapper" ref="paramCircle"></div>
        </div>
        <div class="param-left">
            <div class="title">{{ name }}</div>
            <div class="dataCon">{{ value }}{{unit}}</div>
        </div>
    </div>
</template>

<script>
import ParamCircle from "@/pages/dataMager/js/ParamCircle";

export default {
  props: {
    name: {
      type: String,
      default: ""
    props: {
        name: {
            type: String,
            default: ""
        },
        value: {
            type: Number,
            default: 0
        },
        unit: {
            type: String,
            default: ''
        },
    },
    value: {
      type: Number,
      default: 0
    data() {
        return {
            paramCirle: ""
        };
    },
    methods: {
        resize() {
            this.$nextTick(() => {
                this.paramCirle.resize();
            });
        },
    },
    mounted() {
        this.paramCirle = new ParamCircle(this.$refs.paramCircle);
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
    }
  },
    data() {
        return {
      paramCirle: ""
    };
    },
  methods: {
    resize() {
      this.$nextTick(()=>{
        this.paramCirle.resize();
      });
    },
  },
  mounted() {
    this.paramCirle = new ParamCircle(this.$refs.paramCircle);
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }
};
</script>

<style scoped>
.paramModule *{
  box-sizing: border-box;
.paramModule * {
    box-sizing: border-box;
}

.paramModule {
    display: flex;
    justify-items: center;
    align-items: center;
    display: flex;
    justify-items: center;
    align-items: center;
}

.param-right {
    width: 110px;
    height: 110px;
    display: flex;
    justify-items: center;
    align-items: center;
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    justify-items: center;
    align-items: center;
    position: relative;
}

.param-circle-wrapper {
  width: 100%;
  height: 100%;
    width: 100%;
    height: 100%;
}

.param-left {
    width: 180px;
    height: 80px;
    background-color: #00fefe;
    border-radius: 0 30px 30px 0;
    border: 2px solid #fa884c;
    margin-left: -40px;
    padding-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 180px;
    height: 80px;
    background-color: #00fefe;
    border-radius: 0 30px 30px 0;
    border: 2px solid #fa884c;
    margin-left: -40px;
    padding-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.param-left .title {
    font-size: 13px;
  font-weight: bold;
    color: #00253f;
    font-size: 14px;
    font-weight: bold;
    color: #00253f;
}

.param-left .dataCon {
  display: inline-block;
  min-width: 50px;
    font-size: 22px;
  text-align: center;
    color: #fa884c;
    padding: 4px;
    background-color: #00253f;
    margin-top: 4px;
    display: inline-block;
    min-width: 50px;
    font-size: 22px;
    text-align: center;
    color: #fa884c;
    padding: 4px 16px;
    background-color: #00253f;
    margin-top: 4px;
}
</style>

 src/pages/dataMager/js/getChargerInfo.js

New file
@@ -0,0 +1,6 @@
function getChargerInfo() {
    return {

    }
}
export default getChargerInfo;

 src/pages/dataMager/js/getIsolatingInfo.js

New file
@@ -0,0 +1,70 @@
function getIsolatingInfo() {
    return {
        battGroupId: 0,
        insulatAcVol: 0,
        insulatBattRes: 0,
        insulatBranchNum1: 0,
        insulatBranchNum2: 0,
        insulatBranchNum3: 0,
        insulatBranchNum4: 0,
        insulatBranchNum5: 0,
        insulatBranchNum6: 0,
        insulatBranchNum7: 0,
        insulatBranchNum8: 0,
        insulatBranchNum9: 0,
        insulatBranchNum10: 0,
        insulatBranchNum11: 0,
        insulatBranchNum12: 0,
        insulatBranchNum13: 0,
        insulatBranchNum14: 0,
        insulatBranchNum15: 0,
        insulatBranchNum16: 0,
        insulatBranchResIs1: 0,
        insulatBranchResIs2: 0,
        insulatBranchResIs3: 0,
        insulatBranchResIs4: 0,
        insulatBranchResIs5: 0,
        insulatBranchResIs6: 0,
        insulatBranchResIs7: 0,
        insulatBranchResIs8: 0,
        insulatBranchResIs9: 0,
        insulatBranchResIs10: 0,
        insulatBranchResIs11: 0,
        insulatBranchResIs12: 0,
        insulatBranchResIs13: 0,
        insulatBranchResIs14: 0,
        insulatBranchResIs15: 0,
        insulatBranchResIs16: 0,
        insulatBranchResNe1: 0,
        insulatBranchResNe2: 0,
        insulatBranchResNe3: 0,
        insulatBranchResNe4: 0,
        insulatBranchResNe5: 0,
        insulatBranchResNe6: 0,
        insulatBranchResNe7: 0,
        insulatBranchResNe8: 0,
        insulatBranchResNe9: 0,
        insulatBranchResNe10: 0,
        insulatBranchResNe11: 0,
        insulatBranchResNe12: 0,
        insulatBranchResNe13: 0,
        insulatBranchResNe14: 0,
        insulatBranchResNe15: 0,
        insulatBranchResNe16: 0,
        insulatFaultNum: 0,
        insulatGroundRes: 0,
        insulatGroundVol: 0,
        insulatNegativeRes: 0,
        insulatNegativeVol: 0,
        insulatRecordState: 0,
        insulatState: 0,
        insulatSystemState: 0,
        insulatSystemVol: 0,
        note: "",
        num: 0,
        powerDeviceId: 10,
        recordTime: "2021-01-01 00:00:00"
    }
}

export default getIsolatingInfo;

 src/pages/dataMager/realTimeData.vue

@@ -177,12 +177,12 @@
    this.resize();
    // 窗口大小改变重置内容大小
    let self = this;
    window.onresize = function () {
      self.resize();
    }
    // 启动监听
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.onresize = null;
    // 关闭监听
    window.removeEventListener('resize', this.resize);
    this.close();
  }
}

 src/pages/dataTest/movingRingSystem/chargerStatus.vue

@@ -1,12 +1,15 @@
<template>
  <content-box :title="fullStationName" class="mgl8">
    <charger-status-tab-pane></charger-status-tab-pane>
    <charger-status-tab-pane :info="info"></charger-status-tab-pane>
  </content-box>
</template>

<script>
import ContentBox from "@/components/ContentBox";
import ChargerStatusTabPane from "@/pages/dataMager/components/ChargerStatusTabPane";
import getChargerInfo from "@/pages/dataMager/js/getChargerInfo";
import {getWsUrl} from "@/assets/js/tools";
import getIsolatingInfo from "@/pages/dataMager/js/getIsolatingInfo";
export default {
  name: "chargerStatus",
  components: {
@@ -22,6 +25,7 @@
  },
  data() {
    return {
      isOpen: false,
      powerInfo: {
        powerDeviceId: 0,
        stationId: 0,
@@ -32,6 +36,7 @@
        stationName4: " ",
        stationName5: "",
      },
      info: getChargerInfo(),
    }
  },
  methods: {
@@ -55,9 +60,52 @@
            stationName5: "",
          };
        }
        // 初始化WebSocket
        this.close();
        this.initSocket();
      }).catch(error => {
        console.log(error);
      });
    },
    initSocket() {
      // 未被初始化初始化
      if (!this.isOpen) {
        const wsUri = getWsUrl("", 55003);
        this.socket = new WebSocket(wsUri);
        this.socket.onmessage = this.onMessage;
        this.socket.onopen = this.onOpen;
        this.socket.onerror = this.onError;
        this.socket.onclose = this.close;
      }
    },
    onMessage(res) {
      let rs = JSON.parse(res.data);
      if(rs.code == 1 && rs.data) {
        this.info = rs.data;
      }else {
        this.info = getChargerInfo()
      }
    },
    onOpen() {
      // 打印关闭信息
      console.log("启动充电机WebSocket");
      // 标识正在运行
      this.isOpen = true;
      console.log()
      // 向后台发送请求数据
      this.socket.send(this.powerInfo.powerDeviceId);
    },
    onError() {

    },
    close() {
      // 关闭websocket
      if (this.isOpen) {
        // 打印关闭信息
        console.log("关闭充电机WebSocket");
        this.isOpen = false;
        this.socket.close();
      }
    },
  },
  computed: {
@@ -79,6 +127,9 @@
      this.getPowerInfo(powerDeviceId);
    }
  },
  destroyed() {
    this.close();
  }
}
</script>


 src/pages/dataTest/movingRingSystem/isolatingDevice.vue

@@ -1,12 +1,14 @@
<template>
  <content-box :title="fullStationName" class="mgl8">
    <isolating-device-tab-pane></isolating-device-tab-pane>
    <isolating-device-tab-pane :info="info"></isolating-device-tab-pane>
  </content-box>
</template>

<script>
import ContentBox from "@/components/ContentBox";
import IsolatingDeviceTabPane from "@/pages/dataMager/components/IsolatingDeviceTabPane";
import {getWsUrl} from "@/assets/js/tools";
import getIsolatingInfo from "@/pages/dataMager/js/getIsolatingInfo";

export default {
  name: "isolatingDevice",
@@ -23,6 +25,7 @@
  },
  data() {
    return {
      isOpen: false,
      powerInfo: {
        powerDeviceId: 0,
        stationId: 0,
@@ -33,6 +36,7 @@
        stationName4: " ",
        stationName5: "",
      },
      info: getIsolatingInfo()
    }
  },
  methods: {
@@ -56,9 +60,52 @@
            stationName5: "",
          };
        }
        // 初始化WebSocket
        this.close();
        this.initSocket();
      }).catch(error => {
        console.log(error);
      });
    },
    initSocket() {
      // 未被初始化初始化
      if (!this.isOpen) {
        const wsUri = getWsUrl("", 55002);
        this.socket = new WebSocket(wsUri);
        this.socket.onmessage = this.onMessage;
        this.socket.onopen = this.onOpen;
        this.socket.onerror = this.onError;
        this.socket.onclose = this.close;
      }
    },
    onMessage(res) {
      let rs = JSON.parse(res.data);
      if(rs.code == 1 && rs.data) {
        this.info = rs.data;
      }else {
        this.info = getIsolatingInfo()
      }
    },
    onOpen() {
      // 打印关闭信息
      console.log("启动绝缘监控WebSocket");
      // 标识正在运行
      this.isOpen = true;
      console.log()
      // 向后台发送请求数据
      this.socket.send(this.powerInfo.powerDeviceId);
    },
    onError() {

    },
    close() {
      // 关闭websocket
      if (this.isOpen) {
        // 打印关闭信息
        console.log("关闭绝缘监控WebSocket");
        this.isOpen = false;
        this.socket.close();
      }
    },
  },
  computed: {
@@ -80,6 +127,9 @@
      this.getPowerInfo(powerDeviceId);
    }
  },
  destroyed() {
    this.close();
  }
}
</script>


 src/pages/dataTest/realTime.vue

@@ -1065,7 +1065,6 @@
                        let data = rs.data[0];
                        // 设置版本号
                        this.dev_version = data.dev_version;
                        console.log(data);
                        // 基础信息
                        this.setEquipBase(data);