添加供电系统的组态图

src/assets/css/global.css

@@ -56,4 +56,25 @@ body,
 
 .el-select {
     margin-bottom: 10px;
+}
+
+.com-page {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  background-image:url("../img/bg.jpg");
+  background-repeat:no-repeat;
+  background-size:cover;
+}
+
+.com-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.com-chart {
+  width: 60%;
+  height: 100%;
+  overflow: hidden;
 }

src/components/power_supply/configImg/AlarmLog.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div id="AlarmLog"
+         style="width:300px;height: 300px;"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'AlarmLog',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: null,
+      a: '',
+      b: '',
+      c: '',
+      d: '',
+      e: ''
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('AlarmLog').then(response => {
+        console.log(response.data)
+        this.a = response.data.a
+        this.b = response.data.b
+        this.c = response.data.c
+        this.d = response.data.d
+        this.e = response.data.e
+        this.drawChart('AlarmLog')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+
+        legend: {
+          bottom: '0%',
+          // 修改小图标的大小
+          itemWidth: 10,
+          itemHeight: 10,
+          // 修改图例组件的文字为 12px
+          textStyle: {
+            color: 'rgba(255,255,255,.5)',
+            fontSize: '12'
+          }
+        },
+        series: [
+          {
+            name: '报警记录',
+            type: 'pie',
+            // 这个radius可以修改饼形图的大小
+            // radius 第一个值是内圆的半径 第二个值是外圆的半径
+            radius: ['40%', '60%'],
+            center: ['50%', '45%'],
+            avoidLabelOverlap: false,
+            // 图形上的文字
+            label: {
+              show: false,
+              position: 'center'
+            },
+            // 链接文字和图形的线是否显示
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: this.a, name: '电动机不启动' },
+              { value: this.b, name: '电动机通电后，电机不启动，嗡嗡响' },
+              { value: this.c, name: '电动机外壳带电' },
+              { value: this.d, name: '绝缘电阻低' },
+              { value: this.e, name: '其它' }
+            ]
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/EnergyCunsumption.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="EnergyCunsumption"></div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+
+export default {
+  name: 'EnergyCunsumption',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      time: ['', '', '', '', '', '', '', '', '', ''],
+      power: ['', '', '', '', '', '', '', '', '', ''],
+      energyConsumption: ['', '', '', '', '', '', '', '', '', ''],
+      data_rsv: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+
+    }
+  },
+
+  methods: {
+    getData () {
+      axios.get('EnergyConsumption').then(response => {
+        // 此处放后端给的 能耗 数据
+        this.power.shift()
+        this.power.push(response.data.power)
+
+        // 此处放后端给的功率数据
+        this.energyConsumption.shift()
+        this.energyConsumption.push(response.data.energyConsumption)
+
+        // 默认为当前时间，也可以通过后端的数据改变
+        this.time.shift()
+        this.time.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+
+        this.drawChart('EnergyCunsumption')
+      }).catch(function (err) {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '回路能耗'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#283b56'
+            }
+          }
+        },
+        legend: {},
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { readOnly: false },
+            restore: {},
+            saveAsImage: {}
+          }
+        },
+        dataZoom: {
+          show: false,
+          start: 0,
+          end: 100
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            data: this.time
+          },
+          {
+            type: 'category',
+            boundaryGap: true,
+            data: this.data_rsv
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            scale: true,
+            name: 'kW',
+            max: 35,
+            min: 0,
+            boundaryGap: [0.2, 0.2]
+          },
+          {
+            type: 'value',
+            scale: true,
+            name: 'kWh',
+            max: 35,
+            min: 0,
+            boundaryGap: [0.2, 0.2]
+          }
+        ],
+        series: [
+          {
+            name: '能耗W',
+            type: 'bar',
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            data: this.power
+          },
+          {
+            name: '有功功率P',
+            type: 'line',
+            data: this.energyConsumption
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 1000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    }
+  },
+  mounted () {
+    this.setTime()
+  }
+}
+</script>

