单独推送

.gitignore

@@ -7,3 +7,5 @@ __pycache__/
 # Ignore pycharm project files
 /logs/
 templates/src/boot/axios_request.js
+
+/bigscreen/

bigscreen/.browserslistrc

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

bigscreen/.eslintrc.js

@@ -1,21 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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

@@ -1,160 +0,0 @@
-**通知：最新的低代码大屏系统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

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

bigscreen/other_modules/README.md

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

bigscreen/package.json

@@ -1,37 +0,0 @@
-{
-  "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

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

@@ -1,14 +0,0 @@
-<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

@@ -1,539 +0,0 @@
-/* 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

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

@@ -1,127 +0,0 @@
-@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

@@ -1,205 +0,0 @@
-{
-  "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

@@ -1,97 +0,0 @@
-// 颜色
-$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

@@ -1,142 +0,0 @@
-#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

@@ -1,193 +0,0 @@
-@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

@@ -1,453 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

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

bigscreen/src/constant/index.ts

@@ -1,37 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

bigscreen/src/shims-vue.d.ts

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

bigscreen/src/store/index.ts

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

bigscreen/src/utils/index.ts

@@ -1,36 +0,0 @@
-/**
- * @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

@@ -1,60 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,53 +0,0 @@
-<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

@@ -1,165 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,53 +0,0 @@
-<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

@@ -1,92 +0,0 @@
-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

@@ -1,262 +0,0 @@
-<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

@@ -1,97 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,165 +0,0 @@
-<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

@@ -1,217 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,60 +0,0 @@
-<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

@@ -1,131 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,83 +0,0 @@
-<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

@@ -1,160 +0,0 @@
-<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

@@ -1,186 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-{
-  "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.config.js

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