嵌入式

闫增涛

2024-05-22 d07c2414b1d7be4a0d601c10987589bd2db83598

 src/books/embedded/view/components/chapter001.vue

@@ -1,48 +1,151 @@
<template>
  <div class="chapter" num="1">
    <div class="page-box page-padding">
      
    </div>
    <h1>项目一　触摸屏组态介绍</h1>
    <!-- 1 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="11">
      <div class="mt-100 w100">
        <!-- <h1>项目一　触摸屏组态介绍</h1> -->
        <img src="../../assets/images/project-one.png" alt="" class="w100" />
    <p class="quotation">
      工业自动化组态软件发展有两个方向，一方面是向大型平台软件方向发展，例如，直接从组态发展成大型的CIMS、ERP系统等；另一方面是向小型化方向发展，由通用组态软件演变为嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，促使国家工业自动化程度快速提升，因此嵌入式方向发展机会更多、市场容量更大。MCGS嵌入式软件和TPC系列触摸屏得到了主流工控硬件企业大力支持，技术解决方案深受用户的好评。
    </p>
    <h2 class="secondTitle" id="sigil_toc_id_13">
        <h2 class="secondTitle primary-color" id="sigil_toc_id_13">
      任务一　认识嵌入式组态和触摸屏
    </h2>
    <p class="content"><b>任务目标</b></p>
        <div class="w100 border-so mb-20"></div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/mubiao.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务目标</b>
        </p>
    <p class="content">（1）认识嵌入式工业自动化组态软件；</p>
    <p class="content">（2）认识嵌入式触摸屏TPC。</p>
    <p class="content"><b>任务描述</b></p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/miaoshu.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务描述</b>
        </p>
    <p class="content">
      了解嵌入式系统和工业自动化组态软件，熟悉嵌入式触摸屏TPC。
    </p>
    <p class="content"><b>任务训练</b></p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/xunlian.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务训练</b>
        </p>
    <p class="content">
      嵌入式组态软件是一种用于嵌入式系统并带有网络功能的应用软件，嵌入式系统是指可嵌入至某一设备、产品并可连接至网络的带有智能（即微处理器）的设备。例如，在自动取款机（ATM）、办公设备、自动化产品、家用电器、平板电脑、个人数码助理乃至航空电子领域都有广泛应用。嵌入式组态软件分开发系统和运行系统。嵌入式组态软件的开发系统一般运行于具有良好人机界面的Windows操作系统上，而运行系统可基于多种嵌入式操作系统如Windows
      CE，Linux和DOS之上，甚至直接支持特定的CPU。嵌入式系统具有与PC几乎一样的功能，与PC的区别仅仅是将微型操作系统与应用软件嵌入在ROM、RAM与Flash存储器中，而不是存储于磁盘等载体中。
    </p>
    <p class="content">
      随着后PC时代的到来，在制造业领域更注重使用符合其特定需求并带有智能的嵌入式工业控制组态软件，而嵌入式组态软件特具的按功能剪裁的特性，以及其内嵌的实时多任务操作系统，可保证整个嵌入系统体积小、成本低、实时性高、可靠性高的同时，还方便不具备嵌入式软件开发经验的用户在极短的时间内，使用嵌入式组态软件快速开发完成一个嵌入式系统，并极大地加快了嵌入式产品进入市场的速度，而且使产品具有丰富的人机界面。北京昆仑通态公司MCGS组态软件，通过大力加强对工控硬件产品的驱动支持和提升软件内部功能，有效帮助用户建造从嵌入式设备、现场监控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1～图1-4所示为嵌入式组态软件系统应用于各个行业的情况。
          随着后PC时代的到来，在制造业领域更注重使用符合其特定需求并带有智能的嵌入式工业控制组态软件，而嵌入式组态软件特具的按功能剪裁的特性，以及其内嵌的实时多任务操作系统，可保证整个嵌入系统体积小、成本低、实时性高、可靠性高的同时，还方便不具备嵌入式软件开发经验的用户在极短的时间内，使用嵌入式组态软件快速开发完成一个嵌入式系统，并极大地加快了嵌入式产品进入市场的速度，而且使产品具有丰富的人机界面。北京昆仑通态公司MCGS组态软件，通过大力加强对工控硬件产品的驱动支持和
    </p>
    <p class="content"><b>素材　</b>工程样例</p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">1</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 2 -->
    <div class="page-box fl fl-cl ju-bt" page="12">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" class="w100" />
        </div>
        <div>
          <div class="padding-96 pr">
            <ul class="left-resource">
              <li class="fl al-cn ju-cn">
                <img src="../../assets/images/icon/sucai.png" />
                <span class="primary-color">素材</span>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <div>
                  <span class="rar-text">工程样例.rar</span>
                  <img
                    @click="download('工程样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <div>
                  <span class="rar-text">管控一体化样例.rar</span>
                  <img
                    @click="download('管控一体样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <div>
                  <span class="rar-text">嵌_计划曲线样例.rar</span>
                  <img
                    @click="download('嵌_计划曲线样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
            </ul>
            <p class="content t0">
              提升软件内部功能，有效帮助用户建造从嵌入式设备、现场监控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1～图1-4所示为嵌入式组态软件系统应用于各个行业的情况。
            </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00014001.jpg" active="true" />
              <el-image
                :src="imgOne"
                :preview-src-list="[imgOne]"
                class="w100"
              />
      <p class="imgdescript">图1-1　嵌入式组态软件系统应用于电力行业</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00014002.jpg" active="true" />
              <el-image :src="imgTwo" :preview-src-list="[imgTwo]" />
      <p class="imgdescript">图1-2　嵌入式组态软件系统应用于铁路行业</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00014003.jpg" active="true" />
              <el-image :src="imgThree" :preview-src-list="[imgThree]" />
      <p class="imgdescript">图1-3　嵌入式组态软件系统应用于橡胶行业</p>
    </div>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00014004.jpg" active="true" /> -->
              <el-image :src="imgFour" :preview-src-list="[imgFour]" />
      <p class="imgdescript">图1-4　嵌入式组态软件系统应用于纺织行业</p>
    </div>
    <p class="content t-left"><b>1　认识MCGS嵌入版组态软件</b></p>
          </div>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">2</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 3 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="13">
      <div>
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-one.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>认识MCGS嵌入版组态软件</b>
        </p>
    <p class="content">
      MCGS嵌入版组态软件专门应用于TPC一体机（触摸屏），主要完成现场数据的采集与监测、前端数据的处理与控制与其他相关的输入输出硬件设备结合，可以快速、方便地开发各种用于现场采集、数据处理和控制的自动化系统。例如，可以灵活组态各种智能仪表、数据采集模块，无纸记录仪、无人值守的现场采集站、人机界面等专用设备。
    </p>
