大屏v1

bigscreen/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

bigscreen/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+    // 解决 Require 类型报错
+    '@typescript-eslint/no-var-requires': 0,
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

bigscreen/.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?

bigscreen/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 奔跑的面条
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

bigscreen/README.md

@@ -0,0 +1,160 @@
+**通知：最新的低代码大屏系统GoView已开源，详见：[https://gitee.com/MTrun/go-view](https://gitee.com/MTrun/go-view)**
+
+![输入图片说明](https://gitee.com/MTrun/go-view/raw/master/readme/logo-t-y.png)
+
+## 一、项目描述
+
+- 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "，使用 '.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下方 ECharts 和 DataV 文档。
+
+- [**Vue2 版本请点击这里查看，地图支持自动轮播哦~**](https://gitee.com/MTrun/big-screen-vue-datav)
+- [**React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ**](https://gitee.com/MTrun/react-big-screen)
+- 项目按照 1920*1080 比例设计，支持任何尺寸的同比例缩放。
+- 项目封装的 ECharts 区域使用了全部引入的方式，增加了打包体积，在实际运用中请使用 **按需引入**。
+- 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
+- 项目环境：@vue/cli-4.5.13、DataV-2.10、Echarts-5.1.1、Npm-6.14.6、Node-v14.16。
+- 请拉取 master 分支的代码，其余分支是开发分支。
+- 需要其它地图数据的，请查看我的其它项目（有一个地图合集）
+- 注意：dataV 暂不支持 Vue3 的数据更新，可以正常使用静态组件（边框等），如果动态数据修改的需求可以参考npm库 `bin-datav` 的源码进行更改。
+-  **好消息，dataV作者开放了 Vue3 版本，发布V1.0之后我会同步进行更新** 
+
+友情链接：
+
+1.  [Vue3 官方文档](https://composition-api.vuejs.org/zh/api.html#setup)
+2.  [DataV 官方文档](http://datav.jiaminghi.com/guide/)
+3.  [echarts 实例](https://echarts.apache.org/examples/zh/index.html)，[echarts API 文档](https://echarts.apache.org/zh/api.html#echarts)
+4.  [项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/vue-big-screen-plugin)
+
+项目展示
+![项目展示](https://images.gitee.com/uploads/images/2020/1208/183608_b893a510_4964818.gif "20201208_221020.gif")
+
+## 二、主要文件介绍
+
+| 文件                | 作用/功能                                                              |
+| ------------------- | --------------------------------------------------------------------- |
+| main.ts           | 主目录文件，引入注册 自定义组件、DataV 、样式等数据              |
+| views/*       | 界面各个区域组件按照位置来命名，index 是项目主结构                   |
+| constant/* | 静态数据项，所有的标题和图标都配置在这里                                |
+| utils/* | 全局公共函数（包含屏幕适配函数）                                          |
+| assets/*           | 静态资源目录，放置图片与全局样式（index 文件样式单独放在这里）   |
+| components/echart   | 封装的全局图表渲染函数                                       |
+| components/componentInstall | 全局组件注册位置                                    |
+| common/* | 通用数据配置项（放置 echart 样式与地图数据）                             |
+| router/* | 路由配置区域                                                           |
+| store/* | Vuex 相关区域                                                           |
+| src/ *.d.ts | 全局类型声明文件                                                     |
+
+## 三、使用介绍
+
+### 启动项目
+
+需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后最好是手动全屏查看（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
+
+如果安装完依赖 @jiaminghi 报错 `<template v-for> key should be placed on the <template> tag` 类似的bug，我已经做了修复，大家把此工程目录下的 `other_modules/@jiaminghi.rar` 解压并替换掉 node_modules 里面的同名文件（或者手动修改，只需要把 v-for 移动到下方标签里，并删除 template 即可），我已经给作者提了 Issues 希望大家拉取的时候没有这个错误
+
+如果大家不想每次都修改依赖，可以使用社区封装的 vue3 版本的 DataV：
+1. https://gitee.com/kjgl77/datav-vue3
+2. https://gitee.com/wangbin3162/bin-datav?_from=gitee_search
+
+### 封装组件渲染图表
+
+所有的 ECharts 图表渲染都是基于 `components/echart/index.tsx` 封装组件创建的，动态修改数据需要手动触发初始化函数 `initChart`，参考 `centerLeft1` 里的图表写法即可。如果遇到动态赋值图表无法监听到的时候，也可以调用这个函数进行手动更新。
+
+封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
+
+|参数名称              | 类型      | 作用/功能                      |
+| -------------------| --------- | ------------------------------|
+| id                 | String    | 唯一 id（非必填，项目使用 ref 指定节点） |
+| className          | String    | class样式名称（非必填）                    |
+| options            | Object    | ECharts 配置（非必填），可通过初始化参数打入 |
+| height             | String    | 图表高度（必填）                    |
+| width              | String    | 图表宽度（必填）                    |
+
+### TSX与封装组件的使用
+
+项目引入了 `babel-plugin-jsx` 依赖，可以直接使用 tsx 编写代码。 `src/views/chart` 下的文件使用了此方式编码，这里的文件专门处理数据内容，不涉及到任何的样式，并且返回的结构较为简单。
+
+项目全局注册了 `echart` 组件，使用的时候大体方式如下：
+
+```javascript
+setup(props) {
+    // ....此处省略n行代码
+    return () => {
+        const height = "xxx"
+        const width = "xxx"
+        return <div>
+          <echart ref={chartRef} height={height} width={width} />
+        </div>
+    }
+}
+```
+
+### 复用图表组件
+
+复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应样式，然后在复用的组件 `views/center/chart/draw.tsx` 里进行接收并在对应位置赋值即可。
+
+如：在调用处 `views/center.vue` 里去定义好数据并传入组件
+
+```js
+//组件调用
+<span>今日任务通过率</span>
+<chart :tips="rate[0].tips" :colorObj="rate[0].colorData" />
+
+<span>今日任务达标率</span>
+<chart :tips="rate[1].tips" :colorObj="rate[1].colorData" />
+
+...
+import Chart from '../center/chart/draw'
+components: {
+  Chart
+}
+setup() {
+    // ...
+    const rate = reactive([ 
+        {
+            id: "centerRate1",
+            tips: 60,
+            ...
+        },
+            {
+            id: "centerRate2",
+            tips: 40,
+            colorData: {
+            ...
+        }
+        }
+    ])
+    return {rate, ....}
+}
+```
+
+### 更换边框和图表
+
+边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
+如：
+
+```html
+<dv-border-box-1></dv-border-box-1>
+<dv-border-box-2></dv-border-box-2>
+<dv-border-box-3></dv-border-box-3>
+```
+
+图表的话可以去各个 `src/views/*/chart/draw.tsx` 修改 `ECharts` 的配置文件即可，如果觉得官网的案例不够好看可以去社区逛：[ECharts 社区地址](https://www.isqqw.com/homepage#/homepage)。
+
+### 屏幕适配
+
+屏幕适配方案放弃了rem 方案，使用更通用的 `css3：scale` 缩放方案，项目的基准尺寸是 `1920px*1080px`，所以支持用比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。实现代码在 `src/utils/userDraw.ts` 中，通过 `ref` 指向 `views/index` ，如果觉得适配方案不能试图您的场景，则可以自行修改方案。
+
+## 五、其它案例
+
+（重写结构，支持响应式布局）https://gitee.com/BigCatHome/koi-screen-plus
+    ![输入图片说明](https://koi-fish.oss-cn-beijing.aliyuncs.com/koi/screen/images/vue3.png)
+
+## 六、其余
+
+这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
+
+## 七、反馈
+
+QQ群: 495755841
+
+<img src="public/QQ2.png" width="200px"/>

bigscreen/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: ['@vue/babel-plugin-jsx']
+}

bigscreen/other_modules/README.md

@@ -0,0 +1,2 @@
+如果安装完依赖 @jiaminghi 报错 `<template v-for> key should be placed on the <template> tag`，就把这个文件替换掉 node_modules 里面的同名文件，我已经给作者提了 Issues 希望大家拉取的时候没有这个错误
+

bigscreen/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "vue-big-screen-plugin",
+  "version": "1.0.1",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
+    "core-js": "^3.6.5",
+    "echarts": "^5.1.1",
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/cli-plugin-babel": "~5.0.1",
+    "@vue/cli-plugin-eslint": "~5.0.1",
+    "@vue/cli-plugin-router": "~5.0.1",
+    "@vue/cli-plugin-typescript": "~5.0.1",
+    "@vue/cli-plugin-vuex": "~5.0.1",
+    "@vue/cli-service": "~5.0.1",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "eslint": "^8.10.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^12.6.0",
+    "typescript": "~4.6.2"
+  }
+}

bigscreen/public/index.html

@@ -0,0 +1,17 @@
+<!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">
+    <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>

bigscreen/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app {
+  width: 100vw;
+  height: 100vh;
+  background-color: #020308;
+  overflow: hidden;
+}
+</style>

bigscreen/src/assets/icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

bigscreen/src/assets/icon/demo_index.html

@@ -0,0 +1,832 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2091333" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">统计</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">统计2</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">统计4</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">指标2</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">分析2</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">分析7</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61b;</span>
+                <div class="name">分析5</div>
+                <div class="code-name">&amp;#xe61b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">数据7</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">应用</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7fb;</span>
+                <div class="name">lock</div>
+                <div class="code-name">&amp;#xe7fb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7fd;</span>
+                <div class="name">align-left</div>
+                <div class="code-name">&amp;#xe7fd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7fe;</span>
+                <div class="name">border-bottom</div>
+                <div class="code-name">&amp;#xe7fe;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe81b;</span>
+                <div class="name">cloud download</div>
+                <div class="code-name">&amp;#xe81b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe81c;</span>
+                <div class="name">cloud upload</div>
+                <div class="code-name">&amp;#xe81c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe86a;</span>
+                <div class="name">rank</div>
+                <div class="code-name">&amp;#xe86a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe86e;</span>
+                <div class="name">early-warning</div>
+                <div class="code-name">&amp;#xe86e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe888;</span>
+                <div class="name">vector</div>
+                <div class="code-name">&amp;#xe888;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe88e;</span>
+                <div class="name">monitoring</div>
+                <div class="code-name">&amp;#xe88e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe88f;</span>
+                <div class="name">diagnose</div>
+                <div class="code-name">&amp;#xe88f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe892;</span>
+                <div class="name">Directory tree</div>
+                <div class="code-name">&amp;#xe892;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe89e;</span>
+                <div class="name">application</div>
+                <div class="code-name">&amp;#xe89e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe777;</span>
+                <div class="name">supervise</div>
+                <div class="code-name">&amp;#xe777;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe78c;</span>
+                <div class="name">chart-pie-alt</div>
+                <div class="code-name">&amp;#xe78c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe78f;</span>
+                <div class="name">chart-area</div>
+                <div class="code-name">&amp;#xe78f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe790;</span>
+                <div class="name">chart-line</div>
+                <div class="code-name">&amp;#xe790;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe791;</span>
+                <div class="name">chart-bar</div>
+                <div class="code-name">&amp;#xe791;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe797;</span>
+                <div class="name">laptop</div>
+                <div class="code-name">&amp;#xe797;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f7;</span>
+                <div class="name">layer-group</div>
+                <div class="code-name">&amp;#xe7f7;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1620956942234') format('woff2'),
+       url('iconfont.woff?t=1620956942234') format('woff'),
+       url('iconfont.ttf?t=1620956942234') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongji"></span>
+            <div class="name">
+              统计
+            </div>
+            <div class="code-name">.icon-tongji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongji2"></span>
+            <div class="name">
+              统计2
+            </div>
+            <div class="code-name">.icon-tongji2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongji4"></span>
+            <div class="name">
+              统计4
+            </div>
+            <div class="code-name">.icon-tongji4
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhibiao2"></span>
+            <div class="name">
+              指标2
+            </div>
+            <div class="code-name">.icon-zhibiao2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fenxi2"></span>
+            <div class="name">
+              分析2
+            </div>
+            <div class="code-name">.icon-fenxi2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fenxi7"></span>
+            <div class="name">
+              分析7
+            </div>
+            <div class="code-name">.icon-fenxi7
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fenxi5"></span>
+            <div class="name">
+              分析5
+            </div>
+            <div class="code-name">.icon-fenxi5
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shuju7"></span>
+            <div class="name">
+              数据7
+            </div>
+            <div class="code-name">.icon-shuju7
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yingyong"></span>
+            <div class="name">
+              应用
+            </div>
+            <div class="code-name">.icon-yingyong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-lock"></span>
+            <div class="name">
+              lock
+            </div>
+            <div class="code-name">.icon-lock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-align-left"></span>
+            <div class="name">
+              align-left
+            </div>
+            <div class="code-name">.icon-align-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-border-bottom"></span>
+            <div class="name">
+              border-bottom
+            </div>
+            <div class="code-name">.icon-border-bottom
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-clouddownload"></span>
+            <div class="name">
+              cloud download
+            </div>
+            <div class="code-name">.icon-clouddownload
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cloudupload"></span>
+            <div class="name">
+              cloud upload
+            </div>
+            <div class="code-name">.icon-cloudupload
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rank"></span>
+            <div class="name">
+              rank
+            </div>
+            <div class="code-name">.icon-rank
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-early-warning"></span>
+            <div class="name">
+              early-warning
+            </div>
+            <div class="code-name">.icon-early-warning
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-vector"></span>
+            <div class="name">
+              vector
+            </div>
+            <div class="code-name">.icon-vector
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-monitoring"></span>
+            <div class="name">
+              monitoring
+            </div>
+            <div class="code-name">.icon-monitoring
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-diagnose"></span>
+            <div class="name">
+              diagnose
+            </div>
+            <div class="code-name">.icon-diagnose
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-Directory-tree"></span>
+            <div class="name">
+              Directory tree
+            </div>
+            <div class="code-name">.icon-Directory-tree
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-application"></span>
+            <div class="name">
+              application
+            </div>
+            <div class="code-name">.icon-application
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-supervise"></span>
+            <div class="name">
+              supervise
+            </div>
+            <div class="code-name">.icon-supervise
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chart-pie-alt"></span>
+            <div class="name">
+              chart-pie-alt
+            </div>
+            <div class="code-name">.icon-chart-pie-alt
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chart-area"></span>
+            <div class="name">
+              chart-area
+            </div>
+            <div class="code-name">.icon-chart-area
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chart-line"></span>
+            <div class="name">
+              chart-line
+            </div>
+            <div class="code-name">.icon-chart-line
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chart-bar"></span>
+            <div class="name">
+              chart-bar
+            </div>
+            <div class="code-name">.icon-chart-bar
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-laptop"></span>
+            <div class="name">
+              laptop
+            </div>
+            <div class="code-name">.icon-laptop
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-layer-group"></span>
+            <div class="name">
+              layer-group
+            </div>
+            <div class="code-name">.icon-layer-group
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongji"></use>
+                </svg>
+                <div class="name">统计</div>
+                <div class="code-name">#icon-tongji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongji2"></use>
+                </svg>
+                <div class="name">统计2</div>
+                <div class="code-name">#icon-tongji2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongji4"></use>
+                </svg>
+                <div class="name">统计4</div>
+                <div class="code-name">#icon-tongji4</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhibiao2"></use>
+                </svg>
+                <div class="name">指标2</div>
+                <div class="code-name">#icon-zhibiao2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fenxi2"></use>
+                </svg>
+                <div class="name">分析2</div>
+                <div class="code-name">#icon-fenxi2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fenxi7"></use>
+                </svg>
+                <div class="name">分析7</div>
+                <div class="code-name">#icon-fenxi7</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fenxi5"></use>
+                </svg>
+                <div class="name">分析5</div>
+                <div class="code-name">#icon-fenxi5</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shuju7"></use>
+                </svg>
+                <div class="name">数据7</div>
+                <div class="code-name">#icon-shuju7</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yingyong"></use>
+                </svg>
+                <div class="name">应用</div>
+                <div class="code-name">#icon-yingyong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-lock"></use>
+                </svg>
+                <div class="name">lock</div>
+                <div class="code-name">#icon-lock</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-align-left"></use>
+                </svg>
+                <div class="name">align-left</div>
+                <div class="code-name">#icon-align-left</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-border-bottom"></use>
+                </svg>
+                <div class="name">border-bottom</div>
+                <div class="code-name">#icon-border-bottom</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-clouddownload"></use>
+                </svg>
+                <div class="name">cloud download</div>
+                <div class="code-name">#icon-clouddownload</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cloudupload"></use>
+                </svg>
+                <div class="name">cloud upload</div>
+                <div class="code-name">#icon-cloudupload</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rank"></use>
+                </svg>
+                <div class="name">rank</div>
+                <div class="code-name">#icon-rank</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-early-warning"></use>
+                </svg>
+                <div class="name">early-warning</div>
+                <div class="code-name">#icon-early-warning</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-vector"></use>
+                </svg>
+                <div class="name">vector</div>
+                <div class="code-name">#icon-vector</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-monitoring"></use>
+                </svg>
+                <div class="name">monitoring</div>
+                <div class="code-name">#icon-monitoring</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-diagnose"></use>
+                </svg>
+                <div class="name">diagnose</div>
+                <div class="code-name">#icon-diagnose</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-Directory-tree"></use>
+                </svg>
+                <div class="name">Directory tree</div>
+                <div class="code-name">#icon-Directory-tree</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-application"></use>
+                </svg>
+                <div class="name">application</div>
+                <div class="code-name">#icon-application</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-supervise"></use>
+                </svg>
+                <div class="name">supervise</div>
+                <div class="code-name">#icon-supervise</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chart-pie-alt"></use>
+                </svg>
+                <div class="name">chart-pie-alt</div>
+                <div class="code-name">#icon-chart-pie-alt</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chart-area"></use>
+                </svg>
+                <div class="name">chart-area</div>
+                <div class="code-name">#icon-chart-area</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chart-line"></use>
+                </svg>
+                <div class="name">chart-line</div>
+                <div class="code-name">#icon-chart-line</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chart-bar"></use>
+                </svg>
+                <div class="name">chart-bar</div>
+                <div class="code-name">#icon-chart-bar</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-laptop"></use>
+                </svg>
+                <div class="name">laptop</div>
+                <div class="code-name">#icon-laptop</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-layer-group"></use>
+                </svg>
+                <div class="name">layer-group</div>
+                <div class="code-name">#icon-layer-group</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

bigscreen/src/assets/icon/iconfont.css

@@ -0,0 +1,127 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2091333 */
+  src: url('iconfont.woff2?t=1620956942234') format('woff2'),
+       url('iconfont.woff?t=1620956942234') format('woff'),
+       url('iconfont.ttf?t=1620956942234') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tongji:before {
+  content: "\e615";
+}
+
+.icon-tongji2:before {
+  content: "\e616";
+}
+
+.icon-tongji4:before {
+  content: "\e617";
+}
+
+.icon-zhibiao2:before {
+  content: "\e618";
+}
+
+.icon-fenxi2:before {
+  content: "\e619";
+}
+
+.icon-fenxi7:before {
+  content: "\e61a";
+}
+
+.icon-fenxi5:before {
+  content: "\e61b";
+}
+
+.icon-shuju7:before {
+  content: "\e61c";
+}
+
+.icon-yingyong:before {
+  content: "\e62b";
+}
+
+.icon-lock:before {
+  content: "\e7fb";
+}
+
+.icon-align-left:before {
+  content: "\e7fd";
+}
+
+.icon-border-bottom:before {
+  content: "\e7fe";
+}
+
+.icon-clouddownload:before {
+  content: "\e81b";
+}
+
+.icon-cloudupload:before {
+  content: "\e81c";
+}
+
+.icon-rank:before {
+  content: "\e86a";
+}
+
+.icon-early-warning:before {
+  content: "\e86e";
+}
+
+.icon-vector:before {
+  content: "\e888";
+}
+
+.icon-monitoring:before {
+  content: "\e88e";
+}
+
+.icon-diagnose:before {
+  content: "\e88f";
+}
+
+.icon-Directory-tree:before {
+  content: "\e892";
+}
+
+.icon-application:before {
+  content: "\e89e";
+}
+
+.icon-supervise:before {
+  content: "\e777";
+}
+
+.icon-chart-pie-alt:before {
+  content: "\e78c";
+}
+
+.icon-chart-area:before {
+  content: "\e78f";
+}
+
+.icon-chart-line:before {
+  content: "\e790";
+}
+
+.icon-chart-bar:before {
+  content: "\e791";
+}
+
+.icon-laptop:before {
+  content: "\e797";
+}
+
+.icon-layer-group:before {
+  content: "\e7f7";
+}
+

bigscreen/src/assets/icon/iconfont.json

@@ -0,0 +1,205 @@
+{
+  "id": "2091333",
+  "name": "react可视化",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "15383964",
+      "name": "统计",
+      "font_class": "tongji",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "15383969",
+      "name": "统计2",
+      "font_class": "tongji2",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "15383974",
+      "name": "统计4",
+      "font_class": "tongji4",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "15383975",
+      "name": "指标2",
+      "font_class": "zhibiao2",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "15392648",
+      "name": "分析2",
+      "font_class": "fenxi2",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "15392654",
+      "name": "分析7",
+      "font_class": "fenxi7",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "15392658",
+      "name": "分析5",
+      "font_class": "fenxi5",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "15392671",
+      "name": "数据7",
+      "font_class": "shuju7",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "15736987",
+      "name": "应用",
+      "font_class": "yingyong",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "6151228",
+      "name": "lock",
+      "font_class": "lock",
+      "unicode": "e7fb",
+      "unicode_decimal": 59387
+    },
+    {
+      "icon_id": "6151231",
+      "name": "align-left",
+      "font_class": "align-left",
+      "unicode": "e7fd",
+      "unicode_decimal": 59389
+    },
+    {
+      "icon_id": "6151232",
+      "name": "border-bottom",
+      "font_class": "border-bottom",
+      "unicode": "e7fe",
+      "unicode_decimal": 59390
+    },
+    {
+      "icon_id": "6151277",
+      "name": "cloud download",
+      "font_class": "clouddownload",
+      "unicode": "e81b",
+      "unicode_decimal": 59419
+    },
+    {
+      "icon_id": "6151278",
+      "name": "cloud upload",
+      "font_class": "cloudupload",
+      "unicode": "e81c",
+      "unicode_decimal": 59420
+    },
+    {
+      "icon_id": "6303226",
+      "name": "rank",
+      "font_class": "rank",
+      "unicode": "e86a",
+      "unicode_decimal": 59498
+    },
+    {
+      "icon_id": "6353292",
+      "name": "early-warning",
+      "font_class": "early-warning",
+      "unicode": "e86e",
+      "unicode_decimal": 59502
+    },
+    {
+      "icon_id": "8762556",
+      "name": "vector",
+      "font_class": "vector",
+      "unicode": "e888",
+      "unicode_decimal": 59528
+    },
+    {
+      "icon_id": "9340469",
+      "name": "monitoring",
+      "font_class": "monitoring",
+      "unicode": "e88e",
+      "unicode_decimal": 59534
+    },
+    {
+      "icon_id": "9340470",
+      "name": "diagnose",
+      "font_class": "diagnose",
+      "unicode": "e88f",
+      "unicode_decimal": 59535
+    },
+    {
+      "icon_id": "11307823",
+      "name": "Directory tree",
+      "font_class": "Directory-tree",
+      "unicode": "e892",
+      "unicode_decimal": 59538
+    },
+    {
+      "icon_id": "12253601",
+      "name": "application",
+      "font_class": "application",
+      "unicode": "e89e",
+      "unicode_decimal": 59550
+    },
+    {
+      "icon_id": "6150971",
+      "name": "supervise",
+      "font_class": "supervise",
+      "unicode": "e777",
+      "unicode_decimal": 59255
+    },
+    {
+      "icon_id": "6151030",
+      "name": "chart-pie-alt",
+      "font_class": "chart-pie-alt",
+      "unicode": "e78c",
+      "unicode_decimal": 59276
+    },
+    {
+      "icon_id": "6151033",
+      "name": "chart-area",
+      "font_class": "chart-area",
+      "unicode": "e78f",
+      "unicode_decimal": 59279
+    },
+    {
+      "icon_id": "6151034",
+      "name": "chart-line",
+      "font_class": "chart-line",
+      "unicode": "e790",
+      "unicode_decimal": 59280
+    },
+    {
+      "icon_id": "6151035",
+      "name": "chart-bar",
+      "font_class": "chart-bar",
+      "unicode": "e791",
+      "unicode_decimal": 59281
+    },
+    {
+      "icon_id": "6151041",
+      "name": "laptop",
+      "font_class": "laptop",
+      "unicode": "e797",
+      "unicode_decimal": 59287
+    },
+    {
+      "icon_id": "6151223",
+      "name": "layer-group",
+      "font_class": "layer-group",
+      "unicode": "e7f7",
+      "unicode_decimal": 59383
+    }
+  ]
+}

bigscreen/src/assets/scss/_variables.scss

@@ -0,0 +1,97 @@
+// 颜色
+$colors: (
+  "primary": #db9e3f,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+);
+
+// 字体大小
+$base-font-size: 16px;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25 //20px,,,,
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.d-flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 16px;
+$spacing-sizes: (
+  0: 0,
+  1: 0.25,
+  2: 0.5,
+  3: 1,
+  4: 1.5,
+  5: 3,
+);

bigscreen/src/assets/scss/index.scss

@@ -0,0 +1,142 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url('../../assets/pageBg.png');
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 24px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 18px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #0f1325;
+
+      .react-before {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns:  4fr 4fr 4fr ;
+      }
+
+      // 底部数据
+      .bototm-box {
+        margin-top: 10px;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+      }
+    }
+  }
+}

bigscreen/src/assets/scss/style.scss

@@ -0,0 +1,193 @@
+@import "./variables";
+
+//  全局样式
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  box-sizing: border-box;
+  outline: none;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.2em;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+a {
+  color: #343440;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+// 图标
+.iconfont {
+  font-size: 20px!important;
+  color: #5cd9e8;
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.fw-b {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bg-color-black {
+  background-color: rgba(19, 25, 47, 0.6);
+}
+
+.bg-color-blue {
+  background-color: #1a5cd7;
+}
+
+.colorBlack {
+  color: #272727 !important;
+
+  &:hover {
+    color: #272727 !important;
+  }
+}
+
+.colorGrass {
+  color: #33cea0;
+
+  &:hover {
+    color: #33cea0 !important;
+  }
+}
+
+.colorRed {
+  color: #ff5722;
+
+  &:hover {
+    color: #ff5722 !important;
+  }
+}
+
+.colorText {
+  color: #d3d6dd !important;
+
+  &:hover {
+    color: #d3d6dd !important;
+  }
+}
+
+.colorBlue {
+  color: #257dff !important;
+
+  &:hover {
+    color: #257dff !important;
+  }
+}
+
+//颜色
+@each $colorkey, $color in $colors {
+  .text-#{$colorkey} {
+    color: $color;
+  }
+
+  .bg-#{$colorkey} {
+    background-color: $color;
+  }
+}
+
+//对齐
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
+//flex
+@each $key, $value in $flex-jc {
+  .jc-#{$key} {
+    justify-content: $value;
+  }
+}
+
+@each $key, $value in $flex-ai {
+  .ai-#{$key} {
+    align-items: $value;
+  }
+}
+
+//字体
+@each $fontkey, $fontvalue in $font-sizes {
+  .fs-#{$fontkey} {
+    font-size: $fontvalue * $base-font-size;
+  }
+}
+
+//.mt-1 => margin top
+//spacing
+
+@each $typekey, $type in $spacing-types {
+  //.m-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
+      .#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .#{$typekey} {
+    #{$type}: 0;
+  }
+}

bigscreen/src/common/echart/style/theme.js

@@ -0,0 +1,453 @@
+const theme = {
+  color: ['#2d8cf0', '#19be6b', '#ff9900', '#E46CBB', '#9A66E4', '#ed3f14'],
+  backgroundColor: 'rgba(0,0,0,0)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#516b91'
+    },
+    subtextStyle: {
+      color: '#93b7e3'
+    }
+  },
+  line: {
+    itemStyle: {
+      normal: {
+        borderWidth: '2'
+      }
+    },
+    lineStyle: {
+      normal: {
+        width: '2'
+      }
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true
+  },
+  radar: {
+    itemStyle: {
+      normal: {
+        borderWidth: '2'
+      }
+    },
+    lineStyle: {
+      normal: {
+        width: '2'
+      }
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true
+  },
+  bar: {
+    itemStyle: {
+      normal: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc'
+      },
+      emphasis: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc'
+      }
+    }
+  },
+  pie: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  scatter: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  parallel: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  sankey: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  funnel: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  gauge: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      normal: {
+        color: '#edafda',
+        color0: 'transparent',
+        borderColor: '#d680bc',
+        borderColor0: '#8fd3e8',
+        borderWidth: '2'
+      }
+    }
+  },
+  graph: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    },
+    lineStyle: {
+      normal: {
+        width: 1,
+        color: '#aaa'
+      }
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true,
+    color: ['#2d8cf0', '#19be6b', '#f5ae4a', '#9189d5', '#56cae2', '#cbb0e3'],
+    label: {
+      normal: {
+        textStyle: {
+          color: '#eee'
+        }
+      }
+    }
+  },
+  map: {
+    itemStyle: {
+      normal: {
+        areaColor: '#f3f3f3',
+        borderColor: '#516b91',
+        borderWidth: 0.5
+      },
+      emphasis: {
+        areaColor: 'rgba(165,231,240,1)',
+        borderColor: '#516b91',
+        borderWidth: 1
+      }
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: '#000'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: 'rgb(81,107,145)'
+        }
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      normal: {
+        areaColor: '#f3f3f3',
+        borderColor: '#516b91',
+        borderWidth: 0.5
+      },
+      emphasis: {
+        areaColor: 'rgba(165,231,240,1)',
+        borderColor: '#516b91',
+        borderWidth: 1
+      }
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: '#000'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: 'rgb(81,107,145)'
+        }
+      }
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#999999'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#999999'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      normal: {
+        borderColor: '#999'
+      },
+      emphasis: {
+        borderColor: '#666'
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#ccc',
+        width: 1
+      },
+      crossStyle: {
+        color: '#ccc',
+        width: 1
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: '#8fd3e8',
+      width: 1
+    },
+    itemStyle: {
+      normal: {
+        color: '#8fd3e8',
+        borderWidth: 1
+      },
+      emphasis: {
+        color: '#8fd3e8'
+      }
+    },
+    controlStyle: {
+      normal: {
+        color: '#8fd3e8',
+        borderColor: '#8fd3e8',
+        borderWidth: 0.5
+      },
+      emphasis: {
+        color: '#8fd3e8',
+        borderColor: '#8fd3e8',
+        borderWidth: 0.5
+      }
+    },
+    checkpointStyle: {
+      color: '#8fd3e8',
+      borderColor: 'rgba(138,124,168,0.37)'
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: '#8fd3e8'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: '#8fd3e8'
+        }
+      }
+    }
+  },
+  visualMap: {
+    color: ['#516b91', '#59c4e6', '#a5e7f0']
+  },
+  dataZoom: {
+    backgroundColor: 'rgba(0,0,0,0)',
+    dataBackgroundColor: 'rgba(255,255,255,0.3)',
+    fillerColor: 'rgba(167,183,204,0.4)',
+    handleColor: '#a7b7cc',
+    handleSize: '100%',
+    textStyle: {
+      color: '#333'
+    }
+  },
+  markPoint: {
+    label: {
+      normal: {
+        textStyle: {
+          color: '#eee'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: '#eee'
+        }
+      }
+    }
+  }
+}
+export default theme

bigscreen/src/components/componentInstall.ts

@@ -0,0 +1,11 @@
+import type { DefineComponent } from 'vue'
+
+const component = Object.create(null)
+/* eslint-disable */
+import Echart from './echartCanvas/index'
+
+component.install = function (vue: DefineComponent) {
+  // ECharts 图表渲染
+  vue.component('echart', Echart)
+}
+export default component

bigscreen/src/components/echartCanvas/index.tsx

@@ -0,0 +1,94 @@
+import { defineComponent, onMounted, ref, watch, onBeforeUnmount, reactive } from 'vue'
+import '@/common/echart/map/fujian.js'
+import theme from '@/common/echart/style/theme.js' // 引入默认主题
+import * as echarts from 'echarts'
+
+// 定义类型
+const PropsType = {
+  // 图表唯一 id
+  id: String,
+  // 图表类名
+  className: {
+    type: String,
+    default: 'chart'
+  },
+  // 图表宽度
+  width: {
+    type: String,
+    require: true
+  },
+  // 图表高度
+  height: {
+    type: String,
+    require: true
+  },
+  // 图表数据项
+  options: {
+    type: Object,
+    default: () => ({}),
+  }
+} as const
+
+export default defineComponent({
+  name: 'Echarts',
+  props: PropsType,
+  setup(props, { expose }) {
+    const chartRef = ref<HTMLElement>()
+    const charts = {
+      chart: null
+    }
+    
+    /**
+     * 初始化echart
+     * @param data 数据项
+     * @param clearCaching 是否清除缓存
+     */
+    const initChart = (data?: any, clearCaching = false) => {
+      if (data || props.options) {
+        charts.chart.setOption(data || props.options, clearCaching)
+      }
+    }
+
+    // 生命周期
+    onMounted(() => {
+      // 定义实例
+      echarts.registerTheme('myTheme', theme) // 覆盖默认主题
+      charts.chart = echarts.init(chartRef.value, 'myTheme')
+      initChart()
+    })
+    onBeforeUnmount(() => {
+      charts.chart.dispose()
+      charts.chart = null
+    })
+
+    // 监听改变
+    watch(
+      () => props.options,
+      val => {
+        val && initChart(val)
+      },
+      {
+        deep: true
+      }
+    )
+
+    // 对外暴露接口
+    expose({
+      chartRef,
+      initChart
+    });
+
+    return () => {
+      const { id, className, height, width } = props
+      return <div
+        ref={chartRef}
+        id={id as string}
+        class={className as string}
+        style={{
+          'height': height as string,
+          'width': width as string
+        }}
+      />
+    }
+  }
+})

bigscreen/src/constant/index.d.ts

@@ -0,0 +1,5 @@
+// 各类标题与图标
+export type ModuleInfo = {
+  name: string
+  icon: string
+}[]

bigscreen/src/constant/index.ts

@@ -0,0 +1,37 @@
+import { ModuleInfo } from './index.d'
+
+// 星期
+export const WEEK = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+
+// 主题名称与副标题名称
+export const title = '欧康立体仓可视化平台'
+export const subtitle = ['库位分析', '任务', '托盘']
+
+export const moduleInfo: ModuleInfo = [
+  // 中间的几个模块
+  {
+    name: '任务通过率',
+    icon: 'icon-chart-bar',
+  },
+  {
+    name: '地图数据',
+    icon: 'icon-tongji4',
+  },
+  {
+    name: '产品销售渠道分析',
+    icon: 'icon-align-left',
+  },
+  {
+    name: '任务完成排行榜',
+    icon: 'icon-zhibiao2',
+  },
+  // 底部两个模块
+  {
+    name: '数据统计图',
+    icon: 'icon-vector',
+  },
+  {
+    name: '工单修复以及满意度统计图',
+    icon: 'icon-fenxi7',
+  },
+]

bigscreen/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import dataV from '@jiaminghi/data-view';
+// 引入全局css
+import './assets/scss/style.scss';
+// 引入图表（所有图标见 icon 目录下的 demo_index.html）
+import './assets/icon/iconfont.css'
+// 引入 全局注册组件
+import PublicComponent from '@/components/componentInstall';
+
+const app = createApp(App)
+app.use(PublicComponent)
+app.use(dataV)
+app.use(store)
+app.use(router)
+app.mount('#app')

bigscreen/src/router/index.ts

@@ -0,0 +1,16 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Index',
+    component: () => import('../views/index/index.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router

bigscreen/src/shims-plugins-d.ts

@@ -0,0 +1 @@
+declare module '@jiaminghi/data-view';

bigscreen/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

bigscreen/src/store/index.ts

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

bigscreen/src/utils/index.ts

@@ -0,0 +1,36 @@
+/**
+ * @param {date} time 需要转换的时间
+ * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ * @returns {String}
+ */
+export const formatTime = (
+  time: string | number | Date,
+  fmt: string
+): string => {
+  if (!time) return ''
+  const date = new Date(time)
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'H+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    S: date.getMilliseconds(),
+  }
+  if (/(y+)/.test(fmt))
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+    )
+  for (const k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        // @ts-ignore: Unreachable code error
+        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+      )
+    }
+  }
+  return fmt
+}

bigscreen/src/utils/useDraw.ts

@@ -0,0 +1,60 @@
+import { ref } from 'vue'
+
+export default function useDraw() {
+  // * 指向最外层容器
+  const appRef = ref()
+  // * 定时函数
+  const timer = ref(0)
+  // * 默认缩放值
+  const scale = {
+    width: '1',
+    height: '1',
+  }
+  // * 设计稿尺寸（px）
+  const baseWidth = 1920
+  const baseHeight = 1080
+
+  // * 需保持的比例（默认1.77778）
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    // 当前宽高比
+    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+    if (appRef.value) {
+      if (currentRate > baseProportion) {
+        // 表示更宽
+        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+        scale.height = (window.innerHeight / baseHeight).toFixed(5)
+        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+      } else {
+        // 表示更高
+        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+        scale.width = (window.innerWidth / baseWidth).toFixed(5)
+        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+      }
+    }
+  }
+
+  const resize = () => {
+    clearTimeout(timer.value)
+    timer.value = setTimeout(() => {
+      calcRate()
+    }, 200)
+  }
+
+  // 改变窗口大小重新绘制
+  const windowDraw = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // 改变窗口大小重新绘制
+  const unWindowDraw = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    appRef,
+    calcRate,
+    windowDraw,
+    unWindowDraw
+  }
+}

bigscreen/src/views/bottomLeft/chart/draw.tsx

@@ -0,0 +1,154 @@
+import { defineComponent, watch, ref } from 'vue'
+import * as echarts from 'echarts'
+// 声明类型
+const PropsType = {
+  cdata: {
+    type: Object,
+    require: true
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 定义 ref
+    const chartRef = ref()
+    // 配置项
+    let options = {}
+
+    // 监听
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          tooltip: {
+            show: true,
+            trigger: "item",
+            axisPointer: {
+              type: "shadow",
+              label: {
+                show: true,
+                backgroundColor: "#7B7DDC"
+              }
+            }
+          },
+          legend: {
+            show: true,
+          },
+          grid: {
+            x: "8%",
+            width: "88%",
+            top: "5%",
+            bottom: '7%'
+          },
+          xAxis: {
+            data: val.category,
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              splitLine: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: "#B4B4B4"
+                }
+              },
+
+              axisLabel: {
+                formatter: "{value} "
+              }
+            },
+            {
+              splitLine: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: "#B4B4B4"
+                }
+              },
+              axisLabel: {
+                formatter: "{value} "
+              }
+            }
+          ],
+          series: [
+            {
+              name: "贯通率",
+              type: "line",
+              smooth: true,
+              showAllSymbol: true,
+              symbol: "emptyCircle",
+              symbolSize: 8,
+              yAxisIndex: 1,
+              itemStyle: {
+                normal: {
+                  color: "#F02FC2"
+                }
+              },
+              data: val.rateData
+            },
+            {
+              name: "已贯通",
+              type: "bar",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#956FD4" },
+                    { offset: 1, color: "#3EACE5" }
+                  ])
+                }
+              },
+              data: val.barData
+            },
+            {
+              name: "计划贯通",
+              type: "bar",
+              barGap: "-100%",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "rgba(156,107,211,0.8)" },
+                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                    { offset: 1, color: "rgba(156,107,211,0.2)" }
+                  ])
+                }
+              },
+              z: -12,
+              data: val.lineData
+            }
+          ]
+        }
+        // 手动触发更新
+        if (chartRef.value) {
+          // 通过初始化参数打入数据
+          chartRef.value.initChart(options)
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    return () => {
+      const height = "450px"
+      const width = "100%"
+
+      return <div>
+        <echart ref={chartRef} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

bigscreen/src/views/bottomLeft/chart/index.tsx

@@ -0,0 +1,137 @@
+import { defineComponent, reactive, onMounted } from 'vue'
+import Draw from './draw'
+
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const cdata = reactive({
+      category: [
+        "市区",
+        "万州",
+        "江北",
+        "南岸",
+        "北碚",
+        "綦南",
+        "长寿",
+        "永川",
+        "璧山",
+        "江津",
+        "城口",
+        "大足",
+        "垫江",
+        "丰都",
+        "奉节",
+        "合川",
+        "江津区",
+        "开州",
+        "南川",
+        "彭水",
+        "黔江",
+        "石柱",
+        "铜梁",
+        "潼南",
+        "巫山",
+        "巫溪",
+        "武隆",
+        "秀山",
+        "酉阳",
+        "云阳",
+        "忠县",
+        "川东",
+        "检修"
+      ],
+      lineData: [
+        18092,
+        20728,
+        24045,
+        28348,
+        32808,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        56061,
+        62677,
+        59521,
+        67560,
+        18092,
+        20728,
+        24045,
+        28348,
+        32808,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        50061,
+        32677,
+        49521,
+        32808
+      ],
+      barData: [
+        4600,
+        5000,
+        5500,
+        6500,
+        7500,
+        8500,
+        9900,
+        12500,
+        14000,
+        21500,
+        23200,
+        24450,
+        25250,
+        33300,
+        4600,
+        5000,
+        5500,
+        6500,
+        7500,
+        8500,
+        9900,
+        22500,
+        14000,
+        21500,
+        8500,
+        9900,
+        12500,
+        14000,
+        21500,
+        23200,
+        24450,
+        25250,
+        7500
+      ],
+      rateData: []
+    })
+
+    // methods
+    const setData = () => {
+      for (let i = 0; i < cdata.barData.length - 1; i++) {
+        const rate = cdata.barData[i] / cdata.lineData[i];
+        cdata.rateData.push(rate.toFixed(2));
+      }
+    }
+
+    // 生命周期
+    onMounted(() => {
+      setData()
+    })
+
+    return () => {
+      return <div>
+        <Draw cdata={cdata} />
+      </div>
+    }
+  }
+})

bigscreen/src/views/bottomLeft/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bottomLeft">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-chart-line" />
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2 mt-1">数据统计图</span>
+        </div>
+      </div>
+      <div>
+        <chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Chart from "./chart/index";
+export default defineComponent({
+  components: {
+    Chart
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$box-height: 520px;
+$box-width: 100%;
+.bottomLeft {
+  padding: 20px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 35px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

bigscreen/src/views/bottomRight/chart/draw.tsx

@@ -0,0 +1,165 @@
+import { defineComponent, watch, ref } from 'vue';
+
+const PropsType = {
+  cdata: {
+    type: Object,
+    require: true
+  }
+} as const;
+
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    const chartRef = ref();
+    
+    // 颜色配置
+    const colorList = {
+      inColor: {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 0,
+        colorStops: [
+          { offset: 0, color: "#1c98e8" },
+          { offset: 1, color: "#28f8de" }
+        ]
+      },
+      outColor: {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 0,
+        colorStops: [
+          { offset: 0, color: "#ff7c7c" },
+          { offset: 1, color: "#ffb96e" }
+        ]
+      },
+      inArea: {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: "rgba(35,184,210,.2)" },
+          { offset: 1, color: "rgba(35,184,210,0)" }
+        ]
+      },
+      outArea: {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: "rgba(255,124,124,.2)" },
+          { offset: 1, color: "rgba(255,185,110,0)" }
+        ]
+      }
+    };
+    
+    let options = {};
+
+    watch(
+      () => props.cdata,
+      (val) => {
+        options = {
+          title: {
+            text: "每日出入库趋势",
+            textStyle: {
+              color: "#D3D6DD",
+              fontSize: 24,
+              fontWeight: "normal"
+            },
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'axis',
+            formatter: function(params) {
+              let result = params[0].name + '<br/>';
+              params.forEach(item => {
+                const type = item.seriesIndex === 0 ? '入库' : '出库';
+                result += `${item.marker} ${type}: ${item.value}<br/>`;
+              });
+              return result;
+            }
+          },
+          legend: {
+            data: ['入库', '出库'],
+            right: 20,
+            top: 10,
+            textStyle: { color: '#fff' }
+          },
+          grid: {
+            left: 50,
+            right: 50,
+            bottom: 50,
+            top: 100,
+            containLabel: true
+          },
+          xAxis: {
+            type: "category",
+            axisLine: { lineStyle: { color: "rgba(255,255,255,.5)" } },
+            axisLabel: { color: "rgba(255,255,255,.8)", fontSize: 12 },
+            data: val.weekCategory
+          },
+          yAxis: {
+            type: "value",
+            name: "数量",
+            nameTextStyle: { color: "rgba(255,255,255,.5)", fontSize: 14 },
+            max: val.maxData,
+            splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+            axisLabel: { color: "rgba(255,255,255,.8)", fontSize: 12 }
+          },
+          series: [
+            {
+              name: "入库",
+              type: "line",
+              smooth: true,
+              symbol: "circle",
+              symbolSize: 8,
+              itemStyle: { color: "#fff" },
+              lineStyle: { color: colorList.inColor, width: 3 },
+              areaStyle: { color: colorList.inArea },
+              data: val.dayInData,
+              markLine: {
+                silent: true,
+                lineStyle: { color: "rgba(248,211,81,.7)", width: 1 },
+                data: [{ type: "average", name: "平均值" }]
+              }
+            },
+            {
+              name: "出库",
+              type: "line",
+              smooth: true,
+              symbol: "circle",
+              symbolSize: 8,
+              itemStyle: { color: "#fff" },
+              lineStyle: { color: colorList.outColor, width: 3 },
+              areaStyle: { color: colorList.outArea },
+              data: val.dayOutData,
+              markLine: {
+                silent: true,
+                lineStyle: { color: "rgba(248,211,81,.7)", width: 1 },
+                data: [{ type: "average", name: "平均值" }]
+              }
+            }
+          ]
+        };
+        
+        if (chartRef.value) {
+          chartRef.value.initChart(options);
+        }
+      },
+      { immediate: true, deep: true }
+    );
+
+    return () => {
+      return <div>
+        <echart ref={chartRef} height="500px" width="100%" />
+      </div>;
+    };
+  }
+});

bigscreen/src/views/bottomRight/chart/index.tsx

@@ -0,0 +1,93 @@
+import { defineComponent, reactive, onMounted, ref, onUnmounted } from 'vue';
+import Draw from './draw';
+
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const drawTiming = ref(0);
+    const cdata = reactive({
+      year: null,
+      weekCategory: [],
+      dayInData: [],  // 新增：入库数据
+      dayOutData: [], // 新增：出库数据
+      maxData: 60,    // 调整最大值为60，根据数据范围
+    });
+
+    // 获取后端数据
+    const fetchData = async () => {
+      try {
+        const token = localStorage.getItem('token') || 'PDA1'; // 从localStorage获取token
+        const headers = new Headers({
+          Accept: "application/json, text/plain, */*",
+          token: token,
+        });
+
+        const url = "http://192.168.18.200:8008/reportcenter/bigScreen/day/";
+        const response = await fetch(url, {
+          method: "GET",
+          headers: headers,
+        });
+        
+        if (!response.ok) throw new Error('网络响应异常');
+        const data = await response.json();
+        
+        // 处理数据
+        processData(data.results);
+      } catch (error) {
+        console.error('获取数据失败:', error);
+      }
+    };
+
+    // 处理数据
+    const processData = (results) => {
+      // 清空数据
+      cdata.weekCategory = [];
+      cdata.dayInData = [];
+      cdata.dayOutData = [];
+      
+      // 按日期排序 (修复类型错误)
+      const sortedData = [...results].sort((a, b) => {
+        const dateA = new Date(a.day).getTime();
+        const dateB = new Date(b.day).getTime();
+        return dateA - dateB;
+      });
+      
+      // 提取数据
+      sortedData.forEach(item => {
+        cdata.weekCategory.push(item.day);
+        cdata.dayInData.push(parseFloat(item.day_in));
+        cdata.dayOutData.push(parseFloat(item.day_out));
+      });
+      
+      // 计算最大值
+      const allValues = [...cdata.dayInData, ...cdata.dayOutData];
+      const maxValue = Math.max(...allValues);
+      cdata.maxData = maxValue > 0 ? maxValue * 1.2 : 60; // 增加20%余量
+    };
+
+    // 定时更新数据
+    const drawTimingFn = () => {
+      fetchData();
+      drawTiming.value = setInterval(() => {
+        fetchData();
+      }, 60000); // 每分钟更新一次
+    };
+
+    // 生命周期
+    onMounted(() => {
+      drawTimingFn();
+    });
+
+    onUnmounted(() => {
+      clearInterval(drawTiming.value);
+    });
+
+    return () => {
+      return <div>
+        <Draw cdata={cdata} />
+      </div>;
+    };
+  }
+});

bigscreen/src/views/bottomRight/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bottomRight">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-chart-area" />
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2 mt-1">数据统计图</span>
+        </div>
+      </div>
+      <div>
+        <chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Chart from "./chart/index";
+export default defineComponent({
+  components: {
+    Chart
+  }
+})
+</script>
+
+<style lang="scss" class>
+$box-height: 520px;
+$box-width: 100%;
+.bottomRight {
+  padding: 14px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

bigscreen/src/views/center/chart/draw.tsx

@@ -0,0 +1,92 @@
+import { defineComponent, watch, shallowReactive } from 'vue'
+
+// 声明类型
+const PropsType = {
+  tips: {
+    type: Number,
+    default: 50,
+    require: true
+  },
+  colorObj: {
+    type: Object,
+    default: () => ({
+      textStyle: "#3fc0fb",
+      series: {
+        color: ["#00bcd44a", "transparent"],
+        dataColor: {
+          normal: "#03a9f4",
+          shadowColor: "#97e2f5"
+        }
+      }
+    })
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 配置项
+    let options = shallowReactive({title:null,series:null})
+
+    watch(
+      () => props.tips,
+      (val: any) => {
+        options = {
+          title: {
+            text: val * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: props.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: props.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: val,
+                  itemStyle: {
+                    normal: {
+                      color: props.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: props.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - val
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    return () => {
+      const height = "100px"
+      const width = "120px"
+
+      return <div>
+        <echart options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

bigscreen/src/views/center/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <!-- <div class="center">
+    <div class="up">
+      <div
+        class="bg-color-black item"
+        v-for="item in titleItem"
+        :key="item.title"
+      >
+        <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
+        <div>
+          <dv-digital-flop class="dv-dig-flop ml-1 mt-1 pl-3" :config="item.config" />
+        </div>
+      </div>
+    </div>
+    <div class="down">
+      <div class="ranking bg-color-black">
+        <span>
+          <i class="iconfont icon-tongji2"></i>
+        </span>
+        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" />
+      </div>
+      <div class="percent">
+        <div class="item bg-color-black">
+          <span>今日任务通过率</span>
+          <chart
+            :tips="rate[0].tips"
+            :colorObj="rate[0].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>今日任务达标率</span>
+          <chart
+            :tips="rate[1].tips"
+            :colorObj="rate[1].colorData"
+          />
+        </div>
+        <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div>
+      </div>
+    </div>
+  </div> -->
+</template>
+
+<script>
+import { defineComponent, reactive, onMounted } from 'vue'
+import Chart from '../center/chart/draw'
+
+export default defineComponent({
+  components: {
+    Chart
+  },
+  setup() {
+    // 下层数据
+    const titleDate = [
+      {
+        number: 1020,
+        text: '今年累计任务建次数'
+      },
+      {
+        number: 18,
+        text: '本月累计任务次数'
+      },
+      {
+        number: 4,
+        text: '今日累计任务次数'
+      },
+      {
+        number: 71,
+        text: '今年失败任务次数'
+      },
+      {
+        number: 949,
+        text: '今年失败成功次数'
+      },
+      {
+        number: 811,
+        text: '今年达标任务个数'
+      },
+    ]
+    const titleItem = reactive([])
+
+    // 初始化数据
+    onMounted(() => {
+      setData()
+    })
+
+    const ranking = reactive({
+      data: [
+        {
+          name: '周口',
+          value: 55
+        },
+        {
+          name: '南阳',
+          value: 120
+        },
+        {
+          name: '西峡',
+          value: 78
+        },
+        {
+          name: '驻马店',
+          value: 66
+        },
+        {
+          name: '新乡',
+          value: 80
+        },
+        {
+          name: '新乡2',
+          value: 80
+        },
+        {
+          name: '新乡3',
+          value: 80
+        },
+        {
+          name: '新乡4',
+          value: 80
+        },
+        {
+          name: '新乡5',
+          value: 80
+        },
+        {
+          name: '新乡6',
+          value: 80
+        }
+      ],
+      carousel: 'single',
+      unit: '人'
+    })
+
+    const water = reactive({
+      data: [24, 45],
+      shape: 'roundRect',
+      formatter: '{value}%',
+      waveNum: 3
+    })
+
+    const rate = reactive([
+      {
+        id: 'centerRate1',
+        tips: 60,
+        colorData: {
+          textStyle: '#3fc0fb',
+          series: {
+            color: ['#00bcd44a', 'transparent'],
+            dataColor: {
+              normal: '#03a9f4',
+              shadowColor: '#97e2f5'
+            }
+          }
+        }
+      },
+      {
+        id: 'centerRate2',
+        tips: 40,
+        colorData: {
+          textStyle: '#67e0e3',
+          series: {
+            color: ['#faf3a378', 'transparent'],
+            dataColor: {
+              normal: '#ff9800',
+              shadowColor: '#fcebad'
+            }
+          }
+        }
+      }
+    ])
+
+    // 设置数据
+    const setData = () => {
+      titleDate.map(e => {
+        titleItem.push({
+          title: e.text,
+          config: {
+            number: [e.number],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        })
+      })
+    }
+    return {
+      titleItem,
+      ranking,
+      water,
+      rate
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 32%;
+      height: 70px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 255px;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 59%;
+      .dv-scr-rank-board {
+        height: 220px;
+      }
+    }
+    .percent {
+      width: 40%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+        height: 120px;
+        span {
+          margin-top: 8px;
+          font-size: 14px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>

bigscreen/src/views/centerLeft1/chart/draw.tsx

@@ -0,0 +1,97 @@
+import { defineComponent, ref, watch, shallowReactive } from 'vue'
+
+// 声明类型
+const PropsType = {
+  cdata: {
+    type: Object,
+    require: true
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 定义 ref
+    const chartRef = ref()
+    // 配置项
+    let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})
+
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          color: [
+            '#37a2da',
+            '#32c5e9',
+            '#9fe6b8',
+            '#ffdb5c',
+            '#ff9f7f',
+            '#fb7293',
+            '#e7bcf3',
+            '#8378ea'
+          ],
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: 'horizontal',
+            icon: 'circle',
+            bottom: 0,
+            x: 'center',
+            data: val.xData,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          series: [
+            {
+              name: '通过率统计',
+              type: 'pie',
+              radius: [10, 50],
+              roseType: 'area',
+              center: ['50%', '40%'],
+              itemStyle: {
+                borderRadius: 5
+              },
+              label: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                label: {
+                  show: false
+                }
+              },
+              data: val.seriesData
+            }
+          ]
+        }
+        // 手动触发更新
+        if (chartRef.value) {
+          // 通过初始化参数打入数据
+          chartRef.value.initChart(options)
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    return () => {
+      const height = "220px"
+      const width = "260px"
+
+      return <div>
+        <echart ref={chartRef} options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

bigscreen/src/views/centerLeft1/chart/index.tsx

@@ -0,0 +1,39 @@
+import { defineComponent, onUnmounted, reactive } from 'vue'
+import Draw from './draw'
+
+export default defineComponent({
+  components: {
+    Draw,
+  },
+  setup() {
+    let intervalInstance = null
+    const cdata = reactive({
+      xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
+      seriesData: [
+        { value: 10, name: '数据1' },
+        { value: 5, name: '数据2' },
+        { value: 15, name: '数据3' },
+        { value: 25, name: '数据4' },
+        { value: 20, name: '数据5' },
+        { value: 35, name: '数据6' },
+      ],
+    })
+    intervalInstance = setInterval(() => {
+      const data = cdata.seriesData
+      cdata.seriesData = data.map((e) => {
+        return { value: e.value + 10, name: e.name }
+      })
+    }, 1000)
+
+    onUnmounted(() => {
+      clearInterval(intervalInstance)
+    })
+    return () => {
+      return (
+        <div>
+          <Draw cdata={cdata} />
+        </div>
+      )
+    }
+  },
+})

bigscreen/src/views/centerLeft1/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="centreLeft1">
+    <!-- <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-tongji4" />
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务通过率</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <chart />
+      </div>
+      
+      <div class="bottom-data">
+        <div
+          class="item-box mt-2"
+          v-for="(item, index) in numberData"
+          :key="index"
+        >
+          <div class="d-flex jc-end">
+            <i class="iconfont" :class="[iconFont[index]]" />
+            <dv-digital-flop class="dv-digital-flop" :config="item.config" />
+          </div>
+          <p>
+            <span> {{ item.text }} </span>
+            <span class="colorYellow">(件)</span>
+          </p>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted,  reactive } from 'vue'
+import Chart from './chart/index'
+export default defineComponent({
+  components: {
+    Chart
+  },
+  setup() {
+    // 下层数据
+    const dataArr = [
+      {
+        number: 150,
+        text: '今日构建总量'
+      },
+      {
+        number: 144,
+        text: '总共完成数量'
+      },
+      {
+        number: 361,
+        text: '正在编译数量'
+      },
+      {
+        number: 571,
+        text: '未通过数量'
+      }
+    ]
+    // 对应图标
+    const iconFont = [
+      'icon-diagnose',
+      'icon-monitoring',
+      'icon-cloudupload',
+      'icon-clouddownload'
+    ]
+    const numberData = reactive([])
+    let intervalInstance = null
+    onMounted(() => {
+      setData()
+      changeTiming()
+    })
+
+    const setData = () => {
+      dataArr.forEach(e => {
+        numberData.push({
+          config: {
+            number: [e.number],
+            toFixed: 1,
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: e.text
+        })
+      })
+    }
+
+    const changeTiming = () => {
+      intervalInstance = setInterval(() => {
+        changeNumber()
+      }, 2000)
+    }
+    const changeNumber = () => {
+      numberData.forEach((item, index) => {
+        item.config.number[0] += ++index
+        item.config = { ...item.config }
+      })
+    }
+    onUnmounted(() => {
+      clearInterval(intervalInstance)   
+    })
+
+    return { numberData, iconFont}
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$box-width: 300px;
+$box-height: 410px;
+
+.centreLeft1 {
+  padding: 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 10px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      i {
+        font-size: 20px;
+        line-height: 30px;
+        margin-left: 20px;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

bigscreen/src/views/centerLeft2/chart/draw.tsx

@@ -0,0 +1,217 @@
+import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';
+
+// 声明类型
+const PropsType = {
+  cdata: {
+    type: Array,
+    require: true
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 配置项
+    let options = shallowReactive({showLegendSymbol:null,tooltip:null,geo:null,series:null})
+    // 设置点的位置(经纬度)
+    const geoCoordMap = {
+      厦门市: [118.11022, 24.490474, 20],
+      福州市: [119.206239, 26.275302, 20],
+      泉州市: [118.589421, 24.908853, 20],
+      漳州市: [117.561801, 24.510897, 20],
+      龙岩市: [116.82978, 25.391603, 20],
+      莆田市: [119.007558, 25.591011, 20],
+      三明市: [117.435001, 26.465444, 20],
+      南平市: [118.178459, 27.535627, 20],
+      宁德市: [119.527082, 27.15924, 20],
+    }
+    const seriesData = [
+      {
+        name: '厦门市',
+      },
+      {
+        name: '福州市',
+      },
+      {
+        name: '泉州市',
+      },
+      {
+        name: '漳州市',
+      },
+      {
+        name: '龙岩市',
+      },
+      {
+        name: '莆田市',
+      },
+      {
+        name: '三明市',
+      },
+      {
+        name: '南平市',
+      },
+      {
+        name: '宁德市',
+      },
+    ]
+    const convertData = function (data) {
+      const scatterData = [];
+      for (let i = 0; i < data.length; i++) {
+        const geoCoord = geoCoordMap[data[i].name];
+        if (geoCoord) {
+          scatterData.push({
+            name: data[i].name,
+            value: geoCoord.concat(data[i].value),
+          });
+        }
+      }
+      return scatterData;
+    }
+    // 监听
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          showLegendSymbol: true,
+          tooltip: {
+            trigger: 'item',
+            textStyle: {
+              fontSize: 14,
+              lineHeight: 22,
+            },
+            position: point => {
+              // 固定在顶部
+              return [point[0] + 50, point[1] - 20];
+            },
+            // 如果需要自定义 tooltip样式，需要使用formatter
+            /*
+              formatter: params => {
+                return `<div style=""> ... </div>`
+              }
+            */
+          },
+          // 如果需要根据不同的数据展示深浅不一的颜色，则把这里打开
+          // visualMap: {
+          //   min: 0,
+          //   max: 10,
+          //   show: false,
+          //   seriesIndex: 0,
+          //   // 颜色
+          //   inRange: {
+          //     color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
+          //   },
+          // },
+          // 底部背景
+          geo: [{
+            show: true,
+            aspectScale: 0.85, //长宽比
+            zoom: 1.16,
+            top: '10%',
+            left: '17%',
+            map: '福建',
+            roam: false,
+            itemStyle: {
+              normal: {
+                borderColor: '#7ad5ff7f',
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: 'rgba(5,21,35,0.1)'
+              }
+            }
+          }],
+          series: [
+            {
+              name: '相关指数',
+              type: 'map',
+              aspectScale: 0.85, //长宽比
+              zoom: 1.16, //缩放
+              mapType: '福建', // 自定义扩展图表类型
+              top: '9%',
+              left: '16%',
+              itemStyle: {
+                normal: {
+                  // 背景渐变色
+                  areaColor: {
+                    type: 'linear-gradient',
+                    x: 0,
+                    y: 300,
+                    x2: 0,
+                    y2: 0,
+                    colorStops: [{
+                      offset: 0,
+                      color: 'RGBA(19,96,187,1)' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: 'RGBA(7,193,223,1)' // 50% 处的颜色
+                    }],
+                    global: true // 缺省为 false
+                  },
+                  borderColor: '#4ECEE6',
+                  borderWidth: 1,
+                },
+                emphasis: {
+                  areaColor: '#4f7fff',
+                  borderColor: 'rgba(0,242,252,.6)',
+                  borderWidth: 2,
+                  shadowBlur: 10,
+                  shadowColor: '#00f2fc',
+                },
+              },
+              label: {
+                formatter: params => `${params.name}`,
+                show: true,
+                position: 'insideRight',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#efefef',
+                },
+                emphasis: {
+                  textStyle: {
+                    color: '#fff',
+                  },
+                },
+              },
+              data: val,
+            },
+            {
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              symbolSize: 7,
+              effectType: 'ripple',
+              legendHoverLink: false,
+              showEffectOn: 'render',
+              rippleEffect: {
+                period: 4,
+                scale: 2.5,
+                brushType: 'stroke',
+              },
+              zlevel: 1,
+              itemStyle: {
+                normal: {
+                  color: '#99FBFE',
+                  shadowBlur: 5,
+                  shadowColor: '#fff',
+                },
+              },
+              data: convertData(seriesData),
+            },
+          ],
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+    return () => {
+      const height = "360px"
+      const width = "330px"
+
+      return <div>
+        <echart options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

bigscreen/src/views/centerLeft2/chart/index.tsx

@@ -0,0 +1,58 @@
+import { defineComponent, reactive } from 'vue'
+import Draw from './draw'
+
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const cdata = reactive([
+      {
+        // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
+        name: '福州市',
+        value: 10,
+        elseData: {
+          // 这里放置地图 tooltip 里想显示的数据
+        }
+      },
+      {
+        name: '厦门市',
+        value: 9,
+      },
+      {
+        name: '漳州市',
+        value: 8,
+      },
+      {
+        name: '泉州市',
+        value: 7,
+      },
+      {
+        name: '三明市',
+        value: 6,
+      },
+      {
+        name: '莆田市',
+        value: 5,
+      },
+      {
+        name: '南平市',
+        value: 4,
+      },
+      {
+        name: '龙岩市',
+        value: 3,
+      },
+      {
+        name: '宁德市',
+        value: 2,
+      }
+    ])
+
+    return () => {
+      return <div>
+        <Draw cdata={cdata} />
+      </div>
+    }
+  }
+})

bigscreen/src/views/centerLeft2/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-layer-group" />
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">地图数据</span>
+          <dv-decoration-1 class="dv-dec-1" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { defineComponent } from 'vue'
+import Chart from './chart/index'
+export default defineComponent({
+  components: {
+    Chart
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.centreLeft1 {
+  $box-width: 300px;
+  $box-height: 410px;
+  padding: 16px;
+  height: $box-height;
+  min-width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .dv-dec-1 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

bigscreen/src/views/centerRight1/chart/draw.tsx

@@ -0,0 +1,131 @@
+import { defineComponent, watch, shallowReactive } from 'vue'
+
+// 声明类型
+const PropsType = {
+  cdata: {
+    type: Object,
+    require: true
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 定义固定配置项
+    const lineStyle = {
+      normal: {
+        width: 1,
+        opacity: 0.5
+      }
+    };
+    // 配置项
+    let options = shallowReactive({radar:null,series:null})
+
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          radar: {
+            indicator: val.indicatorData,
+            shape: "circle",
+            splitNumber: 5,
+            radius: ["0%", "65%"],
+            name: {
+              textStyle: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: [
+                  "rgba(238, 197, 102, 0.1)",
+                  "rgba(238, 197, 102, 0.2)",
+                  "rgba(238, 197, 102, 0.4)",
+                  "rgba(238, 197, 102, 0.6)",
+                  "rgba(238, 197, 102, 0.8)",
+                  "rgba(238, 197, 102, 1)"
+                ].reverse()
+              }
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(238, 197, 102, 0.5)"
+              }
+            }
+          },
+          series: [
+            {
+              name: "北京",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: val.dataBJ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#F9713C"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.1
+                }
+              }
+            },
+            {
+              name: "上海",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: val.dataSH,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#B3E4A1"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            },
+            {
+              name: "广州",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: val.dataGZ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "rgb(238, 197, 102)"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            }
+          ]
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    return () => {
+      const height = "200px"
+      const width = "260px"
+
+      return <div>
+        <echart options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

bigscreen/src/views/centerRight1/chart/index.tsx

@@ -0,0 +1,51 @@
+import { defineComponent, reactive } from 'vue'
+import Draw from './draw'
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const cdata = reactive({
+      indicatorData: [
+        { name: "数据1", max: 300 },
+        { name: "数据2", max: 250 },
+        { name: "数据3", max: 300 },
+        { name: "数据4", max: 5 },
+        { name: "数据5", max: 200 },
+        { name: "数据6", max: 100 }
+      ],
+      dataBJ: [
+        [94, 69, 114, 2.08, 73, 39, 22],
+        [99, 73, 110, 2.43, 76, 48, 23],
+        [31, 12, 30, 0.5, 32, 16, 24],
+        [42, 27, 43, 1, 53, 22, 25],
+        [154, 117, 157, 3.05, 92, 58, 26],
+        [234, 185, 230, 4.09, 123, 69, 27],
+        [160, 120, 186, 2.77, 91, 50, 28]
+      ],
+      dataGZ: [
+        [84, 94, 140, 2.238, 68, 18, 22],
+        [93, 77, 104, 1.165, 53, 7, 23],
+        [99, 130, 227, 3.97, 55, 15, 24],
+        [146, 84, 139, 1.094, 40, 17, 25],
+        [113, 108, 137, 1.481, 48, 15, 26],
+        [81, 48, 62, 1.619, 26, 3, 27],
+        [56, 48, 68, 1.336, 37, 9, 28]
+      ],
+      dataSH: [
+        [91, 45, 125, 0.82, 34, 23, 1],
+        [65, 27, 78, 0.86, 45, 29, 2],
+        [83, 60, 84, 1.09, 73, 27, 3],
+        [109, 81, 121, 1.28, 68, 51, 4],
+        [106, 77, 114, 1.07, 55, 51, 5],
+        [109, 81, 121, 1.28, 68, 51, 6],
+        [106, 77, 114, 1.07, 55, 51, 7]
+      ]
+    })
+    return () => {
+      return <div>
+        <draw cdata={cdata} />
+      </div>
+    }
+  }
+})

bigscreen/src/views/centerRight1/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-align-left" />
+        </span>
+        <span class="fs-xl text mx-2">产品销售渠道分析</span>
+      </div>
+      <div class="d-flex ai-center flex-column body-box">
+        <dv-capsule-chart class="dv-cap-chart" :config="config" />
+        <chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive } from 'vue'
+import Chart from './chart/index.tsx'
+
+export default defineComponent({
+  components: {
+    Chart
+  },
+  setup() {
+    const config = reactive({
+      data: [
+        {
+          name: '南阳',
+          value: 167
+        },
+        {
+          name: '周口',
+          value: 67
+        },
+        {
+          name: '漯河',
+          value: 123
+        },
+        {
+          name: '郑州',
+          value: 55
+        },
+        {
+          name: '西峡',
+          value: 98
+        }
+      ]
+    })
+
+    return { config }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$box-height: 400px;
+$box-width: 340px;
+.centerRight1 {
+  padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    padding: 5px;
+    height: $box-height;
+    width: $box-width;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-cap-chart {
+      width: 100%;
+      height: 160px;
+    }
+  }
+}
+</style>

bigscreen/src/views/centerRight2/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="centerRight2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-vector" />
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务完成排行榜</span>
+        </div>
+      </div>
+      <div class="d-flex mt-1 jc-center body-box">
+        <dv-scroll-board
+          ref="scrollBoard"
+          class="dv-scr-board"
+          :config="config"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      config: {
+        header: ["托盘号","批次号", "起始位置", "终止位置", "任务状态"],
+        data: [
+          ["数据加载中..."," ", " ", " ", " "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+
+        ],
+        rowNum: 7,
+        headerHeight: 35,
+        headerBGC: "#0f1325",
+        oddRowBGC: "#0f1325",
+        evenRowBGC: "#171c33",
+        index: true,
+        columnWidth: [5,75,150],
+        align: ["center", "center", "center", "center", "center"],
+      },
+      intervalId: null,
+      token: "PDA1",
+    };
+  },
+  mounted() {
+    this.fetchData();
+    // 每分钟刷新一次数据
+    this.intervalId = setInterval(this.fetchData, 60000);
+  },
+  beforeUnmount() {
+    // 清除定时器
+    clearInterval(this.intervalId);
+  },
+  methods: {
+    async fetchData() {
+      try {
+        const headers = new Headers({
+          Accept: "application/json, text/plain, */*",
+          token: this.token,
+        });
+
+        const url = "http://192.168.18.200:8008/container/wcs_task/";
+        // const url = "http://192.168.18.200:8008/container/wcs_task/";
+        const response = await fetch(url, {
+          method: "GET",
+          headers: headers,
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `网络错误: ${response.status} ${response.statusText}`
+          );
+        }
+
+        const jsonData = await response.json();
+        console.log("数据获取成功:", jsonData);
+
+        const tableData = jsonData.results.map((item) => [
+          item.container,
+          item.batch_code,
+          item.current_location,
+          item.target_location,
+          item.message,
+        ]);
+        // 应用平台主题色
+        const statusColors = {
+          进行中: "#ffb638", // 橘黄色
+          任务已完成: "#2ed47a", // 绿色
+          等待出库: "#3c9aff", // 蓝色
+        };
+
+        while (tableData.length < 7) {
+          tableData.push(["-", "-", "-", "-", "-"]);
+        }
+        const formattedData = tableData.map((row) => {
+          const status = row[4];
+          return [
+            `<span style="color: #fff">${row[0]}</span>`,
+            `<span style="color: #c0e4ff">${row[1]}</span>`,
+            `<span style="color: #c0e4ff">${row[2]}</span>`,
+            `<span style="color: #c0e4ff">${row[3]}</span>`,
+            `<span style="color: ${
+              statusColors[status] || "#fff"
+            }; font-weight: 500">${status}</span>`,
+          ];
+        });
+        this.config.data =
+          tableData.length > 0 ? formattedData : [["暂无数据", "", "", ""]];
+        console.log("数据处理成功:", this.config.data);
+
+        this.$refs["scrollBoard"].updateRows(this.config.data);
+      } catch (error) {
+        console.error("数据获取失败:", error);
+        const errorMessage = `加载失败: ${error.message}`;
+        this.config.data = [
+          [errorMessage, "", "", ""],
+          ["请检查网络连接", "", "", ""],
+          ["或服务地址是否正确", "", "", ""],
+          ["Token: " + this.token, "", "", ""],
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$box-height: 410px;
+$box-width: 100%;
+.centerRight2 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 98%;
+      height: 340px;
+    }
+  }
+}
+</style>

bigscreen/src/views/index/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
+            <div class="title">
+              <span class="title-text">{{ title }}</span>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColors"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s">
+              <span class="react-before"></span>
+              <span class="text">{{ subtitle[0] }}</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">{{ subtitle[1] }}</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-blue mr-3">
+              <span class="text fw-b">{{ subtitle[2] }}</span>
+            </div>
+            <div class="react-right mr-4 react-l-s">
+              <span class="react-after"></span>
+              <span class="text">
+                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
+                {{ timeInfo.dateDay }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 第三行数据 -->
+          <div class="content-box">
+            <div>
+              <dv-border-box-12>
+                <center-left1 />
+              </dv-border-box-12>
+            </div>
+            <!-- <div>
+              <dv-border-box-12>
+                <center-left2 />
+              </dv-border-box-12>
+            </div> -->
+            <!-- 中间 -->
+            <div>
+              <center />
+            </div>
+            <!-- 中间 -->
+            <!-- <div>
+              <center-right1 />
+            </div> -->
+            <div>
+              <dv-border-box-13>
+                <center-right2 />
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第四行数据 -->
+          <div class="bototm-box">
+            <dv-border-box-13>
+              <bottom-left />
+            </dv-border-box-13>
+            <dv-border-box-12>
+              <bottom-right />
+            </dv-border-box-12>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+} from 'vue'
+import { formatTime } from '@/utils/index'
+import { WEEK } from '@/constant/index'
+import useDraw from '@/utils/useDraw'
+import { title, subtitle, moduleInfo } from '@/constant/index'
+import CenterLeft1 from '../centerLeft1/index.vue'
+import CenterLeft2 from '../centerLeft2/index.vue'
+import Center from '../center/index.vue'
+import CenterRight1 from '../centerRight1/index.vue'
+import CenterRight2 from '../centerRight2/index.vue'
+import BottomLeft from '../bottomLeft/index.vue'
+import BottomRight from '../bottomRight/index.vue'
+
+export default defineComponent({
+  components: {
+    CenterLeft1,
+    CenterLeft2,
+    Center,
+    CenterRight1,
+    CenterRight2,
+    BottomLeft,
+    BottomRight
+  },
+  setup() {
+    // * 颜色
+    const decorationColors = ['#568aea', '#000000']
+    // * 加载标识
+    const loading = ref<boolean>(true)
+    // * 时间内容
+    const timeInfo = reactive({
+      setInterval: 0,
+      dateDay: '',
+      dateYear: '',
+      dateWeek: ''
+    })
+    // * 适配处理
+    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
+    // 生命周期
+    onMounted(() => {
+      cancelLoading()
+      handleTime()
+      // todo 屏幕适应
+      windowDraw()
+      calcRate()
+    })
+
+    onUnmounted(() => {
+      unWindowDraw()
+      clearInterval(timeInfo.setInterval)
+    })
+
+    // methods
+    // todo 处理 loading 展示
+    const cancelLoading = () => {
+      setTimeout(() => {
+        loading.value = false
+      }, 500)
+    }
+
+    // todo 处理时间监听
+    const handleTime = () => {
+      timeInfo.setInterval = setInterval(() => {
+        const date = new Date()
+        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
+        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
+        timeInfo.dateWeek = WEEK[date.getDay()]
+      }, 1000)
+    }
+
+    // return
+    return {
+      loading,
+      timeInfo,
+      appRef,
+      title,
+      subtitle,
+      moduleInfo
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/index.scss';
+</style>

bigscreen/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": false,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

bigscreen/vue-big-screen-plugin

@@ -1 +0,0 @@
-Subproject commit dd15a9c045d21fe8a27233831df5bf1f1ecb0ac2

bigscreen/vue.config.js

@@ -0,0 +1,12 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,  // 👈 注意这里需要加逗号
+
+  // 新增开发服务器配置
+  devServer: {
+    port: 3000,       // 👈 固定端口号为 3000
+    open: true,       // 是否自动打开浏览器（可选）
+    
+  }
+})