嵌入式

闫增涛

2024-05-22 d07c2414b1d7be4a0d601c10987589bd2db83598

嵌入式

 src/App.vue

@@ -1,23 +1,37 @@
<template>
  <div id="app">
    <childHealth v-if="config.activeBook.name == 'childHealth'"></childHealth>
    <book v-if="config.activeBook.name == 'content'"></book>
    <embedded v-if="config.activeBook.name == 'embedded'" ></embedded>
    <childHealth v-if="activeBook.name == 'childHealth'"></childHealth>
    <book v-if="activeBook.name == 'content'"></book>
    <embedded v-if="activeBook.name == 'embedded'"></embedded>
  </div>
</template>

<script>
import childHealth from "./books/childHealth/view/index.vue";
import book from './books/content/index.vue'
import embedded from "./books/embedded/view/index.vue"
import book from "./books/content/index.vue";
import embedded from "./books/embedded/view/index.vue";

export default {
  name: "App",
  components: {
    childHealth,
    book,
    embedded
  }
    embedded,
  },
  data() {
    return {
      activeBook: {},
    };
  },
  async created() {
    this.activeBook = await this.config.getBookConfig();
    console.log('图书',this.activeBook);
    if (this.$store.state.qiankun,this.$store.state.qiankun.getBookConfig) {
      this.$store.state.qiankun.getBookConfig({
        bookConfig: this.activeBook,
      });
    }
  },
};
</script>


 src/assets/js/config.js

@@ -1,45 +1,47 @@
// export const requestCtx = "http://182.92.203.7:3001"; // 请求地址
// export const appId = 27;
import axios from "axios";
export const requestCtx = "https://jsek.bnuic.com"; // 请求地址
export const resourceCtx = "http://182.92.203.7:3007/books/resource/1"; // 资源请求地址
export const resourceCtx = "http://182.92.203.7:3007/books/resource/3"; // 资源请求地址
export const publicCtx = "http://182.92.203.7:3007/books/book/1"; // 资源请求地址
export const bookList = [
  {id:1,name:"childHealth",bookName:"学前儿童卫生与保健",bookId:'2358',rootCmsItemId:'24080',storeRefcode:'defaultGoodsStore3'},
  {id:2,name:'content',bookName:"婴幼儿生活护照",bookId: '3335',rootCmsItemId:'66969',storeRefcode:'jsek_jslx'},
  {id:3,name:"embedded",bookNmae:"嵌入式组态控制技术",bookId:'',rootCmsItemId:"",}
]
export const activeBook = bookList[0]; // 资源请求地址
export let activeBook = {}; // 资源请求地址
export let goodsStore = "";
export let publicStore = "";
const getBookConfig = async () => {
  const response = await axios.get(resourceCtx + "/bookConfig.json");
  activeBook = response.data;
  goodsStore = activeBook.storeRefcode;
  publicStore = activeBook.storeRefcode;
  return response.data;
};


// export const bookList = [
//   {id:1,name:"childHealth",bookName:"学前儿童卫生与保健",bookId:'2358',rootCmsItemId:'24080',storeRefcode:'defaultGoodsStore3'},
//   {id:2,name:'content',bookName:"婴幼儿生活护照",bookId: '3335',rootCmsItemId:'66969',storeRefcode:'jsek_jslx'},
//   {id:3,name:"embedded",bookNmae:"嵌入式组态控制技术",bookId:'',rootCmsItemId:"",}
// ] 
// activeBook = bookList[2]
export const appId = 3;
export const requestTimeOut = 300000; // 请求超时时间
export const tokenKey = "jsek-token";
export const userInfoKey = "website-front-userInfo"; // 用户信息key 
export const userInfoKey = "website-front-userInfo"; // 用户信息key
export const appRefCode = "jingshieke";
// export const goodsStore = `defaultGoodsStore${appId}`; // 默认商品库(书城)
// export const publicStore = `defaultPublicStore${appId}`; // 默认资源开放仓储
export const goodsStore = activeBook.storeRefcode;
export const publicStore = activeBook.storeRefcode;
export const publicRepository = `defaultPublicRepository${appId}`; // 默认资源开放库
export const digitalCourses = "jsek_digitalCourses";//数字课程
export const digitalTextbooks = "jsek_digitalTextbooks";//数字教材
export const seminar = "jsek_seminar";//专题研讨
// export const seminar ="jsek_seminar";//书展

export const publicRepository = `defaultPublicRepository${appId}`; // 默认资源开放库
export const digitalCourses = "jsek_digitalCourses"; //数字课程
export const digitalTextbooks = "jsek_digitalTextbooks"; //数字教材
export const seminar = "jsek_seminar"; //专题研讨
export const reg_tel =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; // 电话号正则
export const reg_telphone =/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/; //座机号正则
// export const fontUrl = "http://localhost:5173";
// export const fontUrl = "http://182.92.203.7:3007/jsek/website";
export const reg_telphone = /^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/; //座机号正则
export const fontUrl = "https://jsek.bnuic.com/website";

export const bookId = '2358'


const config = {
  requestCtx,
  resourceCtx,
  publicCtx,
  activeBook,
  bookList,
  requestTimeOut,
  tokenKey,
  userInfoKey,
@@ -52,6 +54,6 @@
  reg_tel,
  reg_telphone,
  appId,
  bookId
  getBookConfig,
};
export default config;

 src/assets/methods/examination.js