@@ -69,19 +172,42 @@
    <p class="content">
      总之，MCGS嵌入版组态软件具有与通用版组态软件一样强大的功能，并且操作简单，易学易用。
    </p>
    <p class="content t-left"><b>2　MCGS嵌入版组态软件组成</b></p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-two.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>MCGS嵌入版组态软件组成</b>
        </p>
    <p class="content">
      MCGS嵌入版组态软件生成的用户应用系统，由主控窗口、设备窗口、用户窗口、实时数据库和运行策略五部分构成，如图1-5所示。
    </p>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00015001.jpg" active="true" /> -->
          <el-image :src="imgFive" :preview-src-list="[imgFive]" />
      <p class="imgdescript">图1-5　用户应用系统组成</p>
    </div>
    <p class="content">
      （1）主控窗口构造了应用系统的主框架，确定了工业控制中工程作业的总体轮廓，以及运行流程、特性参数和启动特性等内容，是应用系统的主框架。
    </p>
    <p class="content">
      （2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置不同类型和功能的设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
          （2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">3</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 4 -->
    <div class="page-box fl fl-cl ju-bt" page="14">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <p class="content t0">
            不同类型和功能的设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
    </p>
    <p class="content">
      （3）用户窗口实现了数据和流程的“可视化”。用户窗口中可以放置三种不同类型的图形对象：图元、图符和动画构件。通过在用户窗口内放置不同的图形对象，用户可以构造各种复杂的图形界面，用不同的方式实现数据和流程的“可视化”。
@@ -92,7 +218,14 @@
    <p class="content">
      （5）运行策略是对系统运行流程实现有效控制的手段。运行策略本身是系统提供的一个框架，其里面放置由策略条件构件和策略构件组成的“策略行”，通过对运行策略的定义，使系统能够按照设定的顺序和条件操作任务，实现对外围设备工作过程的精确控制。
    </p>
    <p class="content t-left"><b>3　认识TPC7062K触摸屏</b></p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-three.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>认识TPC7062K触摸屏</b>
          </p>
    <p class="content">
      嵌入式组态软件的组态环境和模拟运行环境是一套完整的工具软件，可以在PC上运行。
    </p>
