提交内容

whychdw

2021-01-09 8aaa1d4deb6f764f93a9ee49f9b4be7620e024e1

提交内容

 src/components/CalendarTime.vue

@@ -1,187 +1,106 @@
<template>
    <div class="time-wrapper" :class="{'mini-size':size=='mini'}">
        <div class="time-icon"><i class="iconfont el-icon-1rili_huaban12"></i></div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">0</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">0</div>
            </div>
        </div>
        <span class="time-text">年</span>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">1</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <span class="time-text">月</span>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">1</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <span class="time-text">日</span>
        <div class="time-content time-division">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <span class="time-text">时</span>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <span class="time-text">分</span>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <div class="time-content">
            <div class="time-number-wrapper">
                <div class="time-number">2</div>
            </div>
        </div>
        <span class="time-text">秒</span>
    </div>
  <div class="time-wrapper" :class="{'mini-size':size=='mini'}">
    <div class="time-icon"><i class="iconfont el-icon-1rili_huaban12"></i></div>
    <time-number></time-number>
    <time-number></time-number>
    <time-number></time-number>
    <time-number></time-number>
    <span class="time-text">年</span>
    <time-number></time-number>
    <time-number></time-number>
    <span class="time-text">月</span>
    <time-number></time-number>
    <time-number></time-number>
    <span class="time-text">日</span>
    <span class="time-division"></span>
    <time-number></time-number>
    <time-number></time-number>
    <span class="time-text">时</span>
    <time-number></time-number>
    <time-number></time-number>
    <span class="time-text">分</span>
    <time-number></time-number>
    <time-number></time-number>
    <span class="time-text">秒</span>
  </div>
</template>

<script>
import TimeNumber from "@/pages/dataMager/components/TimeNumber";

