均衡供电模块

whychdw

2021-08-31 b1464e1d1d28bf23cddbe1d5a992117bf6c28adf

均衡供电模块

 src/components/ChartWrapper.vue

@@ -1,127 +1,106 @@
<template>
    <div class="chart-wrapper" :class="{'no-corner': noCorner}">
        <div class="chart-wrapper-corner top-right"></div>
        <div class="chart-wrapper-corner bottom-right"></div>
        <div class="chart-wrapper-title" v-if="title" :style="{backgroundSize:bgSize,height:titHeight}">
            <span class="title-icon">
                <span class="title-icon-content"></span>
            </span>
            {{title}}
        </div>
        <slot></slot>
    </div>
  <div class="chart-wrapper" :class="{ 'no-corner': noCorner }">
    <div class="chart-wrapper-corner top-right"></div>
    <div class="chart-wrapper-corner bottom-right"></div>
    <div
      class="chart-wrapper-title"
      v-if="title"
      :style="{ backgroundSize: bgSize, height: titHeight }"
    >
      <title-icon></title-icon>
      {{ title }}
    </div>
    <slot></slot>
  </div>
</template>

<script>
import TitleIcon from "./title-icon.vue";
export default {
    name: "ChartWrapper",
    props: {
        title: {
            type: String,
        },
        bgSize: {
            type: String,
            default: "100% 100%",
        },
        titHeight: {
            type: String,
            default: "15%",
        },
        noCorner: {
            type: Boolean,
            default: false
        },
    },
  name: "ChartWrapper",
  components: {
    TitleIcon,
  },
  props: {
    title: {
      type: String,
    },
    bgSize: {
      type: String,
      default: "100% 100%",
    },
    titHeight: {
      type: String,
      default: "15%",
    },
    noCorner: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
.chart-wrapper {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    background-image: radial-gradient(#0f339450, #3667ec40);
  position: relative;
  box-sizing: border-box;
  height: 100%;
  background-image: radial-gradient(#0f339450, #3667ec40);
}
.chart-wrapper-title {
    position: absolute;
    top: 16px;
    left: 16px;
    color: #00feff;
    font-size: 14px;
    font-weight: bold;
    -webkit-z-index: 2;
    -moz-z-index: 2;
    -ms-z-index: 2;
    -o-z-index: 2;
    z-index: 2;
}
.title-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
}
.title-icon:before,
.title-icon:after,
.title-icon-content {
    display: inline-block;
    content: "";
    width: 4px;
    vertical-align: middle;
}
.title-icon:before {
    height: 14px;
    background-color: #0f448d;
}
.title-icon-content {
    margin-left: 4px;
    height: 18px;
    background-color: #1e77b8;
}
.title-icon:after {
    margin-left: 4px;
    height: 22px;
    background-color: #2cabe3;
  position: absolute;
  top: 16px;
  left: 16px;
  color: #00feff;
  font-size: 14px;
  font-weight: bold;
  -webkit-z-index: 2;
  -moz-z-index: 2;
  -ms-z-index: 2;
  -o-z-index: 2;
  z-index: 2;
}
.chart-wrapper:before,
.chart-wrapper:after,
.chart-wrapper-corner {
    position: absolute;
    display: inline-block;
    content: " ";
  position: absolute;
  display: inline-block;
  content: " ";
}
.chart-wrapper.no-corner:before,
.chart-wrapper.no-corner:after,
.chart-wrapper.no-corner .chart-wrapper-corner{
    display: none;
.chart-wrapper.no-corner .chart-wrapper-corner {
  display: none;
}
.chart-wrapper:before {
    left: 0;
    top: 0;
    border-top: 2px solid #00feff;
    border-left: 2px solid #00feff;
  left: 0;
  top: 0;
  border-top: 2px solid #00feff;
  border-left: 2px solid #00feff;
}
.chart-wrapper:after {
    left: 0;
    bottom: 0;
    border-bottom: 2px solid #00feff;
    border-left: 2px solid #00feff;
  left: 0;
  bottom: 0;
  border-bottom: 2px solid #00feff;
  border-left: 2px solid #00feff;
}
.chart-wrapper-corner.top-right {
    top: 0;
    right: 0;
    border-top: 2px solid #00feff;
    border-right: 2px solid #00feff;
  top: 0;
  right: 0;
  border-top: 2px solid #00feff;
  border-right: 2px solid #00feff;
}
.chart-wrapper-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #00feff;
    border-right: 2px solid #00feff;
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #00feff;
  border-right: 2px solid #00feff;
}
.chart-wrapper-content {
    position: relative;
    top: 30px;
    height: calc(100% - 30px);
    box-sizing: border-box;
  position: relative;
  top: 30px;
  height: calc(100% - 30px);
  box-sizing: border-box;
}
</style>
</style>

 src/components/FlexBox.vue

@@ -1,128 +1,166 @@
<template>
    <div class="flex-box">
        <div class="flex-box-border border-top-left"></div>
        <div class="flex-box-border border-top-right"></div>
        <div class="flex-box-border border-bottom-left"></div>
        <div class="flex-box-border border-bottom-right"></div>
        <div class="flex-box-header" v-if="!noHeader" :class="{'no-header-bg':noHeaderBg}">
            <flex-layout direction="row" no-bg>
                <div slot="header">
                    <i class="iconfont el-icon-fold"></i>
                    <span class="header-text">{{ title }}</span>
                </div>
                <div class="flex-header-tools">
                    <slot name="tools"></slot>
                </div>
            </flex-layout>


  <div class="flex-box" :class="sizeClass">
    <div class="flex-box-border border-top-left"></div>
    <div class="flex-box-border border-top-right"></div>
    <div class="flex-box-border border-bottom-left"></div>
    <div class="flex-box-border border-bottom-right"></div>
    <div
      class="flex-box-header"
      v-if="!noHeader"
      :class="{ 'no-header-bg': noHeaderBg }"
    >
      <flex-layout direction="row" no-bg>
        <div slot="header">
          <title-icon
            v-if="type == 'title'"
            :size="size"
            class="title-icon-position"
          ></title-icon>
          <i v-else class="iconfont el-icon-fold"></i>
          <span class="header-text">{{ title }}</span>
        </div>
        <div class="flex-box-body">
            <slot></slot>
        <div class="flex-header-tools">
          <slot name="tools"></slot>
        </div>
        <div class="flex-box-footer">
            <slot name="footer"></slot>
        </div>
      </flex-layout>
    </div>
    <div class="flex-box-body">
      <slot></slot>
    </div>
    <div class="flex-box-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import titleIcon from "@/components/title-icon";
export default {
    name: "FlexBox",
    props: {
        title: {
            type: String,
            default: "",
        },
        noHeader: {
            type: Boolean,
            default: false,
        },
        noHeaderBg: {
            type: Boolean,
            default: false
        },
  name: "FlexBox",
  components: {
    titleIcon,
  },
  props: {
    type: {
      type: String,
      default: "",
    },
}
    title: {
      type: String,
      default: "",
    },
    noHeader: {
      type: Boolean,
      default: false,
    },
    noHeaderBg: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "",
    },
  },
  computed: {
    sizeClass() {
      let size = this.size;
      let result = "";
      switch (size) {
        case "mini":
          result = "flex-box-mini";
          break;
      }
      return result;
    },
  },
};
</script>

<style scoped>
.flex-box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-box-border {
    position: absolute;
    display: inline-block;
    z-index: 9;
  position: absolute;
  display: inline-block;
  z-index: 9;
}
.flex-box.flex-box-mini > .flex-box-border {
  width: 8px;
  height: 8px;
}

.flex-box-border.border-top-left {
    top: 0;
    left: 0;
    border-top: 2px solid #00FEFF;
    border-left: 2px solid #00FEFF;
  top: 0;
  left: 0;
  border-top: 2px solid #00feff;
  border-left: 2px solid #00feff;
}

.flex-box-border.border-top-right {
    top: 0;
    right: 0;
    border-top: 2px solid #00FEFF;
    border-right: 2px solid #00FEFF;
  top: 0;
  right: 0;
  border-top: 2px solid #00feff;
  border-right: 2px solid #00feff;
}

.flex-box-border.border-bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #00FEFF;
    border-left: 2px solid #00FEFF;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #00feff;
  border-left: 2px solid #00feff;
}

.flex-box-border.border-bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #00FEFF;
    border-right: 2px solid #00FEFF;
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #00feff;
  border-right: 2px solid #00feff;
}