@@ -132,101 +265,283 @@
      <!-- <img class="s-pic" src="../../assets/images/img00016001.jpg" /> -->
      仅限DC 24V！建议电源的输出功率为15W。
    </p>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00017001.jpg" active="true" /> -->
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">4</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 5 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="15">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div class="fl">
          <div class="">
            <el-image
              :src="imgSix"
              active="true"
              :preview-src-list="[imgSix]"
            />
      <p class="imgdescript">图1-6　正视图</p>
    </div>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00017002.jpg" active="true" /> -->
          <div class="">
            <el-image :src="imgSeven" :preview-src-list="[imgSeven]" />
      <p class="imgdescript">图1-7　背视图</p>
    </div>
        </div>
        <div class="fl al-cn">
          <div class="left">
    <p class="content">接线步骤：</p>
    <p class="content">
      ①将开关电源24V+端线插入TPC电源插头接线1端中，如图1-8所示。
    </p>
    <p class="content">②将开关电源24V-端线插入TPC电源插头接线2端中。</p>
    <p class="content">③使用一字头旋具将TPC电源插头螺钉锁紧。</p>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00017003.jpg" active="true" /> -->
          </div>
          <div class="right">
            <el-image :src="imgEnight" :preview-src-list="[imgEnight]" />
      <p class="imgdescript">图1-8　电源插头示意图及引脚定义</p>
    </div>
        </div>

    <p class="content">
      （4）TPC7062K外部接口。接口说明如图1-9所示，串口引脚定义如图1-10所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00017004.jpg" active="true" />
        <div>
          <el-image :src="imgNine" :preview-src-list="[imgNine]" class="w100" />
      <p class="imgdescript">图1-9　接口说明</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00017005.jpg" active="true" />
        <div>
          <el-image :src="imgTen" :preview-src-list="[imgTen]" />
      <p class="imgdescript">图1-10　串口引脚定义</p>
    </div>
    <p class="content">
      （5）TPC7062K启动。使用24V直流电源给TPC供电，开机启动后屏幕出现“正在启动”提示进度条，此时不需任何操作自动进入工程运行界面，如图1-11所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00018001.jpg" active="true" />
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">5</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 6 -->
    <div class="page-box fl fl-cl ju-bt" page="16">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <div>
            <el-image :src="imgEleven" :preview-src-list="[imgEleven]" />
      <p class="imgdescript">图1-11　TPC启动过程</p>
    </div>
    <p class="content t-left"><b>4　TPC7062K与三款主流PLC通信接线</b></p>
    <p class="content">TPC7062K与三款主流PLC通信接线如图1-12～图1-14所示。</p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00018002.jpg" active="true" />
      <p class="imgdescript">图1-12　TPC7062K与西门子S7-200系列PLC通信接线</p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-four.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>TPC7062K与三款主流PLC通信接线</b>
          </p>
          <p class="content">
            TPC7062K与三款主流PLC通信接线如图1-12～图1-14所示。
          </p>
          <div style="width: 90%" class="m0-auto">
            <el-image :src="imgTwelve" :preview-src-list="[imgTwelve]" />
            <p class="imgdescript">
              图1-12　TPC7062K与西门子S7-200系列PLC通信接线
            </p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00018003.jpg" active="true" />
          <div class="m0-auto" style="width: 90%">
            <el-image :src="imgThirteen" :preview-src-list="[imgThirteen]" />
      <p class="imgdescript">图1-13　TPC7062K与欧姆龙PLC通信接线</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00019001.jpg" active="true" />
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">6</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 7 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="17">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div>
          <el-image :src="imgFourteen" :preview-src-list="[imgFourteen]" />
      <p class="imgdescript">图1-14　TPC7062K与三菱FX系列PLC通信接线</p>
    </div>
    <p class="content">评分表见表1-1。</p>
    <div class="qrbodyPic">
      <p class="imgtitle">表1-1　评分表</p>
      <img src="../../assets/images/img00019002.jpg" active="true" />
        <p class="imgtitle">
          表1-1　评分表 <i class="el-icon-share cu-pr"></i>
        </p>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr class="table-bc">
            <td class="table-cn">
              评 分 表<br />
              <input style="width: 30px" class="input-border table-bc" /> 学年
            </td>
            <td colspan="2" class="table-cn">
              工 作 形 式 <br />
              <input type="checkbox" name="xingshi" value="prople" /> 个人
              <input type="checkbox" name="xingshi" value="fengong" /> 小组分工
              <input type="checkbox" name="xingshi" value="xiaozu" /> 小组
            </td>
            <td colspan="2" class="table-cn">
              工作时间/min <br />
              <input style="width: 80px" class="input-border table-bc" />
            </td>
          </tr>
          <tr class="table-bc">
            <td class="table-cn">任务</td>
            <td class="table-cn">训练内容</td>
            <td class="table-cn">训练要求</td>
            <td class="table-cn">学生自评</td>
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="4">认识嵌入式组态和触摸屏</td>
            <td>嵌入式组态和触摸屏，20分</td>
            <td>
              收集各类触摸屏功能及性能信息，并进行比较;了解嵌人式组态组成，了解TPC系列产品性能、外观与接线
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>通信连接，30分</td>
            <td>
              观察动手制作TPC与PC通信线，并测试:观察动手制作TPC与PLC通信线，并测试
            </td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>测试与功能，30分</td>
            <td>TPC与PC通信是否正常</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>职业素养与安全意识，20 分</td>
            <td>
              工具、器材、导线等处理操作符合职业要求:遵守纪律，保持工位整洁
            </td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <div class="tl-rg mt-20">
          学生:<input style="width: 40px" class="input-border" /> 教师:<input
            style="width: 40px"
            class="input-border"
          />日期:<input style="width: 82px" class="input-border" />
    </div>
    <h2 class="secondTitle" id="sigil_toc_id_14">
        <h2 class="secondTitle primary-color" id="sigil_toc_id_14">
      任务二　MCGS嵌入版组态软件安装
    </h2>
    <p class="content"><b>任务目标</b></p>
        <div class="w100 border-so mb-20"></div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/mubiao.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务目标</b>
        </p>
    <p class="content">掌握MCGS嵌入版组态软件V6.8安装方法。</p>
    <p class="content"><b>任务描述</b></p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/miaoshu.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务描述</b>
        </p>
    <p class="content">学习嵌入式组态软件V6.8的安装方法和步骤。</p>
    <p class="content"><b>任务训练</b></p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/xunlian.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务训练</b>
        </p>
    <p class="content">
      在昆仑通态官网上下载MCGS_嵌入版完整安装包，解压缩后，具体安装步骤如下：
    </p>
        <video
          v-if="videoOne"
          :src="config.resourceCtx + '/配套学习资源/p7/MCGS安装视频带音频.mp4'"
          webkit-playsinline="true"
          x-webkit-airplay="true"
          playsinline="true"
          x5-video-orientation="h5"
          x5-video-player-fullscreen="true"
          x5-playsinline=""
          controls
          class="w100 mt-20"
        ></video>
        <div class="primary-color fl al-cn ju-cn">
          <span>视频：MCGS安装视频</span>
        </div>
    <p class="content">
      （1）运行Setup.exe文件，MCGS安装程序窗口如图1-15所示。
    </p>
    <p class="content">
      在安装程序窗口中单击“安装组态软件”按钮，弹出安装程序窗口。单击“下一步”按钮，启动安装程序，如图1-16所示。
    </p>
    <p class="content"><b>安装包　</b>MCGS嵌入版安装文件</p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020001.jpg" active="true" />
      <p class="imgdescript">图1-15　MCGS安装程序窗口</p>
        <ul class="right-resource">
          <li class="fl al-cn ju-cn border-so p-10">
            <img
              src="../../assets/images/icon/anzhuang.png"
              class="anzhuang-icon"
            />
            <span class="primary-color">安装包</span>
          </li>
          <li class="fl fl-cl al-cn p-10">
            <img src="../../assets/images/icon/rar.png" class="rar-icon" />
            <div>
              <span class="rar-text"
                >MCGS嵌入版<br />
                安装文件.rar</span
              >
              <img
                @click="downloadRar('McgsPro 3.3.6.6354 SP1.3 组态软件安装包')"
                src="../../assets/images/icon/download.png"
                class="downlod-icon cu-pr"
              />
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020002.jpg" active="true" />
      <p class="imgdescript">图1-16　启动安装程序</p>
          </li>
        </ul>
    </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">7</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 8 -->
    <div class="page-box fl fl-cl ju-bt" page="18">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
    <p class="content">
      按提示步骤操作，随后，安装程序将提示指定安装目录，如不指定时，系统默认安装到D：\MCGSE目录下，建议使用默认目录，如图1-17所示，系统安装大约需要几分钟。
    </p>
    <p class="content">
      （2）MCGS嵌入版主程序安装完成后，继续安装设备驱动，单击“是”按钮如图1-18所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020003.jpg" active="true" />
      <p class="imgdescript">图1-17　指定安装目录</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020004.jpg" active="true" />
      <p class="imgdescript">图1-18　选择安装设备驱动</p>
    </div>
    <p class="content">
      （3）单击“下一步”按钮，进入驱动安装程序，选择“所有驱动”复选框，单击“下一步”按钮进行安装，如图1-19所示。
    </p>
