可视化编辑模块功能提交

whyczyk

2021-03-09 7d282eb425e040f84b29b16a03316e9ce249a58c

可视化编辑模块功能提交

 src/assets/css/basic.css

@@ -135,7 +135,6 @@
}

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

@@ -150,7 +149,6 @@
}

body {
    background: #171b22 !important;
    -webkit-font-smoothing: antialiased;
}


 src/assets/images/bigscreenTitle1.png

 src/assets/images/bigscreenTitle2.png

 src/assets/images/modular-AbeamProChart.png

 src/assets/images/modular-ImgPieChart.png

 src/assets/images/modular-TriangleBarChart.png

 src/assets/images/modular-latticeBar.png

 src/components/screenTitle.vue

New file
@@ -0,0 +1,32 @@
<template>
  <div class="screenTitle" :style="'background-image:url('+bgImg+')'">
    {{title}}
  </div>
</template>

<script>
  export default {
    props: ['title', 'bgImg'],
    data() {
      return {

      }
    },
  }
</script>

<style scoped>
  .screenTitle {
    color: #00feff;
    text-align: center;
    width: 100%;
    height: 52px;
    line-height: 52px;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    background-size: auto 100%;
    background-position: 50% 0;
    background-repeat: no-repeat;
  }
</style>

 src/components/settingModular.vue

File was renamed from src/pages/settingPage.vue
@@ -1,5 +1,5 @@
<template>
  <div class="pageWarp">
  <div class="pageWarp" ref="pageWarp">
    <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" @dragging="onDrag" @resizing="onResize"
      @refLineParams="getRefLineParams" :parent="true" :debug="false" :snap="true" :snapTolerance="5"
      style="transition: none; will-change: transform;" @activated="onActived(item)" v-for="(item,i) in layOut.children"