export default {
    name: "CalendarTime",
    props: {
        date: {
            type: String,
            default: ""
        },
        size: {
            type: String,
            default: ""
        }
  name: "CalendarTime",
  components: {
    TimeNumber
  },
  props: {
    date: {
      type: String,
      default: "2021-01-01 00:00:00"
    },
    data() {
        return {}
    },
    size: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  computed: {
    timerVals() {
      let sTimer = new Date(this.date).format("yyyy-MM-dd hh:mm:ss");
      let aTimer = sTimer.split(" ");
      console.log(aTimer);
      return {
        year: [],
        month: [],
        day: [],
        hour: [],
        minute: [],
        second: []
      }
    }
  }
}
</script>

<style scoped>
.time-wrapper {
    white-space: nowrap;
  white-space: nowrap;
}

.time-icon {
    display: inline-block;
    padding: 12px;
    background-color: #00feff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: top;
  display: inline-block;
  padding: 12px;
  background-color: #00feff;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: top;
}

.time-icon i {
    font-size: 28px;
    color: #041F6C;
  font-size: 28px;
  color: #041F6C;
}
.time-content {
    display: inline-block;
    margin-left: 8px;
}

.time-division {
    margin-left: 32px;
}
.time-wrapper {
    display: inline-block;
  margin-left: 32px;
}

.time-number-wrapper {
    position: relative;
}

.time-number-wrapper:before,
.time-number-wrapper:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    z-index: 0;
}

.time-number-wrapper:before {
    top: 0;
    background-color: #29A0C5;
}

.time-number-wrapper:after {
    bottom: 0;
    background-color: #40C3F3;
}

.time-number {
    position: relative;
    padding: 4px 4px;
    font-size: 36px;
    color: #FFF100;
    font-weight: bold;
    text-align: center;
    z-index: 1;
}
.time-text {
    font-size: 14px;
    color: #00fefe;
    margin-left: 8px;
    vertical-align: middle;
  font-size: 14px;
  color: #00fefe;
  margin-left: 8px;
  vertical-align: middle;
}

/* mini-size */
.mini-size .time-icon {
    padding: 8px 8px 8px 8px;
    margin-right: 4px;
  padding: 8px 8px 8px 8px;
  margin-right: 4px;
}

.mini-size .time-icon i {
    font-size: 24px;
}
.mini-size .time-content {
    margin-left: 6px;
}
.mini-size .time-number {
    padding: 3px 3px;
    font-size: 24px;
}
.mini-size .time-division {
    margin-left: 24px;
  font-size: 24px;
}
</style>

 src/components/chart/LineChart.vue

@@ -69,7 +69,6 @@
        },
        setOption(opt) {
            let option = this.getOption(opt);
            console.log(option);
            // 清理画布
            this.$G.chartManage.get(this.id).clear();
            // 设置配置项

 src/pages/dataMager/components/ChargerStatusTabPane.vue

@@ -99,6 +99,13 @@
      default: ""
    },
  },
  watch: {
    "$store.state.theme.collapse"() {
      this.$nextTick(() => {
        this.resize();
      });
    },
  },
  data() {
    return {
      chargerVol: {

 src/pages/dataMager/components/IsolatingDeviceTabPane.vue

@@ -182,6 +182,13 @@
            default: ""
        }
    },
    watch: {
      "$store.state.theme.collapse"() {
        this.$nextTick(() => {
          this.resize();
        });
      },
    },
    data() {
        let resLineConfig = {
            axisLineColor: "#125984",

 src/pages/dataMager/components/TimeNumber.vue

@@ -1,13 +1,63 @@
<template>
$END$
  <div class="time-content">
    <div class="time-number-wrapper">
      <div class="time-number">2</div>
    </div>
  </div>
</template>

<script>
export default {
name: "TimeNumber"
  name: "TimeNumber"
}
</script>

<style scoped>
.time-content {
  display: inline-block;
  margin-left: 8px;
}

.time-number-wrapper {
  position: relative;
}

.time-number-wrapper:before,
.time-number-wrapper:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  z-index: 0;
}

.time-number-wrapper:before {
  top: 0;
  background-color: #29A0C5;
}

.time-number-wrapper:after {
  bottom: 0;
  background-color: #40C3F3;
}

.time-number {
  position: relative;
  padding: 4px 4px;
  font-size: 36px;
  color: #FFF100;
  font-weight: bold;
  text-align: center;
  z-index: 1;
}
.mini-size .time-content {
  margin-left: 6px;
}

.mini-size .time-number {
  padding: 3px 3px;
  font-size: 24px;
}
</style>

 src/pages/dataMager/components/paramModule.vue

@@ -38,8 +38,8 @@
    align-items: center;
}
.param-right {
    width: 72px;
    height: 72px;
    width: 100px;
    height: 100px;
    border: 2px solid #00fefe;
    border-radius: 50%;
    display: flex;
@@ -52,10 +52,12 @@
    position: absolute;
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    left: 15px;
    top: 15px;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
  margin-left: -30px;
  margin-top: -30px;
    border: 1px dashed #00fefe;
    border-radius: 50%;
}
@@ -65,18 +67,20 @@
    display: block;
    width: 26px;
    height: 26px;
    left: 20px;
    top: 20px;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
    border: 1px solid #00fefe;
    border-radius: 50%;
}
.param-right .rotate {
    width: 60px;
    height: 60px;
    width: 50px;
    height: 50px;
    border: 6px solid #fa884c;
    position: absolute;
    left: 4px;
    top: 4px;
    left: 24px;
    top: 24px;
    -webkit-clip-path: circle(50% at 100% 0%);
    border-radius: 50%;
    /*-webkit-animation: rotate 2s infinite linear;*/
@@ -103,8 +107,8 @@
    }
}
.param-left {
    width: 140px;
    height: 62px;
    width: 160px;
    height: 70px;
    background-color: #00fefe;
    border-radius: 0 30px 30px 0;
    border: 1px solid #fa884c;
@@ -123,7 +127,7 @@
.param-left .dataCon {
  display: inline-block;
  min-width: 50px;
    font-size: 13px;
    font-size: 22px;
  text-align: center;
    color: #fa884c;
    padding: 4px;

 src/pages/dataMager/realTimeData.vue

@@ -1,28 +1,28 @@
<template>
    <content-box :title="fullStationName" class="mgl8">
        <flex-layout>
            <div class="flex-page-content">
                <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs"
                         @tab-click="tabsChange">
                    <el-tab-pane label="模拟量" name="analog">
                        <analog-tab-pane ref="analog" :name="acTabs" :info="info"></analog-tab-pane>
                    </el-tab-pane>
                    <el-tab-pane label="告警量" name="warn">
                        <warn-tab-pane :name="acTabs" :info="info"></warn-tab-pane>
                    </el-tab-pane>
                    <el-tab-pane label="状态量" name="state">
                        <state-tab-pane :name="acTabs" :info="info"></state-tab-pane>
                    </el-tab-pane>
<!--                    <el-tab-pane label="绝缘装置" name="isolatingDevice">-->
<!--                        <isolating-device-tab-pane ref="isolatingDevice" :name="acTabs"></isolating-device-tab-pane>-->
<!--                    </el-tab-pane>-->
<!--                    <el-tab-pane label="充电机状态" name="chargerStatus">-->
<!--                        <charger-status-tab-pane ref="chargerStatus" :name="acTabs"></charger-status-tab-pane>-->
<!--                    </el-tab-pane>-->
                </el-tabs>
            </div>
        </flex-layout>
    </content-box>
  <content-box :title="fullStationName" class="mgl8">
    <flex-layout>
      <div class="flex-page-content">
        <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs"
                 @tab-click="tabsChange">
          <el-tab-pane label="模拟量" name="analog">
            <analog-tab-pane ref="analog" :name="acTabs" :info="info"></analog-tab-pane>
          </el-tab-pane>
          <el-tab-pane label="告警量" name="warn">
            <warn-tab-pane :name="acTabs" :info="info"></warn-tab-pane>
          </el-tab-pane>
          <el-tab-pane label="状态量" name="state">
            <state-tab-pane :name="acTabs" :info="info"></state-tab-pane>
          </el-tab-pane>
          <!--                    <el-tab-pane label="绝缘装置" name="isolatingDevice">-->
          <!--                        <isolating-device-tab-pane ref="isolatingDevice" :name="acTabs"></isolating-device-tab-pane>-->
          <!--                    </el-tab-pane>-->
          <!--                    <el-tab-pane label="充电机状态" name="chargerStatus">-->
          <!--                        <charger-status-tab-pane ref="chargerStatus" :name="acTabs"></charger-status-tab-pane>-->
          <!--                    </el-tab-pane>-->
        </el-tabs>
      </div>
    </flex-layout>
  </content-box>
</template>
<script>
import AnalogTabPane from "@/pages/dataMager/components/AnalogTabPane";
@@ -35,166 +35,171 @@
import ContentBox from "@/components/ContentBox";

export default {
    components: {
        ContentBox,
        // ChargerStatusTabPane,
        // IsolatingDeviceTabPane,
        StateTabPane,
        WarnTabPane,
        AnalogTabPane,
    },
    data() {
        return {
            acTabs: 'analog',
            info: getPowerInfo(),
            socket: "",
            isOpen: false,
            powerInfo: {
                powerDeviceId: 0,
                stationId: 0,
                stationName: "",
                stationName1: "",
                stationName2: "",
                stationName3: "",
                stationName4: " ",
                stationName5: "",
            },
        }
    },
    watch: {
        "$route.params.powerDeviceId"(powerDeviceId) {
            this.$nextTick(() => {
                this.getPowerInfo(powerDeviceId);
            });
        },
    },
    methods: {
        getPowerInfo(powerDeviceId) {
            this.powerInfo = powerDeviceId;
            this.$apis.dataMager.powerMager.getInfoById({
                powerDeviceId: powerDeviceId
            }).then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    this.powerInfo = rs.data;
                } else {
                    this.powerInfo = {
                        powerDeviceId: 0,
                        stationId: 0,
                        stationName: "",
                        stationName1: "",
                        stationName2: "",
                        stationName3: "",
                        stationName4: " ",
                        stationName5: "",
                    };
                }
                // 初始化WebSocket
                this.close();
                this.initSocket();
            }).catch(error => {
                console.log(error);
            });
        },
        tabsChange() {
            // 重置图表的大小
            this.resize();
        },
        resize() {
            switch (this.acTabs) {
                case "analog":
                    this.$refs.analog.resize();
                    break;
                case "isolatingDevice":
                    this.$refs.isolatingDevice.resize();
                    break;
                case "chargerStatus":
                    this.$refs.chargerStatus.resize();
                    break;
            }
        },
        initSocket() {
            let isInit = this.acTabs == "analog" || this.acTabs == "warn" || this.acTabs == "state";
            if (isInit) {
                // 未被初始化初始化
                if (!this.isOpen) {
                    const wsUri = getWsUrl("websocket/powerACDCData", 55000);
                    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;
                }
            } else {
                this.close();
            }
        },
        onMessage(res) {
            let rs = JSON.parse(res.data);
            console.log(rs);
            if (rs.code == 1 && rs.data.length != 0) {
                this.info = rs.data[0];
            } else {
                this.info = getPowerInfo();
            }
        },
        onOpen() {
            // 标识正在运行
            this.isOpen = true;
            // 向后台发送请求数据
            this.socket.send(this.powerInfo.powerDeviceId);
        },
        onError() {

        },
        close() {
            // 关闭websocket
            if (this.isOpen) {
                // 打印关闭信息
                console.log("关闭电源实时监控WebSocket");
                this.isOpen = false;
                this.socket.close();
            }
        },
    },
    computed: {
        fullStationName() {
            let powerInfo = this.powerInfo;
            if (powerInfo.powerDeviceId) {
                return powerInfo.stationName1 + "-" + powerInfo.stationName2
                    + "-" + powerInfo.stationName5 + "-" + powerInfo.stationName3 + "-"+powerInfo.powerDeviceName;
                return "未知站点名称";
            } else {
                return "未知站点名称";
            }
        }
    },
    mounted() {
        // 获取电源信息
        let powerDeviceId = this.$route.params.powerDeviceId;
        if (powerDeviceId) {
            this.getPowerInfo(powerDeviceId);
        }
        // 改变大小
        this.resize();
        // 窗口大小改变重置内容大小
        let self = this;
        window.onresize = function () {
            self.resize();
        }
    },
    destroyed() {
        window.onresize = null;
        this.close();
  components: {
    ContentBox,
    // ChargerStatusTabPane,
    // IsolatingDeviceTabPane,
    StateTabPane,
    WarnTabPane,
    AnalogTabPane,
  },
  data() {
    return {
      acTabs: 'analog',
      info: getPowerInfo(),
      socket: "",
      isOpen: false,
      powerInfo: {
        powerDeviceId: 0,
        stationId: 0,
        stationName: "",
        stationName1: "",
        stationName2: "",
        stationName3: "",
        stationName4: " ",
        stationName5: "",
      },
    }
  },
  watch: {
    "$route.params.powerDeviceId"(powerDeviceId) {
      this.$nextTick(() => {
        this.getPowerInfo(powerDeviceId);
      });
    },
    "$store.state.theme.collapse"() {
      this.$nextTick(() => {
        this.resize();
      });
    },
  },
  methods: {
    getPowerInfo(powerDeviceId) {
      this.powerInfo = powerDeviceId;
      this.$apis.dataMager.powerMager.getInfoById({
        powerDeviceId: powerDeviceId
      }).then(res => {
        let rs = JSON.parse(res.data.result);
        if (rs.code == 1) {
          this.powerInfo = rs.data;
        } else {
          this.powerInfo = {
            powerDeviceId: 0,
            stationId: 0,
            stationName: "",
            stationName1: "",
            stationName2: "",
            stationName3: "",
            stationName4: " ",
            stationName5: "",
          };
        }
        // 初始化WebSocket
        this.close();
        this.initSocket();
      }).catch(error => {
        console.log(error);
      });
    },
    tabsChange() {
      // 重置图表的大小
      this.resize();
    },
    resize() {
      switch (this.acTabs) {
        case "analog":
          this.$refs.analog.resize();
          break;
        case "isolatingDevice":
          this.$refs.isolatingDevice.resize();
          break;
        case "chargerStatus":
          this.$refs.chargerStatus.resize();
          break;
      }
    },
    initSocket() {
      let isInit = this.acTabs == "analog" || this.acTabs == "warn" || this.acTabs == "state";
      if (isInit) {
        // 未被初始化初始化
        if (!this.isOpen) {
          const wsUri = getWsUrl("websocket/powerACDCData", 55000);
          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;
        }
      } else {
        this.close();
      }
    },
    onMessage(res) {
      let rs = JSON.parse(res.data);
      if (rs.code == 1 && rs.data.length != 0) {
        this.info = rs.data[0];
      } else {
        this.info = getPowerInfo();
      }
    },
    onOpen() {
      // 标识正在运行
      this.isOpen = true;
      // 向后台发送请求数据
      this.socket.send(this.powerInfo.powerDeviceId);
    },
    onError() {

    },
    close() {
      // 关闭websocket
      if (this.isOpen) {
        // 打印关闭信息
        console.log("关闭电源实时监控WebSocket");
        this.isOpen = false;
        this.socket.close();
      }
    },
  },
  computed: {
    fullStationName() {
      let powerInfo = this.powerInfo;
      if (powerInfo.powerDeviceId) {
        return powerInfo.stationName1 + "-" + powerInfo.stationName2
            + "-" + powerInfo.stationName5 + "-" + powerInfo.stationName3 + "-" + powerInfo.powerDeviceName;
        return "未知站点名称";
      } else {
        return "未知站点名称";
      }
    }
  },
  mounted() {
    // 获取电源信息
    let powerDeviceId = this.$route.params.powerDeviceId;
    if (powerDeviceId) {
      this.getPowerInfo(powerDeviceId);
    }
    // 改变大小
    this.resize();
    // 窗口大小改变重置内容大小
    let self = this;
    window.onresize = function () {
      self.resize();
    }
  },
  destroyed() {
    window.onresize = null;
    this.close();
  }
}
</script>
<style scoped>
.mgl8 {
    margin-left: 8px;
  margin-left: 8px;
}

