station-test-ui/src/main.js

import Vue from 'vue'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import EleForm from 'vue-ele-form'
import Element from 'element-ui'
import EleFormUploadFile from 'vue-ele-form-upload-file'
import EleFormImageUploader from 'vue-ele-form-image-uploader'
import EleFormBmap from 'vue-ele-form-bmap'
import EleFormGallery from 'vue-ele-form-gallery'
import EleFormDynamic from 'vue-ele-form-dynamic'
// 自定义区域级联
import EleFormRegional from "@/components/Cascader/regional-cascader.vue"
import 'element-ui/lib/theme-chalk/index.css'
import './styles/element-variables.scss'
// import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖

import '@/styles/index.scss' // global css
import '@/rl_icons/iconfont.css'

import App from './App'
import store from './store'
import router from './router'

import './icons' // icon
import '@/assets/icon/iconfont.css'
import './permission' // permission control
import './utils/error-log' // error log
import request from '@/utils/request'
import '@/utils/dialogdrag'//dialog 拖拽指令  v-dialogDrag 放入el-dialog中即可
import * as filters from './filters' // global filters
import VueHighlightJS from 'vue-highlight.js'
var appConfig = require('../static/app_config.json')
import echarts from 'echarts'
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"

/*
地图相关
start
*/
import VueAMap from 'vue-amap';
// ,'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '8af92d391127d03d83fc52e7f0efea08',
  plugin: ['AMap.Geolocation','AMap.Scale','AMap.OverView', 'AMap.ToolBar','AMap.MassMarks',
          'AMap.MapType','AMap.MarkerClusterer','AMap.Geocoder', 'AMap.Heatmap', 'AMap.OverlayGroup'
        ],
  v: '1.4.15',
  uiVersion: '1.1'
});

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '2Gk7v8Gcb6PkgDZytoqsfdxuTGrQgfgB',//'LDeyoWgKV2mO1b3MRkTlyzGcNjFUycLL'
})

const socketOptions = {
  autoConnect: false,
  //path: '/socket.io/', 
  path: '/',
  transports: ['websocket']
}

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper');
    selectWrap.addEventListener('scroll', function () {
      // console.log(this.scrollHeight, this.scrollTop, this.clientHeight)
      if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
        binding.value();
      }
    })
  }
})
// 除数，被除数， 保留的小数点后的位数
Vue.prototype.NumberDiv = function (arg1,arg2,digit){
  var t1=0,t2=0,r1,r2;
  if(!arg2){
    return Number(0);
  }
  if(arg1 == arg2){
    return Number(1);
  }
  // console.log(arg1,arg2)
  try{t1=arg1.toString().split(".")[1].length}catch(e){}
  try{t2=arg2.toString().split(".")[1].length}catch(e){}
  r1=Number(arg1.toString().replace(".",""))
  r2=Number(arg2.toString().replace(".",""))
  //获取小数点后的计算值
 var result= ((r1/r2)*Math.pow(10,t2-t1)).toString()
  var result2=result.split(".")[1];
  if(result2!=undefined){
    result2 = result2.substring(0, digit > result2.length ? result2.length : digit);
  }
  if(result==0){
    return Number(result);
  }else{
    return Number(result.split(".")[0] + "." + result2);
  }
}
Vue.prototype.NumberMul = function(arg1, arg2) {
  var m = 0;
  var s1 = arg1.toString();
  var s2 = arg2.toString();
  try {
      m += s1.split(".")[1].length;
  } catch (e) {}
  try {
      m += s2.split(".")[1].length;
  } catch (e) {}

  return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
// import elTableInfiniteScroll from 'el-table-infinite-scroll';

// Vue.use(elTableInfiniteScroll);






/*
地图相关
end
*/

// Vue.use(
//   new VueSocketIO({
//     debug: true,
//     connection: SocketIO(appConfig.websocketUrl, socketOptions),
//     store,
//   })
// )
// Vue.use(new VueSocketIO({
//   debug: true,
//   connection: 'ws://192.168.1.60:60002',
//   store,
//   options: { path: "/socket.io/" } //Optional options
// }))




/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }
Vue.component("file-upload", EleFormUploadFile)
Vue.component('image-upload', EleFormImageUploader)
Vue.component("bmap", EleFormBmap)
Vue.component("gallery", EleFormGallery)
Vue.component('dynamic', EleFormDynamic)
Vue.component('regional-cascader', EleFormRegional)
Vue.use(Element, {
  size: 'small', // set element-ui default size
  // locale: enLang // 如果使用中文，无需设置，请删除
  // 专门设置全局的 dynamic 属性
  // 属性参考: https://github.com/dream2023/ele-dynamic 或者 下面的属性说明
  dynamic: {
    delimiter: '/' // 所有的 dynamic 都会有 delimiter = '/' 的属性值
  }
})
Vue.use(VueHighlightJS)
Vue.use(EleForm)
// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false
Vue.prototype.$http = request
Vue.prototype.$appConfig = appConfig

Vue.prototype.$echarts = echarts
new Vue({
  sockets: {
    connecting() {
      console.log('正在连接')
    },
    disconnect() {
      console.log("Socket 断开");
    },
    connect_failed() {
      cosnole.log('连接失败')
    },
    connect() {
      console.log('socket connected')
    },
    message(data) {
      this.$notify({
        title: '新消息',
        message: data,
        type: 'warning',
        duration:10000
      });
      console.log("data", data);//接收的消息
    },
    alarm_notify: data => {
      if (typeof data == 'string') {
        // console.log('alarm_notify data ', data)
      }
      if (typeof data == 'object') {
        // console.log('alarm_notify data ', data)
        Element.Notification({
          title: data.title,
          message: data.content,
          type: 'warning',
          position: 'bottom-right'
        });
      }

    }
  },
  el: '#app',
  router,
  store,
  render: h => h(App)
})