公司官网代码

2025-08-18 15:38:29 +08:00 · 2025-08-18 15:38:29 +08:00 · db5d41b081
commit db5d41b081
99 changed files with 9796 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    parser: "@babel/eslint-parser",
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,24 @@
+# djxinxi
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+  "name": "djxinxi",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "element-plus": "^2.2.26",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "prettier": "^2.4.1"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/images/news_content_4.jpg
+++ b/public/images/news_content_4.jpg
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta data-n-head="ssr" vmid="description" name="description" content="洞见信息专注于化工工艺报警管理系统开发，通过大数据分析帮助企业改善生产管理，公司提供专业的软件产品和相关软件咨询服务，助力企业通过数字孪生技术实现智能工厂的建设。">
+    <meta data-n-head="ssr" vmid="keywords" name="keywords" content="洞见信息,洞见信息科技,洞见科技,上海洞见,工艺报警,工艺报警管理系统">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,18 @@
+<template>
+  <!--  <nav>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </nav>-->
+  <router-view />
+</template>
+
+<style lang="less">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  //text-align: center;
+  //color: #2c3e50;
+}
+
+</style>
--- a/src/api/constants.js
+++ b/src/api/constants.js
@ -0,0 +1,313 @@
+import newsContents from "@/api/newsContents";
+const navData =  [{
+  path: "/main",
+  name: "main",
+  pageName: "首页"
+},
+  {
+    path: "/product",
+    name: "product",
+    pageName: "产品中心",
+  },
+  {
+    path: "/news",
+    name: "news",
+    pageName: "新闻资讯",
+  }];
+
+const navSubData = [{
+  path: "/product/techmanage",
+  name: "techmanage",
+  pageName: "工艺报警管理系统"
+},
+  {
+    path: "/product/harmfulalarm",
+    name: "harmfulalarm",
+    pageName: "有毒有害风险监控预警系统",
+  },
+  {
+    path: "/product/systemdb",
+    name: "systemdb",
+    pageName: "实时数据库系统",
+  },
+  {
+    path: "/product/productwatch",
+    name: "productwatch",
+    pageName: "生产监控系统",
+  }
+];
+
+const systemTechData = [
+    {
+      title: "产品背景",
+      content: [
+        {
+          subTitle: "",
+          contentText: `
+<p>&ensp;&ensp;&ensp;&ensp;分布式控制系统（DCS）现已广泛应用于石油化工领域。DCS报警系统已从早期的模拟式、单点式发展为现在的报警列表式，并具有完备的报警处理功能。随着生产过程和设备变得越来越复杂、要求越来越严格，报警点也相应地不断增加，与此同时报警处理课题成为近年关注的焦点，因此报警汇总和处理在工厂管理中越来越受到重视。</p>
+            <p>&ensp;&ensp;&ensp;&ensp;国外大多数DCS系统都具有报警处理过程，支持报警判断、报警储存、报警查询和报警确认等功能，通过报警判断功能减少装置不必要的报警发生，同时报警存储将报警信息写入报警表进行有效管理，以方便故障分析。运用报警查询功能，操作人员可按照报警条件进行查看，快速识别最危险信息。实现了报警管理的科学化与信息化。</p>
+            <p>&ensp;&ensp;&ensp;&ensp;洞见信息科技基于EEMUA191 Alarm Systems AGuide to Design, Management and Procurement，ISA-18.2 Managementof Alarm Systems for the Process Industries等国际标准，以及GB 41261-2022《过程工业报警系统管理》、T/CCSAS012-2022《化工企业工艺报警管理实施指南》中的技术标准和管理要求，和企业工艺安全的管理经验，自主研发了工艺报警管理系统，系统通过对报警相关数据评估企业报警管理现状，支持报警原因分析，充分发挥报警管理系统的能力，扩大报警管理系统实施效果，提升生产装置的报警系统性能，从而提高装置运行稳定性，减少装置工艺波动，确保各装置可以长期有效地使用报警管理。</p>
+`,
+        }
+      ]
+    },
+    {
+      title: "产品功能",
+      content: [
+        {
+          subTitle: "仪表点位数据的采集和储存",
+          contentText: `
+          <p>&ensp;&ensp;&ensp;&ensp;系统是一个具有开放体系结构的系统，它同时具备完整的实时数据库系统与时序数据库系统功能，既满足了高并发的实时“窄”数据的处理，也满足了大数据分析需求的宽数据压缩存储，无缝集成关系数据库系统(RDBMS)，以应用程序接口（API）和关系数据库接口等多种方式为第三方应用软件系统提供集成能力。<p/>
+          <p>&ensp;&ensp;&ensp;&ensp;将分散在各个系统中的仪表数据集成起来，并将原始信息进行重新定义及标准化处理之后存储到数据库中，实现分布式过程数据的实时采集、实时规则推理、海量历史数据管理等。<p/>`
+        },
+        {
+          subTitle: "报警数据统计和展示",
+          contentText: `
+          <p>&ensp;&ensp;&ensp;&ensp;系统根据数据测量值与报警规则库中的设定值进行比较输出报警事件。系统支持对报警次数、报警持续时间，结合报警所属的行政单位、管理分类、报警等级、响应优先级进行多维度统计，在系统首页、报表中心中展示，便于相关人员查阅。<p/>`,
+          imgSrc: "product_module2.png"
+        }, {
+          subTitle: "报警电子台账和维护",
+          contentText: `<p>&ensp;&ensp;&ensp;&ensp;电子化台账支持线上维护，并提供报警高级属性的设置，如报警分类、分级、响应优先级、死区值、延时值等内容设定，系统支持设置报警原因和处置方法，并可以在报警处置记录模块中形成知识库。支持在系统中编辑、维护报警设置信息，并自动对变更内容进行记录。<p/>`,
+          imgSrc: "product_module3.png"
+        },
+        {
+          subTitle: "报警分析",
+          contentText: `<p>&ensp;&ensp;&ensp;&ensp;系统支持对频繁发生的报警、关键报警、陈旧报警进行统计、排序，支持对一年的数据进行自动分析，根据算法规则自动判定出干扰报警（振颤报警、瞬闪报警），支持模拟值设定，预测报警属性修改后的效果，并自带报警原因分析的知识库内容。<p/>`,
+          imgSrc: "product_module2.png"
+        },
+        {
+          subTitle: "异常事件分析",
+          contentText: `<p>&ensp;&ensp;&ensp;&ensp;系统可自动或手动判定工厂的异常情况，对异常情况发生前的报警情况进行汇集、分析，判定报警未能起到作用的原因，用以改进报警的可靠性。<p/>`,
+          imgSrc: "product_module5.png"
+        },
+        {
+          subTitle: "报警处置记录",
+          contentText: `<p>&ensp;&ensp;&ensp;&ensp;系统支持汇集各个班组的报警发生情况，并进行聚合记录和详细内容展示，支持知识库快捷录入原因分析和处置方法，支持记录人通过手写板签字确认和PIN码方式确认。<p/>`,
+          imgSrc: "product_module6.png"
+        }
+      ]
+    }
+  ];
+
+const mainProductInfos = [
+  {
+    bgImg:"main-product-bg0.png",
+    itemName:"工艺报警管理系统",
+    itemDesc:"通过警报管理分析过去转变为预测即将发⽣的情况， 并为运营团队提供时间来避免警报、 设备问题并保护产品质量。 使⽤智能分析和警报减少技术减少操作员的警报负载 对异常情况进行分析， 为下一次异常情况的未来发⽣和解决向操作员提供预测、 洞察和建议。",
+    path:navSubData[0].path,
+  },
+  {
+    bgImg:"main-product-bg1.png",
+    itemName:"有毒有害风险监控预警系统",
+    itemDesc:"气体泄漏会对工业工厂、其员工以及附近居住人员造成持续的威胁。涉及窒息或爆炸的全球性事件不断提醒着这个问题。当快速而明智的决定生死攸关时，您需要完全掌控您的气体探测系统。确保安全和合规比以往更容易，同时还可以减少设置和操作时间，并最大程度减少培训需求。",
+    path:navSubData[1].path,
+  },
+  {
+    bgImg:"main-product-bg3.png",
+    itemName:"实时数据库系统",
+    itemDesc:"基于数字孪生技术打造智慧工厂，实现工厂的全要素数字化和虚拟化,生产管理实时化和可视化；基于机器学习实现设备运维协同化和智能化，助力工业企业实现数字化运营。",
+    path:navSubData[2].path,
+  },
+  {
+    bgImg:"main-product-bg2.png",
+    itemName:"生产实时监控系统",
+    itemDesc:"基于数字孪生技术构建的智慧工厂，能够直观地将厂区建筑及各领域管理要素得到精准复现，并基于全域数据信息，建立一系列业务决策模型，能够实现对当前状态的评估、对过去发生问题的诊断，以及对未来趋势的预测，为业务决策提供科学依据。",
+    path:navSubData[3].path,
+  },
+
+];
+
+const mainSolutionInfos = [
+  {
+    imgSrc:"solution-item-pic2.png",
+    title:"大数据平台",
+    desc:"为海量多源异构数据的提供高频采集、机理建模、工艺报警分析、工艺流程优化、设备端安全防护、基于实时数据库的产品全生命周期建模和面向生产过程优化分析能力。",
+  },
+  {
+    imgSrc:"solution-item-pic3.png",
+    title:"中小企业上云",
+    desc:"为客户提供轻量化套餐和个性化定制服务， 实现中小企业上云。",
+  },
+  {
+    imgSrc:"solution-item-pic4.png",
+    title:"重点设备上云",
+    desc:"为传统工业设备增加信息采集功能，完成智能化改造，提供远程运维服务。",
+  },
+  {
+    imgSrc:"solution-item-pic5.png",
+    title:"智能工厂改造",
+    desc:"为传统工厂定制打造基于工业大数据驱动的智能化工厂，助力企业数字化转型。",
+  },
+  {
+    imgSrc:"solution-item-pic6.png",
+    title:"标识解析",
+    desc:"在石化行业对每台设备赋予一个唯一的身份标识，提供对高价值设备的运维和诊断能力。",
+  },
+];
+
+const systemHarmfulAlarmData = [
+  {
+    title: "产品简介",
+    content: [
+      {
+        subTitle: "",
+        contentText: `<p>&ensp;&ensp;&ensp;&ensp;环境风险预警体系建设，就是本着“常态与非常态相结合，预防与处置并重”的原则，使本质安全与环境安全有机融合，将环境风险和安全隐患的管控“关口前移”，集“源头管控、快速联动、平战结合、统筹兼顾”于一体，由“事后疲于应付”转变为“事前科学预防”，真正做到“防患于未然，治患于萌芽”。 通过管理系统的建设，实现强化化工园区和企业环境风险防控、保障生产安全，提升化工园区精细化管理水平，有效监测有毒有害气体排放，促进我省大气环境质量改善和化工园区高质量发展的目的。进而落实习总书记从源头防范化解重大风险的现代化的治理体系、提升治理能力。报警管理系统，系统通过对报警相关数据评估企业报警管理现状，支持报警原因分析，充分发挥报警管理系统的能力，扩大报警管理系统实施效果，提升生产装置的报警系统性能，从而提高装置运行稳定性，减少装置工艺波动，确保各装置可以长期有效地使用报警管理。</p>`
+      }
+    ]
+  },
+  {
+    title: "产品背景",
+    content: [
+      {
+        subTitle: "",
+        contentText: `<p>&ensp;&ensp;&ensp;&ensp;随着化工企业“退城入园”政策的推进，化工园区日益成为危险化学品、有毒有害物质主要的聚集地。尤其部分化工园区在发展中还存在着规模体量小、园区功能定位不明确、主导产业不突出甚至还存在低水平重复建设、同质化现象明显、管理水平参差不齐、有毒有害气体监测装置利用率低、监测装置损坏、报警装置无输出等问题，安全生产与环境风险隐患较为突出，一旦发生泄漏、火灾、爆炸等安全生产事故，极易产生“多米诺骨牌”效应，不仅造成生态环境破坏，而且给企业、园区及周边敏感目标造成重大伤亡和巨大财产损失。 为深入贯彻习近平生态文明思想，认真落实省委省政府《山东省贯彻落实〈关于构建现代环境治理体系的指导意见〉的若干措施》、山东省生态环境厅、工信厅《关于印发全省化工园区有毒有害气体环境风险预警体系建设工作方案的通知》、生态环境厅全省化工园区环境风险预警体系建设工作推进视频会的工作部署，我公司结合自身特点打造了有毒有害气体环境风险监控预警管理系统。</p>`
+      }
+    ]
+  },
+  {
+    title: "产品功能",
+    content: [
+      {
+        subTitle: "",
+        contentText: `<p>&ensp;&ensp;&ensp;&ensp;管理系统主要包括大数据中心、能力支撑平台、数据库子系统、预警子系统、应急响应子系统、数据分析子系统、信息公开子系统等模块。通过建立园区三维GIS平台，整合化工园区和企业危险单元、风险源、监测站点/装置、应急资源与设施以及周边环境等的基本信息与分布位置，构建“点、线、面”自动监测网络，依靠监测网络数据的实时回传，将整个园区的日常监测、监控预警、应急联动等集成到统一的平台上进行综合管控，实时监测园区污染物的迁徙路径，明晰园区各企业特征污染物排放及扩散规律，实现“实时监控、风险预警、数据处理、应急响应、信息发布”等功能。</p>`,
+        imgSrc: "harmful_function.png"
+      }
+    ]
+  }
+];
+
+const systemDbData = [
+    {
+      title: "实时数据库系统简介",
+      contentText: [
+        "<p>&ensp;&ensp;&ensp;&ensp;实现从数据到信息，从信息到生产力的转换可靠、准确、实时的信息，意味着可做出更好的业务决策。对企业或管理机构而言，洞见信息自主研发的实时数据库系统的应用，意味着企业或管理机构中每位成员都可根据工作需求实时获得关键的数据。利用实时数据库系统，将数据转化为对业务有用的信息，该信息将辅助管理者和运行人员做出适当的决策，使企业不断的向前发展并获得增长性的赢利能力。实时数据库系统为管理层打开一扇虚拟的窗口，帮助其洞察生产过程或运行流程，使得在大量基于实际运行数据/信息基础上，实现对整个业务运作流程的控制与管理。</p>"
+      ],
+      imgSrcs: [
+        "db_content0.png"
+      ]
+    },
+    {
+      title: "实时数据库系统核心功能",
+      contentText: ["具有强大的实时数据采集功能，可实时地采集来自不同数据源的原始数据，并通过系统提供的用户可配置报表、分析工具和Web 软件工具等，在遍布企业或管理部门的台式计算机、便携式电脑或手机上，实时显示当前和历史的运行状况。对于运行管理有价值的数据信息，系统可为其提供在线存储达数十年，并随时随地（每周7 天、每天24 小时）连续不断地为运行单元级、成套设施级、整个企业或管理机构级，提供实时数据与信息支持。",
+        "弥合了业务控制与业务管理间的信息缺口，使得该类企业在实时数据支持的管理过程中成功地获得了丰厚的投资回报，且避免了运营风险和决策失误。实时数据库系统已成为企业或管理机构的信息集成系统重要部分，直接应用于运行、维护和管理一体化。并为生产过程控制与业务运行和管理系统间的实时信息沟通架起了一道桥梁。实时数据库系统可直接采集，实时获取难度较高的各种运行过程中的实时数据（通常该类数据，封闭在各自成体系的自动化系统或人工数据源中），并将其转化为公共的、且对业务有效的信息。不论何种行业或管理部门，均可从这些关键的实时信息中获得收益，并能在动态业务领域中自由地驰骋，达到绩效目标。",
+        "帮助企业将实时数据转化为运行管理决策的关键信息，使其成为业务系统中整合的重要信息。目前，众多管理机构、组织或企业，包括世界500 强到中型规模企业，将该实时信息管理模式应用到生产能力、产品质量和可靠性方面后，而取得了持续的巨大成功。"
+      ],
+      imgSrcs: ["db_content1.png"]
+    }
+  ];
+
+const systemWatchData = [
+  {
+    title: "图形展示",
+    contentText: [
+      "实时展示企业现场工艺流程状态，涵盖流量、温度、压力、液位等重要参数信息； ",
+      "实时跟踪罐区资源的动态，包括压力、液位、温度等，同时也展示储罐的静态数据，如罐高、安全罐容、设计罐容、设计制造时间等信息，通过罐区跟踪及时了解罐存情况 （MES系统）；",
+      "实时监控当前全厂公用工程数据信息，数据主要包括：水、电、气、风等相关数据，通过这些数据实时在线分析生产能耗情况； ",
+      "实时监控大型机组等关键设备运行状态；",
+      "实时监控实验室采样分析点相关信息，包括采样点状态、分析项目数据、历史采样情况等； ",
+      "第一时间掌握生产一线的实时数据，把控生产方向，指导生产过程, 满足用户对生产现场情况的监控需求； ",
+      "支持HTML5技术，无需软件辅助。"
+    ],
+    imgSrcs: [
+      "watch_graph_0.png",
+      "watch_graph_1.png",
+      "watch_graph_2.png",
+    ]
+  },
+  {
+    title: "历史曲线",
+    contentText: [
+      "方便的观察数据库中的历史点在任意一个时刻的状态，方便的查询某个位号的历史曲线，分析某一液位点、温度点、压力点、流量等的运行情况，并打印趋势。方便生产管理人员掌握过去生产的变化趋势； ",
+      "实现了生产工艺指标多曲线对比功能； ",
+      "提供了对位号历史的追溯，帮助工艺人员对具体参数的历史数据进行分析和总结。"
+    ],
+    imgSrcs: ["watch_history_0.png"]
+  },
+  {
+    title: "工艺台账",
+    contentText: [
+      "查询各时间点工艺台帐记录，动态生成电子工艺台帐报表，替代传统的纸质台帐； ",
+      "在线抄表模式：内操在生产流程图中对重要位号进行在线抄表，在兼顾监管作用的同时，替代外操户外抄表；",
+      "是进行工艺技术改进和历史追溯的重要依据； ",
+      "电子工艺台帐可随时导出至Excel文件或生成相应台帐报表。"
+    ],
+    imgSrcs: ["watch_craft_0.png"]
+  },
+  {
+    title: "位号报警",
+    contentText: [
+      "系统提供报警数据点集中管理和展示功能，通过该功能用户可以方便快捷的查询浏览到生产运行过程中的报警状态，及时调整生产运行指令； " ,
+      "组态位号报警信息，对于位号不同的报警情况采用不同颜色来区别，报警类型包括位号超限报警、位号离散报警、位号直线报警、位号变化率报警、位号方差报警； " ,
+      "对重要参数的超限情况发出报警处理，与生产流程监控模块联动，通过图形颜色的变化提醒岗位操作人员； ",
+      "报警信息可随时导出至Excel文件或者生产相关报警报表；" ,
+      " 报警信息可根据权限设置，与短信平台进行集成，将报警信息发送至关键用户。"
+    ],
+    imgSrcs: ["watch_alarm_0.png"]
+  },
+  {
+    title: "报警处置",
+    contentText: [
+      "报警处置自动生成报警的相关记录，并根据振幅、时长等信息进行了聚合，岗位人员能快速准确定位报警的为止；",
+      "系统提供报警产生原因和相关处置的知识库，支持在报警台账进行维护，班组人员可以简单、快捷的对报警处置记录。"
+    ],
+    imgSrcs: ["watch_deal_0.png"]
+  },
+];
+
+const newsItemData = [
+  {
+    id:0,
+    time: "2022-11-15",
+    title: "《工业大数据白皮书（2019版）》",
+    imgSrc: "news_img0.png",
+    desc:"本文提供《工业大数据白皮书（2019版本）》下载",
+    content:newsContents.newsId0
+  },
+  {
+    id:1,
+    time: "2022-10-12",
+    title: "工业和信息化部关于推动5G加快发展的通知",
+    imgSrc: "news_img1.png",
+    desc:"为贯彻落实《推进互联网协议第六版(IPv6)规模部署行动计划》（厅字〔2017〕47号）任务要求，加快提升IPv6端到端贯通能力，持续提升......",
+    content: newsContents.newsId1,
+  },
+  {
+    id:2,
+    time: "2022-09-30",
+    title: "工业和信息化部办公厅关于推动工业互联网加快发展的通知",
+    imgSrc: "news_img2.png",
+    desc:"各省、自治区、直辖市及计划单列市、新疆生产建设兵团工业和信息化主管部门，各省、自治区、直辖市通信管理局，中国电信集团有限......",
+    content:newsContents.newsId2,
+  },
+  {
+    id:3,
+    time: "2022-08-11",
+    title: "《工业和信息化部办公厅关于推动工业互联网 加快发展的通知》政策解读",
+    imgSrc: "news_img3.png",
+    desc:"党中央、国务院高度重视工业互联网发展。习近平总书记连续四年对推动工业互联网发展做出重要指示。今年2月21日，中央政治局会议再......",
+    content:newsContents.newsId3,
+  },
+  {
+    id:4,
+    time: "2022-06-22",
+    title: "一图看懂关于推动工业互联网加快发展的通知",
+    imgSrc: "news_img4.png",
+    mainImgSrc:"news_main_content_0.png",
+    desc:"为深入贯彻习近平总书记在统筹推进新冠肺炎疫情防控和经济社会发展工作部署会议上的重要讲话精神，落实中央关于推动工业互联网加快发展的决策部署，统筹发展与安全，推动工业互联网在更广范围、更深程度、更高水平上融合创新，培植壮大经济发展新动能，支撑实现高质量发展，工业和信息化部日前印发《关......",
+    content:newsContents.newsId4,
+  },
+  {
+    id:5,
+    time: "2022-05-11",
+    title: "《工业互联网创新发展行动计划（2021-2023 年）》解读",
+    imgSrc: "news_img5.png",
+    desc:"近日，工业互联网专项工作组印发《工业互联网创新发展行动计划（2021-2023年）》（工信部信管〔2020〕197号，以下简称《三年行动计划》）。现就《三年行动计划》有关内容解读如下：",
+    content:newsContents.newsId5,
+  },
+]
+
+export default {
+    navData, navSubData, systemTechData,mainProductInfos,mainSolutionInfos,systemHarmfulAlarmData,systemDbData,
+  systemWatchData, newsItemData,
+
+};
--- a/src/api/newsContents.js
+++ b/src/api/newsContents.js
@ -0,0 +1,669 @@
+const newsId0 = ` 
+ <a class="news-content-p underline-a" href="https://adc.fzu.edu.cn/__local/B/D7/2C/7D99EED25D9F65221422520A181_24631135_2AC548.pdf?e=.pdf">本文提供《工业大数据白皮书（2019版本）》下载</a>
+`;
+
+const newsId1 = `
+<div class="file-resource">工信部通信函〔2020〕57号</div>
+      <div>
+        <p class="news-content-p">各相关企业：</p>
+        <p class="news-content-p">&ensp;&ensp;&ensp;&ensp;为贯彻落实《推进互联网协议第六版(IPv6)规模部署行动计划》（厅字〔2017〕47号）任务要求，加快提升IPv6端到端贯通能力，持续提升IPv6活跃用户和网络流量规模，我部决定于2020年开展IPv6端到端贯通能力提升专项行动。有关事项通知如下：</p>
+        <br/>
+        <p class="news-content-p">一、重点工作任务</p>
+        <p class="news-content-p">
+          （一）优化提升IPv6网络接入能力。基础电信企业持续优化骨干网、城域网、接入网的IPv6网络质量，新增互联网骨干直联点同步完成IPv6升级改造；进一步丰富IPv6专线产品，在全国范围内为有需求的政企客户提供IPv4/IPv6双栈专线、IPv6单栈专线、IPv6代播等多种业务。支持基础电信企业对IPv6单栈专线开通给予九五折或更大力度资费优惠。
+        </p>
+        <p class="news-content-p">
+          （二）加快提升内容分发网络（CDN）IPv6应用加速能力。阿里云、腾讯云、网宿科技、蓝汛、金山云、百度云、华为云、京东云、帝联科技、UCloud、白山云、七牛云、鹏博士、中国移动加快内容分发网络IPv6深度改造，提升IPv6服务资源占比、扩大IPv6服务覆盖范围、优化IPv6应用加速性能。到2020年末，内容分发网络支持IPv6的节点数达到IPv4节点数的85%以上；按地市级行政区划，IPv6服务覆盖能力达到IPv4服务覆盖能力的85%以上；IPv6应用加速性能达到IPv4应用加速性能的85%以上。
+        </p>
+        <p class="news-content-p">
+          （三）大幅提升云服务平台IPv6业务承载能力。阿里云、天翼云、腾讯云、沃云、华为云、移动云、百度云、金山云、京东云、UCloud、青云扩大支持IPv6的云产品数量，提升IPv6云产品的服务能力。到2020年末，完成包含云主机、容器引擎、负载均衡、域名解析、对象存储、MySQL云数据库、MongoDB云数据库、API 网关、Web 应用防火墙、DDOS 高防、文件存储（NAS）、对等连接服务（VPC）、HTTPDNS、数据库审计、微服务引擎、MapReduce服务、设备接入服务（IoT Hub）、区块链服务、视频直播、人脸识别等在内的全部公有云产品的IPv6改造；国内支持IPv6服务的可用域（Region）数量达到全部IPv4可用域的50%以上。
+        </p>
+        <p class="news-content-p">（四）全面扩大数据中心（IDC）IPv6覆盖范围。中国电信、中国移动、中国联通进一步加强对中小型数据中心和机房的IPv6改造。阿里云、腾讯云、百度云、京东云、华为云、世纪互联、鹏博士、秦淮科技、新网互联、方正信息、西部数码、万国数据、光环新网加快数据中心IPv6改造力度，到2020年第三季度末，完成年报中全部数据中心的IPv6改造，形成全国范围数据中心IPv6覆盖能力。
+        </p>
+        <p class="news-content-p">（五）着力提升终端设备IPv6支持能力。普联（TP-Link）、友讯（D-Link）、华为、中兴、烽火、上海贝尔、新华三、腾达、华硕、网件、小米新生产的家庭网关、企业网关、无线路由器、智能家居终端应默认配置支持IPv4/IPv6双栈。天猫、京东、淘宝等电商平台应优先向用户推荐支持IPv6的终端设备。基础电信企业加速存量家庭网关的更新替换，到2020年末，完成对所有可远程升级家庭网关IPv6升级。
+        </p>
+        <p class="news-content-p">（六）稳步提升行业网站及互联网应用IPv6浓度。各省（区、市）通信管理局、部属各单位、部属各高校、基础电信企业继续深化门户网站IPv6改造，到2020年末，门户网站二级、三级链接的IPv6浓度达到85%以上。
+          基础电信企业集团及下属省级公司稳步提升自营移动互联网应用（APP）的IPv6浓度，到2020年末，排名前10位的自营移动互联网应用（APP）的IPv6浓度达到60%以上；服务端统计的IPv6活跃用户占比达到50%以上。
+          应用宝、360 手机助手、豌豆荚、OPPO 软件商店、百度手机助手、华为应用市场、小米应用商店、VIVO 应用商店、MM 商场、沃商店对新上架的APP开展IPv6浓度检测，并设立IPv6应用专区，引导用户安装支持IPv6的应用。相关企业加强对开发工具包（SDK）及服务器端程序的IPv6升级改造工作。
+        </p>
+        <p class="news-content-p">（七）着力强化IPv6网络安全保障能力。各相关企业要进一步完善针对IPv6的网络安全定级备案、风险评估、通报预警、灾难备份及恢复等工作。推动IPv6环境下网络安全产品和服务的应用，鼓励构建IPv6安全产品孵化平台和测试环境，推动在研IPv6安全产品孵化，强化IPv6安全产品应用性能验证。基础电信企业和重点IDC、CDN等企业要做好僵木蠕、移动互联网恶意程序监测处置系统、信息安全管理系统等安全技术手段IPv6配套改造工作，强化IPv6环境下漏洞、违法信息等的监测发现与处置。
+        </p>
+        <br/>
+        <p class="news-content-p">二、2020年末主要目标</p>
+        <p class="news-content-p">（一）IPv6网络性能与IPv4趋同，平均丢包率、时延、连接建立成功率等指标与IPv4相比劣化不超过10%。</p>
+        <p class="news-content-p">（二）IPv6活跃连接数达到11.5 亿。其中，中国电信集团有限公司达到2.9亿，中国移动通信集团有限公司达到6.4 亿，中国联合网络通信集团有限公司达到2.2亿。
+        </p>
+        <p class="news-content-p">
+          （三）移动网络IPv6流量占比达到10%以上。
+        </p>
+        <p class="news-content-p">
+          三、保障措施
+        </p>
+        <p class="news-content-p">
+          （一）压实工作责任。各企业要对照年度任务目标，进一步细化分解，做到“落实举措、责任主体、完成时限”三明确。各基础电信企业集团公司要加强对各省级子（分）公司的工作部署和指导，及时掌握工作进展，开展检查督导，并在年度考核中将IPv6相关任务完成情况作为重要指标。
+        </p>
+        <p class="news-content-p">
+          （二）强化协同攻坚。工业和信息化部（信息通信发展司）组织成立IPv6规模部署专项协同推进工作组，制定可量化、可考核的技术规范和标准，以IPv6端到端贯通为核心目标，建立任务台账、安排专人对接、逐项协调解决，保障IPv6升级改造工作顺利推进。
+        </p>
+        <p class="news-content-p">
+          （三）完善技术监测。中国信息通信研究院要会同相关企业和产业联盟持续完善IPv6发展监测平台，开展IPv6端到端网络性能监测，内容分发网络（CDN）、云平台、行业移动互联网应用（APP）、行业网站等的IPv6支持程度监测等工作，定期发布IPv6发展监测报告。各相关企业要配合做好监测节点部署工作。
+        </p>
+        <p class="news-content-p">
+          （四）开展抽查抽测。各地通信管理局要瞄准重点任务、紧扣时间节点，通过明查暗访或者利用IPv6发展监测平台在线抽测等形式，加强对属地相关企业推进IPv6相关工作进度与质量的日常监督。对于逾期未能完成工作任务的单位，视情通过约谈、通报等方式，督促尽快整改。
+        </p>
+        <br/>
+        <a class="news-content-p" href="#">
+          附件：IPv6改造相关指标和测试方法说明
+        </a>
+        <br/>
+        <p class="news-content-p">
+          工业和信息化部
+        </p>
+        <p class="news-content-p">
+          2020年3月19日
+        </p>
+      </div>
+      `;
+
+const newsId2 = `
+<div class="file-resource">工信厅信管〔2020〕8号</div>
+      <div>
+        <p class="news-content-p">各省、自治区、直辖市及计划单列市、新疆生产建设兵团工业和信息化主管部门，各省、自治区、直辖市通信管理局，中国电信集团有限公司、中国移动通信集团有限公司、中国联合网络通信集团有限公司、中国广播电视网络有限公司，各有关单位：</p>
+        <p class="news-content-p">&ensp;&ensp;&ensp;&ensp;为深入贯彻习近平总书记在统筹推进新冠肺炎疫情防控和经济社会发展工作部署会议上的重要讲话精神，落实中央关于推动工业互联网加快发展的决策部署，统筹发展与安全，推动工业互联网在更广范围、更深程度、更高水平上融合创新，培植壮大经济发展新动能，支撑实现高质量发展，现就有关事项通知如下：</p>
+        <br/>
+        <p class="news-content-p">一、加快新型基础设施建设</p>
+        <p class="news-content-p">
+          （一）改造升级工业互联网内外网络。推动基础电信企业建设覆盖全国所有地市的高质量外网，打造20个企业工业互联网外网优秀服务案例。鼓励工业企业升级改造工业互联网内网，打造10个标杆网络，推动100个重点行业龙头企业、1000个地方骨干企业开展工业互联网内网改造升级。鼓励各地组织1-3家工业企业与基础电信企业深度对接合作，利用5G改造工业互联网内网。打造高质量园区网络，引领5G技术在垂直行业的融合创新。
+        </p>
+        <p class="news-content-p">
+          （二）增强完善工业互联网标识体系。出台工业互联网标识解析管理办法。增强5大顶级节点功能，启动南京、贵阳两大灾备节点工程建设。面向垂直行业新建20个以上标识解析二级节点，新增标识注册量20亿，拓展网络化标识覆盖范围，进一步增强网络基础资源支撑能力。
+        </p>
+        <p class="news-content-p">
+          （三）提升工业互联网平台核心能力。引导平台增强5G、人工智能、区块链、增强现实/虚拟现实等新技术支撑能力，强化设计、生产、运维、管理等全流程数字化功能集成。遴选10个跨行业跨领域平台，发展50家重点行业/区域平台。推动重点平台平均支持工业协议数量200个、工业设备连接数80万台、工业APP数量达到2500个。
+        </p>
+        <p class="news-content-p">（四）建设工业互联网大数据中心。加快国家工业互联网大数据中心建设，鼓励各地建设工业互联网大数据分中心。建立工业互联网数据资源合作共享机制，初步实现对重点区域、重点行业的数据采集、汇聚和应用，提升工业互联网基础设施和数据资源管理能力。
+        </p>
+        <br/>
+        <p class="news-content-p">二、加快拓展融合创新应用
+        </p>
+        <p class="news-content-p">（五）积极利用工业互联网促进复工复产。充分发挥工业互联网全要素、全产业链、全价值链的连接优势，鼓励各地工业和信息化主管部门、各企业利用工业互联网实现信息、技术、产能、订单共享，实现跨地域、跨行业资源的精准配置与高效对接。鼓励大型企业、大型平台、解决方案提供商为中小企业免费提供工业APP服务。
+        </p>
+        <p class="news-content-p">（六）深化工业互联网行业应用。鼓励各地结合优势产业，加强工业互联网在装备、机械、汽车、能源、电子、冶金、石化、矿业等国民经济重点行业的融合创新，突出差异化发展，形成各有侧重、各具特色的发展模式。引导各地总结实践经验，制定垂直细分领域的行业应用指南。</p>
+        <p class="news-content-p">
+          （七）促进企业上云上平台。推动企业加快工业设备联网上云、业务系统云化迁移。加快各类场景云化软件的开发和应用，加大中小企业数字化工具普及力度，降低企业数字化门槛，加快数字化转型进程。
+        </p>
+        <p class="news-content-p">
+          （八）加快工业互联网试点示范推广普及。遴选100个左右工业互联网试点示范项目。鼓励每个示范项目向2个以上相关企业复制，形成多点辐射、放大倍增的带动效应。建设一批工业互联网体验和推广中心。评估试点示范成效，编制优秀试点示范推广案例集。
+        </p>
+        <br/>
+        <p class="news-content-p">
+          三、加快健全安全保障体系
+        </p>
+        <p class="news-content-p">
+          （九）建立企业分级安全管理制度。出台工业互联网企业网络安全分类分级指南，制定安全防护制度标准，开展工业互联网企业分类分级试点，形成重点企业清单，实施差异化管理。
+        </p>
+        <p class="news-content-p">
+          （十）完善安全技术监测体系。扩大国家平台监测范围，继续建设完善省级安全平台，升级基础电信企业监测系统，汇聚重点平台、重点企业数据，覆盖150个重点平台、10万家以上工业互联网企业，强化综合分析，提高支撑政府决策、保障企业安全的能力。
+        </p>
+        <p class="news-content-p">
+          （十一）健全安全工作机制。完善企业安全信息通报处置和检查检测机制，对20家以上典型平台、工业企业开展现场检查和远程检测，督促指导企业提升安全水平，对100个以上工业APP开展检测分析，增强APP安全性。
+        </p>
+        <p class="news-content-p">
+          （十二）加强安全技术产品创新。鼓励企业创新安全产品和方案设计，遴选10个以上典型产品或最佳实践。加大网络安全产品研发和技术攻关支持力度，加强产业协同创新。指导网络安全公共服务平台为中小企业提供优质高效的安全服务。
+        </p>
+        <br/>
+        <p class="news-content-p">
+          四、加快壮大创新发展动能
+        </p>
+        <p class="news-content-p">
+          （十三）加快工业互联网创新发展工程建设。加快在建项目建设进度，加大新建项目开工力度。推动具备条件的项目提前验收，并在后续试点示范项目遴选中优先考虑。储备一批投资规模大、带动能力强的重点项目。各地工业和信息化主管部门要会同通信管理局加强监督管理，压实承担单位主体责任，确保工程建设高质量完成。
+        </p>
+        <p class="news-content-p">
+          （十四）深入实施“5G+工业互联网”512工程。引导各类主体建设5个公共服务平台，构建创新载体，为企业提供工业互联网内网改造设计、咨询、检测、验证等服务。遴选5个融合发展重点行业，挖掘10个典型应用场景，总结形成可持续、可复制、可推广的创新模式和发展路径。
+        </p>
+        <p class="news-content-p">
+          （十五）增强关键技术产品供给能力。鼓励相关单位在时间敏感网络、边缘计算、工业智能等领域加快技术攻关，打造智能传感、智能网关、协议转换、工业机理模型库、工业软件等关键软硬件产品，加快部署应用。打造一批工业互联网技术公共服务平台，加强关键技术产品孵化和产业化支撑。
+        </p>
+        <br/>
+        <p class="news-content-p">五、加快完善产业生态布局</p>
+        <p class="news-content-p">
+          （十六）促进工业互联网区域协同发展。鼓励各地结合区域特色和产业优势，打造一批产业优势互补、协同效应显著、辐射带动能力强劲的示范区。持续推进长三角工业互联网一体化发展示范区建设。
+        </p>
+        <p class="news-content-p">
+          （十七）增强工业互联网产业集群能力。引导工业互联网产业示范基地进一步聚焦主业，培育引进工业互联网龙头企业，加快提升新型基础设施支撑能力和融合创新引领能力，做大做强主导产业链，完善配套支撑产业链，壮大产业供给能力。鼓励各地整合优势资源，集聚创新要素，培育具有区域优势的工业互联网产业集群。
+        </p>
+        <p class="news-content-p">
+          （十八）高水平组织产业活动。统筹协调各地差异化开展工业互联网相关活动。壮大工业互联网产业联盟，举办产业峰会，发布工业互联网产业经济发展报告。高质量开展工业互联网大数据、工业APP、解决方案、安全等相关赛事活动，组织全国工业互联网线上精品课程培训。
+        </p>
+        <br/>
+        <p class="news-content-p">
+          六、加大政策支持力度
+        </p>
+        <p class="news-content-p">
+          （十九）提升要素保障水平。鼓励各地将工业互联网企业纳入本地出台的战疫情、支持复工复产的政策支持范围，将基于5G、标识解析等新技术的应用纳入企业上云政策支持范围，将5G电价优惠政策拓展至“5G+工业互联网”领域。鼓励各地引导社会资本设立工业互联网产业基金。打造工业互联网人才实训基地。
+        </p>
+        <p class="news-content-p">
+          （二十）开展产业监测评估。建设工业互联网运行监测平台，构建运行监测体系。建立工业互联网评估体系，定期评估发展成效，发布工业互联网发展指数。工业互联网创新发展工程项目承担单位、试点示范项目单位以及工业互联网产业示范基地等要积极参与监测体系、评估体系建设。
+        </p>
+        <br/>
+        <p class="news-content-p">
+          工业和信息化部办公厅
+        </p>
+        <p class="news-content-p">
+          2020年3月6日
+        </p>
+      </div>
+`;
+
+const newsId3 = `
+<p class="news-content-p news-content-p-weight">
+        1.近日工业和信息化部发布了《工业和信息化部办公厅关于推动工业互联网加快发展的通知》（以下简称《通知》），提出加快工业互联网发展“二十条”，请介绍一下《通知》出台的背景。
+      </p>
+
+      <p class="news-content-p">
+        党中央、国务院高度重视工业互联网发展。习近平总书记连续四年对推动工业互联网发展做出重要指示。今年2月21日，中央政治局会议再次强调，要推动工业互联网加快发展。3月4日，中央政治局常委会作出加快新型基础设施建设进度的重要部署。
+      </p>
+      <p class="news-content-p">
+        当前，以数字化、网络化、智能化为本质特征的第四次工业革命正在兴起。工业互联网作为新一代信息技术与制造业深度融合的产物，通过对人、机、物的全面互联，构建起全要素、全产业链、全价值链全面连接的新型生产制造和服务体系，是数字化转型的实现途径，是实现新旧动能转换的关键力量。为抢抓新一轮科技革命和产业变革的重大历史机遇，世界主要国家和地区加强制造业数字化转型和工业互联网战略布局，全球领先企业积极行动，产业发展新格局正孕育形成。
+      </p>
+      <p class="news-content-p">
+        近年来，我国工业互联网发展态势良好，有力提升了产业融合创新水平，有力加快了制造业数字化转型步伐，有力推动了实体经济高质量发展。工业互联网、5G、数据中心等数字基础设施日益成为新型基础设施的重要组成部分。这些高科技领域，既是基础设施，又是新兴产业，既有巨大的投资需求，又能撬动庞大的大消费市场，乘数效应、边际效应显著。推动工业互联网加快发展，统筹疫情防控和经济社会发展，是缓解经济下行压力、兼顾短期刺激有效需求和长期增加有效供给的优先选择。
+      </p>
+      <p class="news-content-p">
+        为深入贯彻落实党中央、国务院决策部署，推动工业互联网加快发展，工业和信息化部在广泛征求地方、产业、专家各方面意见的基础上，制定并印发《关于推动工业互联网加快发展的通知》，明确提出加快新型基础设施建设、加快拓展融合创新应用、加快健全安全保障体系、加快壮大创新发展动能、加快完善产业生态布局、加大政策支持力度等6个方面20项具体举措。
+      </p>
+      <p class="news-content-p">
+        今年是工业互联网创新发展三年行动收官之年，是全面建成小康社会，实现第一个百年奋斗目标的关键之年。《通知》中各项举措的制定实施，既是立足当前巩固扩大工业互联网发展成效，培植壮大经济发展新动能的重要举措；更是面向未来为下一个五年发展奠定坚实基础的任务要求。
+      </p>
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        2、我国工业互联网创新发展取得了哪些主要成效？
+      </p>
+      <p class="news-content-p">
+        自2017年《国务院关于深化“互联网+先进制造业” 发展工业互联网的指导意见》发布以来，工业和信息化部会同相关部门深入实施工业互联网创新发展战略，取得了积极进展。
+      </p>
+      <p class="news-content-p">
+        一是工业互联网新型基础设施建设体系化推进。工业互联网网络覆盖范围规模扩张。基础电信企业积极构建面向工业企业的低时延、高可靠、广覆盖的高质量外网，延伸至全国300多个地市。“5G+工业互联网”探索推进，时间敏感网络、边缘计算、5G工业模组等新产品在内网改造中探索应用。标识解析国家顶级节点功能不断增强，二级节点达47个，覆盖19省20个行业。平台连接能力持续增强。工业互联网平台超过一百个，跨行业、跨领域平台的引领作用显著。启动建设国家工业互联网大数据中心。
+      </p>
+      <p class="news-content-p">
+        二是工业互联网与实体经济的融合持续深化。当前工业互联网已渗透应用到包括工程机械、钢铁、石化、采矿、能源、交通、医疗等在内的30余个国民经济重点行业。智能化生产、网络化协同、个性化定制、服务化延伸、数字化管理等新模式创新活跃，有力推动了转型升级，催生了新增长点。典型大企业通过集成方式，提高数据利用率，形成完整的生产系统和管理流程应用，智能化水平大幅提升。中小企业则通过工业互联网平台，以更低的价格、更灵活的方式补齐数字化能力短板。大中小企业、一二三产业融通发展的良好态势正在加速形成。
+      </p>
+      <p class="news-content-p">
+        三是工业互联网产业新生态快速壮大。在国家政策引导下，27个省（区、市）发布了地方工业互联网发展政策文件。各地加大投入力度，支持企业上云上平台和开展数字化改造，推动建立产业投资基金。北京、长三角、粤港澳大湾区已成为全国工业互联网发展高地，东北老工业基地和中西部地区则注重结合本地优势产业，积极探索各具特色的发展路径。工业互联网产业联盟不断壮大，成员单位接近1500家，推进标准技术、测试验证、知识产权、产融对接等多方面合作。
+      </p>
+      <p class="news-content-p">
+        四是工业互联网安全保障能力显著提升。构建了多部门协同、各负其责、企业主体、政府监管的安全管理体系，通过监督检查和威胁信息通报等举措，企业的安全责任意识进一步增强；建设国家、省、企业三级联动安全监测体系，服务9万多家工业企业、135个工业互联网平台，协同处置多起安全事件，基本形成工业互联网安全监测预警处置能力。通过试点示范等，带动一批企业提升了安全技术攻关创新与应用能力。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight" >
+        3.《通知》将“加快新型基础设施建设”作为首条任务，请问工业互联网新型基础设施的建设内容主要有哪些方面？它的作用是什么？是如何支撑经济社会发展呢？
+      </p>
+      <p class="news-content-p">
+        工业互联网新型基础设施主要包括工业互联网内外网、标识解析体系、工业互联网平台、安全态势感知平台、工业互联网大数据中心等。
+      </p>
+      <p class="news-content-p">
+        工业互联网网络化改造市场潜力巨大。我国工业门类齐全、体量大，通过工业互联网把众多的机床、机器人、加工机械等工业设备集成互联，并有效实施状态监测、故障预测和优化控制，将产生十分可观的经济效益。
+      </p>
+      <p class="news-content-p">
+        工业互联网平台将催生巨大市场。工业互联网平台与传统互联网平台最大的区别在于连接对象不同。工业互联网平台主要连接工业设备，为设备提供服务。基于工业互联网平台，解决方案提供商对工业设备进行状态监测、运行优化和安全防护，使设备能够更好运转，提高生产效率和生产精度，创造服务效益。据了解，国际领先工业互联网平台的连接设备数量已达到1000万台，多为大型设备。我国主要工业互联网平台的平均设备连接数正在迈向百万级，处于快速增长期，假如每台设备的维护费降低一点、使用效率提升一点、加工产品质量提高一点，所产生的效益将非常巨大。很多中小企业将从中受益，进而促进实体经济振兴，推动形成强大国内市场。
+      </p>
+      <br/>
+      <p class="news-content-p news-content-p-weight" >
+        4.《通知》提出，“推动基础电信企业建设覆盖全国所有地市的高质量外网，打造20个企业工业互联网外网优秀服务案例。”高质量外网的特点体现在哪里？怎么推进建设？
+      </p>
+      <p class="news-content-p">
+        工业互联网外网用于连接企业工厂、分支机构、上下游协作单位、工业云平台、智能产品与用户等主体，支撑网络化协同、远程调度控制等新业务、新应用，是推动工业互联网更广范围创新发展的关键网络基础设施。《工业互联网发展行动计划（2018-2020年）》中提出，要升级建设工业互联网企业外网络，打造低时延、高带宽、广覆盖、可定制的高质量外网。
+      </p>
+      <p class="news-content-p">
+        工业互联网外网对面向工业生产的网络时延、可靠性、安全性有非常严格的要求，例如大幅提升操作效率的工业AR/VR要求时延小于20ms，4K/8K高清视觉检测要求百兆级别的大带宽上传，高端大型装备的远程运维要求网络连接高可靠、高安全。
+      </p>
+      <p class="news-content-p">
+        工业和信息化部已推动基础电信企业通过改造升级已有网络、建设新型网络等多种方式构建高质量外网。如中国联通升级改造原有IP承载专网，构建了面向产业企业的工业互联网高质量外网，能够更加灵活地开通网络业务，实现真正的云网协同，网络时延小于50ms，可靠性高于99.99%，已广泛应用于三一重工、徐工、商飞等多家工业企业。
+      </p>
+      <p class="news-content-p">
+        今年，工业和信息化部将进一步推动基础电信企业加快高质量外网建设，力争实现全国所有地市的覆盖。同时，建用并重，推动工业企业上网、用网，发展基于高质量外网的工业互联网特色应用，打造20个企业外网优秀服务案例。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight" >
+        5.今年，在工业互联网内网建设方面是怎么考虑的？
+      </p>
+      <p class="news-content-p">
+        工业互联网内网深入到车间、产线、设备，是实现人机物全面互联的关键基础和必要条件，主要采用工业总线、工业以太网等技术。随着工业企业数字化、网络化、智能化转型步伐的加快，企业内网在传输带宽、兼容能力、部署容易度等方面存在明显不足，需要加快演进升级和更新换代。
+      </p>
+      <p class="news-content-p">
+        当前5G、边缘计算、时间敏感网络、软件定义网络、IPv6等新型网络技术产品不断发展，逐渐具备满足生产控制高要求的能力。例如，时间敏感网络技术支持千兆及以上接口，能够满足工业大带宽需求；5G低时延的应用场景可以提供最低1ms时延的高可靠连接，为实现无线自动控制提供了可能；边缘计算将实时计算能力推广到工业现场，支撑工业智能实现。
+      </p>
+      <p class="news-content-p">
+        工业和信息化部提出“十百千”计划，目的就是进一步加快推动更多企业改造建设工业互联网内网，以网络化带动数字化。“千”指的是鼓励各地结合地方特点和产业布局，推动本地的骨干企业带头进行内网改造，形成1000多个地方企业内网改造案例。“百”指的是鼓励全国各行各业的龙头企业利用5G、边缘计算、时间敏感网络等新技术进行内网改造，形成100多个具备行业复制推广效力的行业领头案例。“十”指的是工业和信息化部将在以上这些内网改造案例中，优中选优，遴选10个标杆网络作为典型，在全国进行示范推广。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight" >
+        6.当前标识解析体系应用情况如何？下一步的发展重点是什么？
+      </p>
+      <p class="news-content-p">
+        标识解析是跨系统、跨企业、跨地域实现数据共享的基础，应用创新日益活跃。一是行业应用初见成效。标识应用逐渐深入船舶、集装箱、石化、食品、医疗器械等领域；二是公共应用取得突破。与支付宝成功对接实现云端互动，与微信、商米等多客户端加紧对接，消费互联网与工业互联网实现互相导流。三是标识产业生态初步形成。基于标识，聚拢了赋码、识读、软硬件研发、系统集成、安全厂商等一批企业及科研机构。
+      </p>
+      <p class="news-content-p">
+        下一步，工业和信息化部将重点推进以下几方面工作：一是推进标识解析二级节点建设。充分激发市场积极性，鼓励更多行业、更多区域发挥地方产业优势和经济优势，新建20个以上二级节点。二是大力推进标识规模化创新应用。围绕供应、生产、流通等环节，加强标识与应用场景的深度融合，新增注册量20亿，形成一批可复制、可快速部署的应用模式，逐步向更多领域拓展。三是加快推动主动标识应用和推广。基于手机卡、芯片、通信模组、物联网终端等主动标识载体的联网通信能力，突破传统打码采集的读写方式，通过主动标识实现标识对象与平台的快速自动连接，推动工业互联网标识产品和应用的规模化、标准化和低成本化。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight" >
+        7.《通知》里提出“提升工业互联网平台核心能力。引导平台增强5G、人工智能、区块链、AR/VR等新技术支撑能力，遴选10个跨行业跨领域平台”，目前平台与新技术融合有哪些典型场景？2019年遴选出的10家跨行业跨领域平台发展情况如何？下一步如何提升平台核心功能？
+      </p>
+      <p class="news-content-p">
+        当前，工业互联网平台与新技术的融合应用日益深入，覆盖场景日趋广泛，涌现出了一批“平台+”创新解决方案，显著提升了平台核心能力，拓展了平台发展空间。“平台+5G”提升设备远程运动控制精度，“平台+人工智能”提升智能产品检测效率，“平台+AR/VR”实现降低设备运维成本，“平台+区块链”实现低成本、高可靠数据共享利用。
+      </p>
+      <p class="news-content-p">
+        跨行业跨领域平台培育加速产业壮大，遴选出海尔、东方国信等2019年十大跨行业跨领域平台，加快标杆示范引领作用。目前全国具有一定影响力的平台超过70个，平均工业设备连接数达到69万台，平均工业模型数突破1100个，平均工业APP达到2120个。
+      </p>
+      <p class="news-content-p">
+        下一步，工业和信息化部将重点推进以下几方面工作。一是继续打造平台标杆，建立动态调整机制，择优重新遴选10家左右跨行业跨领域工业互联网平台，发展一批重点行业/区域平台。二是深挖平台间差异化优势，通过完善标准体系、接口技术、商业模式，促进平台间互补合作，打造多层次系统化平台体系，提升供给能力。三是加速平台在行业与区域落地，挖掘若干平台大规模应用场景，建立平台化服务的商业路径，促进平台应用推广。四是打造平台生态载体，通过建设工业互联网平台应用创新推广中心、解决方案推广平台、人才实训基地，实现创新成果和要素的平台化集聚，构建多方共赢的平台生态。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight" >
+        8.《通知》提出要建设国家工业互联网大数据中心，请问工业互联网大数据中心的建设重点是什么？
+      </p>
+      <p class="news-content-p">
+        大数据资源是工业互联网发展的核心要素，建设工业互联网大数据中心能够为我国加强工业大数据资源共享、技术创新开发、创新应用培育提供有力支撑。建设重点主要包括三个方面。
+      </p>
+      <p class="news-content-p">
+        一是加快体系建设。着力打造“国家中心+分中心”的建设布局，采用分层架构、分布建设的推进思路，推动建立国家工业互联网大数据中心，实现全国工业互联网大数据资源的汇聚、整合、分析和应用，在相关地区建设工业互联网大数据分中心，面向各地区和行业进行工业互联网数据资源
+      </p>
+      <p class="news-content-p">
+        二是促进资源共享。加快推动工业互联网大数据资源合作共享，面向企业内部数据，加快工业互联网大数据分类分级、全生命周期处理、数据管理等标准的研制，并积极开展试验验证。
+      </p>
+      <p class="news-content-p">
+        三是鼓励企业接入。鼓励各地结合本地特色和产业优势，组织骨干企业接入工业互联网大数据中心，共建共用安全可信的工业数据空间。
+      </p>
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        9.《通知》里提出鼓励各地、各企业利用工业互联网实现信息、技术、产能、订单共享，实现跨地域、跨行业资源的精准配置与高效对接。请问如何发挥工业互联网作用，促进企业复工复产？
+      </p>
+      <p class="news-content-p">
+        工业互联网发挥其在万物互联、信息汇聚、优化调度、异地协同、远程服务等方面的优势，有助于抗击疫情，助力企业复产复工。
+      </p>
+      <p class="news-content-p">
+        一是发挥工业互联网供需对接、资源配置支撑作用，降低疫情带来的销售下滑和供应链紧张压力。鼓励制造企业依托工业互联网打通终端市场和产业链上下游。通过市场数据汇聚分析，拓展订单获取渠道，实现原材料快速采购和及时配送，开展精准营销、按需生产。
+      </p>
+      <p class="news-content-p">
+        二是推进基于工业互联网的产融结合创新，缓解企业资金压力。推动金融机构与工业互联网企业对接合作，开展多维度企业信用评估，支撑银行实现快速、精准放贷。同时，开展供应链金融、商业保理、知识产权质押等进一步拓展企业融资渠道。
+      </p>
+      <p class="news-content-p">
+        三是运用工业互联网技术进行产能波动与供应链风险预测，提前采取应对措施。支持企业依托工业互联网平台实时获取生产数据，建立企业的产能分析、风险预测模型，提前进行计划调度，规避问题风险。
+      </p>
+      <p class="news-content-p">
+        四是借助工业互联网手段开展复工复产情况监测，支撑政府精准施策。支持地方政府和产业园区建设工业互联网产业监测平台，连接重点企业关键生产设备与业务系统，通过可视化管理和统计分析，及时研判复工复产企业面临的困难，精准施策。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        10.《通知》里提到“推动企业加快工业设备联网上云、业务系统云化迁移”，请问工业企业上云能够为工业企业带来哪些价值？如何加快中小企业上云上平台？
+      </p>
+      <p class="news-content-p">
+        工业企业上云能够有效帮助企业降本增效。在降本方面，企业上云能够减少IT运维人员数量，减低本地IT运维费用，以业内通用的TCO标准计算，用云可比传统IT节省一半以上的成本。同时，基于云端的功能订阅付费价格也远低于传统方式购买工业软件。在增效方面，企业上云后能够共享云端计算资源，基于强大的云计算提升企业数据处理和分析的能力，最终增加企业信息化全流程运行效率。
+      </p>
+      <p class="news-content-p">
+        为促进中小企业上云上平台，工业和信息化部将重点加强三方面工作。一是加强政策扶持力度，细化“设备上云”“业务系统上云”政策，降低中小企业成本。二是持续宣传推广企业上云，在工业互联网创新体验中心增加中小企业上云展示区，编制“中小企业上云优秀案例集”，增强中小企业上云意识。三是加快培育中小企业工业互联网平台服务商，打造面向不同行业、不同领域、不同区域中小企业工业互联网服务平台，尤其注重发展面向产业园区和中小企业集群的工业互联网平台。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        11.《通知》提出统筹工业互联网发展与安全的考虑是什么？
+      </p>
+      <p class="news-content-p">
+        安全是发展的前提，发展是安全的保障。随着我国工业互联网发展进入实践深耕阶段，企业安全防护水平亟待提升，风险隐患突出，一旦发生安全事件影响严重。因此，在十部门联合印发的《加强工业互联网安全工作的指导意见》中要求，必须统筹发展与安全，企业要落实网络安全“三同步”原则，在建设网络和平台的同时，切实履行网络安全主体责任，同步建立安全管理制度，建设安全防护手段，提升安全防护能力，保障工业互联网健康有序发展。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        12.《通知》提出“建立企业分级安全管理制度”，这是出于什么考虑，后续如何推进？
+      </p>
+      <p class="news-content-p">
+        工业互联网应用于石油石化、钢铁冶金、家电服装等多个行业，涉及工业企业、平台企业、基础设施建设运营企业等多种类型企业，工业互联网应用程度参差不齐，企业安全防护需求差异较大，需建立高效实用的分类分级安全管理机制，对工业互联网企业实施精准化、常态化管理。前期，工业和信息化部组织编制了《工业互联网企业网络安全分类分级指南（试行）》，并向社会广泛征求了意见。文件规定了工业互联网企业所属行业分类指导目录和分级评定参考规则。下一步，工业和信息化部将尽快推动文件出台，选取信息化程度较高、工业互联网应用广泛的行业企业进行试点，形成首批重点企业清单，指导行业主管部门加强对重点行业、企业的网络安全监管，督促企业落实网络安全主体责任，切实提高自身安全防护能力，保障工业经济平稳健康运行，促进我国经济高质量发展。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        13.《通知》中提到的“安全技术监测体系”指什么，目前建设情况如何，后续如何推进？
+      </p>
+      <p class="news-content-p">
+        安全技术监测体系指为应对工业互联网安全面临的系统性、复杂性和交互性等问题，统筹布局建设的体系化技术手段，具备工业互联网安全整体态势感知、信息共享和应急协同的一体化能力。目前，国家、省、企业三级协同的安全技术监测体系基本建成，全国21个省已建设了省级安全监测平台。下一步，工业和信息化部将在“扩面、提质、赋能”三个方面持续完善监测能力。一是不断扩大覆盖范围，由重点地区到基本覆盖全国，实现对不少于150个重点平台、10万家工业互联网企业的安全风险监测。二是督促基础电信企业升级相关网络安全监测系统，提升大数据综合分析能力。鼓励工业企业自主建设安全监测平台，提升自身安全防护能力。三是充分发挥各级监测平台作用，支撑政府决策、赋能企业，提高整体安全防护水平。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        14.《通知》提出的安全工作机制都包含哪些具体内容？
+      </p>
+      <p class="news-content-p">
+        《通知》中的安全工作机制重点指安全通报处置、事件报告和检查检测等工作机制。具体工作包括：一是完善威胁通报处置工作机制，依托工业和信息化部网络安全威胁信息共享平台，及时向行业主管部门、重点工业企业、平台企业通报威胁信息，督促指导企业处置安全威胁，定期发布安全态势报告。二是建立重大网络安全事件报告机制，企业出现重大网络安全事件后，第一时间报告主管部门。三是健全安全检查检测机制，定期对重点平台、工业企业、工业APP开展检查检测，指导和服务企业排查安全隐患，及时做好安全整改，提高企业安全防护水平。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        15.《通知》提出“加强安全技术产品创新”，有哪些具体举措？
+      </p>
+      <p class="news-content-p">
+        近年来，国家持续推动工业互联网安全技术和产品创新，通过试点示范项目带动、安全产业培育等多种方式，促进网络安全技术、产品和解决方案的创新突破。一是加大工业互联网创新发展工程项目推进力度，鼓励更多企业创新安全服务模式，建设网络安全公共服务平台，提升网络安全服务供给能力。二是开展网络安全试点示范，鼓励重点行业和关键领域先行示范，强化优秀网络安全技术和案例应用推广。三是加快出台《关于促进网络安全产业发展的指导意见》，加强资源整合，加速推进北京、湖南国家网络安全产业园区建设，发挥网络安全产业园区的聚集作用，加快安全企业和解决方案供应商培育。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        16.试点示范已经开展两年，如何扩大成效，带动更多企业开展工业互联网融合应用？
+      </p>
+      <p class="news-content-p">
+        过去两年，工业和信息化部在全国范围内遴选出153个优秀典型示范项目，形成地区、行业、企业协同推进，服务商、研究机构、用户联合实施的良好氛围。前期工业和信息化部对包括试点示范企业在内的170家工业互联网企业进行了调查摸底，有100家企业主营业务收入连续三年实现增长，平均主营业务收入2016年至2018年年均增长率达18.4%。
+      </p>
+      <p class="news-content-p">
+        今年，工业和信息化部将提前开展试点示范遴选工作，在支持数量、覆盖范围、推广力度等方面都会有一些新的变化，同时也将对已有的示范项目，加大宣传推广力度，扩大示范项目的带动效应。一是推动2020年试点示范项目向多个行业复制，同时也鼓励前期的试点示范企业向更多行业、更多企业推广经验和方案；二是要强化推广示范宣贯效应，通过发布应用成果、举办现场活动等手段，强化线上线下综合宣贯能力；三是建立评估跟踪机制，综合评估试点示范项目部署进展和实施成效，定期发布相关成果，激励产业界应用探索和持续完善。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        17.《通知》提出，“深入实施‘5G+工业互联网’512工程”，为何要推进5G与工业互联网融合发展？
+      </p>
+      <p class="news-content-p">
+        当前，我国工业互联网创新发展战略深入实施，5G正式进入商用阶段，加快推动5G与工业互联网融合发展具有重要意义。
+      </p>
+      <p class="news-content-p">
+        从工业互联网发展看，5G是工业互联网的关键使能技术。5G具有高速率大带宽、低时延高可靠、大连接广覆盖的技术特性，可有效满足工业业务苛刻的安全性、传输时延及可靠性要求，支撑工业互联网快速落地。特别是工厂内网改造方面，加快利用5G技术开展工业互联网内网改造，将有效促进工业互联网内网无线化、扁平化、IP化发展，显著提升我国工业互联网产业发展水平。
+      </p>
+      <p class="news-content-p">
+        从5G发展看，工业领域是5G的主要应用场景。5G商用发展的重点是促进实体经济数字化、网络化、智能化转型升级，为各垂直行业和领域赋能赋智。当前，我国新型工业化发展步伐加快，工业领域已成为实体经济转型升级的关键领域。5G在工业领域的成功应用将为5G发展开辟更为广阔的市场空间，有力拉动5G技术和产业进一步发展成熟，促进我国5G商用发展向更高水平迈进。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        18.推进5G与工业互联网融合发展，已经具备哪些基础？
+      </p>
+      <p class="news-content-p">
+        总体看，我国5G与工业互联网融合发展仍处于起步阶段，但产业界探索步伐加快，积极性不断提升，已经具备良好的发展基础。
+      </p>
+      <p class="news-content-p">
+        一是产业生态逐步完善。面向工业场景的关键技术研发加快推进。截至目前，华为、长虹等企业已发布多款5G工业模组。基础电信企业与工业企业合作持续深入，商业模式和发展路径逐步清晰，已形成近百个在建或意向合作项目。
+      </p>
+      <p class="news-content-p">
+        二是发展格局初步形成。长三角地区、粤港澳大湾区的产业实践集中、应用案例丰富，鲁豫一带、川渝一带、湘鄂一带涌现了一批典型案例，其他地区有一些企业开展了积极探索，我国“5G+工业互联网”初步形成了“两区三带多点”的发展格局。
+      </p>
+      <p class="news-content-p">
+        三是应用范围加快拓展。除汽车、通信与电子制造、机械、电力、轨道交通、航空、化工、家电、钢铁、船舶等制造业行业外，港口、能源等领域也成为“5G+工业互联网”的应用重点。在视频监控、物流配送等场景应用基础上，部分企业推动5G应用持续走深向实，已开始介入到装配、检测等生产内部关键环节。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        19.推进“5G+工业互联网”融合发展，实施512工程，有哪些具体考虑和举措？
+      </p>
+      <p class="news-content-p">
+        2019年11月，工业和信息化部印发了《“5G+工业互联网”512工程推进方案》，提出将重点提升“5G+工业互联网”融合发展的三个核心能力。
+      </p>
+      <p class="news-content-p">
+        一是提升“5G+工业互联网”技术产业能力。加强“5G+工业互联网”关键技术攻关，研究制定“5G+工业互联网”融合标准体系，完善融合技术、应用标准。加快融合产品研发和产业化，推动网络技术和产品部署实施，引导基础电信企业结合5G独立组网和应用，为具备条件的工业企业进行工业互联网内网设计、建设和管理运维，探索可持续发展的商业模式。
+      </p>
+      <p class="news-content-p">
+        二是提升“5G+工业互联网”创新应用能力。打造5个内网建设改造公共服务平台，构建创新载体和公共服务能力。选择10个重点行业，鼓励各地建设“5G+工业互联网”融合应用先导区。打造一批内网建设改造标杆、样板工程，提炼至少20个典型工业应用场景。鼓励建设技术测试床，提升垂直领域的5G应用创新能力。
+      </p>
+      <p class="news-content-p">
+        三是提升“5G+工业互联网”资源供给能力。打造项目库，畅通项目上报渠道。培育解决方案供应商，遴选各类型优质服务提供商，构建供给资源池，依托相关产业组织，促进“5G+工业互联网”内网建设改造供需双方开展务实合作。
+      </p>
+      <p class="news-content-p">
+        通过上述具体举措，加快推进512工程落地实施，夯实发展基础，提升产业能力，形成5G与工业互联网融合叠加、互促共进、倍增发展的创新态势。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        20.《通知》提出，“鼓励各地组织1-3家工业企业与基础电信企业深度对接合作，利用5G技术改造工业互联网内网，打造高质量园区网络”，如何推进实施？
+      </p>
+      <p class="news-content-p">
+        在地方层面，工业和信息化部鼓励各地因地制宜，结合地区特点和产业优势，发展“5G+工业互联网”。地方工业和信息化主管部门根据本地区优势产业和特色产业，推荐1-3家有基础、有能力、有积极性的工业企业；通信管理局组织好基础电信企业，促进双方基于市场化原则开展对接合作，加快工业企业利用5G技术改造内网的步伐，挖掘更多应用场景，打造具有地方特色的应用范式。
+      </p>
+      <p class="news-content-p">
+        在国家层面，工业和信息化部将做好统筹规划，加快在全国范围形成特色鲜明、布局合理、协同有利的发展格局。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        21.《通知》提出“打造一批产业优势互补、协同效应显著、辐射带动能力强劲的示范区”。工业互联网示范区工作有什么考虑？
+      </p>
+      <p class="news-content-p">
+        建设工业互联网示范区是发挥先发优势、鼓励先行先试的重要抓手，也是深化部地协同、发挥两个积极性的重要载体。2019年10月，上海、江苏、浙江、安徽工业和信息化主管部门获批共同建设长三角工业互联网一体化发展示范区，正式开启了工业互联网示范区建设的探索与实践。近期，部分地区也结合发展实际提出了创建工业互联网示范区的思路和方案。下一步，工业和信息化部将按照“质量为先、总量控制、宁缺毋滥”的原则，坚持高水平定位、高质量建设，坚持先行先试、系统推进，坚持区域协同、错位发展，鼓励有条件的地区打造一批高水平工业互联网示范区，形成一批可复制可推广的发展经验，提升工业互联网创新发展能力。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        22.《通知》提出“增强工业互联网产业集群能力”。目前我国工业互联网产业集群发展情况如何？
+      </p>
+      <p class="news-content-p">
+        自2017年以来，工业和信息化部已遴选公布两批共4个工业互联网产业示范基地，北京、上海、武汉、深圳等地区成为我国工业互联网区域建设的示范标杆。工业互联网产业示范基地在汇聚龙头企业、推动融合创新、加快数字化转型等方面已经具备了较强的示范引领作用，产业集聚效应已初步显现。
+      </p>
+      <p class="news-content-p">
+        下一步，为增强产业集聚能力，一方面要强化整体产业统筹布局，结合我国产业区位分布和各地发展实际，加强全国分梯次、分阶段的工业互联网产业生态规划与引导，形成东、中、西不同地区的特色布局集聚；另一方面要调动和发挥地方的积极性和主动性，集中优势资源和要素，培育壮大本地优秀工业互联网企业，强化龙头企业带动作用，推进产业链上下游融通集聚。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        23.《通知》在最后一部分提出了“加大要素投入”的若干项政策措施，请具体说明相关考虑？
+      </p>
+      <p class="news-content-p">
+        工业互联网在支撑企业优化资源配置、开展柔性制造、压缩生产成本、提升运营效率等方面有着不可替代的作用。当前，亟需利用工业互联网助力疫情防控和复工复产，鼓励各地进一步放大政策的支持范围和支持力度，将工业互联网、5G等纳入相关支持政策适用范围，快速提升工业互联网供给能力，推动工业互联网在更大范围应用。
+      </p>
+      <p class="news-content-p">
+        《通知》重点提出三项支持政策。一是鼓励各地将工业互联网纳入国家和各地战疫情、支持复工复产的政策支持范围，加大对应用工业互联网服务的企业的支持力度。二是在企业上云上平台的基础上，进一步将企业利用5G、标识解析等技术改造工业互联网内网等工作纳入支持范围，实现企业上云、上平台、上5G。三是鼓励各地将基础电信企业的5G电价优惠政策进一步延伸到工业企业，也可考虑推出“5G+工业互联网”专享优惠政策，支持工业企业利用5G技术改造升级工业互联网内网。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        24、《通知》提出，“鼓励各地引导社会资本设立工业互联网产业基金”。目前我国工业互联网产业基金方面有没有案例？发挥了怎样的作用？
+      </p>
+      <p class="news-content-p">
+        工业互联网涉及基础设施建设、融合创新应用、技术产品创新等众多方面，需要大量、稳定、持续的资金投入，特别是在建设初期，企业在数字化、网络化改造方面需要大量投入，亟需加大金融政策支持力度，吸引社会资本投入。同时，工业互联网发展空间巨大，有望催生出新的龙头企业，是投资的新蓝海。成立产业基金支持工业互联网发展，吸引社会资本积极投入，是促进产融结合、实现双赢的重要途径。
+      </p>
+      <p class="news-content-p">
+        目前，一些先行地区已经开展了积极的探索。比如上海在2019年，由经济和信息化委员会、松江区、临港松江科技城联合发起成立了“上海临松工业互联网创投基金”，面向上海市及长三角优秀的工业互联网企业开展股权投资，该基金支持的企业正加快科创板上市步伐。北京市积极推进设立“北京5G工业互联网产业投资基金”，聚焦“5G+工业互联网”方向，打造5G与工业互联网融合发展的创新应用模式。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        25、《通知》提出“打造工业互联网人才实训基地”。工业互联网需要哪些人才？实训基地在人才培养中的作用什么？
+      </p>
+      <p class="news-content-p">
+        工业互联网需要多层次复合型人才，既要有高端人才，引领产业技术创新，也要有高技能型人才，推进工业互联网落地实施。加快工业互联网人才培养，一是要依托工业互联网创新发展工程，支持打造工业互联网人才实训基地，推进多层次复合型人才培养；二是加大产教融合，打造“新工科”，鼓励开展专业课程培训；三是要围绕工业互联网工程师新职业发展机遇，大力推荐职业技术鉴定，引导人才投入工业互联网建设。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        26、《通知》提出，“建设工业互联网运行监测平台，构建运行监测体系。”工业互联网产业监测的目的是什么？主要监测内容有哪些？
+      </p>
+      <p class="news-content-p">
+        工业互联网高质量建设事关经济发展、社会稳定和国家安全。推动工业互联网加快发展，需要统筹谋划、系统布局，加快构建工业互联网监测分析体系，全面了解我国工业互联网基础供给能力、应用成效价值、生态服务能力、经济社会运行等方面总体发展状况。通过建立并完善工业互联网监测分析体系，一是能够摸清底数，实现对工业互联网重要基础设施、重点平台、重大项目等有效监测、分析和评价，为决策提供有效数据支撑；二是能够把握态势，掌握工业互联网的新进展和新变化，实现关键数据和信息的长期积累，为研判工业互联网发展方位和总体态势提供有效支撑；三是能够找准问题，实现在总体和全局层面上对工业互联网制约条件的科学分析和准确把握，为明晰我国工业互联网发展路径、突破工业互联网发展瓶颈提供有效支撑。
+      </p>
+      
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        27、《通知》提出，“建立工业互联网评估体系，定期评估发展成效，发布工业互联网发展指数。”工业互联网发展指数是针对什么范围？作用是什么？如何进行发展成效评估？
+      </p>
+      <p class="news-content-p">
+        为及时、准确地了解地方产业发展现状、存在的问题，推动形成“以成效考察促执行、以评估反馈助改进”的闭环工作机制，拟建立工业互联网发展成效评估体系，支撑主管部门科学、精准施策，推动我国工业互联网高质量发展。
+      </p>
+      <p class="news-content-p">
+        工业互联网发展成效评估工作的覆盖范围和对象分为国家、地方、企业三级，形成分级分类的体系化评估判断。2019年，工业和信息化部已组织相关研究机构面向国内部分省市开展了先行评估试点工作，成效良好。下一步，工业和信息化部将深入总结前期试点工作经验，继续组织专家、学者、企业代表等对综合评价模型进行修订完善，在更大范围内开展试点工作。待相关方法和工作机制成熟后，工业和信息化部将组织开展全国、区域及行业发展成效评估，开展发展指数编制与发布工作。
+      </p>
+`;
+
+const newsId4 = `
+<div style="display: flex;justify-content: center">
+        <img src="/images/news_content_4.jpg"/>
+      </div>
+`;
+
+const newsId5 = `
+<p class="news-content-p">
+        近日，工业互联网专项工作组印发《工业互联网创新发展行动计划（2021-2023年）》（工信部信管〔2020〕197号，以下简称《三年行动计划》）。现就《三年行动计划》有关内容解读如下：
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        1、《三年行动计划》的出台背景是什么？?
+      </p>
+      <p class="news-content-p">
+        工业互联网是新一代信息通信技术与工业经济深度融合的全新工业生态、关键基础设施和新型应用模式。它以网络为基础、平台为中枢、数据为要素、安全为保障，通过对人、机、物全面连接，变革传统制造模式、生产组织方式和产业形态，构建起全要素、全产业链、全价值链全面连接的新型工业生产制造和服务体系，对支撑制造强国和网络强国建设，提升产业链现代化水平，推动经济高质量发展和构建新发展格局，都具有十分重要的意义。
+      </p>
+      <p class="news-content-p">
+        过去三年是工业互联网起步发展期，工业和信息化部会同工业互联网专项工作组各单位，实施《工业互联网发展行动计划（2018-2020年）》，发布实施十余项落地性文件，不断完善政策体系，实施工业互联网创新发展工程，带动总投资近700亿元，遴选4个国家级工业互联网产业示范基地和258个试点示范项目，打造了一批高水平的公共服务平台，培育了一批龙头企业和解决方案供应商。网络基础、平台中枢、数据要素、安全保障作用进一步显现，工业互联网新型基础设施不断夯实，新模式新业态创新活跃，产业生态不断壮大，各地方、产业各界共识不断凝聚，积极性不断提升，为下一步发展打下坚实基础。
+      </p>
+      <p class="news-content-p">
+        未来三年是工业互联网的快速成长期。为深入贯彻习近平总书记对工业互联网的一系列重要指示精神，落实党中央、国务院决策部署，进一步巩固提升发展成效，更好地谋划推进未来一个阶段发展工作，工业互联网专项工作组制定出台了《工业互联网创新发展行动计划（2021-2023年）》。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        2、《三年行动计划》的主要内容是什么？
+      </p>
+
+      <p class="news-content-p">
+        《三年行动计划》结合当前产业发展实际和技术产业演进趋势，确立了未来三年我国工业互联网发展目标。到2023年，新型基础设施进一步完善，融合应用成效进一步彰显，技术创新能力进一步提升，产业发展生态进一步健全，安全保障能力进一步增强。工业互联网新型基础设施建设量质并进，新模式、新业态大范围推广，产业综合实力显著提升。
+      </p>
+      <p class="news-content-p">
+        《三年行动计划》提出了五方面、11项重点行动和10大重点工程，着力解决工业互联网发展中的深层次难点、痛点问题，推动产业数字化，带动数字产业化。
+      </p>
+      <p class="news-content-p">
+        在基础设施建设方面，一是实施网络体系强基行动，推进工业互联网网络互联互通工程，推动IT与OT网络深度融合，在10个重点行业打造30个5G全连接工厂。二是实施标识解析增强行动，推进工业互联网标识解析体系增强工程，完善标识体系构建，引导企业建设二级节点不少于120个、递归节点不少于20个。三是实施平台体系壮大行动，推进工业互联网平台体系化升级工程，推动工业设备和业务系统上云上平台数量比2020年翻一番。
+      </p>
+      <p class="news-content-p">
+        在持续深化融合应用方面，一是实施数据汇聚赋能行动，制定工业大数据标准，促进数据互联互通。二是实施新型模式培育行动，推进工业互联网新模式推广工程，培育推广智能化制造、网络化协同、个性化定制、服务化延伸、数字化管理等新模式。三是实施融通应用深化行动，推进工业互联网融通应用工程，持续深化“5G+工业互联网”融合应用。
+      </p>
+      <p class="news-content-p">
+        在强化技术创新能力方面，一是实施关键标准建设行动，推进工业互联网标准化工程，实施标准引领和标准推广计划，完成60项以上关键标准研制。二是实施技术能力提升行动，推进工业互联网技术产品创新工程，加强工业互联网基础支撑技术攻关，加快新型关键技术与产品研发。
+      </p>
+      <p class="news-content-p">
+        在培育壮大产业生态方面，一是实施产业协同发展行动，推进工业互联网产业生态培育工程，培育技术创新企业和运营服务商，再建设5个国家级工业互联网产业示范基地，打造10个“5G+工业互联网”融合应用先导区。二是实施开放合作深化行动，营造开放、多元、包容的发展环境，推动多边、区域层面政策和规则协调，支持在自贸区等开展新模式新业态先行先试。
+      </p>
+      <p class="news-content-p">
+        在提升安全保障水平方面，实施安全保障强化行动，推进工业互联网安全综合保障能力提升工程，完善网络安全分类分级管理制度。加强技术创新突破，实施保障能力提升计划，推动中小企业“安全上云”，强化公共服务供给，培育网络安全产业生态。
+      </p>
+      <p class="news-content-p">
+        此外，结合重点任务和突出问题，从组织实施、数据管理、资金保障、人才保障四方面明确了支撑要素和政策措施。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        3、未来三年，如何进一步夯实工业互联网网络基础？
+      </p>
+      <p class="news-content-p">
+        未来三年，网络领域继续着眼构筑支撑工业全要素、全产业链、全价值链互联互通的网络基础设施，加快企业外网和企业内网建设与改造，提升基础支撑能力。一是推动企业内网由“单环节改造”向“体系化互联”转变。推动工业生产装备和仪器仪表的数字化、网络化改造，让哑设备“活起来”；运用先进适用的网络技术建设IT-OT融合网络，把工业全流程的都“连起来”；建立标准化的网络信息模型，让以前难交互、难集成的异构数据都“动起来”。二是推动企业外网由“建网”向“用网”转变。在继续强调提升高质量外网承载能力和互通水平的同时，进一步引导工业企业、工业互联网平台、标识解析节点等接入高质量外网，让企业外网真正“用起来”，提升企业外网应用效能。三是拓展“5G+工业互联网”发展新空间。持续实施“5G+工业互联网”512工程，深化核心应用，推动应用领域从工业外围环节向生产制造核心环节拓展；优化应用模式，推动应用重心从单点孵化向5G全连接工厂拓展；强化产业支撑，加强5G工业模组研发、5G工业互联网专用频率研究、5G专网建设方案落地。四是探索央地协同发展新模式。充分调动地方积极性，支持各地建设具有地方特色、产业特点的工业互联网园区网络；依托工业互联网产业示范基地遴选和建设工作，引导产业聚集好、带动作用强的地区积极创建“5G+工业互联网”先导区。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        4、工业互联网标识解析体系下一步发展重点是什么？
+      </p>
+      <p class="news-content-p">
+        未来三年，我们将通过实施“标识解析增强行动”，从做大规模、做深应用、规范管理三方面进一步提升我国标识解析体系的发展水平。
+      </p>
+      <p class="news-content-p">
+        第一，做大规模。我国标识解析体系建设虽然取得了一定成绩，但与我国制造业门类、体量相比，覆盖范围还不足，因此标识解析体系各级节点的建设还要拓展覆盖范围、完善节点布局。我们将进一步完善国家顶级节点与国际根节点的对接，增强国家顶级节点的服务能力，面向更多行业、更多区域推动建设不少于120个二级节点、不少于20个递归节点。同时，我们还将探索利用区块链技术构建基于标识的融合型基础设施，支持各地部署不少于20个融合节点。
+      </p>
+      <p class="news-content-p">
+        第二，做深应用。建设目的还是应用，不然就成了“烂尾楼”“断头路”，同时与建设相比应用的难度更大，我们将进一步调动各方面积极性，加强标识解析体系的深层次应用。一是深化标识在各行业的推广应用。通过组织开展全国工业互联网标识创新大赛遴选典型案例加强示范推广，特别是应对疫情，我们将拓展标识在冷链物流、应急物资等领域规模化应用。我们还将增强标识资源对接、测试认证等公共服务能力，建立产业链供应链标识数据资源共享机制，促进标识的行业应用推广。二是深化标识在各环节的应用。加强标识解析系统与工业企业信息系统适配，推动标识解析系统与工业互联网平台、工业APP等融合发展，深化标识在设计、生产、服务等环节应用，发挥出标识在促进跨企业数据交换、提升产品全生命周期追溯和质量管理水平中的作用。三是大力拓展主动标识。按照标识载体类型，标识应用分为静态标识应用和主动标识应用。静态标识应用以二维码、射频识别码（RFID）、近场通信标识（NFC）等作为载体，借助扫码枪或支付宝“扫一扫”功能等识读软硬件获取信息。主动标识应用通过在芯片、通信模组、终端中嵌入标识，由网络主动向解析节点发送解析请求，无需借助外部设备。这是我们下一步推动的工作重点，未来三年将部署不少于3000万枚主动标识载体。
+      </p>
+      <p class="news-content-p">
+        第三，规范管理。去年12月，我部为贯彻落实中央经济工作会议关于加强规制、提升监管能力的相关要求，印发了《工业互联网标识管理办法》，目的就是更好的促进工业互联网标识解析体系建设，更好的规范标识市场主体行为、激发创新发展活力，从制度方面规范各方行为、维护市场秩序。办法将于今年6月1日实施，我们将组织开展相关宣贯活动，推动各地抓好许可审批，加强监督检查。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        5、下一步工业互联网平台工作有哪些具体考虑？?
+      </p>
+      <p class="news-content-p">
+        未来，我们将从“建平台、用平台、筑生态”三方面共同推进，加快工业互联网平台体系化升级。
+      </p>
+      <p class="news-content-p">
+        一是“建平台”，构建“综合型+特色型+专业型”工业互联网平台体系。滚动遴选跨行业跨领域综合型工业互联网平台，建立动态评价机制，打造3-5个具有国际影响力的工业互联网平台，深化工业资源要素集聚，加速生产方式和产业形态创新变革。建设面向重点行业和区域的特色型工业互联网平台，推动行业知识经验在平台沉淀集聚，推动平台在“块状经济”产业集聚区落地。发展面向特定技术领域的专业型工业互联网平台。推动前沿技术与工业机理模型融合创新，支撑构建新型制造体系。
+      </p>
+      <p class="news-content-p">
+        二是“用平台”，加快工业设备和业务系统上云上平台。制定工业设备上云实施指南、工业设备数据字典，推动行业龙头企业核心业务系统云化改造，带动产业链上下游企业业务系统云端迁移。鼓励地方政府通过创新券、服务券等形式降低上云门槛和成本、扩大上云范围，创新 “挖掘机指数”“空压机指数”等新型经济运行指标。
+      </p>
+      <p class="news-content-p">
+        三是“筑生态”，持续提升平台应用服务水平。围绕“平台+产品”“平台+模式”“平台+行业/区域”等领域打造一批创新解决方案，加快系统解决方案供应商培育。编制完善工业互联网平台监测评价指标体系，支持建设平台数据监测与运行分析系统，开展平台基础能力、运营服务、产业支撑等运行数据的自动化采集。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        6、如何进一步发挥数据在工业互联网创新发展中的重要作用？
+      </p>
+      <p class="news-content-p">
+        数据是平台应用的关键资源，为推动数据汇聚、流转、分析、应用，我们将开展“数据汇聚赋能行动”，主要围绕四方面开展有关工作，综合构建数据驱动新生态。
+      </p>
+      <p class="news-content-p">
+        一是打造数据汇聚的载体，推动工业互联网大数据中心建设。提升数据统筹汇聚能力的同时推动数据高效分级分类，完善国家级中心建设，围绕重点行业建设分中心，针对中小微企业需求搭建个性化公共服务平台，聚焦核心区域建设大数据区域分中心，大幅提升数据汇聚能力、丰富数据资源池，建设数据灾备中心，保障国家网络信息安全。通过研究数据权属确定、价值评估、资源交换、效益共享等机制与接口标准规范，打通国家中心、分中心之间数据链条，健全工业互联网大数据中心数据流通机制。
+      </p>
+      <p class="news-content-p">
+        二是提升数据价值挖掘能力，打造大数据中心综合服务体系。一方面，针对政府监管施政需求，重点打造工业经济和产业运行监测指挥、应急事件预警协调等服务能力，支撑政府提升管理水平。另一方面，针对行业发展需求，打造数据管理能力提升、工业资源共享、解决方案推广、设备与业务系统上云、产融合作、供需对接等服务能力。
+      </p>
+      <p class="news-content-p">
+        三是促进数据流动，推动平台间数据互联互通。建立标准机制，推动平台间数据字典互认，建设统一的工业数据、算法模型、微服务等调用接口。加强平台间合作，联合开展重点问题攻关，实现优势互补，通过统一接口规范，推动机理模型和工业APP的跨平台调用与订阅。
+      </p>
+      <p class="news-content-p">
+        四是推动数据知识共享，培育和推广高质量工业APP。对于共性工业经验知识，打造基础共性工业APP和可适性工业APP；对于行业工业知识，打造高价值、易推广的行业通用工业APP；对于特定领域、特定场景的独特工业经验知识，培育企业专用工业APP。通过构建工业智能解决方案、开源社区、开发者社区、工业APP商店等举措，促进工业APP交易流转。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        7、未来将采取哪些措施推动工业互联网应用创新？
+      </p>
+      <p class="news-content-p">
+        工业互联网融合应用不同于互联网创新应用，工业互联网的主战场在实体经济，特别是工业领域，面向工业、立足工业、服务工业。这要求工业互联网必须与各行业各领域技术、知识、经验、痛点紧密结合，多元性、专业性、复杂性高，这决定了推动工业互联网融合应用需要持续发力，久久为功，重点加强三个方面的工作。
+      </p>
+      <p class="news-content-p">
+        第一，推动形成各方积极参与的团体赛模式。工业互联网是涉及设施建设、融合应用、技术创新、产业生态和安全保障的融合性、系统性工程，企业不能单打独斗。要充分调动工业企业、基础电信企业、工业软件企业、工业控制企业、设备制造企业、解决方案提供商等各方积极性，推动形成主体多元、协同创新的产业生态和“团体赛”模式。进一步发挥工业互联网专项工作组协调机制作用，形成跨部门、跨领域、跨行业合力，完善政策体系和推进措施。鼓励各地工业和信息化主管部门、通信管理局加强协同，形成推动合力。
+      </p>
+      <p class="news-content-p">
+        第二，突出工业细分场景特点。工业互联网面向千行百业，可以说是一米的宽度、五十到一百米的深度，需要与各行业的生产实践、行业特性、知识经验紧密结合，不断突破行业技术壁垒和数据共享障碍。我们将进一步深化工业互联网在各细分领域的应用创新，探索符合行业发展实际需求的智能化制造、网络化协同、规模化定制、服务化延伸、数字化管理等新模式，加强5G和工业互联网的融合应用。我们鼓励“跨行业、跨领域”平台的发展，更强调培育聚焦行业特点的专业型、特色型平台，实现精耕细作，产生实效。
+      </p>
+      <p class="news-content-p">
+        第三，推动产业数字化，带动数字产业化。通过发展工业互联网，促进数字经济进一步壮大，不断形成先进生产力，推动工业化与信息化在更广范围、更深程度、更高水平上实现融合发展。一方面，发挥新一代信息技术优势，打造工业全要素、全产业链、全价值链互联互通的新型基础设施、新型应用模式和全新产业生态，激发数据要素作用，促进制造业数字化、网络化、智能化升级。另一方面，为5G、云计算、边缘计算、人工智能等新一代信息通信技术落地开辟更广阔空间，并带动自动化、软件、网络等产业实现高端化突破，不断培育壮大新技术新产业。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        8、开展工业互联网安全工作的总体思路和主要内容是什么？
+      </p>
+      <p class="news-content-p">
+        安全是工业互联网高质量发展的重要前提和保障。近年来，我部会同相关部门大力推进工业互联网安全保障体系建设，政府指导、企业主责的安全管理制度初步形成，可感可知的安全技术监测服务体系初步构建，安全产品和服务供给不断增强、监测预警、信息共享、通报处置闭环工作机制初步建立，工业互联网安全相关工作取得阶段性进展。
+      </p>
+      <p class="news-content-p">
+        随着我国工业互联网发展进入新阶段，设备联网、企业上云等情况日益增多，安全风险随之加剧，对网络安全工作提出更高要求。与此同时，工业互联网安全仍面临着工业企业网络安全意识不高、技术防护能力不足、安全监测能力不强、网络安全产业支撑不够等问题。
+      </p>
+      <p class="news-content-p">
+        行动计划坚持问题导向和目标导向，强化前瞻性、创新性、落地性，明确了以落实企业主体责任为导向、以加强安全供给为重点、以培育安全产业为支撑、以强化技术监测服务能力为抓手的工作思路，力争切实建立起制度更加健全、技术更加先进、政企更加协同的安全保障体系。
+      </p>
+      <p class="news-content-p">
+        行动计划安全部分主要包括以下四方面工作。一是落实企业主体责任，实施分类分级管理。针对重要行业的重点企业，实施网络安全分类分级管理制度，明确不同类型企业安全基线要求，进一步推动企业主体责任落实。二是强化产业协同，推进供给侧加快创新。围绕工业互联网产品内嵌安全、企业上云安全等迫切需求，从网络安全技术、安全产品、安全服务等方面引导创新加速，加大安全公共服务能力建设，丰富安全解决方案有效供给。三是加强示范引领，促进安全产业发展壮大。着眼构建网络安全产业良性发展生态体系，优化国家网络安全产业园区布局，培育安全龙头企业和特色企业，开展试点示范，进一步促进安全产业发展壮大。四是坚持专项带动，提升安全技术监测服务能力。进一步提升企业自身防护、区域监测保障、国家协调服务三方面能力，打造多方联动、运行高效的安全技术监测服务体系。
+      </p>
+
+      <br/>
+      <p class="news-content-p news-content-p-weight">
+        9、《三年行动计划》中提出实施工业互联网企业网络安全分类分级管理制度，具体内容和下一步安排分别是什么？
+      </p>
+      <p class="news-content-p">
+        目前我国联网工业企业数量众多，涉及行业众多，存在信息化发展程度不一、承载业务类型相异、所属行业安全保护规律差异化明显等特点，难以采取“一刀切”的网络安全管理模式。2019年我部与国资委等十部门联合印发的《加强工业互联网安全工作指导意见》明确提出要对工业互联网企业实施网络安全分类分级管理，集中力量指导重要行业、重点企业建立安全防护能力，提升安全防护水平。开展分类分级管理，一是进一步贯彻指导意见有关要求，督促企业落实主体责任，健全完善部门协同、政府指导、企业主责的网络安全管理体系；二是指导地方主管部门形成工业互联网企业清单，建立健全定级核查、信息通报、监测预警、安全检查等机制，集中力量指导管理重点企业；三是通过标准规范引领推动企业贯标达标，促进工业互联网企业网络安全防护能力提升。
+      </p>
+      <p class="news-content-p">
+        分类分级管理着力打造“1+4”的制度体系。1项《工业互联网企业网络安全分类分级管理指南》，明确将工业互联网企业分为联网工业企业、平台企业、标识解析企业等三类，结合企业所属行业的重要性、企业规模、应用工业互联网程度、网络安全风险程度等因素，将企业分成三个级别，同时明确定级流程和安全管理、支持保障等方面的要求。4项《工业互联网企业网络安全分类分级防护规范》，针对联网工业企业、平台企业、标识解析企业以及工业互联网数据四类对象，分别明确防护要点和不同级别的网络安全防护要求。
+      </p>
+      <p class="news-content-p">
+        今年1月13日，我部印发《开展工业互联网企业网络安全分类分级管理试点工作的通知》，启动部署分类分级试点工作。结合各地工业互联网发展实际，目前选定上海、江苏、广东等15个省（区、市）232家重点工业行业的重点企业参与试点。试点工作由各省工业和信息化主管部门与通信管理局共同组织实施，包括自主定级、定级核查、落实安全要求、试点工作总结四个阶段，计划今年10月底前完成试点工作。通过试点进一步完善《管理指南》，提升《安全规范》的科学性、有效性和指导性，形成可复制可推广的安全管理模式。
+      </p>
+`;
+
+export default {
+  newsId0,
+  newsId1,
+  newsId2,
+  newsId3,
+  newsId4,
+  newsId5,
+}
--- a/src/assets/images/address_icon.png
+++ b/src/assets/images/address_icon.png
--- a/src/assets/images/company-bg.png
+++ b/src/assets/images/company-bg.png
--- a/src/assets/images/db-func-item0.png
+++ b/src/assets/images/db-func-item0.png
--- a/src/assets/images/db-func-item1.png
+++ b/src/assets/images/db-func-item1.png
--- a/src/assets/images/db-func-item2.png
+++ b/src/assets/images/db-func-item2.png
--- a/src/assets/images/db_content0.png
+++ b/src/assets/images/db_content0.png
--- a/src/assets/images/db_content1.png
+++ b/src/assets/images/db_content1.png
--- a/src/assets/images/db_title_bg.png
+++ b/src/assets/images/db_title_bg.png
--- a/src/assets/images/djxinxilogo.png
+++ b/src/assets/images/djxinxilogo.png
--- a/src/assets/images/djxinxilogo1.png
+++ b/src/assets/images/djxinxilogo1.png
--- a/src/assets/images/footer-addess-icon.png
+++ b/src/assets/images/footer-addess-icon.png
--- a/src/assets/images/footer-email-icon.png
+++ b/src/assets/images/footer-email-icon.png
--- a/src/assets/images/footer-phone-icon.png
+++ b/src/assets/images/footer-phone-icon.png
--- a/src/assets/images/footer-postal-icon.png
+++ b/src/assets/images/footer-postal-icon.png
--- a/src/assets/images/harmful_function.png
+++ b/src/assets/images/harmful_function.png
--- a/src/assets/images/harmful_title_bg.png
+++ b/src/assets/images/harmful_title_bg.png
--- a/src/assets/images/main-customer-bg.png
+++ b/src/assets/images/main-customer-bg.png
--- a/src/assets/images/main-product-bg0.png
+++ b/src/assets/images/main-product-bg0.png
--- a/src/assets/images/main-product-bg1.png
+++ b/src/assets/images/main-product-bg1.png
--- a/src/assets/images/main-product-bg2.png
+++ b/src/assets/images/main-product-bg2.png
--- a/src/assets/images/main-product-bg3.png
+++ b/src/assets/images/main-product-bg3.png
--- a/src/assets/images/main-technical-capability-bg.png
+++ b/src/assets/images/main-technical-capability-bg.png
--- a/src/assets/images/manage-func-item0.png
+++ b/src/assets/images/manage-func-item0.png
--- a/src/assets/images/manage-func-item1.png
+++ b/src/assets/images/manage-func-item1.png
--- a/src/assets/images/manage-func-item2.png
+++ b/src/assets/images/manage-func-item2.png
--- a/src/assets/images/manage-func-item3.png
+++ b/src/assets/images/manage-func-item3.png
--- a/src/assets/images/manage-func-item4.png
+++ b/src/assets/images/manage-func-item4.png
--- a/src/assets/images/manage-func-item5.png
+++ b/src/assets/images/manage-func-item5.png
--- a/src/assets/images/news_img0.png
+++ b/src/assets/images/news_img0.png
--- a/src/assets/images/news_img1.png
+++ b/src/assets/images/news_img1.png
--- a/src/assets/images/news_img2.png
+++ b/src/assets/images/news_img2.png
--- a/src/assets/images/news_img3.png
+++ b/src/assets/images/news_img3.png
--- a/src/assets/images/news_img4.png
+++ b/src/assets/images/news_img4.png
--- a/src/assets/images/news_img5.png
+++ b/src/assets/images/news_img5.png
--- a/src/assets/images/news_main_content_0.png
+++ b/src/assets/images/news_main_content_0.png
--- a/src/assets/images/news_title_bg.png
+++ b/src/assets/images/news_title_bg.png
--- a/src/assets/images/product_module2.png
+++ b/src/assets/images/product_module2.png
--- a/src/assets/images/product_module3.png
+++ b/src/assets/images/product_module3.png
--- a/src/assets/images/product_module4.png
+++ b/src/assets/images/product_module4.png
--- a/src/assets/images/product_module5.png
+++ b/src/assets/images/product_module5.png
--- a/src/assets/images/product_module6.png
+++ b/src/assets/images/product_module6.png
--- a/src/assets/images/product_title_bg.png
+++ b/src/assets/images/product_title_bg.png
--- a/src/assets/images/solution-item-pic2.png
+++ b/src/assets/images/solution-item-pic2.png
--- a/src/assets/images/solution-item-pic3.png
+++ b/src/assets/images/solution-item-pic3.png
--- a/src/assets/images/solution-item-pic4.png
+++ b/src/assets/images/solution-item-pic4.png
--- a/src/assets/images/solution-item-pic5.png
+++ b/src/assets/images/solution-item-pic5.png
--- a/src/assets/images/solution-item-pic6.png
+++ b/src/assets/images/solution-item-pic6.png
--- a/src/assets/images/watch_alarm_0.png
+++ b/src/assets/images/watch_alarm_0.png
--- a/src/assets/images/watch_craft_0.png
+++ b/src/assets/images/watch_craft_0.png
--- a/src/assets/images/watch_deal_0.png
+++ b/src/assets/images/watch_deal_0.png
--- a/src/assets/images/watch_graph_0.png
+++ b/src/assets/images/watch_graph_0.png
--- a/src/assets/images/watch_graph_1.png
+++ b/src/assets/images/watch_graph_1.png
--- a/src/assets/images/watch_graph_2.png
+++ b/src/assets/images/watch_graph_2.png
--- a/src/assets/images/watch_history_0.png
+++ b/src/assets/images/watch_history_0.png
--- a/src/assets/images/watch_title_bg.png
+++ b/src/assets/images/watch_title_bg.png
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@ -0,0 +1,169 @@
+// 重置样式
+* {
+  box-sizing: border-box;
+  //user-select: text;
+  //-webkit-user-select: text;
+}
+
+html {
+  height: 100%;
+  font-size: 14px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  color: #333;
+  min-width: 1240px;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
+}
+
+ul,
+h1,
+h3,
+h4,
+p,
+dl,
+dd {
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+  color: #333;
+  outline: none;
+}
+
+.underline-a{
+  text-decoration: underline;
+}
+
+
+i {
+  font-style: normal;
+}
+
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="checkbox"] {
+  padding: 0;
+  outline: none;
+  border: none;
+  -webkit-appearance: none;
+
+  &::placeholder {
+    color: #ccc;
+  }
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+ul {
+  list-style: none;
+}
+
+#app {
+  background: #fff;
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ellipsis-2 {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.ellipsis-3 {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.ellipsis-4 {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  visibility: hidden;
+  height: 0;
+  line-height: 0;
+  clear: both;
+}
+
+.main-func-area-margin-top{
+  margin-top: 102px;
+}
+.title1{
+  font-size: 60px;
+  display: inline-block;
+}
+.title2 {
+  font-size: 30px;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.system-content-text{
+  font-size: 16px;
+  color: #666666;
+  line-height: 30px;
+}
+
+.common-width{
+  width: 1210px;
+}
+
+.file-resource{
+  font-size: 16px;
+  color: #4C98FF;
+  line-height: 30px;
+}
+
+.news-content-p{
+  font-size: 16px;
+  color: #666666;
+  line-height: 30px;
+  letter-spacing:2px;
+}
+
+.news-content-p-weight{
+  font-weight: 600;
+}
--- a/src/assets/styles/mixin.less
+++ b/src/assets/styles/mixin.less
@ -0,0 +1,8 @@
+// 鼠标经过上移阴影动画
+.hoverShadow () {
+  transition: all .5s;
+  &:hover {
+    transform: translate3d(0,-3px,0);
+    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
+  }
+}
--- a/src/assets/styles/variables.less
+++ b/src/assets/styles/variables.less
@ -0,0 +1,10 @@
+// 主题
+@xtxColor:#27BA9B;
+// 辅助
+@helpColor:#E26237;
+// 成功
+@sucColor:#1DC779;
+// 警告
+@warnColor:#FFB302;
+// 价格
+@priceColor:#CF4444;
--- a/src/assets/videos/djxinxi_video.mp4
+++ b/src/assets/videos/djxinxi_video.mp4
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,11 @@
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import "@/assets/styles/common.less";
+
+const app = createApp(App);
+app.use(ElementPlus);
+app.use(store).use(router).mount("#app");
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,88 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import HomePage from "../views/HomePage.vue";
+import constants from "@/api/constants";
+import NotFound from "@/views/NotFound";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: HomePage,
+    redirect: constants.navData[0].path,
+    children: [
+      {
+        path: constants.navData[0].path,
+        name: constants.navData[0].name,
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () =>
+          import(/* webpackChunkName: "about" */ "../views/MainPage.vue"),
+        meta: { pageName: constants.navData[0].pageName },
+      },
+      {
+        path: constants.navData[1].path,
+        name: constants.navData[1].name,
+        // component: () => import("../views/ProductPage.vue"),
+        redirect: constants.navSubData[0].path,
+        meta: { pageName: constants.navData[1].pageName },
+        children: [
+          {
+            path: constants.navSubData[0].path,
+            name: constants.navSubData[0].name,
+            component: () => import("../views/SystemTechManagePage.vue"),
+            meta: { pageName: constants.navSubData[0].pageName },
+          },
+          {
+            path: constants.navSubData[1].path,
+            name: constants.navSubData[1].name,
+            component: () => import("../views/SystemHarmfulAlarmPage.vue"),
+            meta: { pageName: constants.navSubData[1].pageName },
+          },
+          {
+            path: constants.navSubData[2].path,
+            name: constants.navSubData[2].name,
+            component: () => import("../views/SystemDbPage.vue"),
+            meta: { pageName: constants.navSubData[2].pageName },
+          },
+          {
+            path: constants.navSubData[3].path,
+            name: constants.navSubData[3].name,
+            component: () => import("../views/SystemProductWatchPage.vue"),
+            meta: { pageName: constants.navSubData[3].pageName },
+          },
+        ]
+      },
+      {
+        path: constants.navData[2].path,
+        name: constants.navData[2].name,
+        component: () =>
+          import(/* webpackChunkName: "about" */ "../views/NewsPage.vue"),
+        meta: { pageName: constants.navData[2].pageName },
+        children: [
+          {
+            path: "/news/:id",
+            name:"NewsDetailPage",
+            component: () => import("../views/NewsDetailPage.vue"),
+          }
+          ,{
+            path: "",
+            component: () => import("../views/NewsItemsPage"),
+          },
+
+        ]
+      },
+    ],
+  },
+  { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+router.afterEach(() => {
+  window.scrollTo(0, 0);
+});
+
+export default router;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,13 @@
+import { createStore } from "vuex";
+
+export default createStore({
+  state(){
+    return {
+
+    }
+  },
+  getters: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});
--- a/src/utils/JsUtils.js
+++ b/src/utils/JsUtils.js
@ -0,0 +1,9 @@
+function isANumber(val) {
+  if (parseFloat(val).toString() == "NaN") {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+export default {isANumber}
--- a/src/views/FloatTechBallView.vue
+++ b/src/views/FloatTechBallView.vue
@ -0,0 +1,73 @@
+<template>
+  <div v-text="(percent*100)+'%'" class="percent"></div>
+  <div class="float-ball-area">
+    <div ref="ball" class="ball"></div>
+    <div ref="title" class="title" v-text="techName"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref } from "vue";
+
+export default {
+  name: "FloatTechBallView",
+  props: {
+    percent: {
+      type: Number,
+      default: 1,
+    },
+    techName:{
+      type: String,
+      default: "",
+    }
+  },
+  setup(props) {
+    let ball = ref(null);
+    let title = ref(null);
+    onMounted(() => {
+      let length = 126 * props.percent;
+      let textSize = 32 * props.percent;
+      ball.value.style.width = length + "px";
+      ball.value.style.height = length + "px";
+      ball.value.style.left = ((126 - length) / 2) + "px";
+      title.value.style.fontSize = textSize + "px";
+      title.value.style.top = ((length - textSize * 1.4) / 2) + "px";
+    });
+    return {
+      ball,
+      title,
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+.float-ball-area {
+  width: 126px;
+  height: 126px;
+  position: relative;
+}
+
+.ball {
+  background: linear-gradient(90deg, #62CAFB 0%, #478FFC 100%);
+  border-radius: 50%;
+  position: absolute;
+}
+
+.title {
+  color: white;
+  font-weight: 600;
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+.percent {
+  font-size: 30px;
+  color: white;
+  width: 126px;
+  text-align: center;
+}
+
+</style>
--- a/src/views/FooterView.vue
+++ b/src/views/FooterView.vue
@ -0,0 +1,194 @@
+<template>
+  <div class="app-footer">
+    <div class="app-footer-content common-width">
+      <div class="footer-company-info">
+        <div class="titile0">上海洞见信息科技有限公司</div>
+
+        <div v-for="info in companyInfo">
+          <img class="title-icon" :src="require('@/assets/images/'+info.infoSrc)"/>
+          <div class="titile1" v-html="info.title"/>
+        </div>
+      </div>
+      <div class="footer-user-info">
+        <el-input v-model="username" placeholder="您的姓名" class="input0"/>
+        <el-input v-model="phone" placeholder="您的电话" class="input0"/>
+        <el-input v-model="email" placeholder="您的邮箱" class="input0"/>
+        <el-input v-model="leavingMsg" type="textarea" placeholder="留言内容" class="input2" rows="4" resize="none"/>
+        <el-button type="primary" style="margin-left: 490px;margin-top: 10px" @click="submitClick()">提交</el-button>
+      </div>
+
+      <div class="footer-tip-area">
+        <a class="footer-tip" @click="funcClick(productPath)">产品中心</a>
+        <div class="footer-tip">&ensp;|&ensp;</div>
+        <a class="footer-tip" @click="funcClick(newsPath)">新闻中心</a>
+      </div>
+      <div class="footer-copyright">Copyright © djxinxi.net 上海洞见信息科技有限公司版权所有 沪ICP备2022020506号-1</div>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ref}  from "vue"
+import {useRouter}  from "vue-router"
+import constants from "@/api/constants";
+import { ElMessage } from "element-plus";
+
+export default {
+  name: "FooterView",
+  setup(){
+    const router = useRouter();
+    const username = ref("");
+    const phone = ref("");
+    const email = ref("");
+    const leavingMsg  = ref("");
+    function funcClick(routerPath) {
+      router.push({ path: routerPath});
+    }
+    const productPath = constants.navData[1].path;
+    const newsPath = constants.navData[2].path;
+    const companyInfo = [
+      {
+        infoSrc:"footer-addess-icon.png",
+        title:"地址：上海市闵行区莘松路855弄青春商务楼1号楼8422A",
+      },
+      {
+        infoSrc:"footer-postal-icon.png",
+        title:"邮编：200120",
+      },
+      {
+        infoSrc:"footer-phone-icon.png",
+        title:"手机：13816656869",
+      },
+      {
+        infoSrc:"footer-phone-icon.png",
+        title:"手机：13918374630",
+      },
+      {
+        infoSrc:"footer-email-icon.png",
+        title:"邮件：jason.ho@djxinxi.net",
+      },
+      {
+        infoSrc:"footer-email-icon.png",
+        title:"邮件：zhanggong@djxinxi.net",
+      },
+    ];
+    function submitClick(){
+      if (!leavingMsg.value || !phone.value || !username.value || !email.value){
+        ElMessage({
+          message: '请输入相关内容',
+          type: 'warning',
+        })
+      }else {
+        username.value = "";
+        phone.value = "";
+        email.value = "";
+        leavingMsg.value = "";
+        ElMessage({
+          message: "消息提交成功",
+          type: "success",
+        });
+      }
+    }
+
+    return{
+      funcClick,
+      productPath,
+      newsPath,
+      companyInfo,
+      username,
+      phone,
+      email,
+      leavingMsg,
+      submitClick,
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.app-footer {
+  height: 465px;
+  width: 100%;
+  background-color: #363636;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-top: 60px;
+  margin-top: 60px;
+}
+
+.app-footer-content {
+  position: relative;
+}
+
+.footer-company-info {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  width: 605px;
+}
+
+.footer-user-info {
+  width: 605px;
+  position: absolute;
+  right: 0;
+}
+
+.title-icon{
+  display: inline-block;
+}
+
+.titile0 {
+  color: #FFFFFF;
+  font-size: 30px;
+  line-height: 48px;
+}
+
+.titile1 {
+  color: #FFFFFF;
+  font-size: 16px;
+  line-height: 40px;
+  display: inline-block;
+  margin-left: 20px;
+}
+.input0{
+  width: 500px;
+  height: 30px;
+  margin-left: 50px;
+  margin-top: 20px;
+}
+.input2{
+  width: 500px;
+  height: 100px;
+  margin-left: 50px;
+  margin-top: 20px;
+}
+.input0:nth-child(1){
+  margin-top: 10px;
+}
+.footer-tip-area{
+  position: absolute;
+  width: 100%;
+  bottom: 58px;
+  display: flex;
+  justify-content: center;
+}
+
+.footer-tip{
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.footer-copyright{
+  color: white;
+  text-align: center;
+  position: absolute;
+  font-size: 12px;
+  width: 100%;
+  bottom: 25px;
+}
+</style>
--- a/src/views/HeaderView.vue
+++ b/src/views/HeaderView.vue
@ -0,0 +1,110 @@
+<template>
+  <div id="app-header">
+    <img id="dj-logo" :src="showStyle===0? require(`@/assets/images/djxinxilogo.png`):require(`@/assets/images/djxinxilogo1.png`)" @click="logoClick()"/>
+    <router-link :to="(constants.navData[0]).path" active-class="nav-active" :class="showStyle===0?'nav-common-style0':'nav-common-style1'" class="nav-common" style="left:517px;width: 44px">
+      {{ (constants.navData[0]).pageName }}
+    </router-link>
+
+    <el-popover
+      placement="bottom-start"
+      effect="dark"
+      :width="220"
+      trigger="hover"
+      :show-arrow="false">
+
+      <template #reference>
+        <router-link :to="(constants.navData[1]).path" active-class="nav-active" :class="showStyle===0?'nav-common-style0':'nav-common-style1'" class="nav-common" style="left:727px;width: 86px">
+          {{ (constants.navData[1]).pageName }}
+        </router-link>
+      </template>
+
+      <router-link :to="(navSub).path" active-class="nav-active" v-for="navSub in constants.navSubData" class="nav-sub-common">
+        <div>
+          {{ (navSub).pageName }}
+        </div>
+      </router-link>
+
+    </el-popover>
+
+    <router-link :to="(constants.navData[2]).path" active-class="nav-active" :class="showStyle===0?'nav-common-style0':'nav-common-style1'" class="nav-common" style="left:976px;width: 86px">
+      {{ (constants.navData[2]).pageName }}
+    </router-link>
+
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import constants from "@/api/constants";
+
+
+export default {
+  name: "HeaderView",
+  props:{
+    showStyle:{
+      type:Number,
+      default:0,
+    }
+  },
+  setup() {
+    const router = useRouter();
+    const nav = computed(() => {
+      return router.options.routes;
+    });
+    function logoClick(){
+      router.push({ path: constants.navData[0].path });
+    }
+    return {
+      nav,
+      constants,
+      logoClick,
+    };
+  }
+};
+
+</script>
+
+<style scoped>
+#app-header {
+  width: 100%;
+  height: 98px;
+  position: relative;
+}
+
+#dj-logo {
+  width: 180px;
+  height: 55px;
+  margin-left: 179px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.nav-common{
+  font-size: 19px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+}
+
+.nav-common-style0 {
+  color: white;
+}
+
+.nav-common-style1 {
+  color: black;
+}
+
+.nav-sub-common {
+  color: white;
+  font-size: 16px;
+  line-height: 40px;
+}
+
+.nav-active {
+  color: #266db7;
+}
+
+</style>
--- a/src/views/HomeNav.vue
+++ b/src/views/HomeNav.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="nav-common" :class="isTop?'nav-top':'nav-fix'">
+    <header-view :show-style="showStyleValue"/>
+  </div>
+</template>
+
+<script>
+import HeaderView from "@/views/HeaderView";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+
+export default {
+  name: "HomeNav",
+  components: {
+    HeaderView
+  },
+  setup() {
+    const isTop = ref(true);
+    let handleScroll = function handleScroll() {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      if (scrollTop >= 55) {
+        isTop.value = false;
+      } else {
+        isTop.value = true;
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("scroll", handleScroll);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener("scroll", handleScroll);
+    });
+
+    let showStyleValue = computed(() => {
+      return isTop.value === true ? 0 : 1;
+    });
+
+    return {
+      showStyleValue,
+      isTop,
+    };
+  }
+};
+</script>
+
+<style>
+
+.nav-common{
+  z-index: 100;
+  width: 100%;
+}
+
+.nav-top{
+  position: fixed;
+  background: transparent;
+}
+
+.nav-fix{
+  position: fixed;
+  background-color: white;
+  border-bottom: 1px solid #DBDCDD;
+}
+</style>
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@ -0,0 +1,26 @@
+<template>
+  <div class="container">
+    <home-nav/>
+    <div>
+      <!--  内容区域  -->
+      <router-view />
+    </div>
+    <div>
+      <!--  底部区域  -->
+      <footer-view />
+    </div>
+  </div>
+</template>
+<script>
+
+import FooterView from "@/views/FooterView";
+import HomeNav from "@/views/HomeNav";
+
+export default {
+  name: "HomePage",
+  components: {
+    HomeNav,
+    FooterView,
+  },
+};
+</script>
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@ -0,0 +1,402 @@
+<template>
+  <div class="main-page">
+    <div class="video-area">
+      <video style="width: 100%" autoplay muted loop="loop">
+        <source src="@/assets/videos/djxinxi_video.mp4" type="video/mp4" />
+      </video>
+      <el-carousel trigger="click" class="common-width company-slogan-area" :indicator-position="'none'" :arrow="'never'" :pause-on-hover="false" :autoplay="false" ref="sloganCarousel">
+        <el-carousel-item>
+          <div class="company-title">上海洞见信息科技有限公司</div>
+          <div class="company-slogan company-slogan1">做有价值的事，持续创造价值</div>
+        </el-carousel-item>
+        <el-carousel-item>
+          <div class="company-title">洞察趋势 预见未来</div>
+          <div class="company-slogan company-slogan0">给管理人员提供数据 | 给技术人员提供工具</div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+
+
+    <div class="common-width main-func-area-margin-top">
+      <div class="title1 company-intro1">公司介绍</div>
+      <div class="title2 company-intro2">Company introduction</div>
+      <div class="company-bg">
+        <div class="company-text-content">
+          上海洞见信息科技有限公司专注于通过大数据分析帮助企业改善生产管理、提高劳动生产力；提供专业的软件产品和相关咨询服务，助力企业通过数字孪生技术实现智能工厂的建设。洞见信息-解决方案及服务优势：为客户提供化工专业 + 自动化
+          + 信息化 “ 三化一体” 的专业服务；为客户提供不定时作息以满足客户特殊的需求；为客户提供大石油化工、医药化工、煤化工、精细化工、工业等行业解决方案；覆盖企业工艺、设备、人员、生产监控和报警管理等多个领域。
+        </div>
+      </div>
+    </div>
+
+    <div class="main-technical-capability main-func-area-margin-top">
+      <div class="common-width main-technical-capability-content">
+        <div style="margin-top: 72px;">
+          <div class="title1" style="color: #ffffff">技术能力</div>
+          <div class="title2" style="color: rgba(255,255,255,0.26)">Technical capability</div>
+        </div>
+        <div class="float-ball" style="left: 240px;top: 200px;position: absolute" >
+          <float-tech-ball-view :percent="0.79" :tech-name="'边缘计算'"/>
+        </div>
+        <div class="float-ball" style="left: 366px;top: 430px;position: absolute" >
+          <float-tech-ball-view :percent="0.88" :tech-name="'区块链'"/>
+        </div>
+        <div class="float-ball" style="left: 520px;top: 226px;position: absolute" >
+          <float-tech-ball-view :percent="0.95" :tech-name="'大数据'"/>
+        </div>
+        <div class="float-ball" style="left: 840px;top: 88px;position: absolute" >
+          <float-tech-ball-view :percent="0.82" :tech-name="'人工智能'"/>
+        </div>
+        <div class="float-ball" style="left: 1000px;top: 280px;position: absolute" >
+          <float-tech-ball-view :percent="0.75" :tech-name="'数据安全'"/>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-product common-width main-func-area-margin-top">
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div class="title1" style="color: #666666">我们的产品</div>
+        <div class="title1" style="position:relative;">
+          <div class="title2" style="color: #666666;position:absolute;bottom: 4px">Product</div>
+        </div>
+      </div>
+      <div class="main-product-item-area">
+        <main-product-item v-for="mainproduct in mainProductInfos" :main-product-item = "mainproduct"/>
+      </div>
+    </div>
+
+    <div class="main-solution main-func-area-margin-top">
+      <div style="margin: 0 auto" class="common-width">
+        <div class="title1" style="color: #666666;display: block">解决方案</div>
+        <div class="title2" style="color: #666666;display: block">Solution</div>
+        <div class="main-solution-grid">
+          <div class="solution-item main-solution-item0">
+            上海洞见信息科技有限公司依托可靠的大数据开发技术，采用先进的“ 三化一体” 整体解决方案模式，为企业提供智能化改造、工业云平台建设、数据和网络安全和大数据应用等服务。
+          </div>
+          <main-solution-item v-for="mainSolutionInfo in mainSolutionInfos" :main-solution-info="mainSolutionInfo"/>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-news common-width main-func-area-margin-top">
+      <div class="title1" style="color: #666666;display: block">新闻中心</div>
+      <div class="title2" style="color: #B8BAC0;display: block">News</div>
+      <div class="main-news-grid1">
+        <div class="main-news-item" v-if="newsItemData[4]" @click="newItemClick(4)">
+          <new1 :newsData="newsItemData[4]" :newsStyle="{style:0}" />
+        </div>
+        <div class="main-news-item" v-if="newsItemData[0]" @click="newItemClick(0)">
+          <new1 :newsData="newsItemData[0]" :newsStyle="{style:1}" />
+        </div>
+        <div class="main-news-item" v-if="newsItemData[1]" @click="newItemClick(1)">
+          <new1 :newsData="newsItemData[1]" :newsStyle="{style:1}" />
+        </div>
+      </div>
+      <div class="main-news-grid2">
+        <div class="main-news-item" v-if="newsItemData[2]" @click="newItemClick(2)">
+          <new1 :newsData="newsItemData[2]" :newsStyle="{style:1}" />
+        </div>
+        <div class="main-news-item" v-if="newsItemData[3]" @click="newItemClick(3)">
+          <new1 :newsData="newsItemData[3]" :newsStyle="{style:1}" />
+        </div>
+        <div class="main-news-item-more" @click="newItemClick(-1)">更多>></div>
+      </div>
+    </div>
+
+    <div class="main-customer common-width main-func-area-margin-top">
+      <div style="width: 100%;top: 0;;display: flex;justify-content: center;">
+        <div class="title1" style="color: #666666">合作伙伴</div>
+        <div class="title1" style="position:relative;">
+          <div class="title2" style="color: #B8BAC0;bottom: 4px">Customer</div>
+        </div>
+      </div>
+      <div class="main-customer-bg" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import New1 from "@/views/New1";
+import { ref,onMounted,onUnmounted } from "vue";
+import constants from "@/api/constants";
+import {useRouter} from "vue-router";
+import MainProductItem from "@/views/MainProductItem";
+import MainSolutionItem from "@/views/MainSolutionItem";
+import FloatTechBallView from "@/views/FloatTechBallView";
+
+export default {
+  name: "MainPage",
+  components: { FloatTechBallView, MainSolutionItem, MainProductItem, New1 },
+  setup() {
+    const router = useRouter();
+    const sloganCarousel = ref(null);
+    function newItemClick(newsItem){
+      if (newsItem < 0 || newsItem > constants.newsItemData.length){
+        router.push({ path: "/news"});
+      }else {
+        router.push({ name: "NewsDetailPage", params: { id: newsItem } });
+      }
+    }
+    let timer = null;
+    onMounted(()=>{
+      timer = setTimeout(()=>{
+        sloganCarousel.value.next();
+      },3000)
+    });
+    onUnmounted(()=>{
+      if (timer != null){
+        clearTimeout(timer)
+      }
+    })
+    const newsItemData = ref(constants.newsItemData);
+    const mainProductInfos = ref(constants.mainProductInfos);
+    const mainSolutionInfos = ref(constants.mainSolutionInfos);
+    return {
+      newsItemData,
+      newItemClick,
+      mainProductInfos,
+      mainSolutionInfos,
+      sloganCarousel,
+    };
+  }
+};
+</script>
+
+<style scoped>
+.main-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.video-area{
+  width: 100%;
+  position: relative;
+}
+
+.company-slogan-area{
+  position: absolute;
+  top: 323px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.company-title{
+  color: white;
+  font-size: 70px;
+  width: 100%;
+  text-align: center;
+}
+
+.float-ball{
+  width: 100px;
+  height: 100px;
+  -webkit-animation: bounce-down 3s linear infinite;
+  animation: bounce-down 3s linear infinite;
+}
+
+@-webkit-keyframes bounce-down {
+  25% {
+    -webkit-transform: translateY(-8px);
+  }
+  50%, 100% {
+    -webkit-transform: translateY(0);
+  }
+  75% {
+    -webkit-transform: translateY(8px);
+  }
+}
+
+@keyframes bounce-down {
+  25% {
+    transform: translateY(-8px);
+  }
+  50%, 100% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(8px);
+  }
+}
+
+.company-slogan{
+  color: white;
+  font-size: 35px;
+  height: 87px;
+  line-height: 87px;
+  text-align: center;
+  background-color:rgba(63,142,226,0.5);
+  margin-top: 70px;
+  display: inline-block;
+  padding:0 20px;
+  /*transform: translateX(-50%);*/
+  /*margin-left: 50%;*/
+}
+.company-slogan0{
+  margin-left: 255px;
+}
+.company-slogan1{
+  margin-left:360px
+
+
+}
+
+.company-intro1 {
+  color: #423f54;
+}
+
+.company-intro2 {
+  color: #B8BAC0;
+}
+
+.company-bg {
+  background-image: url("./../assets/images/company-bg.png");
+  background-size: cover;
+  width: 100%;
+  height: 620px;
+  position: relative;
+}
+
+.company-text-content {
+  width: 816px;
+  position: absolute;
+  bottom: 0;
+  color: #666666;
+  line-height: 40px;
+  font-size: 16px;
+  letter-spacing: 2px;
+}
+
+.main-technical-capability {
+  background-image: url("./../assets/images/main-technical-capability-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
+  height: 700px;
+}
+
+.main-technical-capability-content{
+  position: relative;
+  margin: 0 auto;
+  border: 1px solid transparent;
+  box-sizing:border-box;
+  height: 100%;
+}
+
+.main-product {
+
+}
+.main-product-item-area{
+  margin-top: 95px;
+  display: flex;
+  justify-content:space-between ;
+}
+
+.main-solution {
+  background-color: #F3F3F3;
+  width: 100%;
+  padding-top: 73px;
+  padding-bottom: 65px;
+}
+
+.main-solution-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.solution-item {
+  width: 380px;
+  height: 336px;
+  border: 1px solid #00A0E9;
+  font-size: 16px;
+  line-height: 40px;
+  color: #666666;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main-solution-item0 {
+  box-sizing: border-box;
+  padding: 58px 46px 0px 46px;
+  border: 0;
+}
+
+.solution-item:nth-child(n+4) {
+  margin-top: 25px;
+}
+
+
+.main-news {
+
+}
+
+.main-news-grid1 {
+  position: relative;
+  margin-top: 45px;
+  height: 402px;
+  width: 100%;
+}
+
+.main-news-item {
+  width: 380px;
+  height: 185px;
+  cursor: pointer;
+}
+
+.main-news-grid1 .main-news-item:nth-child(1) {
+  width: 797px;
+  height: 402px;
+  position: absolute;
+}
+
+.main-news-grid1 .main-news-item:nth-child(2) {
+  top: 0;
+  right: 0;
+  position: absolute;
+}
+
+.main-news-grid1 .main-news-item:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.main-news-item-more {
+  background-color: #72B5FD;
+  width: 380px;
+  height: 185px;
+  line-height: 185px;
+  color: white;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.main-news-grid2 {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 185px;
+  margin-top: 30px;
+}
+
+.main-customer {
+  height: 560px;
+}
+
+.main-customer-bg {
+  background-image: url("./../assets/images/main-customer-bg.png");
+  background-size: cover;
+  width: 1202px;
+  height: 400px;
+  position: absolute;
+  margin-top: 55px;
+  box-shadow: 0 0 30px rgba(0, 0, 22, 0.3);
+}
+
+</style>
--- a/src/views/MainProductItem.vue
+++ b/src/views/MainProductItem.vue
@ -0,0 +1,95 @@
+<template>
+  <div class="main-product-item" @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()" @click="itemClick()">
+    <img class="item-bg" :src="require(`@/assets/images/${mainProductItem.bgImg}`)" />
+    <div class="item-fg" :class="{'item-bg-trans':!mouseOnItem}"  v-text="mainProductItem.itemDesc"/>
+    <div class="item-name" v-text="mainProductItem.itemName"></div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+export default {
+  name: "MainProductItem",
+  props:{
+    mainProductItem:{
+      bgImg:"",
+      itemName:"",
+      itemDesc:"",
+      path:"",
+    }
+  },
+  setup(props) {
+    let mouseOnItem = ref(false);
+
+    function onMouseEnter() {
+      mouseOnItem.value = true;
+    }
+
+    function onMouseLeave() {
+      mouseOnItem.value = false;
+    }
+
+    const router = useRouter()
+    function itemClick(){
+      router.push({path:props.mainProductItem.path})
+    }
+
+    return {
+      onMouseEnter,
+      onMouseLeave,
+      mouseOnItem,
+      itemClick,
+    };
+  }
+};
+</script>
+
+<style scoped>
+.main-product-item {
+  width: 280px;
+  height: 400px;
+  position: relative;
+  cursor: pointer;
+}
+
+.item-bg {
+  /*background-image: url("./../assets/images/main-product-bg0.png");*/
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  position: absolute;
+  transition: all 0.4;
+}
+
+.item-bg-trans {
+  /*transform: translateY(100%);*/
+  top: 100%;
+  display: none;
+}
+
+.item-name {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  line-height: 60px;
+  text-align: center;
+  font-size: 22px;
+  color: white;
+  background-color: #00A0E9;
+}
+
+.item-fg {
+  background-color: rgba(0, 160, 233, 0.72);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding-top: 58px;
+  font-size: 16px;
+  color: white;
+  line-height: 30px;
+  padding-left: 22px;
+  padding-right: 27px;
+}
+</style>
--- a/src/views/MainSolutionItem.vue
+++ b/src/views/MainSolutionItem.vue
@ -0,0 +1,66 @@
+<template>
+  <div class="solution-item">
+    <div class="solution-item-pic" :style="'background-image:url('+require('./../assets/images/'+mainSolutionInfo.imgSrc)+')'" />
+    <div class="solution-item-title" v-text="mainSolutionInfo.title"/>
+    <div style="display: flex;top: 208px;width: 100%; height: 128px;align-items: center;position: absolute;">
+      <div class="solution-item-content ellipsis-4" v-text="mainSolutionInfo.desc"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MainSolutionItem",
+  props:{
+    mainSolutionInfo:{
+      type:Object,
+      default:{
+        imgSrc:"",
+        title:"",
+        desc:"",
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.solution-item {
+  width: 380px;
+  height: 336px;
+  border: 1px solid #00A0E9;
+  font-size: 16px;
+  line-height: 40px;
+  color: #666666;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.solution-item-pic {
+  width: 138px;
+  height: 138px;
+  top: 15px;
+  position: absolute;
+}
+
+.solution-item-title {
+  font-size: 30px;
+  color: #00A0E9;
+  top: 164px;
+  position: absolute;
+}
+
+.solution-item-content {
+  font-size: 16px;
+  color: #666666;
+  line-height: 30px;
+  box-sizing: border-box;
+  padding-left: 26px;
+  padding-right: 26px;
+  text-align: center;
+}
+
+</style>
--- a/src/views/New1.vue
+++ b/src/views/New1.vue
@ -0,0 +1,116 @@
+<template>
+  <div class="new1bg" style="background-color: #F3F3F3">
+    <img class="img-bg" :src="require(`@/assets/images/${newsData.mainImgSrc}`)" v-if="newsData.mainImgSrc" />
+    <div class="new1contentbg" :class="newsStyle.style === 0 ? 'new1contentbg0':'new1contentbg1'" :style="newsStyle.style === 0 ? 'background-color: rgba(0, 0, 0, 0.54)':'background-color: rgba(0, 0, 0, 0)'">
+      <div class="new1title ellipsis-2" v-text="newsData.title" :class="newsStyle.style === 0 ? 'title0color':'title1color'"/>
+      <div class="new1time" v-text="newsData.time" :class="newsStyle.style === 0 ? 'new1time-color0':'new1time-color1' "/>
+      <div class="new1content ellipsis-3" v-text="newsData.desc" :class="newsStyle.style === 0 ? 'content0color':'content1color'"/>
+    </div>
+  </div>
+
+</template>
+<script>
+
+export default {
+  name: "New1",
+  props:{
+    newsData:{
+      type:Object,
+      default:{
+        title:"",
+        time:"",
+        desc:"",
+        mainImgSrc:""
+      }
+    },
+    newsStyle:{
+      type:Object,
+      default:{
+        style:0
+      }
+    },
+  },
+  setup(){
+
+    return{
+      // testX
+    }
+  },
+  methods:{
+    testX(data) {
+      return require(`./../assets/images/${data}`);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.new1bg {
+  background-size: cover;
+  position: relative;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+}
+.img-bg{
+  width: 100%;
+  height: 100%;
+}
+
+.new1contentbg{
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 160px;
+  box-sizing: border-box;
+}
+
+.new1contentbg1 {
+  padding: 0 12px 18px 12px;
+}
+
+.new1contentbg0 {
+  padding: 18px 12px 18px 12px;
+}
+
+
+.new1title {
+  font-size: 20px;
+  color: white;
+}
+
+.new1time {
+  font-size: 16px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 28px;
+}
+
+.new1time-color0{
+  color: white;
+}
+
+.new1time-color1{
+  color: #00A0E9;
+}
+
+.title0color{
+  color: white;
+}
+.title1color{
+  color: #333333;
+}
+.content0color{
+  color: white;
+}
+.content1color{
+  color:#666666;
+}
+
+.new1content {
+  margin-top: 5px;
+  font-size: 16px;
+  height: 70px;
+}
+</style>
--- a/src/views/NewsDetailPage.vue
+++ b/src/views/NewsDetailPage.vue
@ -0,0 +1,153 @@
+<template>
+  <div class="system-tech-area">
+    <div class="title-area common-width">
+      <div class="news-title">{{ newsItem.title }}</div>
+      <div class="news-time">{{ newsItem.time }}</div>
+    </div>
+    <div class="news-content common-width" v-html="newsItem.content"/>
+    <div class="common-width news-footer-area">
+      <a class="last-new news-content underline-a" v-text="lastNew.content" @click="lastNewClick(lastNew.index)"/>
+      <a class="next-new news-content underline-a" v-text="nextNew.content" @click="nextNewClick(nextNew.index)"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import constants from "@/api/constants";
+import { reactive,watch,ref } from "vue";
+import NewsItemsView from "@/views/NewsItemsView";
+import { useRoute,useRouter,onBeforeRouteUpdate } from "vue-router";
+import JsUtils from "@/utils/JsUtils";
+
+export default {
+  name: "NewsDetailPage",
+  components: { NewsItemsView },
+  setup() {
+    function getSubString(str){
+      let result = null;
+      if (str.length >= 8){
+        result = str.substring(0, 8);
+      } else {
+        result = str;
+      }
+      result += "...";
+      return result;
+    }
+
+    const route = useRoute();
+    const router = useRouter();
+    let newsItem = ref({});
+    const lastNew = reactive({index:-1,content:""});
+    const nextNew = reactive({index:-1,content:""});
+
+    function lastNewClick(index){
+      if (index >= 0) {
+        router.push({ name: "NewsDetailPage", params: { id: index } });
+      }
+    }
+
+    function nextNewClick(index){
+      if (index >= 0) {
+        router.push({ name: "NewsDetailPage", params: { id: index } });
+      }
+    }
+    const lastPrefix = "上一篇：";
+    const nextPrefix = "下一篇：";
+
+    watch(() => route.params.id, (newVal) => {
+      if (JsUtils.isANumber(newVal)) {
+        const paramsId = parseInt(newVal);
+        if (paramsId < 0 || paramsId > constants.newsItemData.length - 1) {
+          return true;
+        }
+        for (let data of constants.newsItemData) {
+          if (data.id === paramsId) {
+            newsItem.value = data;
+            break;
+          }
+        }
+        if (paramsId <= 0) {
+          lastNew.index = -1;
+          lastNew.content = lastPrefix + "没有了";
+        } else {
+          const lastIndex = paramsId - 1;
+          lastNew.index = lastIndex;
+          lastNew.content = lastPrefix + getSubString(constants.newsItemData[lastIndex].title);
+        }
+        if (paramsId >= constants.newsItemData.length - 1) {
+          nextNew.index = -1;
+          nextNew.content = nextPrefix + "没有了";
+        } else {
+          const nextIndex = paramsId + 1;
+          nextNew.index = nextIndex;
+          nextNew.content = nextPrefix + getSubString(constants.newsItemData[nextIndex].title);
+        }
+      }
+
+    }, { immediate: true });
+
+    return {
+      newsItem,
+      lastNew,
+      nextNew,
+      lastNewClick,
+      nextNewClick,
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+.title-area {
+  position: relative;
+  height: 40px;
+  margin-top: 80px;
+  margin-bottom: 45px;
+}
+
+.news-title {
+  font-size: 30px;
+  color: #666666;
+  line-height: 40px;
+  position: absolute;
+  left: 0;
+}
+
+.news-time {
+  font-size: 20px;
+  color: #666666;
+  line-height: 40px;
+  position: absolute;
+  right: 0;
+}
+
+.system-tech-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.news-content{
+  font-size: 16px;
+}
+
+.news-footer-area{
+  margin-top: 40px;
+  position: relative;
+}
+
+.last-new{
+  position: absolute;
+  left: 0;
+  cursor: pointer;
+}
+
+.next-new{
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+}
+
+</style>
+
--- a/src/views/NewsItemsPage.vue
+++ b/src/views/NewsItemsPage.vue
@ -0,0 +1,27 @@
+<template>
+  <div class="system-content-text common-width" style="margin-top: 80px;color: #333333;font-weight: 600">行业资讯</div>
+  <news-items-view :news-items="newsItemData" style="margin-top: 20px"></news-items-view>
+</template>
+
+<script>
+import constants from "@/api/constants";
+import { computed } from "vue";
+import NewsItemsView from "@/views/NewsItemsView";
+
+export default {
+  name: "NewsItemsPage",
+  components: { NewsItemsView },
+  setup() {
+    const newsItemData = computed(() => {
+      return constants.newsItemData;
+    });
+    return {
+      newsItemData
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/NewsItemsView.vue
+++ b/src/views/NewsItemsView.vue
@ -0,0 +1,73 @@
+<template>
+  <div class="news-grid common-width">
+    <div class="news-item" v-for="newsItem in newsItems" @click="newItemClick(newsItem)">
+      <!--    <div class="news-pic" :style="background-image?:"></div>-->
+      <img class="news-pic" :src="require(`@/assets/images/${newsItem.imgSrc}`)" />
+      <div class="news-item-text" v-text="newsItem.time" />
+      <div class="news-item-text" v-text="newsItem.title" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { useRouter } from "vue-router";
+export default {
+  name: "NewsItemsView",
+  props: {
+    newsItems:{
+      type: Array,
+      default: [
+        {
+          imgSrc: "",
+          time: "",
+          title: ""
+        }
+      ]
+    }
+  },
+  setup(){
+    const router = useRouter()
+    function newItemClick(newsItem){
+      router.push({ name: "NewsDetailPage", params: { id: newsItem.id } });
+    }
+    return{
+      newItemClick,
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.news-grid{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.news-item {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  cursor: pointer;
+}
+.news-item:nth-child(n+4){
+  margin-top: 46px;
+}
+
+.news-pic {
+  width: 380px;
+  height: 280px;
+}
+
+.news-item-text {
+  font-size: 20px;
+  color: #666666;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>
--- a/src/views/NewsPage.vue
+++ b/src/views/NewsPage.vue
@ -0,0 +1,48 @@
+<template>
+  <div class="system-tech-area">
+    <div class="system-title system-title-bg">新闻资讯</div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import constants from "@/api/constants";
+import { computed } from "vue";
+import NewsItemsView from "@/views/NewsItemsView";
+
+export default {
+  name: "NewsPage",
+  components: { NewsItemsView },
+  setup() {
+    const newsItemData = computed(() => {
+      return constants.newsItemData;
+    });
+    return {
+      newsItemData
+    };
+  }
+};
+</script>
+
+<style scoped>
+.system-tech-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.system-title {
+  color: white;
+  font-size: 50px;
+  width: 100%;
+  text-align: center;
+  padding-top: 170px;
+}
+
+.system-title-bg {
+  height: 350px;
+  background-image: url("./../assets/images/news_title_bg.png");
+}
+
+
+</style>
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@ -0,0 +1,15 @@
+<template>
+  <div>
+    页面未找到
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NotFound"
+};
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/SystemContent2.vue
+++ b/src/views/SystemContent2.vue
@ -0,0 +1,71 @@
+<template>
+  <div class="system-content-area common-width">
+    <slot name="header"></slot>
+
+    <div class="system-content-title" v-text="techContent.title" v-if="techContent.title" />
+    <div class="system-content-circletext" v-for="textItem in techContent.contentText">
+      <div class="system-content-circle" v-if="showCircle"></div>
+      <div class="system-content-text" v-html="textItem"></div>
+    </div>
+    <img class="system-content-img" v-for="imgSrc in techContent.imgSrcs" :src="require(`@/assets/images/${imgSrc}`)"
+         v-if="techContent.imgSrcs" />
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "SystemContent2",
+  props: {
+    techContent: {
+      type: Object,
+      default: {
+        title: "",
+        contentText: [],
+        imgSrcs: [],
+      }
+    },
+    showCircle:{
+      type:Boolean,
+      default: true,
+    }
+  },
+};
+</script>
+
+<style scoped>
+.system-content-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.system-content-title {
+  margin-top: 35px;
+  margin-bottom: 20px;
+  color: #666666;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.system-content-circletext {
+  display: flex;
+}
+
+.system-content-circle {
+  width: 14px;
+  height: 14px;
+  border: 7px solid rgba(0, 0, 0, 0);
+  border-radius: 7px;
+  background-color: #00A0E9;
+  box-sizing: border-box;
+  margin:8px 10px;
+}
+
+.system-content-img {
+  width: 888px;
+  height: 433px;
+  align-self: center;
+  margin-top: 30px;
+}
+</style>
--- a/src/views/SystemDbPage.vue
+++ b/src/views/SystemDbPage.vue
@ -0,0 +1,97 @@
+<template>
+  <div class="system-tech-area">
+    <div class="system-title system-title-bg">实时数据库系统</div>
+    <div class="func-area">
+      <div class="func-item" v-for="funcItem in funcItems">
+        <img :src= "require(`@/assets/images/${funcItem.imgSrc}`)" class="func-item-img">
+        <div class="func-item-text" v-text="funcItem.title"></div>
+      </div>
+    </div>
+    <system-content2 v-for="(data,index) in systemDbData" :techContent= "data" :show-circle="index != 0"/>
+    <div class="system-content-text common-width" style="margin-top: 80px">
+      &ensp;&ensp;&ensp;&ensp;在建设过程中，为了满足客户的要求，我们利用自身技术实力实现了服务器虚拟化、接口机虚拟化、双机热备、负载均衡、HTML5技术web展示等高可用方案，同时也开发了自主知识产权的生产实时数据展示平台，我们的努力都是为了让客户以较低的成本获得更好的用户体验。
+    </div>
+  </div>
+</template>
+
+<script>
+import constants from "@/api/constants";
+import { computed, reactive } from "vue";
+import SystemContent2 from "@/views/SystemContent2";
+
+export default {
+  name: "SystemDbPage",
+  components: { SystemContent2},
+  setup() {
+    const systemDbData = computed(() => {
+      return constants.systemDbData;
+    });
+
+    const funcItems = reactive([{
+      imgSrc:"db-func-item0.png",
+      title:"实时数据核心平台",
+    },{
+      imgSrc:"db-func-item1.png",
+      title:"数据采集",
+    },{
+      imgSrc:"db-func-item2.png",
+      title:"数据展示平台",
+    },]);
+
+    return {
+      systemDbData,
+      funcItems,
+    };
+  }
+};
+</script>
+
+<style scoped>
+.system-tech-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.system-title {
+  color: white;
+  font-size: 50px;
+  width: 100%;
+  text-align: center;
+  padding-top: 170px;
+}
+
+.system-title-bg {
+  height: 350px;
+  background-image: url("./../assets/images/db_title_bg.png");
+}
+
+.func-area{
+  display: flex;
+  flex-wrap: wrap;
+  width: 860px;
+  justify-content: space-between;
+  margin: 100px auto 0;
+}
+
+.func-item{
+  width:250px;
+  height: 192px;
+  position: relative;
+}
+
+.func-item-img{
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.func-item-text{
+  font-size: 20px;
+  color: #666666;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+
+</style>
--- a/src/views/SystemHarmfulAlarmPage.vue
+++ b/src/views/SystemHarmfulAlarmPage.vue
@ -0,0 +1,78 @@
+<template>
+  <div class="system-tech-area">
+    <div class="system-title system-title-bg">有毒有害风险监控预警系统</div>
+
+    <system-tich-title :title="title0" />
+    <system-tech-content :tech-content="content0" />
+
+    <system-tich-title :title="title1" />
+    <system-tech-content :tech-content="content1"/>
+
+    <system-tich-title :title="title2" />
+    <system-tech-content :tech-content="content2"/>
+
+  </div>
+</template>
+
+<script>
+import SystemTichTitle from "@/views/SystemTechTitle";
+import SystemTechContent from "@/views/SystemTechContent";
+import constants from "@/api/constants";
+import { computed } from "vue";
+
+export default {
+  name: "SystemHarmfulAlarmPage",
+  components: { SystemTechContent, SystemTichTitle },
+  setup() {
+    const title0 = computed(() => {
+      return constants.systemHarmfulAlarmData[0].title;
+    });
+    const content0 = computed(() => {
+      return constants.systemHarmfulAlarmData[0].content;
+    });
+
+    const title1 = computed(() => {
+      return constants.systemHarmfulAlarmData[1].title;
+    });
+    const content1 = computed(() => {
+      return constants.systemHarmfulAlarmData[1].content;
+    });
+    const title2 = computed(() => {
+      return constants.systemHarmfulAlarmData[2].title;
+    });
+    const content2 = computed(() => {
+      return constants.systemHarmfulAlarmData[2].content;
+    });
+    return {
+      title0,
+      content0,
+      title1,
+      content1,
+      title2,
+      content2
+    };
+  }
+};
+</script>
+
+<style scoped>
+.system-tech-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.system-title {
+  color: white;
+  font-size: 50px;
+  width: 100%;
+  text-align: center;
+  padding-top: 170px;
+}
+
+.system-title-bg {
+  height: 350px;
+  background-image: url("./../assets/images/harmful_title_bg.png");
+}
+
+</style>
--- a/src/views/SystemProductWatchPage.vue
+++ b/src/views/SystemProductWatchPage.vue
@ -0,0 +1,48 @@
+<template>
+  <div class="system-tech-area">
+    <div class="system-title system-title-bg">生产监控系统</div>
+    <system-content2 v-for="(data,index) in systemWatchData" :techContent="data"/>
+  </div>
+</template>
+
+<script>
+import constants from "@/api/constants";
+import { computed } from "vue";
+import SystemContent2 from "@/views/SystemContent2";
+
+export default {
+  name: "SystemProductWatchPage",
+  components: { SystemContent2 },
+  setup() {
+    const systemWatchData = computed(() => {
+      return constants.systemWatchData;
+    });
+    return {
+      systemWatchData
+    };
+  }
+};
+</script>
+
+<style scoped>
+.system-tech-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.system-title {
+  color: white;
+  font-size: 50px;
+  width: 100%;
+  text-align: center;
+  padding-top: 170px;
+}
+
+.system-title-bg {
+  height: 350px;
+  background-image: url("./../assets/images/watch_title_bg.png");
+}
+
+</style>
+
--- a/src/views/SystemTechContent.vue
+++ b/src/views/SystemTechContent.vue
@ -0,0 +1,57 @@
+<template>
+  <div class="system-content-area common-width">
+    <slot name="header"></slot>
+    <div v-for="itemContent in techContent" class="cont-sub-area">
+      <div class="system-content-sub-title" v-text="itemContent.subTitle" v-if="itemContent.subTitle" />
+      <div class="system-content-text" style="margin-top: 35px" v-html="itemContent.contentText"></div>
+      <img class="system-content-img" :src="require(`@/assets/images/${itemContent.imgSrc}`)" v-if="itemContent.imgSrc" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "SystemTechContent",
+  props: {
+    techContent: {
+      type: Array,
+      default: [
+        {
+          subTitle: "",
+          contentText: "",
+          imgSrc: ""
+        }
+      ]
+    }
+  },
+};
+</script>
+
+<style scoped>
+.system-content-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.cont-sub-area {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.system-content-sub-title {
+  margin-top: 35px;
+  color: #666666;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.system-content-img {
+  width: 888px;
+  /*border: 1px solid green;*/
+  align-self: center;
+  margin-top: 30px;
+}
+</style>
--- a/src/views/SystemTechManagePage.vue
+++ b/src/views/SystemTechManagePage.vue
@ -0,0 +1,132 @@
+<template>
+  <div class="system-tech-area">
+    <div class="system-title system-title-bg">工艺报警管理系统</div>
+
+    <system-tich-title :title="title0" />
+    <system-tech-content :tech-content="content0"/>
+
+    <system-tich-title :title="title1" />
+    <system-tech-content :tech-content="content1">
+      <template v-slot:header>
+        <div class="func-area">
+          <div class="func-item" v-for="funcItem in funcItems">
+            <img :src= "require(`@/assets/images/${funcItem.imgSrc}`)" class="func-item-img">
+            <div class="func-item-text" v-text="funcItem.title"></div>
+          </div>
+        </div>
+      </template>
+    </system-tech-content>
+
+  </div>
+</template>
+
+<script>
+import SystemTichTitle from "@/views/SystemTechTitle";
+import SystemTechContent from "@/views/SystemTechContent";
+import constants from "@/api/constants";
+import { computed, reactive } from "vue";
+
+export default {
+  name: "SystemTechManagePage",
+  components: { SystemTechContent, SystemTichTitle },
+  setup() {
+    const title0 = computed(() => {
+      return constants.systemTechData[0].title
+    });
+    const content0 = computed(() => {
+      return constants.systemTechData[0].content
+    });
+
+    const title1 = computed(() => {
+      return constants.systemTechData[1].title
+    });
+    const content1 = computed(() => {
+      return constants.systemTechData[1].content
+    });
+    const funcItems = reactive([{
+      imgSrc:"manage-func-item0.png",
+      title:"仪表点位数据的采集和储存",
+    },{
+      imgSrc:"manage-func-item1.png",
+      title:"报警数据统计和展示",
+    },{
+      imgSrc:"manage-func-item2.png",
+      title:"报警电子台账和维护",
+    },{
+      imgSrc:"manage-func-item3.png",
+      title:"报警分析",
+    },{
+      imgSrc:"manage-func-item4.png",
+      title:"异常事件分析",
+    },{
+      imgSrc:"manage-func-item5.png",
+      title:"报警处置记录",
+    }]);
+
+    return {
+      title0,
+      content0,
+      title1,
+      content1,
+      funcItems,
+    };
+  }
+};
+</script>
+
+<style scoped>
+.system-tech-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.func-area{
+  display: flex;
+  flex-wrap: wrap;
+  width: 860px;
+  margin: 0 auto;
+  justify-content: space-between;
+  margin-top: 60px;
+}
+
+.func-item{
+  width:250px;
+  height: 216px;
+  /*border: 1px solid red;*/
+  position: relative;
+}
+
+.func-item:nth-child(n+4){
+  margin-top: 80px;
+}
+
+.func-item-img{
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.func-item-text{
+  font-size: 20px;
+  color: #666666;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+
+.system-title {
+  color: white;
+  font-size: 50px;
+  width: 100%;
+  text-align: center;
+  padding-top: 170px;
+}
+
+.system-title-bg {
+  height: 350px;
+  background-image: url("./../assets/images/product_title_bg.png");
+}
+
+
+</style>
--- a/src/views/SystemTechTitle.vue
+++ b/src/views/SystemTechTitle.vue
@ -0,0 +1,44 @@
+<template>
+  <div class="system-item-title-area common-width">
+    <div class="system-item-deliver" />
+    <div class="system-item-title" v-text="title"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SystemTichTitle",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    }
+  }
+};
+</script>
+
+<style scoped>
+.system-item-title-area {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  margin-top: 50px;
+}
+
+.system-item-deliver {
+  color: #00A0E9;
+  height: 70%;
+  border-left: 6px solid #00A0E9;
+  display: inline-block;
+}
+
+.system-item-title {
+  color: #00A0E9;
+  font-size: 26px;
+  line-height: 36px;
+  display: inline-block;
+  text-align: center;
+  margin-left: 8px;
+}
+
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,11 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  pages: {
+    index: {
+      entry: "src/main.js",
+      title: "洞见信息",
+    },
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock