cocoroboBlockly/src/components/functionFan3.vue

<template>
  <div style="width: 100%; height: calc(100%); background: #fff; display: flex">
    <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>
          <block type="logic_number"></block>
        </category>
        <sep></sep>
        <category name="循环" colour="#5ba55b">
          <block type="controls_repeat_forever"></block>
          <block type="controls_whileUntil"></block>
          <block type="controls_for"></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>
        <sep></sep>
        <category id="police" name="AI组件" colour="#935ba5">
          <block type="ai_gesture"></block>
          <block type="ai_motor"></block>
        </category>
      </xml>
    </div>
    <div class="container">
      <div class="img">
        <div class="left" style="width: 120px"></div>
        <div class="controlZ">
          <div id="fan" ref="fan">
            <img :src="img[0]" alt />
          </div>
          <div id="fanB">
            <img :src="img[6]" alt />
          </div>
          <div id="motor">
            <img :src="img[1]" alt />
          </div>
          <div id="base">
            <img :src="img[2]" alt />
          </div>
          <div id="a4">
            <img :src="img[3]" alt />
          </div>
          <div id="screan">
            <img :src="img[4]" alt />
            <!--图片展示-->
            <!-- <video
              ref="video"
              id="video_cam"
              width="178"
              height="142.4"
              class="face"
              autoplay
              v-show="isCamera"
            ></video>
            <canvas
              ref="canvasDOM"
              width="178"
              height="142.4"
              class="kuang"
              v-show="isCamera"
            ></canvas> -->
            <video
              ref="video"
              id="video_cam"
              width="118.666"
              height="94.933"
              class="face"
              autoplay
              v-show="isCamera"
            ></video>
            <canvas
              ref="canvasDOM"
              width="118.666"
              height="94.933"
              class="kuang"
              v-show="isCamera"
            ></canvas>
          </div>
          <div id="line">
            <img :src="img[5]" alt />
          </div>
        </div>

        <div class="cameraZ">
          <!--开启摄像头-->
          <div class="cameraBtn">
            <div class="open" @click="start()" v-if="!isZuan">
              <img src="../assets/img/fan/icon.png" alt />
            </div>
            <div class="close" @click="closeCamera()" v-else>
              <img src="../assets/img/fan/icon2.png" alt />
            </div>
          </div>
          <!--确认-->
          <div v-show="false" class="isPhoto">
            <!--canvas截取流-->
            <canvas
              ref="canvas"
              width="300"
              height="240"
              v-show="false"
            ></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.as {
  animation: myfirst 1s linear infinite;
}

.asn {
  transform: rotate(0deg);
}