.flex-box-header {
    position: relative;
    padding: 12px 0;
    font-size: 14px;
    color: #00fefe;
    font-weight: bold;
  position: relative;
  padding: 12px 0;
  font-size: 14px;
  color: #00fefe;
  font-weight: bold;
}

.flex-box-header.no-header-bg {
    background: none;
    padding: 8px 0;
  background: none;
  padding: 8px 0;
}

.flex-header-tools {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 9;
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 9;
}

.flex-box-header .iconfont {
    font-size: 10px;
    margin-right: 8px;
    margin-left: 16px;
    transform: rotate(90deg);
  font-size: 10px;
  margin-right: 8px;
  margin-left: 16px;
  transform: rotate(90deg);
}

.header-text {
    font-weight: bold;
  font-weight: bold;
}

.flex-box-body {
    position: relative;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
  position: relative;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
.title-icon-position {
  margin-left: 16px;
}
</style>

 src/components/title-icon.vue

New file
@@ -0,0 +1,77 @@
<template>
  <span class="title-icon" :class="sizeClass">
    <span class="title-icon-content"></span>
  </span>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    sizeClass() {
      let size = this.size;
      let result = "";
      switch (size) {
        case "mini":
          result = "title-icon-mini";
          break;
      }
      return result;
    },
  },
};
</script>

<style scoped>
.title-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
}
.title-icon:before,
.title-icon:after,
.title-icon-content {
  display: inline-block;
  content: "";
  width: 4px;
  vertical-align: middle;
}
.title-icon:before {
  height: 14px;
  background-color: #0f448d;
}
.title-icon-content {
  margin-left: 4px;
  height: 18px;
  background-color: #1e77b8;
}
.title-icon:after {
  margin-left: 4px;
  height: 22px;
  background-color: #2cabe3;
}

.title-icon.title-icon-mini {
  width: 25px;
  height: 20px;
}
.title-icon.title-icon-mini::before {
  height: 8px;
}
.title-icon.title-icon-mini > .title-icon-content {
  margin-left: 2px;
  height: 12px;
}
.title-icon.title-icon-mini::after {
  margin-left: 2px;
  height: 16px;
}
</style>

 src/pages/dataTest/components/balance-supply-module.vue

New file
@@ -0,0 +1,113 @@
<template>
  <div class="module-wrapper">
    <el-row :gutter="layout.gutter" class="full-height">
      <el-col :span="layout.left" class="full-height">
        <layout-box>
          <div class="layout-content">
            <flex-layout no-bg>
              <div class="layout-content-top" slot="header">
                <flex-box no-header size="mini">
                  <strip-box
                    class="strip-box-position"
                    title="版本号"
                  ></strip-box>
                </flex-box>
              </div>
              <flex-box type="title" title="输出电压" size="mini"></flex-box>
            </flex-layout>
          </div>
        </layout-box>
      </el-col>
      <el-col :span="layout.right" class="full-height">
        <layout-box>
          <div class="layout-content">
            <flex-layout no-bg>
              <div class="layout-content-top" slot="header">
                <flex-box no-header size="mini">
                  <strip-box
                    class="strip-box-position"
                    title="温度(℃)"
                    unit="℃"
                  ></strip-box>
                </flex-box>
              </div>
              <flex-box
                type="title"
                title="总电流(A)"
                size="mini"
                class="split-moudle split-module-top"
              >
              </flex-box>
              <flex-box
                type="title"
                title="总电压(V)"
                size="mini"
                class="split-moudle split-module-bottom"
              >
              </flex-box>
            </flex-layout>
          </div>
        </layout-box>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import layoutBox from "./layout-box.vue";
import FlexBox from "@/components/FlexBox";
import StripBox from "./strip-box.vue";
export default {
  components: {
    layoutBox,
    FlexBox,
    StripBox,
  },
  props: {
    devId: {
      // 设备id
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      layout: {
        gutter: 16,
        left: 14,
        right: 10,
      },
    };
  },
  methods: {},
  computed: {},
  mounted: {},
  destroyed: {},
};
</script>

<style scoped>
.module-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.layout-content {
  box-sizing: border-box;
  padding: 12px 16px 16px 16px;
  height: 100%;
}
.layout-content-top {
  height: 80px;
  margin-bottom: 16px;
}
.split-moudle {
  height: calc(50% - 8px);
}
.split-module-top {
  margin-bottom: 16px;
}
.strip-box-position {
  margin-top: 20px;
}
</style>

 src/pages/dataTest/components/label-box.vue

New file
@@ -0,0 +1,33 @@
<template>
  <div class="label-box">{{ value }} {{ unit }}</div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0,
    },
    unit: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.label-box {
  display: inline-block;
  border: 1px solid #00feff;
  padding: 2px 12px;
  font-size: 14px;
  color: #f7bd45;
  border-radius: 4px;
  text-align: center;
}
</style>

 src/pages/dataTest/components/layout-box.vue

New file
@@ -0,0 +1,22 @@
<template>
  <div class="layout-box">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
.layout-box {
  border: 1px solid #00feff;
  background: #02165b80;
  box-sizing: border-box;
  height: 100%;
}
</style>

 src/pages/dataTest/components/strip-box.vue

New file
@@ -0,0 +1,56 @@
<template>
  <div class="strip-box">
    <div class="strip-box-title">
      <title-icon size="mini"></title-icon>
      <span>{{ title }}</span>
    </div>
    <div class="strip-box-value">
      <label-box :value="value" :unit="unit"></label-box>
    </div>
  </div>
</template>

<script>
import TitleIcon from "@/components/title-icon.vue";
import labelBox from "./label-box.vue";
export default {
  components: {
    labelBox,
    TitleIcon,
  },
  props: {
    title: {
      type: String,
      default: "名称",
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    unit: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.strip-box {
  display: flex;
  background-color: #4ba1fa20;
  box-sizing: border-box;
  padding: 8px 32px 8px 16px;
}
.strip-box-title {
  flex: 1;
  text-align: left;
}
.strip-box-title > span {
  font-size: 14px;
  color: #01ffff;
}
</style>

 src/pages/dataTest/realTime.vue

Diff too large