at-calculator

fsn-manager-v

内嵌式脚本编辑器

at-calculator

由于内嵌式脚本编辑器依赖于element-ui、vue2-ace-editor(代码编辑器插件)、vue-i18n（国际化），因此必须安装

npm i --save element-ui

npm i --save vue2-ace-editor

npm i --save vue-i18n

npm i --save at-calculator

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

插件使用到了国际化

新建zh-cn.js

import zhLocale from "element-ui/lib/locale/lang/zh-CN";

const zh_CN = {
  fsn_action_insert: "插入",
  fsn_action_format: "格式化",
  fsn_action_run: "运行",
  fsn_action_new: "新建",
  fsn_action_reset: "重置",
  fsn_action_save: "保存",
  fsn_action_search: "搜索",
  fsn_action_insert_tagname: "插入位号",
  fsn_attr_all: "全部",
  fsn_attr_tool_dic: "工具内置",
  fsn_attr_tagName: "位号",
  fsn_attr_desc: "描述",
  fsn_menu_streaming_query: "测点查询",
  fsn_menu_methods_dic: "方法字典",
};

export default {
  ...zhLocale,
  ...zh_CN
};

新建en_us.js

import enLocale from 'element-ui/lib/locale/lang/en'

const en_US = {
  title: 'fusion API Manage',
}

export default {
  ...enLocale,
  ...en_US
}

新建i18n.js

import Vue from "vue";
import locale from "element-ui/lib/locale"; //引入element语言包
import VueI18n from "vue-i18n"; //引入vue-i18n插件
import en_US from "./en_US";
import zh_CN from "./zh_CN";
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "zh_CN", //默认中文。
  messages: {
    en_US: en_US,
    zh_CN: zh_CN
  }
});
locale.i18n((key, value) => i18n.t(key, value)); //为了实现element插件的多语言切换
export default i18n

在main.js中引入

import i18n from "./language/i18n.js";
/* eslint-disable no-new */
new Vue({
  el: "#app",
  render: h => h(App),
  i18n
});

vue使用示例

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <h2>{{ $t('fsn_attr_tool_dic') }}</h2>
    <el-button @click="visible = true" >弹框</el-button>
    <el-dialog :visible.sync="visible" :close-on-click-modal="false" top="40px">
        <!-- 固定高度 -->
      <div style="height:700px;">
       <atCalculator :propData="pData" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import testData from '../test';
export default {
  name: 'HelloWorld',
  data() {
    return {
      visible: false,
      msg: 'Welcome to Your Vue.js App',
      pData: {
        // 工具标志
        sign: 'report',
        token: '6f7463585c85ab0f417c0aaa75202a0f09ae40e94d4f13e443f095acf9f7e4c4ae583256f4c11db183319184c559e3f69544a31b2063dcad9db9ce5c5bf741d6ff1cde610034c9c5122f01c1a87e311d7c8fffad9ed0802804f865e87d96569b4577304ec71b3ec927bbd7d1d190b9d6',
        openId: 'c81e728d9d4c2f636f067f89cc14862c',
        industryId: 4,
        appId: 308,
        // 脚本数据
        scriptData: {
          id: 0,
          content: 'var a = 1;'
        },
        // 方法字典数组
        funDic: [
          {
            name: '打印',
            children: [
              {
                engName: 'print',
                methodSign: 'print(context);',
                name: '打印'
              }
            ]
          },
          {
            children: [
              {
                engName: 'getVal',
                methodSign: 'var d = getVal(tagname);',
                name: '获取测点实时值'
              }
            ],
            name: '测点'
          }
        ],
        // 脚本转换 同步请求
        scriptTransform: async function(str) {
          // 转换操作...
          console.log('run')
          return 'xxxxx';
        },
        // 保存脚本
        saveScript: function(data) {
          sessionStorage.setItem('key', encodeURIComponent(JSON.stringify(data)));
          console.log(data, 'save');
        }
      }
    };
  },
  mounted() {
   // 定期更新token
    global.token = this.pData.token;
    global.openId = this.pData.openId;
    global.industryId = this.pData.industryId;
    global.appId = this.pData.appId;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

For a detailed explanation on how things work, check out the guide and docs for vue-loader.