保存布局界面功能提交

whyczyk

2021-03-13 f53cb8d06563ab9cb6e1be72b113df1a14ba4846

保存布局界面功能提交

 src/assets/images/powerChart.jpg

 src/assets/js/api.js

New file
@@ -0,0 +1,23 @@
import axios from "./axios";

/* 查询当前大屏布局数据 
{appId:1}
*/
export const screenAllConfig = (data) => {
  return axios({
    method: "GET",
    url: "/application/allConfig",
    params: data
  })
}

/* 查询当前大屏布局数据 
{appId:1}
*/
export const screenSetConfig = (data) => {
  return axios({
    method: "POST",
    url: "/application/config",
    data: data
  })
}

 src/assets/js/charts/persons/zengyvkai.js

@@ -105,6 +105,45 @@
                data: [32, 15, 20]
            }
        }
    },
    {
        img: require("@/assets/images/powerChart.jpg"),
        chartData: {
            name: '电源状态',
            id: 5,
            w: 0.235,
            h: 0.5,
            x: 0.35,
            y: 0.35,
            type: 'powerChart',
            setData: [{
                title: '交流停电数量',
                data: 56,
                color: '#37a9b3',
            }, {
                title: '机房告警数',
                data: 12,
                color: '#f3535f'
            }, {
                title: '直流电压超限数',
                data: 21,
                unit: '%',
                color: '#ff8b00'
            }, {
                title: '负载熔断数量',
                data: 8,
                color: '#757ffb'
            }, {
                title: '直流过流数量',
                data: 5,
                color: '#4ba0d9'
            }, {
                title: '告警机房比例数',
                data: 13,
                unit: '%',
                color: '#7fc57c'
            }, ]
        }
    }
];


 src/components/charts/powerChart.vue

New file
@@ -0,0 +1,71 @@
<template>
  <div class="chartCon">
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
    </div>
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart5" ref="prossPieChart5"></pross-pie-chart>
    </div>
  </div>
</template>

<script>
  import prossPieChart from "./prossPieChart"
  export default {
    components: {
      prossPieChart
    },
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      setData(data) {
        this.$nextTick(() => {
          data.map((item, i) => {
            let chart = this.$refs[`prossPieChart${i}`];
            chart.setData(item);
            chart.resize();
          })
        })
      },
      resize() {
        this.$refs.prossPieChart0.resize();
        this.$refs.prossPieChart1.resize();
        this.$refs.prossPieChart2.resize();
        this.$refs.prossPieChart3.resize();
        this.$refs.prossPieChart4.resize();
        this.$refs.prossPieChart5.resize();
      }
    }
  }
</script>

<style scoped>
  .chartCon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .chartCon .chartItem {
    width: 50%;
    height: 31.333%;
    float: left;
    margin-bottom: 2%;
  }
</style>

 src/components/settingModular.vue

@@ -1,6 +1,5 @@
<template>
  <div class="pageWarp" ref="pageWarp">
    <div ref="demo"></div>
    <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" @dragging="onDrag" @dragstop="onDragstop"
      @resizing="onResize" @resizestop="onResizstop" :parent="true" :debug="false" :snap="true" :snapTolerance="5"
      :draggable="draggable" :resizable="resizable" style="transition: none; will-change: transform;"
@@ -12,22 +11,7 @@
      </div>
    </vue-draggable-resizable>

    <!--<div class="chartCon">
      <layout-box title="电源状态">
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
        </div>
      </layout-box>
    </div> -->

    <!-- <span class="ref-line v-line" v-for="(item,index) in vLine" :key="'vLine'+index" v-show="item.display"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"></span>
    <span class="ref-line h-line" v-for="(item,index) in hLine" :key="'hLine'+index" v-show="item.display"