.flex-page-content {
    padding: 4px 4px 0 4px;
    box-sizing: border-box;
  padding: 4px 4px 0 4px;
  box-sizing: border-box;
}
</style>

 src/pages/dataTest/movingRingSystem/HomeList.vue

@@ -92,6 +92,8 @@
            }
        },
        toggleChange() {
            // 触发折叠/展开
            this.$store.dispatch("theme/changeCollapse");
            this.$emit('toggleChange');
        },
        // 查询机房的信息

 src/pages/dataTest/movingRingSystem/chargerStatus.vue

@@ -55,9 +55,6 @@
            stationName5: "",
          };
        }
        // 初始化WebSocket
        this.close();
        this.initSocket();
      }).catch(error => {
        console.log(error);
      });

 src/pages/dataTest/movingRingSystem/isolatingDevice.vue

@@ -56,9 +56,6 @@
            stationName5: "",
          };
        }
        // 初始化WebSocket
        this.close();
        this.initSocket();
      }).catch(error => {
        console.log(error);
      });

 src/pages/dataTest/movingRingSystem/realTime.vue

@@ -387,6 +387,12 @@
                this.getBattGroupInfo(BattGroupId);
            });
        },
        "$store.state.theme.collapse"() {
          console.log(123);
          this.$nextTick(()=>{
            this.resize();
          });
        },
    },
    data() {
        let permits = this.$store.state.user.permits;

 src/pages/dataTest/realTime.vue

@@ -286,7 +286,12 @@
        if(!val && this.acTabs == "niBianInfoTab") {
          this.acTabs = "eleLine";
        }
      }
      },
      "$store.state.theme.collapse"() {
        this.$nextTick(()=>{
          this.resize();
        });
      },
        },
        data() {
            let permits = this.$store.state.user.permits;

 src/store/modules/theme.js

@@ -5,6 +5,7 @@
            themeName: "",
            fontTimes: 1,
            close: 0,
            collapse: 0,
        }
    },
    mutations: {
@@ -16,6 +17,9 @@
        },
        changeClose(state) {
            state.close = Math.random();
        },
        changeCollapse(state) {
            state.collapse = Math.random();
        }
    },
    actions: {
@@ -27,6 +31,9 @@
        },
        changeClose(context) {
            context.commit('changeClose');
        },
        changeCollapse(context) {
            context.commit("changeCollapse")
        }
    },
}