@keyframes myfirst {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ass {
  animation: myfirst 3s linear infinite;
}
</style>
<script>
import * as handPoseDetection from "@tensorflow-models/hand-pose-detection";

import "@tensorflow/tfjs-backend-webgl";
import * as mpHands from "@mediapipe/hands";

// 引入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文件夹下
import $ from "jquery";
//忽略被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,
      img: [
        require("../assets/img/fan/fan.png"),
        require("../assets/img/fan/2.png"),
        require("../assets/img/fan/3.png"),
        require("../assets/img/fan/4.png"),
        require("../assets/img/fan/5.png"),
        require("../assets/img/fan/6.png"),
        require("../assets/img/fan/fanB.png"),
      ],
      shibieImg: require("../assets/img/face.png"),
      isCamera: false,
      isZuan: false,
      count: 0,
      change: 0,
      closeUpdateMessage: false,
      updateMessage: false,
      upName: "",
      number: 0,
      isdetected: "请您保持脸部在画面中央",
      videoEl: {},
      canvasEL: {},
      formLabelWidth: "100px",
      resultImg: {
        img: [],
        name: "",
      },
      // 预设样本图，支持本地，网络，beas64
      sampleArr: [
        // {
        // name: "编号1",
        // img: []
        // }
      ],
      // 匹配图，支持本地，网络，beas64
      detArr: [
        //"" 图片1
      ],
      numberOne: 0,
      // 匹配结果
      resultArr: [],
      // 人脸匹配矩阵数组对象转码结果
      faceMatcher: null,
      rotate: 0,
      timer: null,
      detector: null,
      hand: 0,
      isC: false,
      f: null,
    };
  },
  methods: {
    cancel() {
      this.updateMessage = false;
      this.sampleArr[this.sampleArr.length - 1].name = "编号:" + this.number;
      if (this.sampleArr.length > 0) {
        this.fnsample();
      }
    },
    async start() {
      this.isZuan = true;
      this.isCamera = true;
      // let video = this.$refs["video"];
      this.timer = setInterval(() => {
        this.handsFind();
      }, 5000);
    },
    zhuan() {
      var _fan = this.$refs.fan;
      _fan.className = "asn as";
      clearInterval(this.timer);
      this.timer = setInterval(function () {
        _fan.className = "asn";
        setTimeout(function () {
          _fan.className = "as";
        }, 0);
      }, 1000);
    },
    zhuann() {
      var _fan = this.$refs.fan;
      this.$refs.fan.className = "asn ass";
      clearInterval(this.timer);
      this.timer = setInterval(function () {
        _fan.className = "asn";
        setTimeout(function () {
          _fan.className = "ass";
        }, 0);
      }, 3000);
    },
    update() {
      this.change = 1;
      this.number = this.number + 1;
      if (this.change == 1) {
        if (this.sampleArr.length > 0) {
          this.sampleArr[this.sampleArr.length - 1].name = this.upName;
          this.isdetected = "已识别到" + this.resultImg.name + "的图片";
        }
      }
      if (this.sampleArr.length > 0) {
        // var a = document.getElementsByClassName("spot");
        // a[0].style.display = "block";
        this.fnsample();
      }
      this.updateMessage = false;
    },
    // image conversion
    b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || "";
      sliceSize = sliceSize || 512;

      var byteCharacters = atob(b64Data);
      var byteArrays = [];

      for (
        var offset = 0;
        offset < byteCharacters.length;
        offset += sliceSize
      ) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      var blob = new Blob(byteArrays, { type: contentType });
      return blob;
    },
    async handsFind() {
      var gesture_imageURLbase64 = this.photograph2();
      var gesture_ImageURL = gesture_imageURLbase64;
      var gesture_block = gesture_ImageURL.split(";");
      var gesture_contentType = gesture_block[0].split(":")[1];
      var gesture_realData = gesture_block[1].split(",")[1];
      var gesture_blob = this.b64toBlob(gesture_realData, gesture_contentType);
      let str = new File([gesture_blob], "filename.png", { type: "image/png" });
      var gesture_formData = new FormData();
      gesture_formData.append("image", str);
      let params = [
        {
          gesture_formData,
        },
      ];
      let _this = this
      $.ajax({
        url: `//ai-api.cocorobo.cn/gesture`,
        data: gesture_formData,
        type: "POST",
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        timeout: 10000,
      })
        .done(function (res, data) {
          // console.log(res.data.result[0].classname);
          let hand = res.data.result;
          console.log(hand);
          console.log(hand.length);
          console.log(hand.length > 0 && _this.isCamera);
          if (hand.length > 0 && _this.isCamera) {
            let hands = res.data.result[0]
            console.log(hands)
            console.log(hands.classname)
            /*石头剪刀布的转速 */
            let buNum = 100;
            let sNum = 0;
            let jNum = 50;
            /**1布2石头3剪刀 */
            if (hands.classname == "Five") {
              console.log("布");
              if (_this.hand == 1) {
                return;
              }
              _this.hand = 1;
              // this.zhuan();
              _this.$refs.fan.className = "as";
            } else if (hands.classname == "Fist") {
              console.log("石头");
              if (_this.hand == 2) {
                return;
              }
              _this.hand = 2;
              //clearInterval(this.timer);
              _this.$refs.fan.className = "asn";
            } else if (hands.classname == "Two") {
              console.log("剪刀");
              if (_this.hand == 3) {
                return;
              }
              _this.hand = 3;
              _this.$refs.fan.className = "ass";
              // this.zhuann();
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 调用摄像头
    callCamera() {
      const loading = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.body,
      });
      let _this = this;
      // H5调用电脑摄像头API
      window.navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((success) => {
          // 摄像头开启成功
          _this.$refs["video"].srcObject = success;
          // 实时拍照效果
          _this.$refs["video"].play();
          loading.close();
        })
        .catch((error) => {
          // console.error("摄像头开启失败，请检查摄像头是否可用！");
          _this.isC = false;
          _this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
          loading.close();
        });
    },
    // 拍照
    photograph2() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
      // 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小

      return imgBase64;
    },
    // 拍照
    photograph() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
      // 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小

      let str = imgBase64.replace("data:image/jpeg;base64,", "");
      let strLength = str.length;
      let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
      let size = (fileLength / 1024).toFixed(2);
      console.log(size); // 上传拍照信息  调用接口上传图片 .........

      // this.detArr.push(imgBase64);
      var json = { name: "", img: [] };
      this.number = this.number + 1;
      this.upName = "";
      json.img.push(imgBase64);
      this.sampleArr.push(json);
      this.updateMessage = true;
    },
    // 关闭摄像头
    closeCamera() {
      this.isCamera = false;
      this.isZuan = false;
      clearInterval(this.timer);
      this.$refs.fan.className = "asn";
      this.timer = null;
      this.hand = 0;
    },

    async fnInit() {
      const model = handPoseDetection.SupportedModels.MediaPipeHands;
      const detectorConfig = {
        runtime: "mediapipe", // or 'tfjs'
        modelType: "full",
        solutionPath: `/static/hands`,
      };
      this.detector = await handPoseDetection.createDetector(
        model,
        detectorConfig
      );
    },
    async fnsample() {
      const labeledFaceDescriptors = await Promise.all(
        this.sampleArr.map(async (item) => {
          // 临时图片转码数据，将图片对象转数据矩阵对象
          let descriptors = [];
          for (let image of item.img) {
            const imageEl = await faceapi.fetchImage(image);
            descriptors.push(await faceapi.computeFaceDescriptor(imageEl));
          }
          // 返回图片用户和图片转码数组
          return new faceapi.LabeledFaceDescriptors(item.name, descriptors);
        })
      );
      // 人脸匹配矩阵数组对象转码结果
      this.faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors);
    },
    // 执行遍历识别匹配图片，数值误差越小越精确
    fnRun() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
      // 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
      this.detArr = [];
      this.detArr.push(imgBase64);
      this.detArr.forEach(async (img) => {
        let ts = Date.now();
        // 将图片对象转数据矩阵对象，进行匹配
        const inputEl = await faceapi.fetchImage(img);
        const inputDescriptor = await faceapi.computeFaceDescriptor(inputEl);
        const bestMatch = await this.faceMatcher.findBestMatch(inputDescriptor);
        // 结果
        this.resultArr = [];
        this.resultArr.push({
          target: img,
          result: bestMatch.toString(),
          time: Date.now() - ts + "ms",
          fps: Math.round(1000 / (Date.now() - ts)),
        });
        console.log(this.resultArr);
        var a = document.getElementsByClassName("pFace");
        for (var i = 0; i < this.sampleArr.length; i++) {
          if (this.sampleArr[i].name == bestMatch.label) {
            // this.closeUpdateMessage = true;
            // if (this.change == 1) {
            //   this.resultImg.name = this.upName;
            // } else {
            //   this.resultImg.name = this.sampleArr[i].name;
            // }
            this.isdetected = "已识别到" + this.sampleArr[i].name + "的图片";
            this.shibieImg = this.sampleArr[i].img[0];
            if (this.shibieImg.length > 0) {
              a[0].style.width = "300px";
            }
            this.resultImg.img[0] = this.sampleArr[i].img[0];
          }
        }
      });
    },
    handleClose(done) {
      done();
    },
    // 更换匹配图
    async fnChange(e) {
      if (!e.target.files.length) return;
      this.detArr = [];
      this.resultArr = [];
      // 将文件显示为图像并识别
      e.target.files.forEach(async (file) => {
        let ts = Date.now();
        let img = await faceapi.bufferToImage(file);
        const inputDescriptor = await faceapi.computeFaceDescriptor(img);
        const bestMatch = await this.faceMatcher.findBestMatch(inputDescriptor);
        // 结果
        this.detArr.push(img.src);
        this.resultArr.push({
          target: file.name,
          result: bestMatch.toString(),
          time: Date.now() - ts + "ms",
          fps: Math.round(1000 / (Date.now() - ts)),
        });
      });
    },
    blocklyInit() {
      this.workspace = Blockly.inject("blocklyDiv", {
        //工具栏
        toolbox: document.getElementById("toolbox"),
        //网格效果
        grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
        //媒体资源
        media: "../assets/img/",
        //垃圾桶
        trashcan: false,
      });
      //工作区监听代码生成器
      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;
      };

      Blockly.Blocks["logic_loop"] = {
        init: function () {
          this.appendStatementInput("NAME")
            .setCheck(null)
            .appendField("重复执行");
          this.setPreviousStatement(true, null);
          this.setNextStatement(true, null);
          this.setColour("#5b80a5");
          this.setTooltip("");
          this.setHelpUrl("");
        },
      };
      Blockly.JavaScript["logic_loop"] = function (block) {
        var statements_name = Blockly.JavaScript.statementToCode(block, "NAME");
        // TODO: Assemble JavaScript into code variable.
        var code = "for;\n";
        return code;
      };

      Blockly.Blocks.controls_repeat_forever = {
        init: function () {
          this.jsonInit({
            message0: Blockly.Msg.CONTROLS_REPEAT_FOREVER,
            previousStatement: null,
            nextStatement: null,
            colour: "#5ba55b",
            tooltip: Blockly.Msg.CONTROLS_REPEAT_FOREVER_TOOLTIP,
            helpUrl: Blockly.Msg.CONTROLS_REPEAT_HELPURL,
          });
          this.appendStatementInput("DO").appendField(
            Blockly.Msg.CONTROLS_REPEAT_INPUT_DO
          );
        },
      };

      Blockly.JavaScript.controls_repeat_forever = function (a) {
        var d = Blockly.JavaScript.statementToCode(a, "DO");
        d = Blockly.JavaScript.addLoopTrap(d, a);
        return "while (true) {\n" + d + "}\n";
      };

      Blockly.Blocks["logic_number"] = {
        init: function () {
          this.appendDummyInput().appendField(
            new Blockly.FieldTextInput("0"),
            "number"
          );
          this.setInputsInline(true);
          this.setOutput(true, "Number");
          this.setColour("#5b80a5");
          this.setTooltip("");
          this.setHelpUrl("");
        },
      };
      Blockly.JavaScript["logic_number"] = function (block) {
        var text_number = block.getFieldValue("number");
        // TODO: Assemble JavaScript into code variable.
        var code = text_number;
        // TODO: Change ORDER_NONE to the correct strength.
        return [code, Blockly.JavaScript.ORDER_NONE];
      };
      Blockly.Blocks["ai_gesture"] = {
        init: function () {
          this.appendDummyInput()
            .appendField("AI手势识别")
            .appendField(new Blockly.FieldDropdown([["ID", "ID"]]), "ID");
          this.setInputsInline(true);
          this.setOutput(true, null);
          this.setColour(285);
          this.setTooltip("");
          this.setHelpUrl("");
        },
      };
      Blockly.JavaScript["ai_gesture"] = function (block) {
        var dropdown_id = block.getFieldValue("ID");
        // TODO: Assemble JavaScript into code variable.
        var code = "hands";
        // TODO: Change ORDER_NONE to the correct strength.
        return [code, Blockly.JavaScript.ORDER_NONE];
      };
      Blockly.Blocks["ai_motor"] = {
        init: function () {
          this.appendDummyInput()
            .appendField("马达")
            .appendField(new Blockly.FieldDropdown([["M1", "M1"]]), "motor")
            .appendField("以速度")
            .appendField(new Blockly.FieldTextInput("0"), "speed")
            .appendField("转动");
          this.setPreviousStatement(true, null);
          this.setNextStatement(true, null);
          this.setColour(285);
          this.setTooltip("");
          this.setHelpUrl("");
        },
      };
      Blockly.JavaScript["ai_motor"] = function (block) {
        var dropdown_motor = block.getFieldValue("motor");
        var text_speed = block.getFieldValue("speed");
        // TODO: Assemble JavaScript into code variable.
        var code = "motor=" + text_speed;
        // TODO: Change ORDER_NONE to the correct strength.
        return code;
      };
    },
    // 代码生成器
    myUpdateFunction(event) {
      var code = Blockly.JavaScript.workspaceToCode(this.workspace);
      // debugger;
      return code;
    },
    // 清空工作区
    clearBlockData() {
      this.workspace.clear();
    },
    // 回显工作区中的xml结构
    setBlockData(xmlText) {
      this.clearBlockData();
      const xml = Blockly.Xml.textToDom(xmlText);
      Blockly.Xml.domToWorkspace(xml, this.workspace);
    },
  },
  mounted() {
    this.blocklyInit();
    // this.fnInit();
    this.callCamera();
    this.videoEl = this.$refs.video;
    this.canvasEL = this.$refs.canvasDOM;
    var xmlText =
      '<xml xmlns="https://developers.google.com/blockly/xml"><block type="iot_lcd_screeninit" id="{3nwI]%M1OB@v~%c^GJ*" x="270" y="150"><next><block type="controls_repeat_forever" id="%RwQN-vn~S,Qz:U%Dp2C"><statement name="DO"><block type="controls_if" id="tTNBMMPITBf)yE@hA}Lt"><value name="IF0"><block type="logic_compare" id="kW(af5I*_dMR|37aEHA8"><field name="OP">EQ</field><value name="A"><block type="ai_gesture" id="Msy)DT1[/[pA7vU$u2BD"><field name="ID">ID</field></block></value><value name="B"><block type="logic_number" id="F7nQ+Rn{h=Z-:`nxfOV{"><field name="number">1</field></block></value></block></value><statement name="DO0"><block type="ai_motor" id="9=+m`N)^mOs;,8?7ZZ:K"><field name="motor">M1</field><field name="speed">100</field></block></statement><next><block type="controls_if" id="~ykQvxBR]wnz6FHIGc^s"><value name="IF0"><block type="logic_compare" id="+v0*1:oG$.+wMFe_g_F@"><field name="OP">EQ</field><value name="A"><block type="ai_gesture" id=",|{9@1In%8:74vXPPn{O"><field name="ID">ID</field></block></value><value name="B"><block type="logic_number" id="[J4:1z-D*iz3){K$v[gM"><field name="number">2</field></block></value></block></value><statement name="DO0"><block type="ai_motor" id="XIVuWHcKb[O5|0*HC_Em"><field name="motor">M1</field><field name="speed">0</field></block></statement><next><block type="controls_if" id="bNZCd.Zj2arimcA^dZvc"><value name="IF0"><block type="logic_compare" id="ul/^s*@P{HkWe6(^9fgn"><field name="OP">EQ</field><value name="A"><block type="ai_gesture" id="Wd)15h0yyFb`)Sy:H}0w"><field name="ID">ID</field></block></value><value name="B"><block type="logic_number" id="1f0Wep9dlC0i-})rTiqN"><field name="number">3</field></block></value></block></value><statement name="DO0"><block type="ai_motor" id="bY;.J)_PvmP5TAD/KDs,"><field name="motor">M1</field><field name="speed">50</field></block></statement></block></next></block></next></block></statement></block></next></block></xml>';
    this.setBlockData(xmlText);
  },
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.dialog_diy >>> .el-form-item__label {
  width: 50px !important;
  margin-left: 35px !important;
}