@@ -240,28 +555,214 @@
      （6）安装完成后，Windows操作系统的桌面上添加了如图1-20所示的两个快捷方式图标，分别用于启动MCGS嵌入式组态环境和模拟运行环境。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020005.jpg" active="true" />
      <p class="imgdescript">图1-19　驱动安装程序</p>
            <el-carousel
              trigger="click"
              class="bones-carousel carousel-image"
              arrow="always"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, index) in bonesList"
                :key="index"
                class="bones-carousel-item"
              >
                <el-image
                  :src="item"
                  :preview-src-list="bonesList"
                  :preview-teleported="true"
                  class="open-image"
                />
              </el-carousel-item>
            </el-carousel>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020006.jpg" active="true" />
      <p class="imgdescript">图1-20　组态环境和模拟运行环境快捷方式图标</p>
    </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">8</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 9 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="19">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <!-- 内容 -->
    <p class="content">评分表见表1-2。</p>
    <div class="qrbodyPic">
      <p class="imgtitle">表1-2　评分表</p>
      <img src="../../assets/images/img00021001.jpg" active="true" />
    </div>
    <h2 class="secondTitle" id="sigil_toc_id_15">任务三　建立工程与下载工程</h2>
    <p class="content"><b>任务目标</b></p>
    <p class="content">初步了解工程建立、组态、下载与模拟运行。</p>
    <p class="content"><b>任务描述</b></p>
    <p class="content"><b>文本　</b>教程资源</p>
    <p class="content">
      触摸屏是新一代高科技人机界面产品，适用于现场控制，可靠性高，编程简单，使用、维护方便。在工艺参数较多又需要人机交互时使用触摸屏，可使整个生产的自动化控制的功能得到大大地加强。本任务学习嵌入式组态软件工程建立、组态、模拟运行和下载到触摸屏的一般过程。
          <p class="imgtitle">
            表1-2　评分表 <i class="el-icon-share cu-pr"></i>
    </p>
    <p class="content"><b>任务训练</b></p>
    <p class="content t-left"><b>1　新建工程</b></p>
        </div>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr class="table-bc">
            <td class="table-cn">
              评 分 表<br />
              <input style="width: 30px" class="input-border table-bc" /> 学年
            </td>
            <td colspan="2" class="table-cn">
              工 作 形 式 <br />
              <input type="checkbox" name="xingshi" value="prople" /> 个人
              <input type="checkbox" name="xingshi" value="fengong" /> 小组分工
              <input type="checkbox" name="xingshi" value="xiaozu" /> 小组
            </td>
            <td colspan="2" class="table-cn">
              工作时间/min <br />
              <input style="width: 80px" class="input-border table-bc" />
            </td>
          </tr>
          <tr class="table-bc">
            <td class="table-cn">任务</td>
            <td class="table-cn">训练内容</td>
            <td class="table-cn">训练要求</td>
            <td class="table-cn">学生自评</td>
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="4">MCGS嵌入版组态软件安装</td>
            <td>嵌入版组态软件安装，40分</td>
            <td>
              找到企业网站，下载最新MCGS嵌人式软件并安装:找到工业自动化软件BBS网站，参与讨论
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>测试与功能，40分</td>
            <td>软件是否正常运行、使用</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>职业素养与安全意识，20分</td>
            <td>工具、器材等处理操作符合职业要求，遵守纪律，保持工位整洁</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <div class="tl-rg mt-20">
          学生:<input style="width: 40px" class="input-border" /> 教师:<input
            style="width: 40px"
            class="input-border"
          />日期:<input style="width: 82px" class="input-border" />
        </div>
        <h2 class="secondTitle" id="sigil_toc_id_15">
          任务三　建立工程与下载工程
        </h2>
        <div class="w100 border-so mb-20"></div>
        <div class="fl ju-bt">
          <div class="left" style="width: 30%">
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/mubiao.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>任务目标</b>
            </p>
            <p class="content">初步了解工程建立、组态、下载与模拟运行。</p>
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/miaoshu.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>任务描述</b>
            </p>
            <p>触摸屏是新一代高科</p>
          </div>
          <div class="right" style="width: 69%">
            <div>
              <img
                src="../../assets/images/icon/document.png"
                class="document-icon"
              />
              <span>文本</span>
            </div>
            <ul class="word-resource fl">
              <li class="fl fl-cl al-cn">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>初级教程</span>
                  <img
                    @click="downloadWord('初级教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>中级教程</span>
                  <img
                    @click="downloadWord('中级教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>驱动教程</span>
                  <img
                    @click="downloadWord('驱动教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>硬件教程</span>
                  <img
                    @click="downloadWord('硬件教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
            </ul>
          </div>
        </div>
        <p class="content">
          技人机界面产品，适用于现场控制，可靠性高，编程简单，使用、维护方便。在工艺参数较多又需要人机交互时使用触摸屏，可使整个生产的自动化控制的功能得到大大地加强。本任务学习嵌入式组态软件工程建立、组态、模拟运行和下载到触摸屏的一般过程。
        </p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/xunlian.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务训练</b>
        </p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-one.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>新建工程</b>
        </p>
    <p class="content">
      双击组态环境快捷方式图标<img
        class="h-pic"