@@ -29,6 +29,7 @@
  let shortArr = []; // 简答
  let multipleChoiceArr = []; // 多选
  let completionArr = []; // 填空
  console.log('active',activeBook);
  for (let qindex = 0; qindex < questionList.length; qindex++) {
    const qitem = questionList[qindex];
    let query = {

 src/books/English/assets/main.less

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

New file
@@ -0,0 +1,15 @@
<template>
  <div>
    第一章
  </div>
</template>

<script>
  export default {
    name:'chapter-one'
  }
</script>

<style lang="less" scoped>

</style>

 src/books/English/view/components/index.vue

New file
@@ -0,0 +1,15 @@
<template>
  <div>

  </div>
</template>

<script>
  export default {
    name:'pageContent'
  }
</script>

<style lang="less" scoped>

</style>

 src/books/English/view/index.vue

New file
@@ -0,0 +1,15 @@
<template>
  <div class="english-book">

  </div>
</template>

<script>
  export default {
    name:'english-book'
  }
</script>

<style lang="less" scoped>

</style>

 src/books/childHealth/assets/images/icon/ballpen.svg

New file
@@ -0,0 +1 @@
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ballpen"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 6l7 7l-4 4" /><path d="M5.828 18.172a2.828 2.828 0 0 0 4 0l10.586 -10.586a2 2 0 0 0 0 -2.829l-1.171 -1.171a2 2 0 0 0 -2.829 0l-10.586 10.586a2.828 2.828 0 0 0 0 4z" /><path d="M4 20l1.768 -1.768" /></svg>

 src/books/childHealth/assets/images/icon/list-details.svg

New file
@@ -0,0 +1 @@
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-list-details"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /></svg>

 src/books/childHealth/assets/images/icon/video.svg

New file
@@ -0,0 +1 @@
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-video"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" /><path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /></svg>

 src/books/childHealth/assets/main.less

@@ -442,6 +442,7 @@
  .learn-btn img {
    cursor: pointer;
    height: 30px;
    // width: 25px;
  }

  .lh {
@@ -564,7 +565,11 @@
  }
  .btn {
    cursor: pointer;
    width: 30px;
    width: 23px;
    color: #15c0f2;
    border-radius: 5px;
    border:1px solid #666;
    margin-left: 5px;
  }
  .table-br-color {
    border-color: #e9e9e9;

 src/books/childHealth/view/content/components/chapter001.vue

@@ -62,13 +62,14 @@
          <span class="fl fl-cn mb-20">
            <span class="learn-title-text">自主学习任务单：</span>
            <span class="t0" >专题一学习主题一 运动系统自主学习任务单</span>
            <img
              src="../../../assets/images/icon/document.png"
            <svg @click="changeResources('learnTbaleOne')"  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="btn icon icon-tabler icons-tabler-outline icon-tabler-list-details"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /></svg>
            <!-- <img
              src="../../../assets/images/icon/list-details.svg"
              alt=""
              @click="changeResources('learnTbaleOne')"
              style="margin-left: 10px"
              style="margin-left: 10px;"
              class="btn"
            />
            /> -->
          </span>
            <table
              v-if="learnTbaleOne"
@@ -78,9 +79,6 @@
              cellspacing="0"
              class="w100 table-br-color"
            >
              <!-- <caption class="fw-b" style="font-size: 18px; margin: 20px 0">
                自主学习任务单：专题一学习主题一 运动系统自主学习任务单
              </caption> -->
              <tr>
                <th class="primary-color">一、学习指南</th>
              </tr>
@@ -250,13 +248,7 @@
          <span class="fl fl-cn mb-20">
            <span class="learn-title-text">视频：</span>
            <span class="t0">人体概述</span>
            <img
              src="../../../assets/images/icon/video.png"
              alt=""
              @click="changeResources('videoOne')"
              style="margin-left: 10px"
              class="btn"
            />
              <svg  @click="changeResources('videoOne')" xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="btn icon icon-tabler icons-tabler-outline icon-tabler-video"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" /><path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /></svg>
          </span>
          <span v-if="videoOne">
            <video
@@ -276,13 +268,14 @@
          <span class="fl fl-cn mb-20">
            <span class="learn-title-text">云测试：</span>
            <span class="t0">人体概述</span>
            <img
              src="../../../assets/images/icon/topic.png"
            <svg @click="changeResources('testOne')" xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="btn icon icon-tabler icons-tabler-outline icon-tabler-ballpen"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 6l7 7l-4 4" /><path d="M5.828 18.172a2.828 2.828 0 0 0 4 0l10.586 -10.586a2 2 0 0 0 0 -2.829l-1.171 -1.171a2 2 0 0 0 -2.829 0l-10.586 10.586a2.828 2.828 0 0 0 0 4z" /><path d="M4 20l1.768 -1.768" /></svg>
            <!-- <img
              src="../../../assets/images/icon/ballpen.svg"
              alt=""
              @click="changeResources('testOne')"
              style="margin-left: 10px"
              class="btn"
            />
            /> -->
          </span>
            <examinations
            v-if="testOne && questionData"

 src/books/childHealth/view/index.vue

@@ -36,7 +36,7 @@
    },
  },
  mounted() {
    this.getBookInfo();
    // this.getBookInfo();
  },
  methods: {
    getBookInfo() {

 src/books/embedded/assets/images/carousel-five.png

 src/books/embedded/assets/images/carousel-four.png

 src/books/embedded/assets/images/carousel-one.png

 src/books/embedded/assets/images/carousel-six.png

 src/books/embedded/assets/images/carousel-three.png

 src/books/embedded/assets/images/carousel-two.png

 src/books/embedded/assets/images/header-one.png

 src/books/embedded/assets/images/icon/anzhuang.png

 src/books/embedded/assets/images/icon/arrow-five.png

 src/books/embedded/assets/images/icon/arrow-four.png

 src/books/embedded/assets/images/icon/arrow-one.png

 src/books/embedded/assets/images/icon/arrow-three.png

 src/books/embedded/assets/images/icon/arrow-two.png

 src/books/embedded/assets/images/icon/beijing.png

 src/books/embedded/assets/images/icon/document.png

 src/books/embedded/assets/images/icon/download.png

 src/books/embedded/assets/images/icon/miaoshu.png

 src/books/embedded/assets/images/icon/mubiao.png

 src/books/embedded/assets/images/icon/neirong.png

 src/books/embedded/assets/images/icon/rar.png

 src/books/embedded/assets/images/icon/sucai.png

 src/books/embedded/assets/images/icon/tedian.png

 src/books/embedded/assets/images/icon/word.png

 src/books/embedded/assets/images/icon/xunlian.png

 src/books/embedded/assets/images/img-list-five.png

 src/books/embedded/assets/images/img-list-four.png

 src/books/embedded/assets/images/img-list-one.png

 src/books/embedded/assets/images/img-list-six.png

 src/books/embedded/assets/images/img-list-three.png

 src/books/embedded/assets/images/img-list-two.png

 src/books/embedded/assets/images/page-header.png

 src/books/embedded/assets/images/project-one.png

 src/books/embedded/assets/images/publish.png

 src/books/embedded/assets/images/qianyan-one.png

 src/books/embedded/assets/images/qianyan.png

 src/books/embedded/assets/images/table-td.png

 src/books/embedded/assets/main.less

@@ -1,6 +1,7 @@
.embedded-book {
  /* 2.0.0版本*/

  width: 100%;
  height: 100%;
  /*封面*/
  .frontCover {
    qrfullpage: 1;
@@ -606,14 +607,183 @@
  }

  .wr-md {
    writing-mode: vertical-rl
    writing-mode: vertical-rl;
  }
  .fl {
    display: flex;
    display: flex !important;
  }
  .fl-cl {
    flex-direction: column;
  }
  .ju-cn {
    justify-content: center;
  }
  .ju-ed {
    justify-content: flex-end;
  }
  .ju-bt {
    justify-content: space-between;
  }
  .al-cn {
    align-items: center;
  }
  .al-end {
    align-items: flex-end;
  }
  .t0 {
    text-indent: 0;
  }
  .primary-color {
    color: #501438;
  }
  .fz-18 {
    font-size: 18px;
  }
  .fw-bl {
    font-weight: bold;
  }
  .mr-5 {
    margin-right: 5px;
  }
  .mt-20 {
    margin-top: 20px;
  }
  .mt-100 {
    margin-top: 100px;
  }
  .mb-20 {
    margin-bottom: 20px;
  }
  .mb-40 {
    margin-bottom: 40px;
  }
  .m0-auto {
    margin: 0 auto;
  }
  .pd-104 {
    padding-bottom: 104px;
  }
  .p0 {
    padding: 0;
  }
  ul {
    list-style: none;
  }
  .footer-box {
    width: 40px;
    height: 4px;
    background-color: #501438;
  }
  .footer-num {
    width: min-content;
  }
  .w-mi {
    width: min-content;
  }
  .w-35 {
    width: 35px;
  }
  .w-45 {
    width: 45px;
  }
  .tl-ju {
    text-align: justify;
  }
  .w100 {
    width: 100%;
  }
  .page-heder-img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .cl-66 {
    color: #666;
  }
  .wh-no {
    white-space: nowrap;
  }
  .table-cn {
    text-align: center;
    vertical-align: middle;
  }
  .input-border {
    border: 0;
    border-bottom: 1px solid #000;
  }
  .input-border:focus {
    outline: none;
  }
  .textarea-table-td {
    font-size: 16px;
    width: 60px;
    height: 70px;
    border: 0;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  }
  .textarea-table-td:focus {
    outline: none;
  }
  .table-bc {
    background-color: #d6c6c7
    // #d6c1c6;
  }
  .tl-rg {
    text-align: right;
  }
  .rar-icon {
    width: 40px;
  }
  .downlod-icon {
    margin-left: 5px;
    width: 20px;
  }
  .rar-text {
    font-size: 10px;
    color: #666;
  }
  .pr {
    position: relative;
  }
  .padding-96 {
    padding: 0 96px 0px 96px;
  }
  .p-10 {
    padding: 10px 0;
  }
  .cu-pr {
    cursor: pointer;
  }
  .anzhuang-icon {
    width: 30px;
    margin-right: 4px;
  }
  .border-so {
    border-bottom: 1px solid #501438;
  }
  .btn {
    cursor: pointer;
    border: 2px solid #501438;
    border-radius: 4px;
    margin-left: 5px;
  }
  .document-icon {
    width: 30px;
  }
  .word-icon {
    width: 50px;
  }
  .textarea-text:focus {
    outline: none;
    border-color: #501438;
  }
  .tl-cn {
    text-align: center;
  }
}
body {
  background-color: #e6e6e6;
}
/* 媒体查询做基础响应式布局 */
@media (max-width: 660px) {
@@ -622,9 +792,9 @@
    .page-padding {
      padding: 104px 20px;
    }
    .padding-96 {
      padding: 0 20px 104px 20px;
    }
    // .padding-96 {
    //   padding: 0 20px 0px 20px;
    // }
    /* video大小 */
    .video-box {
      max-width: 260px;
@@ -636,11 +806,31 @@
    .page-padding {
      padding: 104px 96px;
    }
    .padding-96 {
      padding: 0 96px 104px 96px;
    }

    .video-box {
      max-width: 370px;
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.3);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.3);
  -webkit-border-radius: 6px;
}

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

@@ -1,509 +1,1454 @@
<template>
  <div class="chapter" num="1">
    <div class="page-box page-padding">
      
    <!-- 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 primary-color" id="sigil_toc_id_13">
          任务一　认识嵌入式组态和触摸屏
        </h2>
        <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="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="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组态软件，通过大力加强对工控硬件产品的驱动支持和
        </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>
    <h1>项目一　触摸屏组态介绍</h1>
    <p class="quotation">
      工业自动化组态软件发展有两个方向，一方面是向大型平台软件方向发展，例如，直接从组态发展成大型的CIMS、ERP系统等；另一方面是向小型化方向发展，由通用组态软件演变为嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，促使国家工业自动化程度快速提升，因此嵌入式方向发展机会更多、市场容量更大。MCGS嵌入式软件和TPC系列触摸屏得到了主流工控硬件企业大力支持，技术解决方案深受用户的好评。
    </p>
    <h2 class="secondTitle" id="sigil_toc_id_13">
      任务一　认识嵌入式组态和触摸屏
    </h2>
    <p class="content"><b>任务目标</b></p>
    <p class="content">（1）认识嵌入式工业自动化组态软件；</p>
    <p class="content">（2）认识嵌入式触摸屏TPC。</p>
    <p class="content"><b>任务描述</b></p>
    <p class="content">
      了解嵌入式系统和工业自动化组态软件，熟悉嵌入式触摸屏TPC。
    </p>
    <p class="content"><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所示为嵌入式组态软件系统应用于各个行业的情况。
    </p>
    <p class="content"><b>素材　</b>工程样例</p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00014001.jpg" active="true" />
      <p class="imgdescript">图1-1　嵌入式组态软件系统应用于电力行业</p>
    <!-- 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">
              <el-image
                :src="imgOne"
                :preview-src-list="[imgOne]"
                class="w100"
              />
              <p class="imgdescript">图1-1　嵌入式组态软件系统应用于电力行业</p>
            </div>
            <div class="qrbodyPic">
              <el-image :src="imgTwo" :preview-src-list="[imgTwo]" />
              <p class="imgdescript">图1-2　嵌入式组态软件系统应用于铁路行业</p>
            </div>
            <div class="qrbodyPic">
              <el-image :src="imgThree" :preview-src-list="[imgThree]" />
              <p class="imgdescript">图1-3　嵌入式组态软件系统应用于橡胶行业</p>
            </div>
            <div class="qrbodyPic">
              <el-image :src="imgFour" :preview-src-list="[imgFour]" />
              <p class="imgdescript">图1-4　嵌入式组态软件系统应用于纺织行业</p>
            </div>
          </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>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00014002.jpg" active="true" />
      <p class="imgdescript">图1-2　嵌入式组态软件系统应用于铁路行业</p>
    <!-- 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>
        <p class="content">MCGS嵌入版组态软件的主要功能：</p>
        <p class="content">
          （1）简单灵活的可视化操作界面：采用全中文、可视化的开发界面，符合中国人的使用习惯和要求。
        </p>
        <p class="content">
          （2）实时性强、有良好的并行处理性能：真正的32位系统，对任务进行分时并行处理。
        </p>
        <p class="content">
          （3）丰富、生动的多媒体画面：以图像、图符、报表、曲线等多种形式，提供操作和控制信息。
        </p>
        <p class="content">
          （4）完善的安全机制：提供了良好的安全机制，可以为多个不同级别用户设定不同的操作权限。
        </p>
        <p class="content">（5）强大的网络功能：具有强大的网络通信功能。</p>
        <p class="content">
          （6）多样化的报警功能：提供多种不同的报警方式，方便用户进行报警设置。
        </p>
        <p class="content">
          （7）支持多种硬件设备：PLC、变频器、伺服驱动器、仪器仪表等。
        </p>
        <p class="content">
          总之，MCGS嵌入版组态软件具有与通用版组态软件一样强大的功能，并且操作简单，易学易用。
        </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">
          <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嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置
        </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>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00014003.jpg" active="true" />
      <p class="imgdescript">图1-3　嵌入式组态软件系统应用于橡胶行业</p>
    <!-- 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）用户窗口实现了数据和流程的“可视化”。用户窗口中可以放置三种不同类型的图形对象：图元、图符和动画构件。通过在用户窗口内放置不同的图形对象，用户可以构造各种复杂的图形界面，用不同的方式实现数据和流程的“可视化”。
          </p>
          <p class="content">
            （4）实时数据库是MCGS嵌入版系统的核心。实时数据库相当于一个数据处理中心，同时也起到公共数据交换区的作用。从外围设备采集来的实时数据送入实时数据库，系统其他部分操作的数据也来自于实时数据库。
          </p>
          <p class="content">
            （5）运行策略是对系统运行流程实现有效控制的手段。运行策略本身是系统提供的一个框架，其里面放置由策略条件构件和策略构件组成的“策略行”，通过对运行策略的定义，使系统能够按照设定的顺序和条件操作任务，实现对外围设备工作过程的精确控制。
          </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>
          <p class="content">
            嵌入式组态软件的运行环境是一个独立的运行系统，它按照组态工程中用户指定的方式进行各种处理，完成用户组态设计的目标和功能。一旦组态工作完成，并且将组态好的工程下载到嵌入式一体化触摸屏（例如TPC7062K）的运行环境中，组态工程就可以离开组态环境而独立运行。TPC是北京昆仑通态自动化软件科技有限公司自主生产的嵌入式一体化触摸屏系列型号，其中TPC7062K具有代表性。
          </p>
          <p class="content">（1）TPC7062K优势：</p>
          <p class="content">
            ①高清：分辨率为800×480像素，用户可体验精致、自然、通透的高清盛宴；
          </p>
          <p class="content">
            ②真彩：65 535色数字真彩，丰富的图形库，用户可享受顶级震撼画质；
          </p>
          <p class="content">
            ③可靠：抗干扰性能达到工业III级标准，采用LED背光永不黑屏；
          </p>
          <p class="content">
            ④配置：ARM9内核、400MHz主频、64MB内存、128MB存储空间；
          </p>
          <p class="content">
            ⑤软件：MCGS全功能组态软件，支持闪存盘（俗称U盘）备份恢复，功能更强大；
          </p>
          <p class="content">
            ⑥环保：低功耗，整机功耗仅6W，发展绿色工业，倡导能源节约；
          </p>
          <p class="content">
            ⑦时尚：7in（1in=2.54cm）宽屏显示、超轻、超薄机身设计，引领简约时尚；
          </p>
          <p class="content">
            ⑧服务：立足中国，全方位、本土化服务，星级标准，用户至上。
          </p>
          <p class="content">
            （2）TPC7062K外观。TPC7062K正视图如图1-6所示，TPC7062K背视图如图1-7所示。
          </p>
          <p class="content">（3）TPC7062K供电接线。</p>
          <p class="quotation">
            <!-- <img class="s-pic" src="../../assets/images/img00016001.jpg" /> -->
            仅限DC 24V！建议电源的输出功率为15W。
          </p>
        </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>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00014004.jpg" active="true" /> -->
      <p class="imgdescript">图1-4　嵌入式组态软件系统应用于纺织行业</p>
    <!-- 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="">
            <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>
          <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>
          <el-image :src="imgNine" :preview-src-list="[imgNine]" class="w100" />
          <p class="imgdescript">图1-9　接口说明</p>
        </div>
        <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>
      <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>
    <p class="content t-left"><b>1　认识MCGS嵌入版组态软件</b></p>
    <p class="content">
      MCGS嵌入版组态软件专门应用于TPC一体机（触摸屏），主要完成现场数据的采集与监测、前端数据的处理与控制与其他相关的输入输出硬件设备结合，可以快速、方便地开发各种用于现场采集、数据处理和控制的自动化系统。例如，可以灵活组态各种智能仪表、数据采集模块，无纸记录仪、无人值守的现场采集站、人机界面等专用设备。
    </p>
    <p class="content">MCGS嵌入版组态软件的主要功能：</p>
    <p class="content">
      （1）简单灵活的可视化操作界面：采用全中文、可视化的开发界面，符合中国人的使用习惯和要求。
    </p>
    <p class="content">
      （2）实时性强、有良好的并行处理性能：真正的32位系统，对任务进行分时并行处理。
    </p>
    <p class="content">
      （3）丰富、生动的多媒体画面：以图像、图符、报表、曲线等多种形式，提供操作和控制信息。
    </p>
    <p class="content">
      （4）完善的安全机制：提供了良好的安全机制，可以为多个不同级别用户设定不同的操作权限。
    </p>
    <p class="content">（5）强大的网络功能：具有强大的网络通信功能。</p>
    <p class="content">
      （6）多样化的报警功能：提供多种不同的报警方式，方便用户进行报警设置。
    </p>
    <p class="content">
      （7）支持多种硬件设备：PLC、变频器、伺服驱动器、仪器仪表等。
    </p>
    <p class="content">
      总之，MCGS嵌入版组态软件具有与通用版组态软件一样强大的功能，并且操作简单，易学易用。
    </p>
    <p class="content t-left"><b>2　MCGS嵌入版组态软件组成</b></p>
    <p class="content">
      MCGS嵌入版组态软件生成的用户应用系统，由主控窗口、设备窗口、用户窗口、实时数据库和运行策略五部分构成，如图1-5所示。
    </p>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00015001.jpg" active="true" /> -->
      <p class="imgdescript">图1-5　用户应用系统组成</p>
    <!-- 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="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="m0-auto" style="width: 90%">
            <el-image :src="imgThirteen" :preview-src-list="[imgThirteen]" />
            <p class="imgdescript">图1-13　TPC7062K与欧姆龙PLC通信接线</p>
          </div>
        </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>
    <p class="content">
      （1）主控窗口构造了应用系统的主框架，确定了工业控制中工程作业的总体轮廓，以及运行流程、特性参数和启动特性等内容，是应用系统的主框架。
    </p>
    <p class="content">
      （2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置不同类型和功能的设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
    </p>
    <p class="content">
      （3）用户窗口实现了数据和流程的“可视化”。用户窗口中可以放置三种不同类型的图形对象：图元、图符和动画构件。通过在用户窗口内放置不同的图形对象，用户可以构造各种复杂的图形界面，用不同的方式实现数据和流程的“可视化”。
    </p>
    <p class="content">
      （4）实时数据库是MCGS嵌入版系统的核心。实时数据库相当于一个数据处理中心，同时也起到公共数据交换区的作用。从外围设备采集来的实时数据送入实时数据库，系统其他部分操作的数据也来自于实时数据库。
    </p>
    <p class="content">
      （5）运行策略是对系统运行流程实现有效控制的手段。运行策略本身是系统提供的一个框架，其里面放置由策略条件构件和策略构件组成的“策略行”，通过对运行策略的定义，使系统能够按照设定的顺序和条件操作任务，实现对外围设备工作过程的精确控制。
    </p>
    <p class="content t-left"><b>3　认识TPC7062K触摸屏</b></p>
    <p class="content">
      嵌入式组态软件的组态环境和模拟运行环境是一套完整的工具软件，可以在PC上运行。
    </p>
    <p class="content">
      嵌入式组态软件的运行环境是一个独立的运行系统，它按照组态工程中用户指定的方式进行各种处理，完成用户组态设计的目标和功能。一旦组态工作完成，并且将组态好的工程下载到嵌入式一体化触摸屏（例如TPC7062K）的运行环境中，组态工程就可以离开组态环境而独立运行。TPC是北京昆仑通态自动化软件科技有限公司自主生产的嵌入式一体化触摸屏系列型号，其中TPC7062K具有代表性。
    </p>
    <p class="content">（1）TPC7062K优势：</p>
    <p class="content">
      ①高清：分辨率为800×480像素，用户可体验精致、自然、通透的高清盛宴；
    </p>
    <p class="content">
      ②真彩：65 535色数字真彩，丰富的图形库，用户可享受顶级震撼画质；
    </p>
    <p class="content">
      ③可靠：抗干扰性能达到工业III级标准，采用LED背光永不黑屏；
    </p>
    <p class="content">
      ④配置：ARM9内核、400MHz主频、64MB内存、128MB存储空间；
    </p>
    <p class="content">
      ⑤软件：MCGS全功能组态软件，支持闪存盘（俗称U盘）备份恢复，功能更强大；
    </p>
    <p class="content">
      ⑥环保：低功耗，整机功耗仅6W，发展绿色工业，倡导能源节约；
    </p>
    <p class="content">
      ⑦时尚：7in（1in=2.54cm）宽屏显示、超轻、超薄机身设计，引领简约时尚；
    </p>
    <p class="content">
      ⑧服务：立足中国，全方位、本土化服务，星级标准，用户至上。
    </p>
    <p class="content">
      （2）TPC7062K外观。TPC7062K正视图如图1-6所示，TPC7062K背视图如图1-7所示。
    </p>
    <p class="content">（3）TPC7062K供电接线。</p>
    <p class="quotation">
      <!-- <img class="s-pic" src="../../assets/images/img00016001.jpg" /> -->
      仅限DC 24V！建议电源的输出功率为15W。
    </p>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00017001.jpg" active="true" /> -->
      <p class="imgdescript">图1-6　正视图</p>
    <!-- 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>
        <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 primary-color" id="sigil_toc_id_14">
          任务二　MCGS嵌入版组态软件安装
        </h2>
        <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="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="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>
        <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>
          </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>
    <div class="qrbodyPic">
      <!-- <img src="../../assets/images/img00017002.jpg" active="true" /> -->
      <p class="imgdescript">图1-7　背视图</p>
    <!-- 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>
          <p class="content">
            （3）单击“下一步”按钮，进入驱动安装程序，选择“所有驱动”复选框，单击“下一步”按钮进行安装，如图1-19所示。
          </p>
          <p class="content">
            （4）选择好后，按提示操作，MCGS驱动程序安装过程大约需要几分钟。
          </p>
          <p class="content">
            （5）安装过程完成后，将弹出对话框提示安装完成，是否重新启动计算机，选择重启后，完成安装。
          </p>
          <p class="content">
            （6）安装完成后，Windows操作系统的桌面上添加了如图1-20所示的两个快捷方式图标，分别用于启动MCGS嵌入式组态环境和模拟运行环境。
          </p>
          <div class="qrbodyPic">
            <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>
      </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>
    <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" /> -->
      <p class="imgdescript">图1-8　电源插头示意图及引脚定义</p>
    <!-- 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　评分表 <i class="el-icon-share cu-pr"></i>
          </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"
            src="../../assets/images/img00021002.jpg"
            active="true"
          />，打开嵌入版组态软件，然后按如下步骤建立工程：
        </p>
        <p class="content">
          （1）选择“文件”菜单中“新建工程”命令，弹出“新建工程设置”对话框，如图1-21所示，TPC类型选择为“TPC7062K”，单击“确定”按钮。
        </p>
        <p class="content">
          （2）选择“文件”菜单中的“工程另存为”命令，弹出“文件保存”对话框，在文件名一栏内输入“常用构件使用”，单击“保存”按钮，工程创建完毕。
        </p>
        <div class="qrbodyPic">
          <img src="../../assets/images/img00021003.jpg" active="true" />
          <p class="imgdescript">图1-21　选择TPC类型</p>
        </div>
        <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>
      <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>
    <p class="content">
      （4）TPC7062K外部接口。接口说明如图1-9所示，串口引脚定义如图1-10所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00017004.jpg" active="true" />
      <p class="imgdescript">图1-9　接口说明</p>
    <!-- 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="">
              <el-image :src="imgSixteen" :preview-src-list="[imgSixteen]" />
              <p class="imgdescript">图1-23　窗口属性设置</p>
            </div>
          </div>
          <p class="content">
            （3）双击用户窗口，在窗口编辑位置按住鼠标左键拖放出一定大小后，松开鼠标左键，这样一个按钮构件就绘制在窗口中，如图1-24所示。
          </p>
          <p class="content">
            接下来双击该按钮，弹出“标准按钮构件属性设置”对话框，在“基本属性”选项卡中的“文本”文本框中输入“指示灯1”，单击“确认”按钮保存，如图1-25所示。
          </p>
          <div class="fl ju-bt">
            <div>
              <el-image
                :src="imgSeventeen"
                :preview-src-list="[imgSeventeen]"
              />
              <p class="imgdescript">图1-24　按钮制作</p>
            </div>
            <div>
              <el-image :src="imgEighteen" :preview-src-list="[imgSeventeen]" />
              <p class="imgdescript">图1-25　标准按钮构件属性设置</p>
            </div>
          </div>
          <p class="content">
            按照同样的操作分别绘制另外一个按钮，将“文本”修改为“指示灯2”，完成后如图1-26所示。
          </p>
          <p class="content">
            按住键盘的【Ctrl】键，然后单击，同时选中两个按钮，使用工具栏中的等高宽、左（右）对齐和纵向等间距对两个按钮进行排列对齐，如图1-27所示。
          </p>
          <p class="content">
            （4）单击工具箱中的“插入元件”按钮，弹出“对象元件库管理”对话框，选中图形对象库指示灯中的一款，单击“确认”按钮添加到窗口画面中，并调整到合适大小，同样的方法再添加两个指示灯，摆放在窗口中按钮旁边的位置，如图1-28所示。
          </p>
          <p class="content">
            （5）单击选中工具箱中的“标签”按钮，在窗口按住鼠标左键，拖放出一定大小“标签”，如图1-29所示。然后双击该标签，弹出“标签动画组态属性设置”对话框，在“扩展属性”选项卡中的“文本内容输入”文本框中输入“状态显示1：”，单击“确认”按钮，如图1-30所示。
          </p>
        </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>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00017005.jpg" active="true" />
      <p class="imgdescript">图1-10　串口引脚定义</p>
    <!-- 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>
            <el-image :src="imgTwenty" :preview-src-list="[imgTwenty]" />
            <p class="imgdescript">图1-27　按钮排列</p>
          </div>
        </div>

        <div class="qrbodyPic">
          <el-image :src="imgtOne" :preview-src-list="[imgtOne]" />
          <p class="imgdescript">图1-28　添加指示灯</p>
        </div>
        <div class="fl">
          <div>
            <el-image :src="imgtTwo" :preview-src-list="[imgtTwo]" />
            <p class="imgdescript">图1-29　制作标签</p>
          </div>
          <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>
      <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>
    <p class="content">
      （5）TPC7062K启动。使用24V直流电源给TPC供电，开机启动后屏幕出现“正在启动”提示进度条，此时不需任何操作自动进入工程运行界面，如图1-11所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00018001.jpg" active="true" />
      <p class="imgdescript">图1-11　TPC启动过程</p>
    <!-- 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>
              <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="fl">
            <div>
              <el-image :src="imgtSix" :preview-src-list="[imgtSix]" />
              <p class="imgdescript">图1-33　标准按钮构件属性设置”对话框</p>
            </div>
            <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所示，单击“确认”按钮。
          </p>
          <p class="content">
            同样，切换到“按下功能”选项卡进行设置，选择“数据对象值操作”复选框，选择“置1”选项，变量名为“指示灯1”，如图1-37所示。
          </p>
          <div class="fl">
            <div style="width: 60%">
              <p class="content">
                指示灯2按钮，“抬起功能”时“清0”；“按下功能”时“置1”，变量名为“指示灯2”。
              </p>
              <p class="content">
                ②指示灯：双击指示灯1按钮旁边的指示灯，弹出“单元属性设置”对话框，在“数据对象”选项卡中，单击<img
                  class="h-pic"
                  src="../../assets/images/img00024006.jpg"
                  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"
              src="../../assets/images/img00024007.jpg"
              active="true"
            />按钮弹出“变量选择”对话框，选择“指示灯1”选项，如图1-39所示，设置完成后单击“确认”按钮。
          </p>
        </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>
    <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>
    <!-- 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>
            <el-image :src="imgtTen" :preview-src-list="[imgtTen]" />
            <p class="imgdescript">图1-37　按下功能设置</p>
          </div>
        </div>
        <p class="content">
          按同样的方法，双击“状态显示2：”标签旁边的输入框进行设置，在“操作属性”选项卡中，选择对应的数据对象：通道类型选择“指示灯2”，组态完成后，保存。
        </p>
        <div class="fl">
          <div>
            <el-image :src="imgrOne" :preview-src-list="[imgrOne]" />
            <p class="imgdescript">图1-38　选择数据对象指示灯</p>
          </div>
          <div>
            <el-image :src="imgrTwo" :preview-src-list="[imgrTwo]" />
            <p class="imgdescript">图1-39　指示灯1属性操作</p>
          </div>
        </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>
        <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 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地址。
        </p>
        <p class="content">
          单击工具条中的下载<img
            class="h-pic"
            src="../../assets/images/img00025007.jpg"
            active="true"
          />按钮，进行下载配置。单击“联机运行”按钮，连接方式选择“TCP/IP网络通信”，设置触摸屏IP与计算机IP在同一网段内，单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮。
        </p>
      </div>
      <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>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00018003.jpg" active="true" />
      <p class="imgdescript">图1-13　TPC7062K与欧姆龙PLC通信接线</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>
          <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">
            <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>
      </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>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00019001.jpg" active="true" />
      <p class="imgdescript">图1-14　TPC7062K与三菱FX系列PLC通信接线</p>
    <!-- 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　功能测试表 <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　评分表 <i class="el-icon-share cu-pr"></i>
          </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="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>
    <p class="content">评分表见表1-1。</p>
    <div class="qrbodyPic">
      <p class="imgtitle">表1-1　评分表</p>
      <img src="../../assets/images/img00019002.jpg" active="true" />
    </div>
    <h2 class="secondTitle" id="sigil_toc_id_14">
      任务二　MCGS嵌入版组态软件安装
    </h2>
    <p class="content"><b>任务目标</b></p>
    <p class="content">掌握MCGS嵌入版组态软件V6.8安装方法。</p>
    <p class="content"><b>任务描述</b></p>
    <p class="content">学习嵌入式组态软件V6.8的安装方法和步骤。</p>
    <p class="content"><b>任务训练</b></p>
    <p class="content">
      在昆仑通态官网上下载MCGS_嵌入版完整安装包，解压缩后，具体安装步骤如下：
    </p>
    <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>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020002.jpg" active="true" />
      <p class="imgdescript">图1-16　启动安装程序</p>
    </div>
    <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>
    <p class="content">
      （4）选择好后，按提示操作，MCGS驱动程序安装过程大约需要几分钟。
    </p>
    <p class="content">
      （5）安装过程完成后，将弹出对话框提示安装完成，是否重新启动计算机，选择重启后，完成安装。
    </p>
    <p class="content">
      （6）安装完成后，Windows操作系统的桌面上添加了如图1-20所示的两个快捷方式图标，分别用于启动MCGS嵌入式组态环境和模拟运行环境。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020005.jpg" active="true" />
      <p class="imgdescript">图1-19　驱动安装程序</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00020006.jpg" active="true" />
      <p class="imgdescript">图1-20　组态环境和模拟运行环境快捷方式图标</p>
    </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>
    <p class="content"><b>任务训练</b></p>
    <p class="content t-left"><b>1　新建工程</b></p>
    <p class="content">
      双击组态环境快捷方式图标<img
        class="h-pic"
        src="../../assets/images/img00021002.jpg"
        active="true"
      />，打开嵌入版组态软件，然后按如下步骤建立工程：
    </p>
    <p class="content">
      （1）选择“文件”菜单中“新建工程”命令，弹出“新建工程设置”对话框，如图1-21所示，TPC类型选择为“TPC7062K”，单击“确定”按钮。
    </p>
    <p class="content">
      （2）选择“文件”菜单中的“工程另存为”命令，弹出“文件保存”对话框，在文件名一栏内输入“常用构件使用”，单击“保存”按钮，工程创建完毕。
    </p>
    <div class="qrbodyPic">
      <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="content">
      （1）在工作台中激活用户窗口，单击“新建窗口”按钮，建立新画面“窗口0”，如图1-22所示。
    </p>
    <p class="content">
      （2）单击“窗口属性”按钮，弹出“用户窗口属性设置”对话框，在“基本属性”选项卡，将“窗口名称”修改为“常用构件使用”，单击“确认”按钮进行保存，如图1-23所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022001.jpg" active="true" />
      <p class="imgdescript">图1-22　建立新窗口</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022002.jpg" active="true" />
      <p class="imgdescript">图1-23　窗口属性设置</p>
    </div>
    <p class="content">
      （3）双击用户窗口，在窗口编辑位置按住鼠标左键拖放出一定大小后，松开鼠标左键，这样一个按钮构件就绘制在窗口中，如图1-24所示。
    </p>
    <p class="content">
      接下来双击该按钮，弹出“标准按钮构件属性设置”对话框，在“基本属性”选项卡中的“文本”文本框中输入“指示灯1”，单击“确认”按钮保存，如图1-25所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022003.jpg" active="true" />
      <p class="imgdescript">图1-24　按钮制作</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00022004.jpg" active="true" />
      <p class="imgdescript">图1-25　标准按钮构件属性设置</p>
    </div>
    <p class="content">
      按照同样的操作分别绘制另外一个按钮，将“文本”修改为“指示灯2”，完成后如图1-26所示。
    </p>
    <p class="content">
      按住键盘的【Ctrl】键，然后单击，同时选中两个按钮，使用工具栏中的等高宽、左（右）对齐和纵向等间距对两个按钮进行排列对齐，如图1-27所示。
    </p>
    <p class="content">
      （4）单击工具箱中的“插入元件”按钮，弹出“对象元件库管理”对话框，选中图形对象库指示灯中的一款，单击“确认”按钮添加到窗口画面中，并调整到合适大小，同样的方法再添加两个指示灯，摆放在窗口中按钮旁边的位置，如图1-28所示。
    </p>
    <p class="content">
      （5）单击选中工具箱中的“标签”按钮，在窗口按住鼠标左键，拖放出一定大小“标签”，如图1-29所示。然后双击该标签，弹出“标签动画组态属性设置”对话框，在“扩展属性”选项卡中的“文本内容输入”文本框中输入“状态显示1：”，单击“确认”按钮，如图1-30所示。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023001.jpg" active="true" />
      <p class="imgdescript">图1-26　按钮文字修改</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023002.jpg" active="true" />
      <p class="imgdescript">图1-27　按钮排列</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023003.jpg" active="true" />
      <p class="imgdescript">图1-28　添加指示灯</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023004.jpg" active="true" />
      <p class="imgdescript">图1-29　制作标签</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00023005.jpg" active="true" />
      <p class="imgdescript">图1-30　标签动画组态属性设置</p>
    </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" />
      <p class="imgdescript">图1-31　制作输入框</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024002.jpg" active="true" />
      <p class="imgdescript">图1-32　输入框排列</p>
    </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" />
      <p class="imgdescript">图1-33　标准按钮构件属性设置”对话框</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00024004.jpg" active="true" />
      <p class="imgdescript">图1-34　控制按钮设置</p>
    </div>
    <p class="content">
      输入指示灯1时会弹出图1-35所示对话框，单击“是”按钮，弹出“数据对象属性设置”对话框，对数据类型进行设置，如图1-36所示，单击“确认”按钮。
    </p>
    <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>
    <p class="content">
      指示灯2按钮，“抬起功能”时“清0”；“按下功能”时“置1”，变量名为“指示灯2”。
    </p>
    <p class="content">
      ②指示灯：双击指示灯1按钮旁边的指示灯，弹出“单元属性设置”对话框，在“数据对象”选项卡中，单击<img
        class="h-pic"
        src="../../assets/images/img00024006.jpg"
        active="true"
      />按钮选择数据对象指示灯1，如图1-38所示。同样方法设置“指示灯2”。
    </p>
    <p class="content">
      ③输入框：双击“状态显示1：”标签旁边的输入框，弹出“输入框构件属性设置”对话框，在“操作属性”选项卡中，单击<img
        class="h-pic"
        src="../../assets/images/img00024007.jpg"
        active="true"
      />按钮弹出“变量选择”对话框，选择“指示灯1”选项，如图1-39所示，设置完成后单击“确认”按钮。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025001.jpg" active="true" />
      <p class="imgdescript">图1-36　数据对象属性设置</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025002.jpg" active="true" />
      <p class="imgdescript">图1-37　按下功能设置</p>
    </div>
    <p class="content">
      按同样的方法，双击“状态显示2：”标签旁边的输入框进行设置，在“操作属性”选项卡中，选择对应的数据对象：通道类型选择“指示灯2”，组态完成后，保存。
    </p>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025003.jpg" active="true" />
      <p class="imgdescript">图1-38　选择数据对象指示灯</p>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00025004.jpg" active="true" />
      <p class="imgdescript">图1-39　指示灯1属性操作</p>
    </div>
    <p class="content t-left"><b>3　工程下载到TPC7062K</b></p>
    <p class="content">
      （1）方案一：USB下载。将标准USB2.0打印机线，如图1-40所示，扁平接口插到计算机的USB接口，微型接口插到TPC端的USB2.0接口，连接TPC7062K和PC。
    </p>
    <p class="content">
      单击工具条中的下载<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" />
      <p class="imgdescript">图1-40　标准USB2.0打印机线</p>
    </div>
    <p class="content">
      （2）方案二：网线下载。用网口下载时，先查看触摸屏IP地址，当触摸屏上电出现滚动进度条以后，单击滚动条，在启动属性查看IP地址，例如IP200.200.200.26，则设置计算机本地连接的IP地址为IP200.200.200.126，二者在同一网段，即IP前三段数字必须相同。或修改触摸屏地址，则进入触摸屏操作系统Windows
      CE，单击Windows的“开始”菜单，选择“设置”命令，运行“网络拨号与连接”，修改IP地址。
    </p>
    <p class="content">
      单击工具条中的下载<img
        class="h-pic"
        src="../../assets/images/img00025007.jpg"
        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>
    </div>
    <p class="content t-left"><b>4　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="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>
    </div>
    <div class="qrbodyPic">
      <img src="../../assets/images/img00026006.jpg" active="true" />
      <p class="imgdescript">图1-46　按下“指示灯2”按钮</p>
    </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" />
    </div>
    <div class="qrbodyPic">
      <p class="imgtitle">表1-4　评分表</p>
      <img src="../../assets/images/img00027002.jpg" active="true" />
    </div>
    <p class="content"><b>练习与提高</b></p>
    <p class="quotation">1．阐述嵌入式组态、触摸屏之间的关系。</p>
    <p class="quotation">2．是否可以采用U盘下载组态过程？过程步骤如何？</p>
    <p class="quotation">
      3．在淘宝网站查找任务一中主流PLC与触摸屏连接线型号、性能和价格。
    </p>
    <p class="quotation">
      4．分析计算机、平板电脑、触摸屏、PLC之间连接的异同。
    </p>
    <p class="quotation">
      5．什么是用户应用系统、组态环境与运行环境？组态环境是开发工具吗？
    </p>
    <p class="quotation">
      6．MCGS触摸屏安装何种操作系统？主要自带何种应用软件？从www.mcgs.com.cn网站下载最新软件包并安装，在www.gongkong.com注册，进入BBS讨论工控软件技术。
    </p>
    <p class="quotation">7．组态变量怎样建立对应数据关系？</p>
    <p class="quotation">8．了解RS-232、RS-485接口性能功能和TCP/IP协议。</p>
    <p class="quotation">9．比较触摸屏中的组态工程和手机中的APP的区别。</p>
  </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>

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

@@ -1,13 +1,17 @@
<template>
  <div>
  <div class="chapter" num="0">
    <!-- 封面 -->
    <div class="page-box">
    <div class="page-box" page="1">
      <h1 class="frontCover" title="封面">
        <img alt="封面" src="../../assets/images/device_phone_Frontcover.jpg" />
      </h1>
    </div>
    <!-- 作者简介 -->
    <div class="page-box author-padding" style="width: 408px; margin: 0 auto">
    <div
      class="page-box author-padding"
      style="width: 408px; margin: 0 auto"
      page="2"
    >
      <document>
        <h1 class="author-box">作者简介</h1>
        <div class="bodyPic">
@@ -25,31 +29,85 @@
      </document>
    </div>
    <!-- 封面 -->
    <div class="page-box">
    <div class="page-box" page="3">
      <h1 class="frontCover" title="封面">
        <img alt="封面" src="../../assets/images/device_phone_Frontcover.jpg" />
      </h1>
    </div>
    <!-- 内容简介 -->
    <div class="page-box page-padding">
    <div class="page-box page-padding neirong" page="4">
      <document>
        <h1>内容简介</h1>
        <p class="quotation">
        <p class="quotation cl-66">
          本书是高职院校与北京昆仑通态自动化软件科技有限公司共同开发的项目化教材，是“十二五”职业教育国家规划教材。本书基于工作过程导向，面向“双师型”教师和工控行业技术人员，服务于机电和自动化类专业的职业能力培养。
        </p>
        <p class="quotation">
        <p class="quotation cl-66">
          本书由彩色纸质教材和网络资源组成。彩色纸质教材主要包括：触摸屏组态介绍、“触摸屏+PLC”监控工程、“触摸屏+PLC+变频器（伺服）”通信与控制、“触摸屏+PLC+传感器”水位控制工程、“触摸屏+分布式模块”工控工程、过程控制工程、“智能电梯装调与维护”全国技能大赛赛题、“自动化生产线安装与调试”全国技能大赛组态设计、触摸屏与单片机通信驱动开发实例等内容，同时每个项目中的任务安排了任务目标、任务描述、任务训练和评价。网络资源含MCGS嵌入式组态软件、工程案例、课程标准、教学案例和教学设计等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源。
        </p>
        <p class="quotation">
        <p class="quotation cl-66">
          本书内容具有典型性、实用性、先进性、可操作性的特色。
        </p>
        <p class="quotation">
        <p class="quotation cl-66">
          本书适合作为高等职业教育机电一体化技术、电气自动化技术、生产过程自动化、机电安装工程等机电类专业的教材，也可作为相关工程技术人员培训和自修用书。
        </p>
      </document>
      <!-- <h2 class="copyRightTitle">版权信息</h2>
      <p class="contentCR">书名：嵌入式组态控制技术（第3版）</p>
      <p class="contentCR">作者：张文明,华祖银</p>
      <p class="contentCR">出版社：中国铁道出版社</p>
      <p class="contentCR">出版时间：2019-07</p>
      <p class="contentCR">ISBN：9787113254025</p>
      <p class="contentCR">本书由中国铁道出版社进行制作与发行。</p>
      <p class="contentCR">版权所有·侵权必究</p> -->
      <div style="width: 65%;" class="fw-box">
        <p class="content">图书在版编目(CIP)数据</p>
        <p class="content">嵌入式组态控制技术/张文明，华祖银主编.-3 版.</p>
        <p class="content">-北京:中国铁道出版社有限公司，2019.7</p>
        <p class="content">
          十二五”职业教育国家规划教材 全国高职高专院校机电类专业规划教材
        </p>
        <p class="conten">ISBN 978-7-113-25402-5</p>
        <p class="content">
          |.①嵌… | .①张… ②华… 川 .①微型计算机计算机控制系统-高等职业教育-教材
          I.①TP273
        </p>
        <p class="content">中国版本图书馆 CIP 数据核字(2019)第 098900 号</p>
        <p class="content">书名:嵌入式组态控制技术(第三版)</p>
        <p class="content">作者:张文明 华祖银</p>
        <p>定价：59.80 元</p>
      </div>
      <hr />
      <div class="fl ju-bt">
        <div class="left">
          <p>策划:何红艳</p>
          <p>责任编辑:何红艳</p>
          <p>封面设计:付 巍</p>
          <p>封面制作:刘颖</p>
          <p>责任校对:张玉华</p>
          <p>责任印制:郭向伟</p>
        </div>
        <div class="right">
          <p>读者热线:(010)63550836</p>
        </div>
      </div>

      <hr />
      <p>出版发行:中国铁道出版社有限公司(100054，北京市西城区右安门西街8号)</p>
      <p>网址：http:// www.tdpress.com/5 leds/</p>
      <p>印刷:北京柏力行彩印有限公司</p>
      <p>版次：2011年8月第1版 2019年7月第3版 2019年7月第1次印刷</p>
      <p>开本：787mmx1092mm1/16印张:18字数:433千数:1~2000册</p>
      <p>书号：SBN978-7-113-25402-5</p>
      <p>定价：59.80元</p>
      <hr />
      <p class="tl-cn">版权所有，侵权必究</p>
      <p>
        凡购买铁道版图书，如有印制质量问题，请与本社教材图书营销部联系调换。电话:(010)63550836
      </p>
      <p class="tl-cn">打击盗版举报电话:(010)51873659</p>
    </div>
    <!-- 编审委员会 -->
    <div class="page-box page-padding">
    <div class="page-box page-padding" page="5">
      <document>
        <p class="content t-center bs-box">
          全国高职高专院校机电类专业规划教材
@@ -93,126 +151,204 @@
      </document>
    </div>
    <!-- 出版说明 -->
    <div class="page-box page-padding">
      <document>
        <h1>出版说明</h1>
        <p class="quotation">
          随着我国高等职业教育改革的不断深入，我国高等职业教育的发展进入了一个新的阶段。教育部下发的《关于全面提高高等职业教育教学质量的若干意见》文件，旨在阐述社会发展对高素质技能型人才的需求，以及如何推进高职人才培养模式改革，提高人才培养质量。
        </p>
        <p class="quotation">
          教材的出版工作是整个高等职业院校教育教学工作中的重要组成部分，教材是课程内容和课程体系的载体，对课程改革和建设具有推动作用，所以提高课程教学水平和教学质量的关键在于出版高水平、高质量的教材。
        </p>
        <p class="quotation">
          出版面向高等职业教育的“以就业为导向，以能力为本位”的优质教材一直就是中国铁道出版社优先开发的领域。我社本着“依靠专家、研究先行、服务为本、打造精品”的出版理念，于2007年成立了“中国铁道出版社高职机电类课程建设研究组”，并经过两年的充分调查研究，策划编写、出版了本系列教材。
        </p>
        <p class="quotation">
          本系列教材主要涵盖高职高专机电类的公共课及六个专业的相关课程，它们是电气自动化专业、机电一体化专业、生产过程自动化专业、数控技术专业、模具设计与制造专业以及数控设备应用与维护专业。它们共同成为体系，又具有相对独立性。本系列教材在编写过程中邀请了高职高专自动化教指委专家、国家级教学名师、精品课负责人、知名专家教授、学术带头人及骨干教师。他们针对相关专业的课程，结合了多年教学中的实践经验，同时吸取了高等职业教育改革的成果，因此无论教学理念的导向、教学标准的开发、教学体系的确立、教材内容的筛选、教材结构的设计，还是教材素材的选择都极具特色。
        </p>
        <p class="quotation">本系列教材的特点归纳如下：</p>
        <p class="quotation">
          （1）围绕培养学生的职业技能这条主线设计教材的结构，理论联系实际，从应用的角度组织编写内容，突出实用性，并同时注意将新技术、新成果纳入教材。
        </p>
        <p class="quotation">
          （2）根据机电类课程的特点，对基本理论和方法的讲述力求简单、易于理解，以缓解繁多的知识内容与偏少的学时之间的矛盾。同时，增加了相关技术在实际生产、生活中的应用实例，从而激发学生的学习热情。
        </p>
        <p class="quotation">
          （3）将“问题引导式”“案例式”“任务驱动式”“项目驱动式”等多种教学方法引入教材体例的设计中，融入启发式的教学方法，力求好教、好学、爱学。
        </p>
        <p class="quotation">
          （4）注重立体化教材的建设。本系列教材通过主教材、配套光盘、电子教案等教学资源的有机结合，来提高教学服务水平。
        </p>
        <p class="quotation">
          本系列教材在策划出版过程中得到了教育部高职高专自动化技术类专业教学指导委员会委员以及广大专家的指导和帮助，在此表示深深的感谢。希望本系列丛书的出版能为我国高等职业院校教育改革起到良好的推动作用，欢迎使用本系列教材的老师和同学们提出宝贵的意见和建议。书中如有不妥之处，敬请批评指正。
        </p>
        <p class="content t-right">中国铁道出版社有限公司</p>
      </document>
    <div class="page-box pd-104" page="6">
      <div class="page-heder-img">
        <img src="../../assets/images/publish.png" alt="" class="mt-100" />
      </div>
      <div class="padding-96">
        <document class="cl-66">
          <p class="quotation">
            随着我国高等职业教育改革的不断深入，我国高等职业教育的发展进入了一个新的阶段。教育部下发的《关于全面提高高等职业教育教学质量的若干意见》文件，旨在阐述社会发展对高素质技能型人才的需求，以及如何推进高职人才培养模式改革，提高人才培养质量。
          </p>
          <p class="quotation">
            教材的出版工作是整个高等职业院校教育教学工作中的重要组成部分，教材是课程内容和课程体系的载体，对课程改革和建设具有推动作用，所以提高课程教学水平和教学质量的关键在于出版高水平、高质量的教材。
          </p>
          <p class="quotation">
            出版面向高等职业教育的“以就业为导向，以能力为本位”的优质教材一直就是中国铁道出版社优先开发的领域。我社本着“依靠专家、研究先行、服务为本、打造精品”的出版理念，于2007年成立了“中国铁道出版社高职机电类课程建设研究组”，并经过两年的充分调查研究，策划编写、出版了本系列教材。
          </p>
          <p class="quotation">
            本系列教材主要涵盖高职高专机电类的公共课及六个专业的相关课程，它们是电气自动化专业、机电一体化专业、生产过程自动化专业、数控技术专业、模具设计与制造专业以及数控设备应用与维护专业。它们共同成为体系，又具有相对独立性。本系列教材在编写过程中邀请了高职高专自动化教指委专家、国家级教学名师、精品课负责人、知名专家教授、学术带头人及骨干教师。他们针对相关专业的课程，结合了多年教学中的实践经验，同时吸取了高等职业教育改革的成果，因此无论教学理念的导向、教学标准的开发、教学体系的确立、教材内容的筛选、教材结构的设计，还是教材素材的选择都极具特色。
          </p>
          <p class="quotation">本系列教材的特点归纳如下：</p>
          <p class="quotation">
            （1）围绕培养学生的职业技能这条主线设计教材的结构，理论联系实际，从应用的角度组织编写内容，突出实用性，并同时注意将新技术、新成果纳入教材。
          </p>
          <p class="quotation">
            （2）根据机电类课程的特点，对基本理论和方法的讲述力求简单、易于理解，以缓解繁多的知识内容与偏少的学时之间的矛盾。同时，增加了相关技术在实际生产、生活中的应用实例，从而激发学生的学习热情。
          </p>
          <p class="quotation">
            （3）将“问题引导式”“案例式”“任务驱动式”“项目驱动式”等多种教学方法引入教材体例的设计中，融入启发式的教学方法，力求好教、好学、爱学。
          </p>
          <p class="quotation">
            （4）注重立体化教材的建设。本系列教材通过主教材、配套光盘、电子教案等教学资源的有机结合，来提高教学服务水平。
          </p>
          <p class="quotation">
            本系列教材在策划出版过程中得到了教育部高职高专自动化技术类专业教学指导委员会委员以及广大专家的指导和帮助，在此表示深深的感谢。希望本系列丛书的出版能为我国高等职业院校教育改革起到良好的推动作用，欢迎使用本系列教材的老师和同学们提出宝贵的意见和建议。书中如有不妥之处，敬请批评指正。
          </p>
          <p class="content t-right">中国铁道出版社有限公司</p>
        </document>
      </div>
    </div>
    <!-- 第三版 -->
    <div class="page-box page-padding">
      <document>
        <h1>第三版前言</h1>
        <p class="quotation">
          本书是高职院校与北京昆仑通态自动化软件科技有限公司（以下简称“昆仑通态公司”）合作编写的基于工作过程导向、面向教师和工控行业技术人员、服务于机电和自动化类专业职业能力培养的“十二五”职业教育国家规划教材。
        </p>
        <p class="quotation">
          本书以九个项目引领读者学习由触摸屏、PLC、变频器、传感器、通信协议等集成的小型工控系统，对每个训练项目的每个动作和步骤设要求、定目标，在实践过程中注重企业生产元素，融通生产工艺，紧贴生产过程，“任务明确、步骤清晰、过程规范、考评到位”，能培养严谨的工作作风和精益求精的产品意识，成就工控高手的梦想。
        </p>
        <p class="quotation"><b>编写背景</b></p>
        <p class="quotation">
          本书坚持基于工作过程导向的项目化教学改革方向，坚持将行业与企业的典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
        </p>
        <p class="quotation">
          北京昆仑通态MCGS触摸屏是国内主流工控产品，不仅使大量的工业控制设备或生产设备具有更多的自动化功能，也是企业实现管控一体化的理想选择。在与昆仑通态公司合作开发“工控系统安装与调试”课程（http://gxkc.cztgi.edu.cn：4505/）基础上，合作编写了《嵌入式组态控制技术》（第一版），受到学校和企业欢迎。随着工控技术快速发展，常州纺织服装职业技术学院与企业进行了广泛深入合作，参照行业与企业标准和工艺要求，较好地完成了《嵌入式组态控制技术》（第二版）框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。为了更好地适应新技术发展，以及满足教材内容和行业与企业发展同步，我们更新、改版编写了《嵌入式组态控制技术》（第三版），同时创建了“嵌入式组态控制技术”QQ交流群，群号为：107163512。
        </p>
        <p class="quotation"><b>教材特点</b></p>
        <p class="quotation">
          本书围绕触摸屏核心技术，分别与PLC、变频器、智能仪表、传感器及伺服通信控制技术相结合，构成典型的案例，内容涵盖了工控系统重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、可操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达到提高学
        </p>
      </document>
    <div class="page-box pd-104" page="7">
      <div class="page-heder-img">
        <img src="../../assets/images/qianyan.png" class="mt-100" alt="" />
      </div>
      <div class="padding-96">
        <document>
          <p class="quotation cl-66">
            本书是高职院校与北京昆仑通态自动化软件科技有限公司（以下简称“昆仑通态公司”）合作编写的基于工作过程导向、面向教师和工控行业技术人员、服务于机电和自动化类专业职业能力培养的“十二五”职业教育国家规划教材。
          </p>
          <p class="quotation cl-66">
            本书以九个项目引领读者学习由触摸屏、PLC、变频器、传感器、通信协议等集成的小型工控系统，对每个训练项目的每个动作和步骤设要求、定目标，在实践过程中注重企业生产元素，融通生产工艺，紧贴生产过程，“任务明确、步骤清晰、过程规范、考评到位”，能培养严谨的工作作风和精益求精的产品意识，成就工控高手的梦想。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/beijing.png"
              alt=""
              class="mr-5"
            />
            <b>编写背景</b>
          </p>
          <p class="quotation cl-66">
            本书坚持基于工作过程导向的项目化教学改革方向，坚持将行业与企业的典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
          </p>
          <p class="quotation cl-66">
            北京昆仑通态MCGS触摸屏是国内主流工控产品，不仅使大量的工业控制设备或生产设备具有更多的自动化功能，也是企业实现管控一体化的理想选择。在与昆仑通态公司合作开发“工控系统安装与调试”课程（http://gxkc.cztgi.edu.cn：4505/）基础上，合作编写了《嵌入式组态控制技术》（第一版），受到学校和企业欢迎。随着工控技术快速发展，常州纺织服装职业技术学院与企业进行了广泛深入合作，参照行业与企业标准和工艺要求，较好地完成了《嵌入式组态控制技术》（第二版）框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。为了更好地适应新技术发展，以及满足教材内容和行业与企业发展同步，我们更新、改版编写了《嵌入式组态控制技术》（第三版），同时创建了“嵌入式组态控制技术”QQ交流群，群号为：107163512。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/tedian.png"
              alt=""
              class="w-35 mr-5"
            />
            <b>教材特点</b>
          </p>
          <p class="quotation cl-66">
            本书围绕触摸屏核心技术，分别与PLC、变频器、智能仪表、传感器及伺服通信控制技术相结合，构成典型的案例，内容涵盖了工控系统重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、可操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达到提高学
          </p>
        </document>
      </div>
    </div>
    <div class="page-box page-padding">
      <document>
        <p></p>
        <p class="quotation"><b>基本内容</b></p>
        <p class="t0">生学习兴趣和效率以及易学、易懂、易上手的目的。</p>
        <p class="quotation">
          本书由彩色纸质教材和网络资源组成。彩色纸质教材由九个项目组成，每个项目中的任务安排了任务目标、任务描述和任务训练。网络资源含嵌入版组态软件、工程案例、教学案例、程序源代码、微课等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。视频资源通过扫描二维码获取，其他相关资源可从我社网站（http://www.tdpress.com/51eds/）下载。
        </p>
        <p class="quotation">
          本书由张文明、华祖银任主编，王一凡、陈东升、黄晓伟、曹建军、宋黎菁、缪建华、付华良、贾君贤任副主编，具体编写分工如下：张文明教授撰写前言；张文明教授和华祖银总工程师共同编写项目一；黄晓伟工程师编写项目二、项目三（任务一～任务四）；陈东升工程师编写项目五；王一凡副教授编写项目四、项目六；宋黎菁工程师编写项目七、项目三（任务六）；付华良副教授编写项目三（任务五）、曹建军副教授和贾君贤讲师共同编写项目八；缪建华高级技师编写项目九。全书由张文明教授指导并负责统稿，汤晓华教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
        </p>
        <p class="quotation">
          在本书编写过程中，得到了北京昆仑通态自动化软件科技有限公司、中国铁道出版社有限公司和常州纺织服装职业技术学院等单位领导的大力支持，在此表示衷心的感谢！
        </p>
        <p class="quotation">
          限于编者的经验、水平以及时间限制，书中难免在内容和文字上存在不足和缺陷，敬请广大读者批评指正。
        </p>
        <p class="content t-right">编者</p>
        <p class="content t-right">2019年5月</p>
      </document>
    </div>
    <div class="page-box page-padding">
      <document>
        <h1>第一版前言</h1>
        <p class="quotation">
          本书是教育部高职高专自动化技术类专业教学指导委员会规划、常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写的基于工作过程导向、面向“双师型”教师和行业、企业技术人员、服务于机电和自动化类专业职业能力培养的项目化教材。
        </p>
        <p class="quotation">
          目前工业自动化组态软件的发展有两个方面，一方面是向大型的平台软件发展；另一方面是向小型化方向发展，由通用组态软件简化成嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，发展机会更多、市场容量更大。北京昆仑通态MCGS嵌入式组态软件作为国内主流工控产品，是企业实现管控一体化的理想选择。
        </p>
        <p class="quotation"><b>编写背景</b></p>
        <p class="quotation">
          本书坚持基于工作过程导向的项目化教学改革方向，坚持将行业、企业典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
        </p>
        <p class="quotation">
          随着嵌入式组态和触摸屏技术的快速发展，2006年，常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写了《组态软件控制技术》，受到学校和企业欢迎。本书参照行业、企业标准和工艺要求，较好地完成了框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。本书为2010年国家级精品课程配套的主讲教材。
        </p>
        <p class="quotation"><b>教材特点</b></p>
        <p class="quotation">
          围绕嵌入式组态技术核心，以触摸屏TPC分别与PLC、变频器、智能仪表、传感器及伺服通信控制技术典型应用为工作任务，涵盖了嵌入式组态的重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达到提高学生学习兴趣和效率以及易学、易懂、易上手的目的。
        </p>
      </document>
    <!-- 3-1 -->
    <div class="page-box fl fl-cl ju-bt" page="8">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <document>
            <p></p>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/neirong.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>基本内容</b>
            </p>
            <p class="t0">生学习兴趣和效率以及易学、易懂、易上手的目的。</p>
            <p class="quotation">
              本书由彩色纸质教材和网络资源组成。彩色纸质教材由九个项目组成，每个项目中的任务安排了任务目标、任务描述和任务训练。网络资源含嵌入版组态软件、工程案例、教学案例、程序源代码、微课等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。视频资源通过扫描二维码获取，其他相关资源可从我社网站（<a href="http://www.tdpress.com/51eds/">http://www.tdpress.com/51eds/</a> ）下载。
            </p>
            <p class="quotation">
              本书由张文明、华祖银任主编，王一凡、陈东升、黄晓伟、曹建军、宋黎菁、缪建华、付华良、贾君贤任副主编，具体编写分工如下：张文明教授撰写前言；张文明教授和华祖银总工程师共同编写项目一；黄晓伟工程师编写项目二、项目三（任务一～任务四）；陈东升工程师编写项目五；王一凡副教授编写项目四、项目六；宋黎菁工程师编写项目七、项目三（任务六）；付华良副教授编写项目三（任务五）、曹建军副教授和贾君贤讲师共同编写项目八；缪建华高级技师编写项目九。全书由张文明教授指导并负责统稿，汤晓华教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
            </p>
            <p class="quotation">
              在本书编写过程中，得到了北京昆仑通态自动化软件科技有限公司、中国铁道出版社有限公司和常州纺织服装职业技术学院等单位领导的大力支持，在此表示衷心的感谢！
            </p>
            <p class="quotation">
              限于编者的经验、水平以及时间限制，书中难免在内容和文字上存在不足和缺陷，敬请广大读者批评指正。
            </p>
            <p class="content t-right">编者</p>
            <p class="content t-right">2019年5月</p>
          </document>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">II</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 第一版 -->
    <div class="page-box page-padding">
      <document>
        <p class="quotation"><b>基本内容</b></p>
        <p class="quotation">
          本套教材由彩色纸质教材和多媒体光盘组成。纸质教材共由十一个任务组成，任务一认识嵌入式组态+触摸屏；任务二主要讲解三款主流型号PLC与嵌入式TPC的通信和控制；任务三主要训练嵌入式TPC+变频器的RS
          485通信与计划曲线控制；任务四主要讲解嵌入式TPC与AI智能仪表实现多个通道温度集中控制；任务五讲解嵌入式TPC+PLC+变频器的调速系统；任务六讲解嵌入式TPC+嵌入式TPC之间的通信；任务七讲解嵌入式TPC与PLC的通信连接，驱动伺服控制二维平台定位；任务八嵌入式组态TPC+PLC+传感器的水位工程，主要讲解嵌入式组态功能应用；任务九讲解嵌入式组态TPC配方工程；任务十讲解电梯嵌入式组态；任务十一讲解“自动化生产线安装与调试”全国技能大赛嵌入式组态设计。每个任务都安排了任务目标、任务描述和任务训练。多媒体光盘含最新MCGS嵌入式组态安装软件、TPC产品样本、工程案例、教学任务工程案例、课程标准及“行动导向”课程教案等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。
        </p>
        <p class="quotation">
          本书编写分工如下：张文明副教授、华祖银总工程师共同负责撰写教材前言、内容简介和任务一；张文明副教授撰写任务二、任务六；张文明副教授、黄晓伟工程师共同撰写任务三、任务五；陈东升工程师撰写任务四；张文明副教授、陈东升工程师共同撰写任务七；王一凡讲师撰写任务八；黄晓伟工程师撰写任务九；张建成高工和陈跃安副教授共同撰写任务十；曹建军工程师撰写任务十一。全书由张文明副教授策划、指导并负责统稿；教育部高职高专自动化技术类专业教学指导委员会主任委员吕景泉教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
        </p>
        <p class="quotation">
          在本书编写过程中，得到了北京昆仑通态自动化软件科技有限公司、教育部高职高专自动化技术类专业教学指导委员会、中国铁道出版社和常州纺织服装职业技术学院等单位领导的大力支持，在此表示衷心的感谢！同时也要感谢北京昆仑通态无锡分公司史硕连、周星、蔡琳琳等工程技术人员对本书编写提供的帮助！
        </p>
        <p class="quotation">
          限于编者的经验、水平以及时间，书中难免在内容和文字上存在不足和缺陷，敬请提出批评指正。
        </p>
        <p class="content t-right">编者</p>
        <p class="content t-right">2011年6月</p>
      </document>
    <div class="page-box" page="9">
      <div class="page-heder-img">
        <img src="../../assets/images/qianyan-one.png" class="mt-100" alt="" />
      </div>
      <div class="padding-96">
        <document>
          <p class="quotation">
            本书是教育部高职高专自动化技术类专业教学指导委员会规划、常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写的基于工作过程导向、面向“双师型”教师和行业、企业技术人员、服务于机电和自动化类专业职业能力培养的项目化教材。
          </p>
          <p class="quotation">
            目前工业自动化组态软件的发展有两个方面，一方面是向大型的平台软件发展；另一方面是向小型化方向发展，由通用组态软件简化成嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，发展机会更多、市场容量更大。北京昆仑通态MCGS嵌入式组态软件作为国内主流工控产品，是企业实现管控一体化的理想选择。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/beijing.png"
              alt=""
              class="mr-5"
            />
            <b>编写背景</b>
          </p>
          <p class="quotation">
            本书坚持基于工作过程导向的项目化教学改革方向，坚持将行业、企业典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
          </p>
          <p class="quotation">
            随着嵌入式组态和触摸屏技术的快速发展，2006年，常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写了《组态软件控制技术》，受到学校和企业欢迎。本书参照行业、企业标准和工艺要求，较好地完成了框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。本书为2010年国家级精品课程配套的主讲教材。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/tedian.png"
              alt=""
              class="w-35 mr-5"
            />
            <b>教材特点</b>
          </p>
          <p class="quotation">
            围绕嵌入式组态技术核心，以触摸屏TPC分别与PLC、变频器、智能仪表、传感器及伺服通信控制技术典型应用为工作任务，涵盖了嵌入式组态的重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达到提高学生学习兴趣和效率以及易学、易懂、易上手的目的。
          </p>
        </document>
      </div>
    </div>
    <!-- 1-1 -->
    <div class="page-box fl fl-cl ju-bt" page="10">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <document>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/neirong.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>基本内容</b>
            </p>
            <p class="quotation">
              本套教材由彩色纸质教材和多媒体光盘组成。纸质教材共由十一个任务组成，任务一认识嵌入式组态+触摸屏；任务二主要讲解三款主流型号PLC与嵌入式TPC的通信和控制；任务三主要训练嵌入式TPC+变频器的RS
              485通信与计划曲线控制；任务四主要讲解嵌入式TPC与AI智能仪表实现多个通道温度集中控制；任务五讲解嵌入式TPC+PLC+变频器的调速系统；任务六讲解嵌入式TPC+嵌入式TPC之间的通信；任务七讲解嵌入式TPC与PLC的通信连接，驱动伺服控制二维平台定位；任务八嵌入式组态TPC+PLC+传感器的水位工程，主要讲解嵌入式组态功能应用；任务九讲解嵌入式组态TPC配方工程；任务十讲解电梯嵌入式组态；任务十一讲解“自动化生产线安装与调试”全国技能大赛嵌入式组态设计。每个任务都安排了任务目标、任务描述和任务训练。多媒体光盘含最新MCGS嵌入式组态安装软件、TPC产品样本、工程案例、教学任务工程案例、课程标准及“行动导向”课程教案等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。
            </p>
            <p class="quotation">
              本书编写分工如下：张文明副教授、华祖银总工程师共同负责撰写教材前言、内容简介和任务一；张文明副教授撰写任务二、任务六；张文明副教授、黄晓伟工程师共同撰写任务三、任务五；陈东升工程师撰写任务四；张文明副教授、陈东升工程师共同撰写任务七；王一凡讲师撰写任务八；黄晓伟工程师撰写任务九；张建成高工和陈跃安副教授共同撰写任务十；曹建军工程师撰写任务十一。全书由张文明副教授策划、指导并负责统稿；教育部高职高专自动化技术类专业教学指导委员会主任委员吕景泉教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
            </p>
            <p class="quotation">
              在本书编写过程中，得到了北京昆仑通态自动化软件科技有限公司、教育部高职高专自动化技术类专业教学指导委员会、中国铁道出版社和常州纺织服装职业技术学院等单位领导的大力支持，在此表示衷心的感谢！同时也要感谢北京昆仑通态无锡分公司史硕连、周星、蔡琳琳等工程技术人员对本书编写提供的帮助！
            </p>
            <p class="quotation">
              限于编者的经验、水平以及时间，书中难免在内容和文字上存在不足和缺陷，敬请提出批评指正。
            </p>
            <p class="content t-right">编者</p>
            <p class="content t-right">2011年6月</p>
          </document>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">II</li>
        <li class="footer-box"></li>
      </ul>
    </div>
  </div>
</template>
@@ -222,6 +358,10 @@
};
</script>
<style scoped lang="less">
p {
  text-align: justify;
  // color: #666;
}
.author-padding {
  padding: 104px 20px 104px 20px;
}
@@ -257,4 +397,14 @@
  height: 95%;
  background-color: #501438;
}
.neirong {
  p {
    margin: 0;
  }
}
.fw-box {
  margin-top: 20px;
  p {
  }
}
</style>

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

@@ -1,22 +1,300 @@
<template>
  <div class="page-content">
    <pageHeader></pageHeader> 
    <chapterOne />
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content">
      <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(1) > -1" />
    </div>
  </div>
</template>
<script>
import pageHeader from './header.vue'
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
export default {
  name: "pageContent",
  components: { pageHeader,chapterOne },
  components: { pageHeader, chapterOne },
  data() {
    return {
      catalogLength: 2, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
    };
  },
  watch: {
    showCatalogList: {
      handler(newVal, oldVal) {
        if (
          this.$store.state.qiankun &&
          this.$store.state.qiankun.catalogChange
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal,
          });
        }
        // 启动页码观察
        setTimeout(() => {
          this.initObservation();
        }, 500);
      },
    },
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [0,1];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
      { leading: true, trailing: false }
    );
    // 定义子层方法
    if (this.setGlobalState) {
      // 提供页面跳转功能
      this.setGlobalState({
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
      });
    }

    // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。
    // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。
    this.observer = new IntersectionObserver(this.pageChangeCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(5, 100);
    //   setTimeout(() => {
    //     this.renderSign("Note", {
    //       id: "2ACA9359",
    //       txt: "营养素和热量，才能",
    //       page: "100",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    //     setTimeout(() => {
    //       this.delSign({
    //         ids: ["2ACA9359"]
    //       });
    //     }, 2000);
    //   }, 1000);
    // }, 3000);
  },
  methods: {
    // 滚动监听
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
        if (
          currentScrollTop >=
          event.target.scrollHeight - this.loadThreshold
        ) {
          // 到达阈值
          if (
            this.showCatalogList[this.showCatalogList.length - 1] <
            this.catalogLength
          ) {
            // 加载下一章
            this.showCatalogList.push(
              this.showCatalogList[this.showCatalogList.length - 1] + 1
            );
            if (this.showCatalogList.length > 3) {
              // 超过三章隐藏顶部一章
              this.showCatalogList.shift();
            }
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
          // 到达阈值
          if (this.showCatalogList[0] > 0) {
            // 加载上一章
            this.showCatalogList.unshift(this.showCatalogList[0] - 1);
            if (this.showCatalogList.length > 3) {
              // 超过三章隐藏底部一章
              this.showCatalogList.pop();
            }
          }
        }
      }
      // showCatalogList 当前显示的三个章节，watch监听传递给主应用
      // 更新上一次滚动的位置
      this.previousScrollTop = event.target.scrollTop;
    },
    // 章节、页面跳转
    gotoPage(catalog, page) {
      if (catalog >= 0 && catalog <= this.catalogLength) {
        // 处理渲染章节
        if (catalog == 0) {
          this.showCatalogList = [0, 1];
        } else if (catalog == this.catalogLength) {
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
        }
        setTimeout(() => {
          // 跳转页码
          const pageDom = (
            this.container ? this.container : document
          ).querySelector(`[page="${page}"]`);
          if (pageDom) {
            pageDom.scrollIntoView();
          } else {
            console.log("页码错误！");
          }
        }, 500);
      } else {
        console.log("章节错误！");
      }
    },
    // 渲染标记
    renderSign(type, data) {
      const existence = (
        this.container ? this.container : document
      ).querySelector(`[dataid="${data.id}"]`);
      // 去重
      if (!existence) {
        const pageDom = (
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        let reg = new RegExp(`${data.txt}`, "ig");
        switch (type) {
          case "Highlight":
            // 高亮
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
            );
            break;
          case "Dashing":
            // 划线
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
            );
            break;
          case "Note":
            // 笔记
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>`
            );
            break;
        }
      }
    },
    // 删除标记渲染
    delSign({ ids, type }) {
      if (ids && ids.length) {
        for (let i = 0; i < ids.length; i++) {
          const id = ids[i];
          const dom = (
            this.container ? this.container : document
          ).querySelector(`[dataid="${id}"]`);
          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
            dom.outerHTML,
            dom.outerText
          );
        }
      }
      if (type) {
        const doms = (
          this.container ? this.container : document
        ).querySelectorAll(`[datatype="${type}"]`);
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
            dom.outerHTML,
            dom.outerText
          );
        }
      }
    },
    initObservation() {
      const sections = (
        this.container ? this.container : document
      ).querySelectorAll(".page-box");
      //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
      sections.forEach((section) => {
        const isObserver = section.getAttribute("observer");
        if (!isObserver) {
          this.observer.observe(section);
          section.setAttribute("observer", "1");
        }
      });
    },
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {
        //entry.isIntersecting：检查当前目标元素是否与根元素相交。
        if (entry.isIntersecting) {
          const target = entry.target;
          //entry.target：获取当前目标元素
          const page = target.getAttribute("page");
          const catalogDom = this.tool.getParentNodeByClassName(
            target,
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log("page", page, catalog);
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
          // let index = sections.findIndex((section) => section === target) + 1;
          //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.page-content {
  max-width: 816px;
  min-width: 375px;
  margin: 0 auto;
  padding-bottom: 100px;
.page-main {
  width: 100%;
  height: 100%;
  overflow: auto;
  .page-content {
    max-width: 816px;
    min-width: 375px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
</style>

 src/main.js

@@ -2,11 +2,11 @@
import App from "./App.vue";
import less from "less";
// 学前儿童卫生与健康
import "./books/childHealth/assets/main.less";
// import "./books/childHealth/assets/main.less";

// import './books/content/css/default.less';
// 嵌入式组态控制技术
// import './books/embedded/assets/main.less';
import './books/embedded/assets/main.less';
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import store from "./store";
@@ -64,8 +64,6 @@

  props.setGlobalState({
    state: 3, // 应用挂载完成，同时用于触发一次stateChange将state挂载在vuex当中
    bookName: config.activeBook.bookName,
    bookId: config.activeBook.bookId
  });

  render(props);

 vue.config.js

@@ -2,7 +2,7 @@
// import {publicCtx} from '@/assets/js/config'
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  publicPath: 'http://182.92.203.7:3007/books/book/1',
  publicPath: 'http://182.92.203.7:3007/books/book/3',
  // publicPath:'/books/book/1',
  transpileDependencies: true,
  lintOnSave: false,