.dialog_diy >>> .el-form-item__content {
  margin-left: 0 !important;
}

.update {
  margin-left: 20%;
  font-size: 16px !important;
}

.tip {
  margin: 25px 0 30px 20px;
}
#fan > img,
#fanB > img,
#motor > img,
#base > img,
#line > img,
.right > img,
#a4 > img,
#screan > img {
  width: 100%;
  height: 100%;
  user-select: none;
}

.img {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  justify-content: center;
  width: 100%;
  height: 500px;
  position: relative;
}

#fan {
  /* width: 425px; */
  width: 283.33px;
  position: absolute;
  z-index: 5;
  /* left: 150px; */
  left: 100px;
  top: 0;
  transition: all 1s;
  transform: rotate(0deg);
}

#fanB {
  /* width: 116.6px; */
  width: 77.733px;
  position: absolute;
  z-index: 4;
  /* left: 300px;
  top: 155px; */
  left: 200px;
  top: 103.333px;
}

#base {
  /* width: 423.33px; */
  width: 282.21px;
  position: absolute;
  z-index: 4;
  /* top: 295px;
  left: 0; */
  top: 196.666px;
  left: 0;
}

#motor {
  /* width: 134.16px; */
  width: 89.44px;
  position: absolute;
  z-index: 3;
  /* left: 292px;
  top: 175px; */
  left: 194.666px;
  top: 116.666px;
}