@@ -279,20 +780,42 @@
      <img src="../../assets/images/img00021003.jpg" active="true" />
      <p class="imgdescript">图1-21　选择TPC类型</p>
    </div>
    <p class="content t-left"><b>2　窗口组态</b></p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-two.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>窗口组态</b>
        </p>
    <p class="content">
      （1）在工作台中激活用户窗口，单击“新建窗口”按钮，建立新画面“窗口0”，如图1-22所示。
    </p>
    <p class="content">
      （2）单击“窗口属性”按钮，弹出“用户窗口属性设置”对话框，在“基本属性”选项卡，将“窗口名称”修改为“常用构件使用”，单击“确认”按钮进行保存，如图1-23所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022001.jpg" active="true" />
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">9</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 10 -->
    <div class="page-box fl fl-cl ju-bt" page="20">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <div class="fl ju-bt w100">
            <div>
              <el-image :src="imgFifteen" :preview-src-list="[imgFifteen]" />
      <p class="imgdescript">图1-22　建立新窗口</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022002.jpg" active="true" />
            <div class="">
              <el-image :src="imgSixteen" :preview-src-list="[imgSixteen]" />
      <p class="imgdescript">图1-23　窗口属性设置</p>
            </div>
    </div>
    <p class="content">
      （3）双击用户窗口，在窗口编辑位置按住鼠标左键拖放出一定大小后，松开鼠标左键，这样一个按钮构件就绘制在窗口中，如图1-24所示。
@@ -300,13 +823,18 @@
    <p class="content">
      接下来双击该按钮，弹出“标准按钮构件属性设置”对话框，在“基本属性”选项卡中的“文本”文本框中输入“指示灯1”，单击“确认”按钮保存，如图1-25所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022003.jpg" active="true" />
          <div class="fl ju-bt">
            <div>
              <el-image
                :src="imgSeventeen"
                :preview-src-list="[imgSeventeen]"
              />
      <p class="imgdescript">图1-24　按钮制作</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022004.jpg" active="true" />
            <div>
              <el-image :src="imgEighteen" :preview-src-list="[imgSeventeen]" />
      <p class="imgdescript">图1-25　标准按钮构件属性设置</p>
            </div>
    </div>
    <p class="content">
      按照同样的操作分别绘制另外一个按钮，将“文本”修改为“指示灯2”，完成后如图1-26所示。
@@ -320,51 +848,87 @@
    <p class="content">
      （5）单击选中工具箱中的“标签”按钮，在窗口按住鼠标左键，拖放出一定大小“标签”，如图1-29所示。然后双击该标签，弹出“标签动画组态属性设置”对话框，在“扩展属性”选项卡中的“文本内容输入”文本框中输入“状态显示1：”，单击“确认”按钮，如图1-30所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023001.jpg" active="true" />
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">10</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 11 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="21">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div class="fl ju-bt">
          <div>
            <el-image :src="imgNineTeen" :preview-src-list="[imgNineTeen]" />
      <p class="imgdescript">图1-26　按钮文字修改</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023002.jpg" active="true" />
          <div>
            <el-image :src="imgTwenty" :preview-src-list="[imgTwenty]" />
      <p class="imgdescript">图1-27　按钮排列</p>
    </div>
        </div>

    <div class="qrbodyPic">
      <img src="../../assets/images/img00023003.jpg" active="true" />
          <el-image :src="imgtOne" :preview-src-list="[imgtOne]" />
      <p class="imgdescript">图1-28　添加指示灯</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023004.jpg" active="true" />
        <div class="fl">
          <div>
            <el-image :src="imgtTwo" :preview-src-list="[imgtTwo]" />
      <p class="imgdescript">图1-29　制作标签</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023005.jpg" active="true" />
          <div>
            <el-image :src="imgtThree" :preview-src-list="[imgtThree]" />
      <p class="imgdescript">图1-30　标签动画组态属性设置</p>
    </div>
        </div>

    <p class="content">
      同样的方法，添加另一个标签，“文本内容输入”文本框中输入“状态显示2：”，如图1-31所示。
    </p>
    <p class="content">
      （6）单击工具箱中的“输入框”按钮，在窗口按住鼠标左键，拖放出两个一定大小的“输入框”，分别摆放在“状态显示1：”标签、“状态显示2：”标签的旁边位置，如图1-32所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024001.jpg" active="true" />
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">11</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 12 -->
    <div class="page-box fl fl-cl ju-bt" page="22">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <div class="fl">
            <div>
              <el-image :src="imgtFour" :preview-src-list="[imgtFour]" />
      <p class="imgdescript">图1-31　制作输入框</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024002.jpg" active="true" />
            <div>
              <el-image :src="imgtFive" :preview-src-list="[imgtFive]" />
      <p class="imgdescript">图1-32　输入框排列</p>
            </div>
    </div>
    <p class="content">（7）建立数据链接：</p>
    <p class="content">
      ①按钮：双击“指示灯1”按钮，弹出“标准按钮构件属性设置”对话框，如图1-33所示，在“操作属性”选项卡中，默认“抬起功能”按钮为按下状态，选中“数据对象值操作”复选框，选择“清0”选项，建议变量名为“指示灯1”，即在取反控制按钮抬起时，对指示灯1进行清零，如图1-34所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024003.jpg" active="true" />
          <div class="fl">
            <div>
              <el-image :src="imgtSix" :preview-src-list="[imgtSix]" />
      <p class="imgdescript">图1-33　标准按钮构件属性设置”对话框</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024004.jpg" active="true" />
            <div>
              <el-image :src="imgtSeven" :preview-src-list="[imgtSeven]" />
      <p class="imgdescript">图1-34　控制按钮设置</p>
            </div>
    </div>
    <p class="content">
      输入指示灯1时会弹出图1-35所示对话框，单击“是”按钮，弹出“数据对象属性设置”对话框，对数据类型进行设置，如图1-36所示，单击“确认”按钮。
