保存布局界面功能提交

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

@@ -1,17 +1,17 @@
<template>
  <div class="indexWarp" ref="indexWarp">
    <div class="datav-header" :style="{backgroundColor:isBgColor?'#031d67':''}">
        <div class="logo">
          
      <div class="logo">

      </div>
      <div class="user">
          <el-dropdown :hide-on-click="false" size="mini">
            <span class="el-dropdown-link">
              刘德华<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
        <el-dropdown :hide-on-click="false" size="mini">
          <span class="el-dropdown-link">
            刘德华<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
@@ -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>
@@ -79,9 +81,9 @@
        scrollTop: null,
        isBgColor: false,
        dialogFormVisible: false,
        oldName:'',
        img:"../assets/images/notbg.png",
        listData:[],
        oldName: '',
        img: "../assets/images/notbg.png",
        listData: [],
        panelForm: {
          name: ''
        }
@@ -89,105 +91,111 @@
    },
    mounted() {
      let self = this;
          window.addEventListener('scroll', self.setHeadPosition,true)
      window.addEventListener('scroll', self.setHeadPosition, true)

          self.getData();
      self.getData();
    },
    methods: {
      // 适应
      setHeadPosition(){
      setHeadPosition() {
        let self = this;
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let thisHeight = self.$refs.navBanner.offsetHeight;
        if (this.scrollTop  > thisHeight) {
        if (this.scrollTop > thisHeight) {
          this.isBgColor = true
        } else {
          this.isBgColor = false
        }
      },
      // 获取列表数据
      getData(){
      getData() {
        let self = this;
            self.$axios({
              method:"get",
              url:"/application/all",
              data:null
            }).then(res=>{
              if(res.data.code == 1){
                self.listData = res.data.data.map(item=>{
                  return item
                });
                console.log(self.listData)
              }
            }).catch(()=>{
              this.$message({
                type: 'error',
                message: '网络错误!'
              });
            })
        self.$axios({
          method: "get",
          url: "/application/all",
          data: null
        }).then(res => {
          if (res.data.code == 1) {
            self.listData = res.data.data.map(item => {
              return item
            });
            console.log(self.listData)
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '网络错误!'
          });
        })
      },
      // 创建
      addMode(name){
        let self  = this;
            self.$axios({
              method:"post",
              url:"/application",
              data:{
                name:name
              }
            }).then(res=>{
              if(res.data.code == 1){
                self.dialogFormVisible = false;
                self.$message({
                  message: res.data.msg,
                  type: 'success'
                });
              }
              // 跳转
              self.$router.push({ path:'/design' ,query:{id:res.data.data,name:name}});
            }).catch(()=>{
              this.$message({
                type: 'error',
                message: '网络错误!'
              });
            })
      addMode(name) {
        let self = this;
        self.$axios({
          method: "post",
          url: "/application",
          data: {
            name: name
          }
        }).then(res => {
          if (res.data.code == 1) {
            self.dialogFormVisible = false;
            self.$message({
              message: res.data.msg,
              type: 'success'
            });
          }
          // 跳转
          self.$router.push({
            path: '/design',
            query: {
              id: res.data.data.id,
              name: name
            }
          });
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '网络错误!'
          });
        })
      },
      // 点击编辑项目名称
      alterName(item){
      alterName(item) {
        let self = this;
            self.oldName = function(){
              return item.name;
            }();
        self.oldName = function () {
          return item.name;
        }();
      },
      // 失去焦点时修改项目名
      overEvent(item){
      overEvent(item) {
        let self = this;
            if(item.name != this.oldName){
              self.$axios({
                method:"put",
                url:"/application",
                data:{
                  id:item.id,
                  name:item.name
                }
              }).then(res=>{
                if(res.data.code == 1){
                  self.$message({
                    message: res.data.msg,
                    type: 'success'
                  });
                  self.getData();
                }
              }).catch(()=>{
                this.$message({
                  type: 'error',
                  message: '网络错误!'
                });
              })
        if (item.name != this.oldName) {
          self.$axios({
            method: "put",
            url: "/application",
            data: {
              id: item.id,
              name: item.name
            }
          }).then(res => {
            if (res.data.code == 1) {
              self.$message({
                message: res.data.msg,
                type: 'success'
              });
              self.getData();
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '网络错误!'
            });
          })
        }
      },
      // 编辑和浏览 1查看2编辑3删除
      skip(status,item){
      skip(status, item) {
        let self = this;
        switch (status) {
          case 1:
@@ -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:
            // 删除
@@ -206,33 +220,33 @@
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
            }).then(() => {
              self.$axios({
                method:"delete",
                url:"/application",
                data:{
                  id:item.id
                method: "delete",
                url: "/application",
                data: {
                  id: item.id
                }
              }).then(res=>{
                if(res.data.code == 1){
              }).then(res => {
                if (res.data.code == 1) {
                  self.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  self.getData();
                }
              }).catch(()=>{
              }).catch(() => {
                this.$message({
                  type: 'error',
                  message: '网络错误!'
                });
              })
              
            }).catch(()=>{

            }).catch(() => {

            })
            break;
        

          default:
            break;
        }
@@ -393,7 +407,8 @@
    position: relative;
    background: #021651;
  }
  .template-list .imageFirst{

  .template-list .imageFirst {
    height: 100%;
  }

@@ -422,13 +437,15 @@
    justify-content: center;
    font-size: 14px;
  }
  .input-text{

  .input-text {
    width: 100%;
    color:#fff;
    color: #fff;
    border: 0;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
  }

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

  .template-item .screen-edit .lookView {
    right: 60px;
  }

  .template-item:hover .screen-edit {
    opacity: 1;
    pointer-events: all;
  }
  .input-text-alert{

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

  .el-dropdown-link {
    color: #fff;
  }
</style>