#a4 {
  /* width: 210px; */
  width: 140px;
  position: absolute;
  z-index: 5;
  /* top: 517px;
  left: 111px; */
  top: 344.666px;
  left: 74px;
}
#screan {
  /* width: 178.33px; */
  width: 118.886px;
  position: absolute;
  /* left: -19px;
  top: 126px; */
  left: -12.666px;
  top: 84px;
}
#line {
  /* width: 470.83px; */
  width: 313.886px;
  position: absolute;
  z-index: 2;
  /* top: 245px;
  left: -113px; */
  top: 163.333px;
  left: -75.333px;
}

.button {
  color: #fff;
  background: #8ca1de;
  width: 550px;
  height: 55px;
  font-size: 20px;
  text-align: center;
  line-height: 55px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
}

.right {
  width: 40px;
  position: absolute;
  left: 55%;
  top: 70%;
  display: none;
}

.dark {
  background: #5b79d0;
  cursor: pointer;
}

.controlZ {
  width: 560px;
  height: 620px;
  /* margin-left: calc(50% - (490px / 2)); */
  position: relative;
  top: 10%;
  left: 5%;
}

.cameraZ {
  display: flex;
  height: 340px;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 300px;
}

.cameraBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cameraBtn button {
  margin: 0 0 10px 0;
}