@@ -372,10 +936,8 @@
    <p class="content">
      同样，切换到“按下功能”选项卡进行设置，选择“数据对象值操作”复选框，选择“置1”选项，变量名为“指示灯1”，如图1-37所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024005.jpg" active="true" />
      <p class="imgdescript">图1-35　组态错误对话框</p>
    </div>
          <div class="fl">
            <div style="width: 60%">
    <p class="content">
      指示灯2按钮，“抬起功能”时“清0”；“按下功能”时“置1”，变量名为“指示灯2”。
    </p>
@@ -386,6 +948,15 @@
        active="true"
      />按钮选择数据对象指示灯1，如图1-38所示。同样方法设置“指示灯2”。
    </p>
            </div>
            <div style="width: 40%">
              <div class="qrbodyPic">
                <el-image :src="imgtEnight" :preview-src-list="[imgtEnight]" />
                <p class="imgdescript">图1-35　组态错误对话框</p>
              </div>
            </div>
          </div>

    <p class="content">
      ③输入框：双击“状态显示1：”标签旁边的输入框，弹出“输入框构件属性设置”对话框，在“操作属性”选项卡中，单击<img
        class="h-pic"
@@ -393,40 +964,67 @@
        active="true"
      />按钮弹出“变量选择”对话框，选择“指示灯1”选项，如图1-39所示，设置完成后单击“确认”按钮。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025001.jpg" active="true" />
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">12</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 13 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="23">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div class="fl">
          <div>
            <el-image :src="imgtNine" :preview-src-list="[imgtNine]" />
      <p class="imgdescript">图1-36　数据对象属性设置</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025002.jpg" active="true" />
          <div>
            <el-image :src="imgtTen" :preview-src-list="[imgtTen]" />
      <p class="imgdescript">图1-37　按下功能设置</p>
          </div>
    </div>
    <p class="content">
      按同样的方法，双击“状态显示2：”标签旁边的输入框进行设置，在“操作属性”选项卡中，选择对应的数据对象：通道类型选择“指示灯2”，组态完成后，保存。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025003.jpg" active="true" />
        <div class="fl">
          <div>
            <el-image :src="imgrOne" :preview-src-list="[imgrOne]" />
      <p class="imgdescript">图1-38　选择数据对象指示灯</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025004.jpg" active="true" />
          <div>
            <el-image :src="imgrTwo" :preview-src-list="[imgrTwo]" />
      <p class="imgdescript">图1-39　指示灯1属性操作</p>
    </div>
    <p class="content t-left"><b>3　工程下载到TPC7062K</b></p>
        </div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-three.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>工程下载到TPC7062K</b>
        </p>
    <p class="content">
      （1）方案一：USB下载。将标准USB2.0打印机线，如图1-40所示，扁平接口插到计算机的USB接口，微型接口插到TPC端的USB2.0接口，连接TPC7062K和PC。
    </p>
    <p class="content">
        <div class="fl ju-bt">
          <p class="content" style="width: 68%">
      单击工具条中的下载<img
        class="h-pic"
        src="../../assets/images/img00025005.jpg"
        active="true"
      />按钮，进行下载配置。单击“联机运行”按钮，如图1-41所示，选择“USB通信”连接方式，然后单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮，如图1-42所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025006.jpg" active="true" />
          <div style="width: 30%">
            <el-image :src="imgrThree" :preview-src-list="[imgrThree]" />
      <p class="imgdescript">图1-40　标准USB2.0打印机线</p>
    </div>
        </div>

    <p class="content">
      （2）方案二：网线下载。用网口下载时，先查看触摸屏IP地址，当触摸屏上电出现滚动进度条以后，单击滚动条，在启动属性查看IP地址，例如IP200.200.200.26，则设置计算机本地连接的IP地址为IP200.200.200.126，二者在同一网段，即IP前三段数字必须相同。或修改触摸屏地址，则进入触摸屏操作系统Windows
      CE，单击Windows的“开始”菜单，选择“设置”命令，运行“网络拨号与连接”，修改IP地址。
