记录Vue+DataV + Element UI 项目问题

记录vue+datav + element ui 项目问题

1. nginx跨域问题

首先是配置，在nginx.conf文件里配置文件路径

location / {   root   html/vue-sreen/dist;   index  index.html;
                    add_header 'Access-Control-Allow-Origin' '*'; 
                    add_header 'Access-Control-Allow-Credentials' 'true';   
                     add_header 'Access-Control-Allow-Methods' 'GET';}

配置

proxy_passlocation  /api/getImageFile/dca6321268a5/{   
proxy_pass         http://xiaolongqx.natapp1.cc/getImageFile/dca6321268a5; }
(不确定是否影响)
location ~ \.php$ {   proxy_pass   http://xiaolongqx.natapp1.cc;}在vue中请求http://xiaolongqx.natapp1.cc/getImageFile/dca6321268a5时改为api/getImageFile/dca6321268a5`   

• 2.在vue中使用萤石云直播地址（已弃用）

首先引入ezuikit.js

import ezuikit from'./ezuikit.js'
import 'uikit/dist/css/uikit.min.css'
import './jquery.min.js'    

不确定是否引入video.js（安装时不能冲突重复安装，命令行会报错）使用

 <video  id="myPlayer1"  style="width: 600px;height: 373px;"  :src="http_url2"  controls playsinline webkit-playsinline autoplay>  </video> 

updated () { if(this.rtmp_url!=""){ //如果在mounted中声明，直播地址还未取到，导致视频不显示。
所以放在了这里

  this.player = new EZUIPlayer('myPlayer');    }  },

问题：在动态更改src链接时，数据会改变，但不会渲染到视图层，需要强制刷新页面才能更改，需手动刷新页面才能可以，但使用感不好，在刷新时会出现页面闪白状态，可以使用跳转空白页，在空白页设置

beforeRouteEnter (to, from, next) {    next(vm => {      vm.$router.replace(from.path)    })  }

路由会有一瞬间的变化，但页面不会闪

• datav折线图

  使用折线图时必须有x轴或y轴的data值为‘value’（根据数据上的值自动显示对应的长度距离）
  .轮播预览

   <div style="width:1080px;height:786px;" class="banner">        
     <div style="z-index: 0;" class="item">           
     <img style="width:1060px;height:770px;margin-top: 10px;z-index: 0;" :src="dataList[currentIndex]">        
   </div>          
   <div style="margin-top: -135px;background: #6786aa;z-index: 100;position: absolute;width:1060px;margin-left: 10px;padding-top: 10px;" class="page" v-if="this.dataList.length > 1">   
     <ul>
     <div style="width: 1060px;margin-left: -20px;overflow: hidden;">    
         <img src="./img/left1.jpg" style="width: 20px;height: 40px;background: #fff;" @click="gotoPage(prevIndex)"/>  
         <img :class="{'clickpic':currentIndex == index}" v-for="(item,index) in dataList" @click="gotoPage(index)" :src="item" class="rr"/>                
         <img src="./img/right1.jpg" style="width: 20px;height: 40px;background:#fff;"@click="gotoPage(nextIndex)"/>
          </div>         
            </ul>        
              </div>       
               </div>

 dataList:        ["https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg","https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg","https://i1.mifile.    cn/a4/xmad_15517939170939_oiXCK.jpg"],
 currentIndex: 0,   //默认显示图片
 timer: null  
     computed: { 
      //上一张
       prevIndex () {  
         if(this.currentIndex == 0) {    
           return this.dataList.length - 1;   
            }else{   
               return this.currentIndex - 1;    
               }  
            }, 
         //下一张 
          nextIndex () {
              if(this.currentIndex == this.dataList.length - 1) {  
                  return 0;   
                   }else {  
                       return this.currentIndex + 1;   
                     }
                  }
              } 

 gotoPage(index) {  
   this.currentIndex = index;    // console.log(index)
   this.clickpic = "width:200px;height:100px;padding:4px;border:1px solid #000bf1"
    },
      runInv () {      
      this.timer = setInterval(() => {     
         this.gotoPage(this.nextIndex)      
         }, 1000)  }   

• 隔几秒操作

  window.setInterval(() => {     setTimeout(fn, 0)  }, 5000)  

• elemen ui

  • 表格
    表格边框改变颜色

  <el-table
  :data="tableData"
  height="250"
  @row-click = "clickshowpic"
  :header-cell-style="getRowClass"
  :cell-style="rowstyle"
  highlight-current-row
  @current-change="handleCurrentChange"
  border
  style="width: 540px;background:#030c1b;color:#8db6d4;border-color: #365595;">

   getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#030c1b;border:1px solid #365595!important'
      } else {
        return 'background:#030c1b;border:1px solid #365595!important'
      }
    },
    rowstyle({ row, column, rowIndex, columnIndex }){
      // if (rowIndex === 0) {
      return 'background:#030c1b;border:1px solid #365595!important'
      // } else {
        // return 'background:#101239'
      // }
    },

  el-table tbody tr:hover>td { 
    background-color:#3c3c3c!important
}
/* .el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #000 !important;
} */
.el-table__body-wrapper::-webkit-scrollbar {
     /*width: 0;宽度为0隐藏*/
    width: 0px !important;
  }
  .el-table td.gutter, .el-table th.gutter {
    width: 0px !important;

}
.el-table--border, .el-table--group, .el-table td, .el-table th.is-leaf{
    border-color: #365595;
}
.el-table--border:after, .el-table--group:after, .el-table:before{
    background-color: #365595;
    content: "";
    position: absolute;
    z-index: 1;
}
.current-row > td {
   background: #02274c !important;
}
.el-table tbody tr:hover>td  /deep/{ 
    background-color:#02274c!important
}