.face {
  position: absolute;
  z-index: 9999;
  padding: 5px 0px;
  left: 0;
  top: 37px;
}

.kuang {
  position: absolute;
  z-index: 10000;
  padding: 26.5px 0;
  left: 0;
  top: 37px;
}

.pFace {
  /* width: 300px; */
  /* height: 240px; */
  width: 150px;
  margin: 0 auto;
  margin-top: 220px;
}

.close > img,
.save > img,
.pFace > img,
.open > img,
.spotPhoto > img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.cameraBtn {
  margin-top: 80px;
}

.close {
  margin-bottom: 25px;
}

.isPhoto {
  height: 410px;
  padding: 80px 0 0 0;
  box-sizing: border-box;
  background: #fff;
}

.isPhoto > span {
  font-size: 25px;
  color: #ccc;
  margin-left: 10px;
}

.nav {
  text-align: center;
  font-size: 32px;
  color: #ccc;
}

.spot {
  background: #64ff64;
  color: #fff;
  width: 140px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
  margin-top: 25px;
  cursor: pointer;
  display: none;
}

.spotNumber {
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
  color: #8c8c8c;
}

.spotPhoto {
  width: 300px;
  height: 245px;
}

.spotPhoto {
  margin-top: 20px;
  font-size: 20px;
}

.gdt {
  display: flex;
  flex-direction: column;
}

.ablockly,
#blocklyDiv {
  height: 100%;
  width: 100%;
}
.blocklySvg {
  height: 905px !important;
}

.ablockly {
  position: relative;
  width: 50%;
}

.container {
  width: 50%;
  height: 100%;
  min-width: 700px;
}
</style>