@@ -438,72 +1036,419 @@
        active="true"
      />按钮，进行下载配置。单击“联机运行”按钮，连接方式选择“TCP/IP网络通信”，设置触摸屏IP与计算机IP在同一网段内，单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026001.jpg" active="true" />
      <p class="imgdescript">图1-41　选择“联机运行”和“通信测试”</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026002.jpg" active="true" />
      <p class="imgdescript">图1-42　工程下载</p>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">13</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <p class="content t-left"><b>4　TPC模拟运行</b></p>
    <!-- 14 -->
    <div class="page-box fl fl-cl ju-bt" page="24">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-four.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>TPC模拟运行</b>
          </p>
    <p class="content">
      组态程序下载到“mcgsTpc嵌入式一体化触摸屏”后就可以进行模拟运行。触摸“指示灯1”按钮，如图1-43所示；触摸“指示灯2”按钮，如图1-44所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026003.jpg" active="true" />
      <p class="imgdescript">图1-43　触摸“指示灯1”按钮</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026004.jpg" active="true" />
      <p class="imgdescript">图1-44　触摸“指示灯2”按钮</p>
    </div>
    <p class="content t-left"><b>5　计算机上模拟运行</b></p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-five.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>计算机上模拟运行</b>
          </p>
    <p class="content">
      除了下载到TPC进行模拟调试外，可以在计算机上进行模拟运行。选择“模拟运行”，单击“工程下载”按钮后进入运行环境。按下“指示灯1”按钮，如图1-45所示，“指示灯1”变绿，“状态显示1：”为“1”，松手后复位；按下“指示灯2”按钮，如图1-46所示，“指示灯2”变绿，“状态显示2：”为“1”。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026005.jpg" active="true" />
      <p class="imgdescript">图1-45　按下“指示灯1”按钮</p>
            <el-carousel
              trigger="click"
              class="img-carousel carousel-image"
              arrow="always"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, index) in imgList"
                :key="index"
                class="bones-carousel-item"
              >
                <el-image
                  :src="item"
                  :preview-src-list="imgList"
                  :preview-teleported="true"
                  class="open-image"
                />
              </el-carousel-item>
            </el-carousel>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026006.jpg" active="true" />
      <p class="imgdescript">图1-46　按下“指示灯2”按钮</p>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">14</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 15 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="25">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
    </div>
    <p class="content">功能测试表如表1-3所示，评分表如表1-4所示。</p>
    <div class="qrbodyPic">
      <p class="imgtitle">表1-3　功能测试表</p>
      <img src="../../assets/images/img00027001.jpg" active="true" />
          <p class="imgtitle">
            表1-3　功能测试表 <i class="el-icon-share cu-pr"></i>
          </p>
    </div>
        <table border="1" cellpadding="10" cellspacing="0" class="w100">
          <tr class="table-bc">
            <td class="table-cn">
              <img src="../../assets/images/table-td.png" class="w100" />
            </td>
            <td class="table-cn">指示灯1</td>
            <td class="table-cn">指示灯2</td>
            <td class="table-cn">显示状态</td>
          </tr>
          <tr>
            <td>按下“指示灯1”按钮</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>按下“指示灯1”按钮</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>按下“指示灯2”按钮</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
    <div class="qrbodyPic">
      <p class="imgtitle">表1-4　评分表</p>
      <img src="../../assets/images/img00027002.jpg" active="true" />
          <p class="imgtitle">
            表1-4　评分表 <i class="el-icon-share cu-pr"></i>
          </p>
    </div>
    <p class="content"><b>练习与提高</b></p>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr class="table-bc">
            <td class="table-cn">
              评 分 表<br />
              <input style="width: 30px" class="input-border table-bc" /> 学年
            </td>
            <td colspan="2" class="table-cn">
              工 作 形 式 <br />
              <input type="checkbox" name="xingshi" value="prople" /> 个人
              <input type="checkbox" name="xingshi" value="fengong" /> 小组分工
              <input type="checkbox" name="xingshi" value="xiaozu" /> 小组
            </td>
            <td colspan="2" class="table-cn">
              工作时间/min <br />
              <input style="width: 80px" class="input-border table-bc" />
            </td>
          </tr>
          <tr class="table-bc">
            <td class="table-cn">任务</td>
            <td class="table-cn">训练内容及分配</td>
            <td class="table-cn">训练要求</td>
            <td class="table-cn">学生自评</td>
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="5">建立工程和下载工程</td>
            <td>工作步骤及电路图样，20分</td>
            <td>训练步骤:需要的元器件</td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>通信连接，20分</td>
            <td>TPC与PC通信:网口下载、USB下载</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>工程组态，20分</td>
            <td>设备组态;窗口组态</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>功能测试，30分</td>
            <td>按钮功能:指示灯功能:显示框功能</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>职业素养与安全意识，10分</td>
            <td>
              现场安全保护;工具、器材、导线等处理操作符合职业要求;遵守纪律，保持工位整洁
            </td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <p class="content mt-20"><b>练习与提高</b></p>
    <p class="quotation">1．阐述嵌入式组态、触摸屏之间的关系。</p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
    <p class="quotation">2．是否可以采用U盘下载组态过程？过程步骤如何？</p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
    <p class="quotation">
      3．在淘宝网站查找任务一中主流PLC与触摸屏连接线型号、性能和价格。
        </p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
    </p>
    <p class="quotation">
      4．分析计算机、平板电脑、触摸屏、PLC之间连接的异同。
    </p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
    <p class="quotation">
      5．什么是用户应用系统、组态环境与运行环境？组态环境是开发工具吗？
        </p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
    </p>
    <p class="quotation">
      6．MCGS触摸屏安装何种操作系统？主要自带何种应用软件？从www.mcgs.com.cn网站下载最新软件包并安装，在www.gongkong.com注册，进入BBS讨论工控软件技术。
    </p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
    <p class="quotation">7．组态变量怎样建立对应数据关系？</p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
    <p class="quotation">8．了解RS-232、RS-485接口性能功能和TCP/IP协议。</p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
    <p class="quotation">9．比较触摸屏中的组态工程和手机中的APP的区别。</p>
        <p class="ti-2">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
          ></textarea>
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">15</li>
        <li class="footer-box"></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "chapterOne",
  data() {
    return {
      imgOne: require("../../assets/images/img00014001.jpg"),
      imgTwo: require("../../assets/images/img00014002.jpg"),
      imgThree: require("../../assets/images/img00014003.jpg"),
      imgFour: require("../../assets/images/img00014004.jpg"),
      imgFive: require("../../assets/images/img00015001.jpg"),
      imgSix: require("../../assets/images/img00017001.jpg"),
      imgSeven: require("../../assets/images/img00017002.jpg"),
      imgEnight: require("../../assets/images/img00017003.jpg"),
      imgNine: require("../../assets/images/img00017004.jpg"),
      imgTen: require("../../assets/images/img00017005.jpg"),
      imgEleven: require("../../assets/images/img00018001.jpg"),
      imgTwelve: require("../../assets/images/img00018002.jpg"),
      imgThirteen: require("../../assets/images/img00018003.jpg"),
      imgFourteen: require("../../assets/images/img00019001.jpg"),
      imgFifteen: require("../../assets/images/img00022001.jpg"),
      imgSixteen: require("../../assets/images/img00022002.jpg"),
      imgSeventeen: require("../../assets/images/img00022003.jpg"),
      imgEighteen: require("../../assets/images/img00022004.jpg"),
      imgNineTeen: require("../../assets/images/img00023001.jpg"),
      imgTwenty: require("../../assets/images/img00023002.jpg"),
      imgtOne: require("../../assets/images/img00023003.jpg"),
      imgtTwo: require("../../assets/images/img00023004.jpg"),
      imgtThree: require("../../assets/images/img00023005.jpg"),
      imgtFour: require("../../assets/images/img00024001.jpg"),
      imgtFive: require("../../assets/images/img00024002.jpg"),
      imgtSix: require("../../assets/images/img00024003.jpg"),
      imgtSeven: require("../../assets/images/img00024004.jpg"),
      imgtEnight: require("../../assets/images/img00024005.jpg"),
      imgtNine: require("../../assets/images/img00025001.jpg"),
      imgtTen: require("../../assets/images/img00025002.jpg"),
      imgrOne: require("../../assets/images/img00025003.jpg"),
      imgrTwo: require("../../assets/images/img00025004.jpg"),
      imgrThree: require("../../assets/images/img00025006.jpg"),
      tableOne: require("../../assets/images/img00019002.jpg"),
      videoOne: true,
      bonesList: [
        require("../../assets/images/carousel-one.png"),
        require("../../assets/images/carousel-two.png"),
        require("../../assets/images/carousel-three.png"),
        require("../../assets/images/carousel-four.png"),
        require("../../assets/images/carousel-five.png"),
        require("../../assets/images/carousel-six.png"),
      ],
      imgList: [
        require("../../assets/images/img-list-one.png"),
        require("../../assets/images/img-list-two.png"),
        require("../../assets/images/img-list-three.png"),
        require("../../assets/images/img-list-four.png"),
        require("../../assets/images/img-list-five.png"),
        require("../../assets/images/img-list-six.png"),
      ],
    };
  },
  methods: {
    download(type) {
      const path = "/配套学习资源/p2/工程样例/" + type + ".rar";
      window.open(this.config.resourceCtx + path);
    },
    downloadRar(type) {
      const path = "/配套学习资源/p7/" + type + ".rar";
      window.open(this.config.resourceCtx + path);
    },
    downloadWord(type) {
      const path = "/配套学习资源/p9/教程资源/" + type + ".doc";
      window.open(this.config.resourceCtx + path);
    },
    changeResource(type) {
      if (type == "videoOne") {
        this.videoOne = !this.videoOne;
      }
    },
  },
};
</script>
<style scoped lang="less">
    
p {
  font-family: "宋体", SimSun, sans-serif !important;
  margin: 0;
}
textarea {
  resize: none;
}
.left-resource {
  display: flex;
  flex-direction: column;
  width: 116px;
  padding: 0;
  position: absolute;
  left: 20px;
  top: 100px;
  li {
    border-bottom: 1px dotted #501438;
  }
}
.right-resource {
  position: absolute;
  right: 10px;
  bottom: 180px;
}
.word-resource {
  padding: 0;
  border: 1px solid #501438;
  li {
    padding: 0 8px;
    border-right: 1px dotted #501438;
  }
  li:last-child {
    border: 0;
  }
}
.bones-carousel {
  /deep/ .el-image__inner {
    width: 386px;
    object-fit: contain;
  }
}
.img-carousel {
  /deep/ .el-image__inner {
    height: 290px;
    object-fit: contain;
  }
}
</style>