选中效果

 handleCurrentChange(val){
  this.currentRow = val
},

固定高度就可以滑动

• 编译后图片路径问题

config/index.jsdev: {  
  // Paths    assetsSubDirectory: 'static', 
     assetsPublicPath: './',    
     proxyTable:{ '/api': {    
       target: '192.168.1.19:8090',//后端接口地址     
 changeOrigin: true,//是否允许跨越     
  pathRewrite: {      '^/api': '/',//重写,      }  
    }  }  
    build: {    // Template for index.html    index: path.resolve(__dirname, '../dist/index.html'),   
     // Paths    assetsRoot: path.resolve(__dirname, '../dist'),  
       assetsSubDirectory: 'static',
    assetsPublicPath: './',

编译后背景图片路径404问题
build/utils.js  

  if (options.extract) {      
  return ExtractTextPlugin.extract({        
  use: loaders,       
   fallback: 'vue-style-loader',  
         publicPath:'../../'  //加上这句  
})    }  

• .浏览器记忆在index.html里修改项目名和改项目图标时

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

有一个问题，在创建vue项目时vue自动会有vue的图标，这时删掉也还会存在，原因是谷歌浏览器记忆的问题，换做欧朋浏览器就会没有，但有时直接在index.html修改不会变这时修改配置文件

**

• vue切换视频，不更新问题

**

使用纯js

    var videoHtml='<video id="myPlayer"  src="" style="width: 380px;height: 200px;"  width="380px" height="200px" controls playsinline webkit-playsinline autoplay=true>';
    $("#videourlde").html(videoHtml);
        var src = res.data.dataSource.list[0].videoAddress
        $('#myPlayer').attr("src", src);
        player = new EZUIKit.EZUIPlayer('myPlayer');
        // 播放
        player.play();

这种切换src可以时刻换路径也会渲染到视图层

**

• vue监听不到srcolltop问题

**

 window.addEventListener('scroll', () => {
   let scrollTop = document.documentElement.scrollTop ||
                   document.body.scrollTop ||
                   document.querySelector('.element').scrollTop;
    console.log(scrollTop);
    if(scrollTop + window.innerHeight >= document.body.offsetHeight) {
      console.log('bottom')
    }//判断是否到底部
  }, true)

**

• 开启websocket

**

$(document).ready(function() {
                 openSocket();
                 
       //setInterval("selectImageUrl()", 1000*3);//3秒查询一次设备状态
    });
    var socket;
    // 心跳检测，每隔一段时间检测连接状态，如果处于连接中，就像Server主动发送消息，来重置Server段与客户端的最大连接时间，如果已经断开，发起重连
    var heartCheck = {
        // 9分钟发起一次心跳，比Server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间
        timeout: 240000,
        serverTimeoutObj: null,
        reset: function () {
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function () {
            this.serverTimeoutObj = setInterval(function () {
                if (socket.readyState == 1) {
                    console.log("连接状态，发送消息保持连接");
                    var msg = "{\"equipmentCode\":\"\",\"message\":\"{\\\"deviceState\\\":\\\"\\\",\\\"entercloseId\\\":\\\"\\\"}\"}";
                    socket.send(msg);
                    // 如果获取到消息，说明连接正常，重置心跳检测
                    heartCheck.reset().start();
                } else {
                    console.log("断开连接，尝试重连");
                    openSocket();
                }
            }, this.timeout)
        }
    };
    function openSocket() {
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else{
                console.log("您的浏览器支持WebSocket");
                //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
               var socketUrl="http://192.168.1.29:33333/api/testOne?equipmentCode=0000000000000000b6d31fd46351531f";
                socketUrl=socketUrl.replace("https","ws").replace("http","ws");
                console.log(socketUrl);
                           
                if(socket!=null){
                    socket.close();
                    socket=null;
                }
                socket = new WebSocket(socketUrl);
                //打开事件
                socket.onopen = function() {
               heartCheck.reset().start();
                console.log("websocket已打开");
                console.log(new Date());
                //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                socket.onmessage = function(msg) {
                     heartCheck.reset().start();
                    console.log(msg.data);
                    var dataObj = JSON.parse(msg.data);
                   alert(dataObj);
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                socket.onclose = function(e) {
                    console.log('websocket已关闭: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
                    console.log(new Date());
                };
                //发生了错误事件
                socket.onerror = function() {
                    console.log("websocket发生了错误");
                }
            }
        }
</script>