src/components/power_supply/configImg/OperationLog.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div style="width:300px;height:300px"
+         id="OperationLog"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'OperationLog',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      a: '',
+      b: '',
+      c: '',
+      d: '',
+      e: '',
+      f: '',
+      g: '',
+      h: '',
+      i: '',
+      j: '',
+      k: ''
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('OperationLog').then(response => {
+        console.log(response.data)
+        this.a = response.data.a
+        this.b = response.data.b
+        this.c = response.data.c
+        this.d = response.data.d
+        this.e = response.data.e
+        this.f = response.data.f
+        this.g = response.data.g
+        this.h = response.data.h
+        this.i = response.data.i
+        this.j = response.data.j
+        this.k = response.data.k
+        this.drawChart('OperationLog')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        color: ['#2f89cf'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        // 修改图表的大小
+        grid: {
+          left: '0%',
+          top: '10px',
+          right: '0%',
+          bottom: '4%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [
+              '1#变压器出线',
+              '2#变压器出线',
+              '机修车间',
+              '1#空压机',
+              '1#进线',
+              '10KVI母线分段',
+              '#2进线',
+              '3#变压器出线',
+              '4#变压器出线',
+              '行政办公楼',
+              '2#空压机'
+            ],
+            axisTick: {
+              alignWithLabel: true
+            },
+            // 修改刻度标签 相关样式
+            axisLabel: {
+              interval: 0,
+              rotate: 40,
+              color: 'rgba(255,255,255,.6) ',
+              fontSize: '12'
+            },
+            // 不显示x坐标轴的样式
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            // 修改刻度标签 相关样式
+            axisLabel: {
+              color: 'rgba(255,255,255,.6) ',
+              fontSize: 12
+            },
+            // y轴的线条改为了 2像素
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)',
+                width: 2
+              }
+            },
+            // y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '直接访问',
+            type: 'bar',
+            barWidth: '35%',
+            data: [this.a,
+              this.b,
+              this.c,
+              this.d,
+              this.e,
+              this.f,
+              this.g,
+              this.h,
+              this.i,
+              this.j,
+              this.k
+            ],
+            itemStyle: {
+              // 修改柱子圆角
+              barBorderRadius: 5
+            }
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 3000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/power_supply/configImg/Panel.vue