@@ -44,14 +28,12 @@
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  // import prossPieChart from '../components/charts/prossPieChart.vue';
  let clientWidth, clientHeight;
  export default {
    props: ['layOut', 'draggable', 'resizable'],
    components: {
      VueDraggableResizable,
      LayoutBox,
      // prossPieChart,
    },
    data() {
      return {
@@ -92,11 +74,6 @@
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
      })
      // this.$refs.prossPieChart1.setData({
      //   title: '交流停电数量',
      //   data: 56,
      //   color: '#37a9b3'
      // });
    },
    methods: {
      // 选中要调整的面板时
@@ -111,11 +88,6 @@
            card.h = height;
            card.x = x;
            card.y = y;
            this.modularArr.map(item => {
              if (item.id == `chart${this.draggableActived.id}`) {
                item.resize();
              }
            })
          }
          return true;
        });
@@ -212,7 +184,6 @@
      loadLayout() {
        this.$nextTick(() => {
          this.nowlayOut.children.map((item) => {
            console.log(item)
            item.x *= clientWidth;
            item.y *= clientHeight;
            item.w *= clientWidth;
@@ -241,34 +212,6 @@
  .pageWarp {
    width: 100%;
    height: calc(100% - 52px);
  }

  .chartCon {
    width: 33.33%;
    height: 50%;
    padding: 10px;
    float: left;
    box-sizing: border-box;
  }

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

  .flexCon .con {
    width: 100%;
    height: 60%;
  }

  .chartCon .chartItem {
    width: 50%;
    height: 48%;
    float: left;
    margin-bottom: 2%;
  }

  .contextmenu {
@@ -305,18 +248,5 @@
    background-color: #1d262e;
    color: #2681ff;
    border-left: 2px solid #2681ff;
  }

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

  .flexCon .con {
    width: 100%;
    height: 60%;
  }
</style>

 src/pages/design.vue

@@ -33,7 +33,7 @@
                </el-tooltip>
              </span>
              <div class="modularItem" v-for="(item,i) in modularData" :key="i" @click="addModularData(item)">
                <div class="modularItem-title">{{item.title}}</div>
                <div class="modularItem-title">{{item.chartData.name}}</div>
                <div class="modularItem-Con">
                  <img :src="item.img" class="img">
                </div>
@@ -59,7 +59,7 @@
    </div>
    <div class="content-warp">
      <div class="screenWarp" :style="'background-image:url('+screenBg+')'" ref="cover">
        <screen-title :title="layOut.name" :bgImg="screenTitleBg"></screen-title>
        <screen-title :title="layOut.appName" :bgImg="screenTitleBg"></screen-title>
        <setting-modular :layOut="layOut" @onResizstop="onResizstop" @onDragstop="onDragstop"
          @removeModular="removeModular" :draggable="true" :resizable="true"></setting-modular>
      </div>
@@ -72,6 +72,10 @@
  import ScreenTitle from '../components/screenTitle.vue'
  import settingModular from '../components/settingModular.vue'
  import html2canvas from 'html2canvas'
  import {
    screenAllConfig,
    screenSetConfig
  } from '@/assets/js/api'
  export default {
    components: {
      settingModular,
@@ -85,11 +89,11 @@
        modularBg: charts.modularBg,
        modularData: charts.modularData,
        layOut: {
          name: '电源监控平台',
          titleNmae: 'bigscreenTitle1',
          bgNmae: 'bigscreenbg1',
          coverImg: '',
          id: '',
          appName: '电源监控平台',
          headPic: 'bigscreenTitle1',
          bgPic: 'bigscreenbg1',
          fileData: '',
          appId: '',
          children: []
        },
      }
@@ -97,26 +101,54 @@
    mounted() {
      this.modularTitle.map((item) => {
        item.selected = false;
        if (item.name == this.layOut.titleNmae) {
        if (item.name == this.layOut.headPic) {
          item.selected = true;
          this.screenTitleBg = item.img;
        }
      });
      this.modularBg.map((item) => {
        item.selected = false;
        if (item.name == this.layOut.bgNmae) {
        if (item.name == this.layOut.bgPic) {
          item.selected = true;
          this.screenBg = item.img;
        }
      });
      this.layOut.appId = this.$route.query.id;
      this.layOut.appName = this.$route.query.name;
      this.$nextTick(() => {
        this.loadLayOutData()
      })

    },
    methods: {
      //请求后台布局信息
      loadLayOutData() {
        let sendData = {
          appId: this.layOut.appId
        }
        screenAllConfig(sendData).then((res) => {
          console.log(res)
          if (res.data && res.data.data && res.data.code == 1) {
            this.layOut = res.data.data;
            this.layOut.children.map((item) => {
              for (const key in this.modularData) {
                if (item.type == this.modularData[key].chartData.type) {
                  item.setData = this.modularData[key].chartData.setData
                }
              }
            })
            console.log(this.layOut)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      selectedTitle(title) {
        this.modularTitle.map((item) => {
          item.selected = false;
        })
        title.selected = true;
        this.layOut.titleNmae = title.name;
        this.layOut.headPic = title.name;
        this.screenTitleBg = title.img;
      },
      selectedBg(title) {
@@ -124,7 +156,7 @@
          item.selected = false;
        })
        title.selected = true;
        this.layOut.bgNmae = title.name;
        this.layOut.bgPic = title.name;
        this.screenBg = title.img;
      },
      inArrayObj(array, search, attrs) {
@@ -161,9 +193,23 @@
          backgroundColor: null
        }).then(canvas => {
          let dataUrl = canvas.toDataURL('images/jpg')
          postData.coverImg = dataUrl;
        })
        console.log(postData)
          postData.fileData = dataUrl;
        });
        screenSetConfig(postData).then((res) => {
          if (res.data && res.data.code == 1) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    }
  }

 src/pages/index.vue

@@ -37,7 +37,8 @@
          </div> -->
        </div>
        <div class="template-item" v-for="(item,i) in listData" :key="i">
          <div class="template-image" :style="{backgroundImage:item.screenshot?'url(' + item.screenshot + '}':'url(' + require('../assets/images/notbg.png') + ')',backgroundSize:'cover'}">
          <div class="template-image"
            :style="{backgroundImage:item.screenshot?'url(' + item.screenshot + '}':'url(' + require('../assets/images/notbg.png') + ')',backgroundSize:'cover'}">
            <div class="screen-edit">
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="preview el-icon-delete" @click="skip(3,item)"></i>
@@ -50,7 +51,8 @@
              </el-tooltip>
            </div>
          </div>
          <input type="text" class="template-info input-text" :ref="item.ref" v-model="item.name" @focus="alterName(item)" @blur="overEvent(item)">
          <input type="text" class="template-info input-text" :ref="item.ref" v-model="item.name"
            @focus="alterName(item)" @blur="overEvent(item)">
        </div>
      </div>
    </div>
@@ -144,7 +146,13 @@
                });
              }
              // 跳转
              self.$router.push({ path:'/design' ,query:{id:res.data.data,name:name}});
          self.$router.push({
            path: '/design',
            query: {
              id: res.data.data.id,
              name: name
            }
          });
            }).catch(()=>{
              this.$message({
                type: 'error',
@@ -198,7 +206,13 @@
            break;
          case 2:
            // 编辑
            self.$router.push({ path:'/design' ,query:{id:item.id,name:item.name}});
            self.$router.push({
              path: '/design',
              query: {
                id: item.id,
                name: item.name
              }
            });
            break;
          case 3:
            // 删除
@@ -393,6 +407,7 @@
    position: relative;
    background: #021651;
  }

  .template-list .imageFirst{
    height: 100%;
  }
@@ -422,6 +437,7 @@
    justify-content: center;
    font-size: 14px;
  }

  .input-text{
    width: 100%;
    color:#fff;
@@ -429,6 +445,7 @@
    outline: none;
    background-color: rgba(0, 0, 0, 0);
  }

  .template-item .template-info .emptyCon {
    width: 100%;
    text-align: center;
@@ -471,6 +488,7 @@
  .template-item .screen-edit .editview {
    right: 105px;
  }

  .template-item .screen-edit .lookView{
    right:60px;
  }
@@ -479,9 +497,11 @@
    opacity: 1;
    pointer-events: all;
  }

  .input-text-alert{
    width: 90%;
  }

  .el-dropdown-link{
    color: #fff;
  }