app

src/App.vue

@@ -92,7 +92,7 @@
 					.catch((err) => {
 						// _this.props.history.push("/login");
 						// window.alert(err.response.data)
-						window.location.href = "https://edu.cocorobo.cn/course/login?type=1";
+						// window.location.href = "https://edu.cocorobo.cn/course/login?type=1";
 					});
 			},
 			logout() {

src/components/unity.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="abody">
+    <div class="ablockly">
+      <div id="blocklyDiv"></div>
+      <xml id="toolbox" style="display: none">
+        <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
+          <block type="controls_if"></block>
+          <block type="logic_compare"></block>
+          <block type="logic_operation"></block>
+          <block type="logic_negate"></block>
+          <block type="logic_boolean"></block>
+        </category>
+        <sep></sep>
+        <category id="catIOTScreen" name="屏幕" colour="#5cb2d6">
+          <block type="iot_lcd_screeninit"></block>
+        </category>
+        <sep></sep>
+        <category id="cat" name="人脸识别" colour="#ee783a">
+          <block type="iot_lcd_faceinit"></block>
+        </category>
+        <sep></sep>
+        <category id="police" name="电子警察组件" colour="#1b5873">
+          <block type="iot_lcd_policeinit"></block>
+        </category>
+      </xml>
+    </div>
+    <iframe src="https://meta.cocorobo.cn" frameborder="0"></iframe>
+
+  </div>
+</template>
+
+<script>
+// 引入Blockly
+import Blockly from "blockly";
+// 引入想要转换的语言，语言有php python dart lua javascript
+import * as JavaScript from "blockly/javascript";
+import * as Blocks from "blockly/blocks";
+// 引入语言包并使用
+import * as hans from "blockly/msg/zh-hans";
+Blockly.setLocale(hans);
+//引入媒体文件：我是在github上下载的blockly源码，将源码中的media文件放入我项目中的public文件夹下
+
+//忽略被vue错认为组件的blockly中的标签，不止以下这些，请发现一个忽略一个
+import Vue from "vue";
+Vue.config.ignoredElements.push("xml");
+Vue.config.ignoredElements.push("block");
+Vue.config.ignoredElements.push("field");
+Vue.config.ignoredElements.push("category");
+Vue.config.ignoredElements.push("sep");
+Vue.config.ignoredElements.push("value");
+Vue.config.ignoredElements.push("statement");
+Vue.config.ignoredElements.push("mutation");
+
+export default {
+  data() {
+    return {
+      that: this,
+      workspace: null,
+    };
+  },
+
+  methods: {
+    // 代码生成器
+    myUpdateFunction(event) {
+      var code = Blockly.JavaScript.workspaceToCode(this.workspace);
+      return code;
+    },
+    // 获取blockly工作区中的code和xml结构
+    getBlockData() {
+      const code = Blockly.JavaScript.workspaceToCode(this.workspace);
+      const xml = Blockly.Xml.workspaceToDom(this.workspace);
+      const xmlText = Blockly.Xml.domToText(xml);
+    },
+    // 回显工作区中的xml结构
+    setBlockData(xmlText) {
+      this.clearBlockData();
+      const xml = Blockly.Xml.textToDom(xmlText);
+      Blockly.Xml.domToWorkspace(xml, this.workspace);
+    },
+    // 清空工作区
+    clearBlockData() {
+      this.workspace.clear();
+    },
+    //下一步
+    // go() {
+    //   //update修改   function state里的参数
+    //   var a = this.myUpdateFunction();
+    //   this.$store.commit("update", ["function", a]);
+    //   this.$router.push("./function");
+    // },
+  },
+
+  mounted() {
+    this.workspace = Blockly.inject("blocklyDiv", {
+      //工具栏
+      toolbox: document.getElementById("toolbox"),
+      //网格效果
+      grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
+      //媒体资源
+      media: "../assets/img/",
+      //垃圾桶
+      trashcan: true,
+    });
+    //工作区监听代码生成器
+    this.workspace.addChangeListener(this.myUpdateFunction);
+
+    Blockly.Blocks["iot_lcd_screeninit"] = {
+      init: function () {
+        this.appendDummyInput().appendField(
+          new Blockly.FieldImage(
+            require("../assets/img/screen_init_header.png"),
+            45,
+            45
+          )
+        );
+        this.appendDummyInput().appendField("LCD屏幕打开");
+        this.setInputsInline(false);
+        this.setPreviousStatement(true);
+        this.setNextStatement(true);
+        this.setColour("#5cb2d6");
+        this.setTooltip("");
+        this.setHelpUrl("");
+      },
+    };
+
+    Blockly.JavaScript.iot_lcd_screeninit = function (block) {
+      var _code = "screen=1;";
+      return _code;
+    };
+
+    Blockly.Blocks["iot_lcd_faceinit"] = {
+      init: function () {
+        this.appendDummyInput().appendField(
+          new Blockly.FieldImage(
+            require("../assets/img/face_recognition_header.png"),
+            45,
+            45
+          )
+        );
+        this.appendDummyInput().appendField("人脸辨识");
+        this.setInputsInline(false);
+        this.setPreviousStatement(true);
+        this.setNextStatement(true);
+        this.setColour("#ee783a");
+        this.setTooltip("");
+        this.setHelpUrl("");
+      },
+    };
+
+    Blockly.JavaScript.iot_lcd_faceinit = function (block) {
+      var _code = "face=1;";
+      return _code;
+    };
+
+    Blockly.Blocks["iot_lcd_policeinit"] = {
+      init: function () {
+        this.appendDummyInput().appendField(
+          new Blockly.FieldImage(
+            require("../assets/img/screen_init_header.png"),
+            45,
+            45
+          )
+        );
+        this.appendDummyInput().appendField("电子警察组件");
+        this.setInputsInline(false);
+        this.setPreviousStatement(true);
+        this.setNextStatement(true);
+        this.setColour("#1b5873");
+        this.setTooltip("");
+        this.setHelpUrl("");
+      },
+    };
+
+    Blockly.JavaScript.iot_lcd_policeinit = function (block) {
+      var _code = "police=1;";
+      return _code;
+    };
+  },
+};
+</script>
+
+<style>
+.abody{
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+#blocklyDiv {
+width: 100%;
+  height: 100%;
+}
+
+.ablockly{
+  width: 50%;
+  height: 100%;
+}
+
+.abody iframe{
+     width: 50%;
+  height: 100%;
+}
+
+.blocklySvg {
+  height: 905px !important;
+}
+</style>

src/router/index.js

@@ -19,6 +19,7 @@ import curtain from '@/components/curtain'
 import necklace from '@/components/necklace'
 import login from '@/components/login'
 import SlideVerify from 'vue-monoplasty-slide-verify';
+import unity from '@/components/unity';
 
 Vue.use(Router).use(ElementUI).use(SlideVerify);
 
@@ -104,6 +105,12 @@ export default new Router({
       path: '/necklace',
       name: 'necklace',
       component: necklace
-    }
+    },
+    {
+      path: '/unity',
+      name: 'unity',
+      component: unity
+    },
+    
   ]
 })