@@ -57,13 +57,14 @@
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  import latticeBar from '../components/charts/latticeBar.vue'
  import ImgPieChart from '../components/charts/imgPieChart.vue';
  import TriangleBarChart from '../components/charts/triangleBarChart.vue';
  import AbeamProChart from '../components/charts/abeamProChart.vue';
  import latticeBar from './charts/latticeBar.vue'
  import ImgPieChart from './charts/imgPieChart.vue';
  import TriangleBarChart from './charts/triangleBarChart.vue';
  import AbeamProChart from './charts/abeamProChart.vue';
  // import ProssPieChart from '../components/charts/prossPieChart.vue';

  export default {
    props: ['layOut'],
    components: {
      VueDraggableResizable,
      LayoutBox,
@@ -76,84 +77,6 @@
    data() {
      return {
        draggableActived: null,
        layOut: {
          name: '',
          id: '',
          children: [{
            name: '放电和充电电流',
            id: 1,
            w: 340,
            h: 210,
            x: 0,
            y: 0,
            type: 'latticeBar',
            setData: {
              xData: ['高告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房数比例'],
              series: [{
                name: '放电',
                data: [120, 220, 150, 80, 70],
                color: '#90ec7d'
              }, {
                name: '充电',
                data: [80, 160, 120, 310, 50],
                color: '#ff6b6b'
              }]
            }
          }, {
            name: '整流器',
            id: 2,
            w: 340,
            h: 210,
            x: 360,
            y: 0,
            type: 'ImgPieChart',
            setData: {
              data: [{
                  value: 30,
                  name: '整流器交流异常'
                },
                {
                  value: 22,
                  name: '整流器过流'
                },
                {
                  value: 120,
                  name: '总故障'
                },
                {
                  value: 50,
                  name: '整流器欠压'
                },
              ]
            }
          }, {
            name: '电池组',
            id: 3,
            w: 340,
            h: 210,
            x: 720,
            y: 0,
            type: 'TriangleBarChart',
            setData: {
              xData: ['熔断', '电压低', '下电', '充电过流'],
              data: [35, 72, 55, 45]
            }
          }, {
            name: '电池状态',
            id: 4,
            w: 340,
            h: 210,
            x: 1080,
            y: 0,
            type: 'AbeamProChart',
            setData: {
              yData: ['浮充数量', '放电数量', '充电数量'],
              color: ['#f58881', '#b4d465', '#ffcb29'],
              bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
              data: [32, 15, 20]
            }
          }]
        },
        vLine: [],
        hLine: [],
        rightMenuVisible: false,
@@ -224,17 +147,8 @@
      //模块右键菜单打开
      openMenu(clickItem, e) {
        this.clickItem = clickItem;
        const menuMinWidth = 105
        const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
        const offsetWidth = this.$el.offsetWidth // container width
        const maxLeft = offsetWidth - menuMinWidth // left boundary
        const left = e.clientX - offsetLeft // margin right
        if (left > maxLeft) {
          this.contextmenuLeft = maxLeft
        } else {
          this.contextmenuLeft = left
        }
        this.contextmenuTop = e.clientY - 60
        this.contextmenuLeft = e.clientX
        this.contextmenuTop = e.clientY
        this.rightMenuVisible = true
      },
      //模块右键菜单关闭
@@ -251,7 +165,13 @@
      },
      // 加载布局数据
      loadLayout() {
        let width = this.$refs.pageWarp.clientWidth;
        let height = this.$refs.pageWarp.clientHeight;
        this.layOut.children.map((item) => {
          item.x *= width;
          item.y *= height;
          item.w *= width;
          item.h *= height;
          let nowChart = `chart${item.id}`;
          this.$refs[nowChart][0].setData(item.setData);
          this.$refs[nowChart][0].resize();
@@ -264,9 +184,11 @@
<style scoped>
  .pageWarp {
    width: 100%;
    height: 100vh;
    height: calc(100% - 52px);
    background-color: #031D67;
    background-image: url("../assets/images/bg-box.png");
    background-size: 100% 100%;
    padding: 10px;
  }

  .chartCon {

 src/components/streamerNav.vue

@@ -225,6 +225,6 @@
    font-size: 18px;
    text-align: left;
    cursor: pointer;
    padding: 5px 52px 5px;
    padding: 10px 52px 5px;
  }
</style>

 src/pages/design.vue

New file
@@ -0,0 +1,340 @@
<template>
  <div class="design">
    <div class="slider-card">
      <div class="editCon">
        <div class="title">
          全部可用组件
          <div class="tool">
            <el-tooltip class="item" effect="dark" content="保存" placement="right">
              <el-button type="primary" icon="el-icon-receiving" circle size="mini"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="modolCon">
          <el-tabs tab-position="left" class="tab">
            <el-tab-pane>
              <span slot="label" class="label">
                <el-tooltip class="item" effect="dark" content="头部组件" placement="right">
                  <i class="icon el-icon-s-platform"></i>
                </el-tooltip>
              </span>
              <div class="modularItem" v-for="(item,i) in modularTitle" :key="i" :class="{active:item.selected}"
                @click="selectedTitle(item)">
                <div class="modularItem-title">{{item.title}}</div>
                <div class="modularItem-Con">
                  <img :src="item.img" class="img">
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="模块组件">
              <span slot="label" class="label">
                <el-tooltip class="item" effect="dark" content="模块组件" placement="right">
                  <i class="icon el-icon-s-data"></i>
                </el-tooltip>
              </span>
              <div class="modularItem" v-for="(item,i) in modularData" :key="i">
                <div class="modularItem-title">{{item.title}}</div>
                <div class="modularItem-Con">
                  <img :src="item.img" class="img">
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="content-warp">
      <screen-title :title="nowTitle.screenTitle" :bgImg="nowTitle.screenTitleBg"></screen-title>
      <setting-modular :layOut="layOut"></setting-modular>
    </div>
  </div>
</template>

<script>
  import ScreenTitle from '../components/screenTitle.vue'
  import settingModular from '../components/settingModular.vue'
  export default {
    components: {
      settingModular,
      ScreenTitle
    },
    data() {
      return {
        nowTitle: {
          screenTitle: '电源监控平台',
          screenTitleBg: null,
        },
        modularTitle: [{
          title: '蓝色头部-1',
          selected: true,
          name: 'bigscreenTitle1',
          img: require("../assets/images/bigscreenTitle1.png")
        }, {
          title: '蓝色头部-2',
          selected: false,
          name: 'bigscreenTitle2',
          img: require("../assets/images/bigscreenTitle2.png")
        }],
        modularData: [{
          title: '放电和充电电流',
          type: 'latticeBar',
          img: require("../assets/images/modular-latticeBar.png")
        }, {
          title: '整流器',
          type: 'ImgPieChart',
          img: require("../assets/images/modular-ImgPieChart.png")
        }, {
          title: '电池组',
          type: 'TriangleBarChart',
          img: require("../assets/images/modular-TriangleBarChart.png")
        }, {
          title: '电池状态',
          type: 'AbeamProChart',
          img: require("../assets/images/modular-AbeamProChart.png")
        }],
        layOut: {
          name: '',
          id: '',
          children: [{
            name: '放电和充电电流',
            id: 1,
            w: 0.235,
            h: 0.25,
            x: 0,
            y: 0,
            type: 'latticeBar',
            setData: {
              xData: ['高告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房数比例'],
              series: [{
                name: '放电',
                data: [120, 220, 150, 80, 70],
                color: '#90ec7d'
              }, {
                name: '充电',
                data: [80, 160, 120, 310, 50],
                color: '#ff6b6b'
              }]
            }
          }, {
            name: '整流器',
            id: 2,
            w: 0.235,
            h: 0.25,
            x: 0.25,
            y: 0,
            type: 'ImgPieChart',
            setData: {
              data: [{
                  value: 30,
                  name: '整流器交流异常'
                },
                {
                  value: 22,
                  name: '整流器过流'
                },
                {
                  value: 120,
                  name: '总故障'
                },
                {
                  value: 50,
                  name: '整流器欠压'
                },
              ]
            }
          }, {
            name: '电池组',
            id: 3,
            w: 0.235,
            h: 0.25,
            x: 0.5,
            y: 0,
            type: 'TriangleBarChart',
            setData: {
              xData: ['熔断', '电压低', '下电', '充电过流'],
              data: [35, 72, 55, 45]
            }
          }, {
            name: '电池状态',
            id: 4,
            w: 0.235,
            h: 0.25,
            x: 0.75,
            y: 0,
            type: 'AbeamProChart',
            setData: {
              yData: ['浮充数量', '放电数量', '充电数量'],
              color: ['#f58881', '#b4d465', '#ffcb29'],
              bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
              data: [32, 15, 20]
            }
          }]
        },
      }
    },
    mounted() {
      this.modularTitle.map((item) => {
        if (item.selected) {
          this.nowTitle.screenTitleBg = item.img;
        }
      })
    },
    methods: {
      selectedTitle(title) {
        this.modularTitle.map((item) => {
          item.selected = false
        })
        title.selected = true;
        this.nowTitle.screenTitleBg = title.img;
      }
    }
  }
</script>

<style scoped>
  .design {
    width: 100%;
    height: 100vh;
    background-color: #001c66;
  }

  .slider-card {
    position: fixed;
    width: 360px;
    top: 0;
    left: 0;
    bottom: 0;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    padding: 15px;
  }

  .editCon {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #1b48a6;
    background-color: #042271;
  }

  .editCon .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background-image: linear-gradient(to right, #0c3688, #042271);
    background-image: -ms-linear-gradient(to right, #0c3688, #042271);
    background-image: -webkit-linear-gradient(to right, #0c3688, #042271);
    background-image: -moz-linear-gradient(to right, #0c3688, #042271);
    color: #00feff;
    margin-bottom: 10px;
  }

  .editCon .modolCon {
    width: 100%;
    height: calc(100% - 50px);
  }

  .editCon .modolCon .tab {
    height: 100%;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__header.is-left {
    background-color: #0c3688;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__nav-wrap::after {
    background: none;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__item {
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__item.is-active {
    color: #00feff;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__active-bar.is-left,
  .editCon .modolCon .tab /deep/ .el-tabs__nav-wrap.is-left::after {
    right: auto;
    left: 0;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__active-bar {
    background-color: #00feff;
  }

  .editCon .modolCon .tab .label {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .editCon .modolCon .tab .icon {
    font-size: 28px;
  }

  .editCon .modolCon .tab /deep/ .el-tabs__content {
    height: 100%;
  }

  .editCon .modolCon .tab /deep/ .el-tab-pane {
    height: 100%;
    overflow-y: auto;
  }

  .content-warp {
    width: 100%;
    height: 100%;
    padding-left: 360px;
  }

  .modularItem {
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid #103c91;
  }

  .modularItem .modularItem-title {
    font-size: 12px;
    padding: 5px 10px;
    text-align: left;
    overflow: hidden;
    background: #1b4ba9;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .modularItem .modularItem-Con {
    width: 100%;
    position: relative;
    text-align: center;
    box-sizing: content-box;
    transition: border-color .2s;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px;
  }

  .modularItem.active {
    border-color: #00feff;
  }

  .modularItem .modularItem-Con .img {
    width: 100%;
  }
</style>

 src/router/routes.js

@@ -3,7 +3,7 @@
    meta: {},
    component: (resolve) => require(['@/pages/index.vue'], resolve)
}, {
    path: '/settingPage',
    path: '/design',
    meta: {},
    component: (resolve) => require(['@/pages/settingPage.vue'], resolve)
    component: (resolve) => require(['@/pages/design.vue'], resolve)
}, ];