@@ -0,0 +1,402 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <!-- 1-1 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <span>
+            <p>
+              <font color=#FFFFFF>报警记录</font>
+            </p>
+          </span>
+          <el-card1>
+            <el-table
+              :data="alertData"
+              style="width:750px;height:300px"
+            >
+              <el-table-column
+                prop="name"
+                label="报警名称"
+                width="180"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="time"
+                label="报警时间"
+                width="180"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="rank"
+                label="级别"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="result"
+                label="处理结果"
+              >
+              </el-table-column>
+            </el-table>
+          </el-card1>
+        </div>
+      </el-col>
+      <!-- 1-2 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <span>
+            <p>
+              <font color=#FFFFFF>操作记录</font>
+            </p>
+          </span>
+          <el-card1>
+            <el-table
+              :data="operateData"
+              style="width:750px;height:300px"
+            >
+              <el-table-column
+                prop="date"
+                label="时间"
+                width="180"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="操作"
+                width="180"
+              >
+              </el-table-column>
+            </el-table>
+          </el-card1>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <!-- 2-1 -->
+      <el-col :span="24">
+        <div class="grid-content ">
+          <span>
+            <p>
+              <font color=#FFFFFF>回路耗能分析</font>
+            </p>
+          </span>
+          <el-card>
+            <div class="panel_bar">
+              <div
+                class="chart"
+                style="width:1300px;height:300px"
+              >
+                <energyCunsumption></energyCunsumption>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 2-2 -->
+      <el-col :span="24">
+        <div class="grid-content ">
+          <span>
+            <p>
+              <font color=#FFFFFF>回路参数曲线</font>
+            </p>
+          </span>
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap1"
+                style="width:1300px;height:300px"
+              >
+                <!--                <ReturnCircuit></ReturnCircuit>-->
+                <ReturnCircuitTest></ReturnCircuitTest>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap2"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit2></ReturnCircuit2>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap3"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit3></ReturnCircuit3>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap4"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit4></ReturnCircuit4>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap5"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit5></ReturnCircuit5>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap6"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit6></ReturnCircuit6>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap7"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit7></ReturnCircuit7>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap8"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit8></ReturnCircuit8>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap9"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit9></ReturnCircuit9>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap10"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit10></ReturnCircuit10>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <div class="grid-content ">
+          <el-card>
+            <div class="panel_bar">
+              <div
+                id="chart-wrap11"
+                style="width:1300px;height:300px"
+              >
+                <ReturnCircuit11></ReturnCircuit11>
+              </div>
+              <div class="panel-footer"></div>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+<script>
+import axios from "axios";
+import ReturnCircuitTest from "@/components/power_supply/configImg/ReturnCircuitTest";
+import EnergyCunsumption from "@/components/power_supply/configImg/EnergyCunsumption";
+// import ReturnCircuit from '@/components/ReturnCircuit'
+import ReturnCircuit2 from "@/components/power_supply/configImg/ReturnCircuit2";
+import ReturnCircuit3 from "@/components/power_supply/configImg/ReturnCircuit3";
+import ReturnCircuit4 from "@/components/power_supply/configImg/ReturnCircuit4";
+import ReturnCircuit5 from "@/components/power_supply/configImg/ReturnCircuit5";
+import ReturnCircuit6 from "@/components/power_supply/configImg/ReturnCircuit6";
+import ReturnCircuit7 from "@/components/power_supply/configImg/ReturnCircuit7";
+import ReturnCircuit8 from "@/components/power_supply/configImg/ReturnCircuit8";
+import ReturnCircuit9 from "@/components/power_supply/configImg/ReturnCircuit9";
+import ReturnCircuit10 from "@/components/power_supply/configImg/ReturnCircuit10";
+import ReturnCircuit11 from "@/components/power_supply/configImg/ReturnCircuit11";
+export default {
+  data() {
+    return {
+      // 报警记录
+      alertData: [
+        {
+          name: "过热",
+          time: "2021-12-26 22:00",
+          rank: "1级",
+          result: "已处理",
+        },
+        {
+          name: "嗡嗡响",
+          time: "2021-12-26 22:05",
+          rank: "2级",
+          result: "未处理",
+        },
+      ],
+      // 操作记录
+      operateData: [
+        {
+          date: "2021-12-26 22:06",
+          name: "1号回路开启",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.getAlertData();
+    this.getOperateData();
+  },
+  methods: {
+    getAlertData() {
+      axios
+        .get("AlertData")
+        .then((response) => {
+          console.log(response.data);
+          this.alertData = response.data;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    getOperateData() {
+      axios
+        .get("OperateData")
+        .then((response) => {
+          console.log(response.data);
+          this.operateData = response.data;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  },
+  components: {
+    ReturnCircuitTest,
+    EnergyCunsumption,
+    // ReturnCircuit,
+    ReturnCircuit2,
+    ReturnCircuit3,
+    ReturnCircuit4,
+    ReturnCircuit5,
+    ReturnCircuit6,
+    ReturnCircuit7,
+    ReturnCircuit8,
+    ReturnCircuit9,
+    ReturnCircuit10,
+    ReturnCircuit11,
+  },
+};
+</script>
+<style scoped>
+.grid-content {
+  height: 400px;
+}
+.el-card {
+  height: 350px;
+  width: 1500px;
+}
+.el-card1 {
+  height: 350px;
+  width: 750px;
+}
+
+.sapn {
+  font-family: sans-serif;
+}
+
+.panel_bar {
+  width: 100%;
+}
+</style>>

src/components/power_supply/configImg/PanelTest.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <!-- 1-1 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <span>报警记录</span>
+          <el-card>
+            <el-table
+            :data="alertData"
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="name"
+              label="报警名称"
+              width="180"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="time"
+              label="报警时间"
+              width="180"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="rank"
+              label="级别"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="result"
+              label="处理结果"
+            >
+            </el-table-column>
+          </el-table>
+          </el-card>
+        </div>
+      </el-col>
+      <!-- 1-2 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <span>操作记录</span>
+         <el-card>
+            <el-table
+            :data="operateData"
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="date"
+              label="时间"
+              width="180"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="操作"
+              width="180"
+            >
+            </el-table-column>
+          </el-table>
+         </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <!-- 2-1 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <span>回路能耗分析</span>
+          <el-card>
+            <div class="panel bar">
+            <div class="chart" style="width:1300px;height:300px">
+              <energyCunsumption></energyCunsumption>
+            </div>
+            <div class="panel-footer"></div>
+          </div>
+
+          </el-card>
+        </div>
+      </el-col>
+      <!-- 2-2 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <span>回路参数曲线</span>
+          <el-card>
+            <div class="panel bar">
+                <div id="chart-wrap" style="width:1300px;height:300px">
+                  <ReturnCircuit></ReturnCircuit>
+                </div>
+                <div class="panel-footer"></div>
+              </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <!-- 3-1 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <el-card>
+            <h1>5</h1>
+          </el-card>
+        </div>
+      </el-col>
+      <!-- 3-2 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <el-card>
+            <h1>6</h1>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <!-- 4-1 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <el-card>
+            <h1>7</h1>
+
+          </el-card>
+        </div>
+      </el-col>
+      <!-- 4-2 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <el-card>
+            <h1>8</h1>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <!-- 5-1 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <el-card>
+            <h1>9</h1>
+
+          </el-card>
+        </div>
+      </el-col>
+      <!-- 5-2 -->
+      <el-col :span="12">
+        <div class="grid-content ">
+          <el-card>
+            <h1>10</h1>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+<script>
+import axios from 'axios'
+import EnergyCunsumption from '@/components/power_supply/configImg/EnergyCunsumption'
+import ReturnCircuit from '@/components/power_supply/configImg/ReturnCircuit'
+export default {
+  data () {
+    return {
+      // 报警记录
+      alertData: [
+        {
+          name: '过热',
+          time: '2021-12-26 22:00',
+          rank: '1级',
+          result: '已处理'
+        },
+        {
+          name: '嗡嗡响',
+          time: '2021-12-26 22:05',
+          rank: '2级',
+          result: '未处理'
+        }
+      ],
+      // 操作记录
+      operateData: [{
+        date: '2021-12-26 22:06',
+        name: '1号回路开启'
+      }]
+    }
+  },
+  mounted () {
+    this.getAlertData()
+    this.getOperateData()
+  },
+  methods: {
+    getAlertData () {
+      axios.get('AlertData').then(response => {
+        console.log(response.data)
+        this.alertData = response.data
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    getOperateData () {
+      axios.get('OperateData').then(response => {
+        console.log(response.data)
+        this.operateData = response.data
+      }).catch((err) => {
+        console.log(err)
+      })
+    }
+  },
+  components: {
+    EnergyCunsumption,
+    ReturnCircuit
+
+  }
+}
+</script>
+<style scoped>
+.grid-content {
+  height: 230px;
+}
+.el-card {
+  margin: 15px;
+  height: 200px;
+  width: 750px;
+}
+.sapn{
+  font-family:sans-serif;
+}
+</style>>

src/components/power_supply/configImg/ReturnCircuit.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit" ref="returncircuit"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=1').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.Ia.shift()
+        this.Ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '1#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit1.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit1"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit1',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=1').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.Ia.shift()
+        this.Ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit1')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '1#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/power_supply/configImg/ReturnCircuit10.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit10"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit?circuitId=10',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=10').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit10')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '行政办公楼'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit11.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit11"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit11',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=11').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit11')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '2#空压机'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit2.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit2"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit2',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=2').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit2')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '2#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit3.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit3"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit3',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=3').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit3')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '机修车间'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit4.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit4"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit4',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=4').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit4')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '1#空压机'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit5.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit5"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit5',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=5').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit5')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '1#进线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit6.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit6"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit6',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=6').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit6')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '#2进线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit7.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit7"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit7',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=7').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit7')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '3#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit8.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit8"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit8',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=8').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit8')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '3#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuit9.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit9"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit9',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=9').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit9')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '4#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/ReturnCircuitTest.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div style="width:1300px;height:300px"
+         id="ReturnCircuit11"></div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+const echarts = require('echarts')
+export default {
+  name: 'ReturnCircuit11',
+  data () {
+    return {
+      intervalId: null, // 定时器
+      echart: '',
+      q: ['', '', '', '', '', '', '', '', '', ''],
+      p: ['', '', '', '', '', '', '', '', '', ''],
+      cos: ['', '', '', '', '', '', '', '', '', ''],
+      ia: ['', '', '', '', '', '', '', '', '', ''],
+      time: ['', '', '', '', '', '', '', '', '', '']
+
+    }
+  },
+  methods: {
+    getData () {
+      axios.get('ReturnCircuit?circuitId=1').then(response => {
+        console.log(response.data)
+        this.p.shift()
+        this.p.push(response.data.p)
+
+        this.q.shift()
+        this.q.push(response.data.q)
+
+        this.cos.shift()
+        this.cos.push(response.data.cos)
+
+        this.ia.shift()
+        this.ia.push(response.data.ia)
+
+        this.time.shift()
+        this.time.push(response.data.time)
+        this.drawChart('ReturnCircuit11')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    drawChart (id) {
+      this.echart = echarts.init(document.getElementById(id))
+      this.echart.showLoading()
+      this.echart.setOption({
+        title: {
+          text: '1#变压器出线'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Ia',
+            type: 'line',
+            data: this.Ia
+          },
+          {
+            name: 'P',
+            type: 'line',
+            data: this.p
+          },
+          {
+            name: 'Q',
+            type: 'line',
+            data: this.q
+          },
+          {
+            name: 'Cos',
+            type: 'line',
+            data: this.cos
+          }
+        ]
+      })
+      this.echart.hideLoading()
+      var _this = this
+      window.addEventListener('resize', function () { _this.echart.resize() })
+    },
+    setTime () {
+      this.intervalId = setInterval(() => {
+        this.getData()
+      }, 2000)
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.intervalId)
+      })
+    },
+    // 计时器停止器
+    stop () {
+      clearInterval(this.intervalId)// 清除计时器
+      this.intervalId = null// 设置为null
+    }
+
+  },
+  mounted: function () {
+    this.setTime()
+  }
+
+}
+</script>
+
+<style scoped>
+</style>

src/components/power_supply/configImg/Table.vue

@@ -0,0 +1,318 @@
+<template>
+  <div id="table">
+    <h1 align="center" style="color: rgb(121, 73, 255)">供电系统组态图</h1>
+
+    <img src="@/assets/img/OPEN.svg" id="imgswitch" />
+    <el-main>
+      <table border="0" cellspacing="6" class="table1">
+        <tr>
+          <th></th>
+          <th style="width: 120px">1#变压器出线</th>
+          <th style="width: 120px">2#变压器出线</th>
+          <th style="width: 120px">机修车间</th>
+          <th style="width: 120px">1#空压机</th>
+          <th style="width: 120px">10KVI母PT</th>
+          <th style="width: 120px">1#进线</th>
+          <th style="width: 220px">10KVI母线分段</th>
+          <th style="width: 150px; right: 400px">#2进线</th>
+          <th style="width: 150px; right: 400px">10KVI母PT</th>
+          <th style="width: 150px; right: 400px">3#变压器出线</th>
+          <th style="width: 150px; right: 400px">4#变压器出线</th>
+          <th style="width: 150px; right: 400px">行政办公楼</th>
+          <th style="width: 150px; right: 400px">2#空压机</th>
+        </tr>
+        <tr align="center">
+          <td>Ia:</td>
+          <td>{{ six.transformerOut_1.Ia }}</td>
+          <td>{{ six.transformerOut_2.Ia }}</td>
+          <td>{{ six.workshop.Ia }}</td>
+          <td>{{ six.airCompressor_1.Ia }}</td>
+          <td></td>
+          <td>{{ six.out_1.Ia }}</td>
+          <td>{{ six.busSection.Ia }}</td>
+          <td>{{ six.out_2.Ia }}</td>
+          <td></td>
+          <td>{{ six.transformerOut_3.Ia }}</td>
+          <td>{{ six.transformerOut_4.Ia }}</td>
+          <td>{{ six.administration.Ia }}</td>
+          <td>{{ six.airCompressor_2.Ia }}</td>
+        </tr>
+        <tr align="center">
+          <td>P:</td>
+          <td>{{ six.transformerOut_1.p }}</td>
+          <td>{{ six.transformerOut_2.p }}</td>
+          <td>{{ six.workshop.p }}</td>
+          <td>{{ six.airCompressor_1.p }}</td>
+          <td></td>
+          <td>{{ six.out_1.p }}</td>
+          <td>{{ six.busSection.p }}</td>
+          <td>{{ six.out_2.p }}</td>
+          <td></td>
+          <td>{{ six.transformerOut_3.p }}</td>
+          <td>{{ six.transformerOut_4.p }}</td>
+          <td>{{ six.administration.p }}</td>
+          <td>{{ six.airCompressor_2.p }}</td>
+        </tr>
+        <tr align="center">
+          <td>Q:</td>
+          <td>{{ six.transformerOut_1.q }}</td>
+          <td>{{ six.transformerOut_2.q }}</td>
+          <td>{{ six.workshop.q }}</td>
+          <td>{{ six.airCompressor_1.q }}</td>
+          <td></td>
+          <td>{{ six.out_1.q }}</td>
+          <td>{{ six.busSection.q }}</td>
+          <td>{{ six.out_2.q }}</td>
+          <td></td>
+          <td>{{ six.transformerOut_3.q }}</td>
+          <td>{{ six.transformerOut_4.q }}</td>
+          <td>{{ six.administration.q }}</td>
+          <td>{{ six.airCompressor_2.q }}</td>
+        </tr>
+        <tr align="center">
+          <td>Cos:</td>
+          <td>{{ six.transformerOut_1.cos }}</td>
+          <td>{{ six.transformerOut_2.cos }}</td>
+          <td>{{ six.workshop.cos }}</td>
+          <td>{{ six.airCompressor_1.cos }}</td>
+          <td></td>
+          <td>{{ six.out_1.cos }}</td>
+          <td>{{ six.busSection.cos }}</td>
+          <td>{{ six.out_2.cos }}</td>
+          <td></td>
+          <td>{{ six.transformerOut_3.cos }}</td>
+          <td>{{ six.transformerOut_4.cos }}</td>
+          <td>{{ six.administration.cos }}</td>
+          <td>{{ six.airCompressor_2.cos }}</td>
+        </tr>
+      </table>
+    </el-main>
+    <el-row :gutter="20">
+      <el-col :offset="6" :span="6"
+        ><div class="grid-content bg-purple">
+          <table border="0" cellspacing="20" class="table2">
+            <tr align="left">
+              <td>Ua(KV):{{ four.right.Ua }}KV</td>
+              <td>Uab(KV):{{ four.right.Uab }} KV</td>
+            </tr>
+            <tr align="left">
+              <td>Ub(KV):{{ four.right.Ub }} KV</td>
+              <td>Ubc(KV):{{ four.right.Ubc }} KV</td>
+            </tr>
+            <tr align="left">
+              <td>Uc(KV):{{ four.right.Uc }} KV</td>
+              <td>Uca(KV):{{ four.right.Uca }} KV</td>
+            </tr>
+          </table>
+        </div></el-col
+      >
+      <el-col :span="6"
+        ><div class="grid-content bg-purple">
+          <table border="0" cellspacing="20" class="table3">
+            <tr align="left">
+              <td>Ua(KV):{{ four.left.Ua }} KV</td>
+              <td>Uab(KV):{{ four.left.Uab }} KV</td>
+            </tr>
+            <tr align="left">
+              <td>Ub(KV):{{ four.left.Ub }} KV</td>
+              <td>Ubc(KV):{{ four.left.Ubc }} KV</td>
+            </tr>
+            <tr align="left">
+              <td>Uc(KV):{{ four.left.Uc }}KV</td>
+              <td>Uca(KV):{{ four.left.Uca }} KV</td>
+            </tr>
+          </table>
+        </div></el-col
+      >
+      <el-col :span="6"
+        ><div class="grid-content bg-purple">
+          <table border="0" class="table4">
+            <router-link to="/power_supply/panelPage"
+              ><img border="5" src="@/assets/img/访问数据看板.png"
+            /></router-link>
+          </table></div
+      ></el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  name: "Table",
+  data() {
+    return {
+      six: {
+        transformerOut_1: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        transformerOut_2: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        workshop: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        airCompressor_1: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        out_1: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        busSection: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        out_2: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        transformerOut_3: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        transformerOut_4: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        administration: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+        airCompressor_2: {
+          p: "",
+          q: "",
+          cos: "",
+          Ia: "",
+          duration: "",
+        },
+      },
+
+      four: {
+        right: {
+          Ua: "",
+          Uab: "",
+          Ub: "",
+          Ubc: "",
+          Uc: "",
+          Uca: "",
+        },
+        left: {
+          Ua: "",
+          Uab: "",
+          Ub: "",
+          Ubc: "",
+          Uc: "",
+          Uca: "",
+        },
+      },
+    };
+  },
+  methods: {
+    getData() {
+      axios
+        .get("/table")
+        .then((response) => {
+          this.six = response.data.six;
+          this.four = response.data.four;
+        })
+        .catch(function (err) {
+          console.log(err);
+        });
+    },
+    setTime() {
+      this.intervalId = setInterval(() => {
+        this.getData();
+      }, 1000);
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        clearInterval(this.intervalId);
+      });
+    },
+  },
+  mounted() {
+    // this.setTime()
+  },
+};
+</script>
+
+<style scoped>
+.table1 {
+  left: 0px;
+  width: 99%;
+  height: 300px;
+  bottom: 150px;
+  color: white;
+  margin: 0px auto;
+}
+
+.table2 {
+  /* margin: 60px;
+  width: 550px;
+  bottom: 20px; */
+  font-size: 17px;
+  line-height: 20px;
+  color: white;
+  /* position: absolute; */
+}
+
+.table3 {
+  /* margin: 50px;
+  width: 550px;
+  right: 280px;
+  bottom: 20px; */
+  font-size: 17px;
+  line-height: 20px;
+  color: white;
+  /* position: absolute; */
+}
+
+.table4 {
+  width: 300px;
+  bottom: 0px;
+  right: 0px;
+  line-height: 10px;
+  color: white;
+  position: absolute;
+}
+
+#imgswitch {
+  width: 95%;
+  height: 50%;
+  left: 50px;
+}
+</style>

src/router/index.js

@@ -316,7 +316,18 @@ export default new Router({
                 component: () =>
                     import ('../views/power_supply/power.vue'),
                 hidden: false,
-
+                children: [
+                    {
+                        path: 'tablePage',
+                        hidden: true,
+                        component: () => import ('@/views/power_supply/configImg/TablePage.vue')
+                    },
+                    {
+                        path: 'panelPage',
+                        hidden: true,
+                        component: () => import ('@/views/power_supply/configImg/PanelPage.vue')
+                    }
+                ]
             },
             {
                 id: 1070,

src/views/power_supply/configImg/123

@@ -0,0 +1,20 @@
+      <a-row style="margin: 0 -12px">
+        <a-col
+          style="padding: 0 12px"
+          :xl="16"
+          :lg="24"
+          :md="24"
+          :sm="24"
+          :xs="24"
+        >
+        </a-col>
+        <a-col
+          style="padding: 0 12px"
+          :xl="8"
+          :lg="24"
+          :md="24"
+          :sm="24"
+          :xs="24"
+        >
+        </a-col>
+      </a-row>

src/views/power_supply/configImg/PanelPage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="com-page">
+    <panel></panel>
+  </div>
+</template>
+
+<script>
+import Panel from '@/components/power_supply/configImg/Panel'
+
+export default {
+  data () {
+    return {}
+  },
+  methods: {},
+  components: {
+    panel: Panel
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/power_supply/configImg/TablePage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="com-page">
+    <Table></Table>
+  </div>
+</template>
+
+<script>
+import Table from '@/components/power_supply/configImg/Table'
+
+export default {
+  data () {
+    return {}
+  },
+  methods: {},
+  components: {
+    Table: Table
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/power_supply/power.vue

@@ -1,27 +1,19 @@
 <template>
-  <el-tabs
-    v-model="activeName"
-    type="card"
-    @tab-click="handleClick"
-  >
-    <el-tab-pane
-      label="系统数据"
-      name="first"
-    >
+  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-tab-pane label="系统数据" name="first">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>供电系统</el-breadcrumb-item>
         <el-breadcrumb-item>数据标准</el-breadcrumb-item>
       </el-breadcrumb>
     </el-tab-pane>
-    <el-tab-pane
-      label="数据标准"
-      name="second"
-    >
+    <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
     </el-tab-pane>
+    <el-tab-pane label="组态图" name="third">
+      <router-view></router-view>
+    </el-tab-pane>
   </el-tabs>
-
 </template>
 
 
@@ -36,7 +28,11 @@ export default {
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      if (tab.name == "third") {
+        this.$router.push({
+          path: "/power_supply/tablePage",
+        });
+      }
     },
   },
   components: {