1

huangxiaoqiang

2025-04-25 c467a598f23fd81cf624e0abc5f012fb5c9c6ada

1

 CodeManagement/BigScreenVue/.babelrc

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,12 @@
{
    "presets": [["es2015", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }

 CodeManagement/BigScreenVue/.env.dev

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,7 @@
 
# å¼€å‘环境，开发时正常都用这个
NODE_ENV = development
# å½“前环境，开发环境，可以随便修改，配合打包处配置与此文件名字 
VUE_APP_URL_ENV = development
# æ‰“包后文件夹名字
VUE_APP_outputDir = development

 CodeManagement/BigScreenVue/.env.production

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,7 @@
 
# æ­£å¼çŽ¯å¢ƒï¼Œæ‰“包都用这个正常的就行，不用改 
NODE_ENV = production
# å½“前环境，正式包，test正式包，可以随便修改，配合打包处配置与此文件名字   å¯ä»¥æ”¹
VUE_APP_URL_ENV = production
# æ‰“包后文件夹名字
VUE_APP_outputDir = dist-production

 CodeManagement/BigScreenVue/.env.test

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,4 @@
# çœ‹ .env.development é‡Œé¢çš„注释
NODE_ENV = production
VUE_APP_URL_ENV = test
VUE_APP_outputDir = dist-test

 CodeManagement/BigScreenVue/.gitignore

@@ -1,6 +1,8 @@
.DS_Store
node_modules
/dist
/dist-*


# local env files
.env.local
@@ -10,6 +12,7 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea

 CodeManagement/BigScreenVue/LICENSE

@@ -1,201 +1,21 @@
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/
MIT License

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
Copyright (c) 2022 daidai

   1. Definitions.
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:

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
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.

 CodeManagement/BigScreenVue/README.md

@@ -1,200 +1,238 @@
 **QQ交流群： 713105837 å¼€æºé¡¹ç›®Vue/Vue3/React-big-screen交流群** 

QQ群二维码：

![输入图片说明](public/image.png)
## é¡¹ç›®æè¿°

## ä¸€ã€é¡¹ç›®æè¿°

- ä¸€ä¸ªåŸºäºŽ Vue、Datav、Echart æ¡†æž¶çš„ " **数据大屏项目** "，通过 Vue ç»„件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV è‡ªå¸¦ç»„件，可进行更改，详情请点击下方 DataV æ–‡æ¡£ã€‚

- [**Vue3 ç‰ˆæœ¬è¯·ç‚¹å‡»è¿™é‡ŒæŸ¥çœ‹ï¼Œä½¿ç”¨ Hooks+TypeScript å®žçŽ°ï¼Œå…¨æ–°å†…容等你探索!**](https://gitee.com/MTrun/vue-big-screen-plugin)
- [**React ç‰ˆæœ¬è¯·ç‚¹å‡»è¿™é‡ŒæŸ¥çœ‹ï¼Œå…¨æ–°ç•Œé¢è¶…级好看！！！**](https://gitee.com/MTrun/react-big-screen)
根据奔跑吧面条的**[vue-big-screen](https://gitee.com/MTrun/big-screen-vue-datav)**开源框架基础上进行修改。

- é¡¹ç›®éœ€è¦å…¨å±å±•ç¤ºï¼ˆæŒ‰ F11）。

- é¡¹ç›®éƒ¨åˆ†åŒºåŸŸä½¿ç”¨äº†å…¨å±€æ³¨å†Œæ–¹å¼ï¼Œå¢žåŠ äº†æ‰“包体积，在实际运用中请使用 **按需引入**。
- æ‹‰å–项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
- é¡¹ç›®çŽ¯å¢ƒï¼šVue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。

- é¡¹ç›®çŽ¯å¢ƒï¼šVue-cli、DataV、Echarts、Webpack、Npm、Node，axios,mock。

- è¯·æ‹‰å– master åˆ†æ”¯çš„代码，其余分支是开发分支。
- éœ€è¦å…¶å®ƒåœ°å›¾æ•°æ®çš„，请查看我的其它项目（有一个地图合集）

- åœ¨é¡¹ç›®public目录下存放地图数据合集，根据地市编存放。


友情链接：

1.  [Vue å®˜æ–¹æ–‡æ¡£](https://cn.vuejs.org/v2/guide/instance.html)
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/big-screen-vue-datav)
1. [Vue å®˜æ–¹æ–‡æ¡£](https://gitee.com/link?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Finstance.html)
2. [DataV å®˜æ–¹æ–‡æ¡£](https://gitee.com/link?target=http%3A%2F%2Fdatav.jiaminghi.com%2Fguide%2F)
3. [echarts å®žä¾‹](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fexamples%2Fzh%2Findex.html)，[echarts API æ–‡æ¡£](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fzh%2Fapi.html%23echarts)
4. [mock.js官网](http://mockjs.com/examples.html)
5. [axios官网](https://axios-http.com/)

项目展示
![项目展示](https://images.gitee.com/uploads/images/2020/1208/183608_b893a510_4964818.gif "20201208_221020.gif")
**项目展示** 

## äºŒã€ä¸»è¦æ–‡ä»¶ä»‹ç»
![项目展示](https://www.daidaibg.com/bigscreen/a-img/home.png)

| æ–‡ä»¶                | ä½œç”¨/功能                                                              |
| ------------------- | --------------------------------------------------------------------- |
| main.js             | ä¸»ç›®å½•æ–‡ä»¶ï¼Œå¼•å…¥ Echart/DataV ç­‰æ–‡ä»¶                                    |
| utils               | å·¥å…·å‡½æ•°ä¸Ž mixins å‡½æ•°ç­‰                                                |
| views/ index.vue    | é¡¹ç›®ä¸»ç»“æž„                                                             |
| views/其余文件       | ç•Œé¢å„个区域组件（按照位置来命名）                                       |
| assets              | é™æ€èµ„源目录，放置 logo ä¸ŽèƒŒæ™¯å›¾ç‰‡                                       |
| assets / style.scss | é€šç”¨ CSS æ–‡ä»¶ï¼Œå…¨å±€é¡¹ç›®å¿«æ·æ ·å¼è°ƒèŠ‚                                      |
| assets / index.scss | Index ç•Œé¢çš„ CSS æ–‡ä»¶                                                  |
| components/echart   | æ‰€æœ‰ echart å›¾è¡¨ï¼ˆæŒ‰ç…§ä½ç½®æ¥å‘½åï¼‰                                      |
| common/...          | å…¨å±€å°è£…çš„ ECharts å’Œ flexible æ’件代码（适配屏幕尺寸，可定制化修改）     |
### é¡¹ç›®é¢„览地址

## ä¸‰ã€ä½¿ç”¨ä»‹ç»
[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)

### å¯åŠ¨é¡¹ç›®
### é¡¹ç›®ä»“库地址

需要提前安装好 `nodejs` ä¸Ž `yarn`,下载项目后在项目主目录下运行 `yarn` æ‹‰å–依赖包。安装完依赖包之后然后使用 `vue-cli` æˆ–者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV æ¡†æž¶çš„依赖，输入 `npm install @jiaminghi/data-view` æˆ–者 `yarn add @jiaminghi/data-view` è¿›è¡Œæ‰‹åŠ¨å®‰è£…。
**github地址**

### å°è£…组件渲染图表
[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)

所有的 ECharts å›¾è¡¨éƒ½æ˜¯åŸºäºŽ `common/echart/index.vue` å°è£…组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。
**Gitee地址**

项目配置了默认的 ECharts å›¾è¡¨æ ·å¼ï¼Œæ–‡ä»¶åœ°å€ï¼š`common/echart/theme.json`。
[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)

封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
### vue3+vite版本地址

参数名称              | ç±»åž‹      | ä½œç”¨/功能                      |
| -------------------| --------- | ------------------------------|
| id                 | String    | å”¯ä¸€ id，渲染图表的节点（非必填，使用了 $el）|
| className          | String    | class样式名称（非必填）                 |
| options            | Object    | ECharts é…ç½®ï¼ˆå¿…填）                   |
| height             | String    | å›¾è¡¨é«˜åº¦ï¼ˆå»ºè®®å¡«ï¼‰                    |
| width              | String    | å›¾è¡¨å®½åº¦ï¼ˆå»ºè®®å¡«ï¼‰                    |
**github地址**

### åŠ¨æ€æ¸²æŸ“图表
[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)

动态渲染图表案例为 `components` ç›®å½•ä¸‹å„个图表组件，index æ–‡ä»¶è´Ÿè´£æ•°æ®èŽ·å–和处理，chart æ–‡ä»¶è´Ÿè´£ç›‘听和数据渲染。
**Gitee地址**

chart æ–‡ä»¶çš„主要逻辑为：
[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)

```html
### 1.1.0版本开始采用自适应组件方式，不再使用mixin方式。

###  æ»šåŠ¨è®¾ç½®ï¼Œè‡ªé€‚应设置 

项目中可以进行滚动配置，内容是否滚动

点击右上角设置按钮
![设置](https://www.daidaibg.com/bigscreen/a-img/setting.png)



可以进行以下配置，可以自行代码中进行修改或增加配置



![在这里插入图片描述](https://www.daidaibg.com/bigscreen/a-img/setting2.png)



##  2、主要文件介绍

| æ–‡ä»¶              | ä½œç”¨/功能                                                    |
| ----------------- | ------------------------------------------------------------ |
| main.js           | ä¸»ç›®å½•æ–‡ä»¶ï¼Œå¼•å…¥ Echart/DataV ç­‰æ–‡ä»¶                         |
| utils             | å·¥å…·å‡½æ•°ä¸Ž mixins å‡½æ•°ç­‰                                     |
| views/ home.vue   | é¡¹ç›®ä¸»ç»“æž„                                                   |
| views/其余文件    | ç•Œé¢å„个区域组件（按照位置来命名）                           |
| assets            | é™æ€èµ„源目录，放置 logo ä¸ŽèƒŒæ™¯å›¾ç‰‡                           |
| assets / css/     | é€šç”¨ CSS æ–‡ä»¶ï¼Œå…¨å±€é¡¹ç›®å¿«æ·æ ·å¼è°ƒèŠ‚                          |
| components/echart | æ‰€æœ‰ echart å›¾è¡¨ï¼ˆæŒ‰ç…§ä½ç½®æ¥å‘½åï¼‰                           |
| common/...        | å…¨å±€å°è£…çš„ ECharts å’Œ flexible æ’件代码（适配屏幕尺寸，可定制化修改） |
| api/api.js        | æŽ¥å£å°è£…文件                                                 |
| mock              | æ¨¡æ‹Ÿæ•°æ®æŽ¥å£åœ°å€                                             |

###  

## ä½¿ç”¨ä»‹ç»

### å®‰è£…

```npm
npm install   
```
### å¯åŠ¨

```npm
npm start 
```

[接下来跟面条的差不多还是看面条的文档吧](https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D)

https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D

### å–消mock模拟数据

```javascript
// src\main.js文件
把下面这句话注释掉就可以了。
require('./mock/mock')//是否使用mock
```

## è‡ªé€‚应缩放组件

### æ³¨æ„

采用Scale方式，会自动给组件父元素添加overflow:hidden 

### ä½¿ç”¨

```vue
<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
  <scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </scale-screen>
</template>

<script>
  // å¼•å…¥å°è£…组件
import Echart from '@/common/echart'
import ScaleScreen from 'scale-screen'

export default {
  // å®šä¹‰é…ç½®æ•°æ®
  data(){ return { options: {}}},
  // å£°æ˜Žç»„件
  components: { Echart},
  // æŽ¥æ”¶æ•°æ®
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  // è¿›è¡Œç›‘听，也可以使用 computed è®¡ç®—属性实现此功能
  watch: {
    cdata: {
      handler (newData) {
        this.options ={
          // è¿™é‡Œç¼–写 ECharts é…ç½®
        }
      },
      // ç«‹å³ç›‘听
      immediate: true,
      // æ·±åº¦ç›‘听
      deep: true
    }
  }
};
</script>
```

### å¤ç”¨å›¾è¡¨ç»„件

复用图表组件案例为中间部分的 `任务通过率与任务达标率` æ¨¡å—，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id å’Œæ ·å¼ï¼Œç„¶åŽåœ¨å¤ç”¨çš„组件 `components/echart/center/centerChartRate` é‡Œè¿›è¡ŒæŽ¥æ”¶å¹¶åœ¨å¯¹åº”位置赋值即可。

如：在调用处 `views/center.vue` é‡ŒåŽ»å®šä¹‰å¥½æ•°æ®å¹¶ä¼ å…¥ç»„件

```js
//组件调用
<span>今日任务通过率</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>今日任务达标率</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />

...
import centerChart from "@/components/echart/center/centerChartRate";

data() {
  return {
    rate: [
      {
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
        id: "centerRate2",
        tips: 40,
        colorData: {
          ...
        }
      }
    ]
  name:'Demo',
  components:{
    VScaleScreen
  }
}
</script>
```
### API
| å±žæ€§         | è¯´æ˜Ž                                                         | ç±»åž‹                             | é»˜è®¤å€¼ |
| ------------ | ------------------------------------------------------------ | -------------------------------- | ------ |
| selfAdaption | æ˜¯å¦è¿›è¡Œè‡ªé€‚应                                               | Boolean                          | true   |
| width        | å¤§å±å®½åº¦                                                     | `Number` or `String`             | 1920   |
| height       | å¤§å±é«˜åº¦                                                     | `Number` or `String`             | 1080   |
| autoScale    | è‡ªé€‚应配置，配置为boolean类型时，为启动或者关闭自适应，配置为对象时，若x为true，x轴产生边距，y为true时，y轴产生边距，启用fullScreen时此配置失效 | Boolean or {x:boolean,y:boolean} | true   |
| delay        | çª—口变化防抖延迟时间                                         | Number                           | 500    |
| fullScreen   | å…¨å±è‡ªé€‚应，启用此配置项时会存在拉伸效果，同时autoScale失效，非必要情况下不建议开启 | Boolean                          | false  |
| boxStyle     | ä¿®æ”¹å®¹å™¨æ ·å¼ï¼Œå¦‚居中展示时侧边背景色，符合Vue双向绑定style标准格式 | Object                           | null   |
| wrapperStyle | ä¿®æ”¹è‡ªé€‚应区域样式，符合Vue双向绑定style标准格式             | Object                           | null   |

### æ›´æ¢è¾¹æ¡†
## å…¬ç”¨ç»„件

边框是使用了 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>
```
### 5.1 message消息提示

### æ›´æ¢å›¾è¡¨
因为刚开始没想着用第三方提示库，自己简单封装了一个。

直接进入 `components/echart` ä¸‹çš„文件修改成你要的 echarts æ¨¡æ ·ï¼Œå¯ä»¥åŽ»[echarts å®˜æ–¹ç¤¾åŒº](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
注：组件内部目前只有warning，类型，如果需要其他类型自己组件内添加。

### Mixins è§£å†³è‡ªé€‚应适配功能

使用 mixins æ³¨å…¥è§£å†³äº†ç•Œé¢å¤§å°å˜åŠ¨å›¾è¡¨è‡ªé€‚应适配的功能，函数在 `utils/resizeMixins.js` ä¸­ï¼Œåº”用在 `common/echart/index.vue` çš„封装渲染组件，主要是对 `this.chart` è¿›è¡Œäº†åŠŸèƒ½æ³¨å…¥ã€‚

### å±å¹•é€‚配

1.5 ç‰ˆæœ¬é¡¹ç›®æ”¾å¼ƒäº† flexible æ’件方案，将 rem æ”¹å›žpx，使用更流程通用的 `css3：scale` ç¼©æ”¾æ–¹æ¡ˆï¼Œé€šè¿‡ `ref` æŒ‡å‘ `views/index`，屏幕改变时缩放内容。项目的基准尺寸是 `1920px*1080px`，所以支持同比例屏幕 100% å¡«å……，如果非同比例则会自动计算比例居中填充，不足的部分则留白。实现代码在 `src/utils/userDraw` ï¼Œå¦‚果有其它的适配方案，欢迎交流。

### è¯·æ±‚数据

现在的项目未使用前后端数据请求，建议使用 axios è¿›è¡Œæ•°æ®è¯·æ±‚，在 main.js ä½ç½®è¿›è¡Œå…¨å±€é…ç½®ã€‚

- axios çš„ main.js é…ç½®å‚考范例（因人而异）
因在main.js注册全局可以直接使用，不需要引入

```js
import axios from 'axios';

//把方法放到vue的原型上，这样就可以全局使用了
Vue.prototype.$http = axios.create({
  //设置20秒超时时间
  timeout: 20000,
  baseURL: 'http://172.0.0.1:80080', //这里写后端地址
});
  this.$Message({
      text: res.msg,
      type: 'warning'
  })
//也可以这样
this.$Message.warning(res.msg)
```

## å››ã€æ›´æ–°æƒ…况
| å‚æ•° |   æè¿°   | é»˜è®¤å€¼  |  ç±»åž‹  | å¯é€‰å€¼  |
| :--: | :------: | :-----: | :----: | :-----: |
| text | æç¤ºæ–‡å­— |    -    | string |    -    |
| type | å¼¹çª—类型 | warning | string | warning |

1. å¢žåŠ äº† Echart ç»„件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
2. ä¿®å¤äº†å¤´éƒ¨å³ä¾§çš„图案条不对称的问题。
3. ä½¿ç”¨ Mixins æ³¨å…¥å›¾è¡¨å“åº”式代码（scale方案之后无需使用）。
4. vue-awesome æ”¹æˆæŒ‰éœ€å¼•å…¥çš„方式。
5. å°è£…渲染函数，抽离了数据使逻辑更加清晰。
6. æ–°å¢žåœ°å›¾ç»„件，并添加自动轮播功能
7. å°†é€‚配方案从 rem æ”¹æˆ scale
## äº”、其余
### 5.2 å¤–边框

这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
因为我的项目外边框几乎一样，还有title,所以封装了此组件。

根据自己需求更改，更换外边框（src\components\item-wrap\item-wrap.vue）下更换。

```vue
<ItemWrap
    title="我是title"
    >
       <div>我是谁？</div>
</ItemWrap>
```

| å‚æ•°  | æè¿° | é»˜è®¤å€¼ |  ç±»åž‹  | å¯é€‰å€¼ |
| :---: | :--: | :----: | :----: | :----: |
| title | æ ‡å¤´ |   -    | string |   -    |

## ä¸­é—´åœ°å›¾

### å—海显隐控制

 æ ¹æ®éœ€æ±‚来，**修改此值请刷新页面**

```indexs/center-map.vue``` æ–‡ä»¶ä¸­```isSouthChinaSea```变量 é»˜è®¤ä¸æ˜¾ç¤ºå—æµ·(false),为```true```的时候显示南海

```
isSouthChinaSea:false,//默认不显示南海，改为true可显示南海
```

## å…¨å±€å‚æ•°

### filter

监测数据项统一过滤，保留两位小数。

```vue
{{10.23123|montionFilter }}
```

##  å¤§å±äº¤æµåé¦ˆï¼ˆé¢æ¡çš„群）

### å¤§å±QQ群

QQ群号：713105837

### å¤§å±äºŒç»´ç 

QQ群二维码：

![输入图片说明](https://gitee.com/MTrun/big-screen-vue-datav/raw/master/public/image.png)


 CodeManagement/BigScreenVue/babel.config.js

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/public/favicon.ico

 CodeManagement/BigScreenVue/public/image.png

Binary files differ

 CodeManagement/BigScreenVue/public/index.html

@@ -1,18 +1,38 @@
<!DOCTYPE html>
<html lang="en">
  <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"> -->
    <meta name="viewport" content="width=device-width,user-scalable=yes, initial-scale=0.4, maxmum-scale=1.0, minimum-scale=0.4">
    <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>
<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">
  <link href="./style.css" rel="stylesheet">

  <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 class="container_nomount">
      <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <h2>Loading...</h2>
    </div>

  </div>
  <!-- built files will be auto injected -->
</body>

</html>

 CodeManagement/BigScreenVue/src/App.vue

@@ -1,6 +1,13 @@
<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:06:47
 * @LastEditors: daidai
 * @LastEditTime: 2022-03-01 17:55:49
 * @FilePath: \web-pc\src\pages\big-screen\App.vue
-->
<template>
  <div id="app">
    <router-view />
    <router-view/>
  </div>
</template>

@@ -8,7 +15,7 @@
#app {
  width: 100vw;
  height: 100vh;
  background-color: #020308;
  overflow: hidden;
  background-color: #03050C;
  // overflow: hidden;
}
</style>
</style>

 CodeManagement/BigScreenVue/src/api/ajax.js

@@ -1,7 +1,10 @@
// è¿™ä¸ªæ—¶axios的配置
import axios from 'axios';
// import { config } from 'vue/types/umd';
axios.defaults.baseURL =  'http://localhost:8098';//'http://192.168.2.110:8098';//
axios.defaults.withCredentials=true;
axios.defaults.crossDomain=true;
axios.defaults.baseURL = 'http://10.30.4.92:9283';//'http://192.168.2.51:8099'; //'http://localhost:8099'; //'http://192.168.2.51:8099';//
axios.defaults.headers.post["Content-Type"]="application/json;charset=utf-8";
// é”™è¯¯ä¿¡æ¯å¤„理
const  errorHandle = (status, other) => {
  switch (status) {
@@ -29,6 +32,7 @@
  // console.log(config);
  if(localStorage.elementToken){
    config.headers.Authorization=localStorage.elementToken;
    config.headers.con;
  }
  // console.log(config);
  return config;
@@ -43,7 +47,7 @@
  // console.log();
  // console.log(response.data.token);
  // response.headers['Authorization'] = response.data.token;
  return response.status=== 200 ? Promise.resolve(response): Promise.reject(response);
  return response.status=== 200 ? response.data: response.data;
}, function (error) {
  // å¯¹å“åº”错误做点什么
  const {response}=error;
@@ -51,7 +55,7 @@
    errorHandle(response.status,response.data.message)
    return Promise.reject(response.data);
  }else{
    console.log('断了');
    
  }
});
export default axios;

 CodeManagement/BigScreenVue/src/api/http.js

@@ -1 +1,25 @@
import axios from './ajax';
import axios from './ajax';
//成品执行任务统计
export function  Floorfault (data) {
    return axios.post('/api/Large/ProMonthTaskStatistics', data)//返回的时promies对象，所以直接return出去就好了
}
//成品货位统计
export function  ProLocationStatistics (data) {
    return axios.post('/api/Large/ProLocationStatistics?id=7', data)//返回的时promies对象，所以直接return出去就好了
}
//成品近七天统计
export function  Productions (data) {
    return axios.post('/api/Large/Productions', data)//返回的时promies对象，所以直接return出去就好了
}
//成品出库产量统计
export function  ProductionsOut (data) {
    return axios.post('/api/Large/ProductionsOut', data)//返回的时promies对象，所以直接return出去就好了
}
//成品排行
export function  ProductionRanking (data) {
    return axios.post('/api/Large/ProductionRanking', data)//返回的时promies对象，所以直接return出去就好了
}
//成品库存
export function  ProductionStock (data) {
    return axios.post('/api/Large/ProductionStock', data)//返回的时promies对象，所以直接return出去就好了
}

 CodeManagement/BigScreenVue/src/assets/bg5.jpg

Binary files differ

 CodeManagement/BigScreenVue/src/assets/cnmc_logo.png

Binary files differ

 CodeManagement/BigScreenVue/src/assets/css/theme/fonts/element-icons.ttf

Binary files differ

 CodeManagement/BigScreenVue/src/assets/css/theme/fonts/element-icons.woff

Binary files differ

 CodeManagement/BigScreenVue/src/assets/head_bg1.png

Binary files differ

 CodeManagement/BigScreenVue/src/assets/iconfont/iconfont.ttf

Binary files differ

 CodeManagement/BigScreenVue/src/assets/iconfont/iconfont.woff

Binary files differ

 CodeManagement/BigScreenVue/src/assets/iconfont/iconfont.woff2

Binary files differ

 CodeManagement/BigScreenVue/src/assets/logo.png

Binary files differ

 CodeManagement/BigScreenVue/src/assets/pageBg.png

Binary files differ

 CodeManagement/BigScreenVue/src/assets/scss/_variables.scss

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/assets/scss/index.scss

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/assets/scss/style.scss

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/common/map/fujian.js

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/bottom/bottomCenterChart/chart.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/bottom/bottomCenterChart/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/bottom/bottomLeftChart/chart.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/bottom/bottomLeftChart/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/bottom/bottomRightChart/chart.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/bottom/bottomRightChart/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/center/centerChartRate/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/centerLeft/centerLeft1Chart/chart.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/centerLeft/centerLeft1Chart/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/centerLeft/centerLeft2Chat/chart.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/centerLeft/centerLeft2Chat/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/centerLeft/centerLeft3Chart/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/components/echart/centerLeft1Chart/chart.vue

ÎļþÃû´Ó CodeManagement/BigScreenVue/src/components/echart/centerLeft/centerLeft3Chart/chart.vue ÐÞ¸Ä
@@ -2,15 +2,15 @@
  <div>
    <Echart
      :options="options"
      id="centreLeft3Chart"
      id="centreLeft1Chart"
      height="220px"
      width="260px"
      width="360px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import * as echarts from 'echarts';
export default {
  data () {
    return {
@@ -18,7 +18,7 @@
    };
  },
  components: {
    Echart,
    echarts,
  },
  props: {
    cdata: {
@@ -33,8 +33,19 @@
          color: [
            "#37a2da",
            "#32c5e9",
            "#ccc",
            "#9fe6b8",
            "#ffdb5c",
            "#ff9f7f",
            "#fb7293",
            "#e7bcf3",
            "#8378ea"
          ],
          legend:{
            textStyle:{
              color:"#ffffff",
              fontSize:18
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
@@ -55,11 +66,11 @@
          },
          series: [
            {
              name: "货位状态",
              name: "通过率统计",
              type: "pie",
              radius: [10, 50],
              // roseType: "area",
              center: ["50%", "40%"],
              radius: [20, 60],
              roseType: "area",
              center: ["50%", "50%"],
              data: newData.seriesData
            }
          ]

 CodeManagement/BigScreenVue/src/components/echart/centerLeft1Chart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,55 @@
<template>
    <div>
      <Chart :cdata="cdata" />
    </div>
  </template>
  
  <script>
  import Chart from './chart.vue';
  import axios from 'axios';
  export default {
    data () {
      return {
        cdata: {
          xData: ["空托", "实托", "待检", "合格", "检修中"],
          seriesData: []
        }
      }
    },
    components: {
      Chart,
    },
    mounted () {
      this.changeTiming()
    },
    methods: {
      changeTiming() {
          this.changeNumber()
        setInterval(() => {
          this.changeNumber()
        }, 3000)
      },
      changeNumber() {
        axios.post("http://localhost:8098/api/VV_Container/GetContainerMessage", {
          MainData: {
            AGVName: "负极"
          }
        }).then((res) => {
          let GetLocationEmptyOrStored = [
            {value:res.empty+1,name:'空托'},
            {value:res.full+1,name:"实托"},
            {value:res.waitCheck+1,name:"待检"},
            {value:res.qualified+1,name:"合格"},
            {value:res.checkIng+1,name:"检修中"}
          ]
          this.cdata.seriesData = GetLocationEmptyOrStored
        }).catch((res) => {
          console.log(res)
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>

 CodeManagement/BigScreenVue/src/components/echart/index.vue

ÎļþÃû´Ó CodeManagement/BigScreenVue/src/common/echart/index.vue ÐÞ¸Ä
@@ -1,11 +1,16 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:29:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:05:45
 * @FilePath: \web-pc\src\pages\big-screen\components\echart\index.vue
-->
<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from './theme.json' // å¼•å…¥é»˜è®¤ä¸»é¢˜
import '../map/fujian.js'

import * as echarts from 'echarts';
export default {
  name: 'echart',
  props: {
@@ -23,7 +28,7 @@
    },
    height: {
      type: String,
      default: '2.5rem'
      default: '100%'
    },
    options: {
      type: Object,
@@ -45,7 +50,6 @@
    }
  },
  mounted () {
    this.$echarts.registerTheme('tdTheme', tdTheme); // è¦†ç›–默认主题
    this.initChart();
  },
  beforeDestroy () {
@@ -55,7 +59,7 @@
  methods: {
    initChart () {
      // åˆå§‹åŒ–echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme')
      this.chart = echarts.init(this.$el)
      this.chart.setOption(this.options, true)
    }
  }

 CodeManagement/BigScreenVue/src/components/item-wrap/item-wrap.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,97 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:16:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:34
 * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
-->
<template>
  <dv-border-box-13 class="lr_titles">
    <div class="item_title" v-if="title !== ''">
      <div class="zuo"></div>
      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
      <div class="you"></div>
    </div>
    <div
      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
    >
      <slot></slot>
    </div>
  </dv-border-box-13>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: () => "",
    },
  },
  created() {},

  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);

.lr_titles {
  box-sizing: border-box;

:deep(.border-box-content)  {
    box-sizing: border-box;
    padding: 6px 16px 0px;
  }

  .item_title {
    height: $item-title-height;
    line-height: $item-title-height;
    width: 100%;
    color: #31abe3;
    text-align: center;
    // background: linear-gradient(to right, transparent, #0f0756, transparent);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .zuo,
    .you {
      width: 58px;
      height: 14px;
      background-image: url("../../assets/img/titles/zuo.png");
    }

    .you {
      transform: rotate(180deg);
    }
    .title-inner {
      font-weight: 900;
      letter-spacing: 2px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .item_title_content {
    height: $item_title_content-height;
  }

  .item_title_content_def {
    width: 100%;
    height: 100%;
  }
}
</style>

 CodeManagement/BigScreenVue/src/components/kong.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,43 @@
<template>
  <div class='kong'>
      <slot></slot>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
    
    };
  },
  props:{
    data:{
      type:Array,
      default:()=>[]
    }
  },
  computed: {},
  methods: {
    init(){
    },
  },
  created() {
  
  },
  mounted() {
  
  },
  beforeDestroy() { 
  },
}
</script>

<style lang='scss' scoped>
.kong{
    width: 100%;
    height: 100%;
}
</style>

 CodeManagement/BigScreenVue/src/components/message/message.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-02 17:07:40
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-26 11:41:27
 * @FilePath: \web-pc\src\pages\big-screen\components\message\message.vue
-->
<template>
  <div class="messages" v-if="visible">
    <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="message-icon">
      <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
        fill-opacity="0.9" v-if="'warning'==type"></path>
    </svg>
    {{ text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      text: "",
      type:'warning'
    };
  },
  props: {},
  created() { },

  mounted() { },
  methods: {
    init(param) {
      clearTimeout(this.timer);
      this.visible = true;
      this.text = param.text || "";
      this.type = param.type || "success";
      this.timer = setTimeout(() => {
        this.visible = false;
        clearTimeout(this.timer);
      }, 2000);
    },
  },
};
</script>
<style lang='scss' scoped>
.messages {
  position: fixed;
  min-width: 200px;
  top: 160px;
  left: 50%;
  transform: translate(-50%, 0);
  border: solid 1px #4b4b4b;
  //   box-shadow: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
  //     0 8px 10px rgba(0, 0, 0, 20%), inset 0 0.5px 0 #5e5e5e,
  //     inset 0.5px 0 0 #5e5e5e, inset 0 -0.5px 0 #5e5e5e, inset -0.5px 0 0 #5e5e5e;
  width: fit-content;
  border-radius: 6px;
  display: flex;
  align-items: center;
  z-index: 999;
  color: rgba(255, 255, 255, 0.9);
  background-color: #242424;
  line-height: 22px;
  font-size: 14px;
  padding: 13px 16px;

  .message-icon {
    color: #cf6e2d;
    font-size: 20px;
    margin-right: 8px;
    fill: currentColor;
  }
}
</style>

 CodeManagement/BigScreenVue/src/components/reacquire/reacquire.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
<template>
    <div class='reacquire flex justify-center  blocks  cursor-pointer' :style="{ lineHeight: lineHeight }"
        @click="getData">
        <span>
             é‡æ–°èŽ·å–
        </span>
       
    </div>
</template>

<script>

export default {
    components: {},
    props: {
        lineHeight: {
            type: String,
            default: '200px'
        }
    },
    data() {
        return {

        };
    },
    computed: {},
    methods: {
        init() {
        },
        getData(e){
            this.$emit("onclick",e)
        }
    },
    created() {

    },
    mounted() {

    },
    beforeDestroy() {
    },
}
</script>

<style lang='scss' scoped>
.reacquire {

    user-select:none;
    color: rgb(168, 168, 168);
    span:hover{
        color:$primary-color ;
        text-decoration: underline;
    }
}

.blocks {
    width: 100%;
    height: 100%;
}

.cursor-pointer {
    cursor: pointer;
}
</style>

 CodeManagement/BigScreenVue/src/components/scale-screen/scale-screen.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,253 @@
<!--
 * @Author: wei
 * @description: å¤§å±è‡ªé€‚应容器组件
 * @LastEditTime: 2022-09-09 16:42:40
-->
<template>
  <!-- <section class="screen-box" :style="boxStyle"> -->
  <div class="screen-wrapper" ref="screenWrapper" :style="wrapperStyle">
    <slot></slot>
  </div>
  <!-- </section> -->
</template>
<script>
/**
 * é˜²æŠ–函数
 * @param {T} fn
 * @param {number} delay
 * @return
 */
function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    timer = setTimeout(
      () => {
        typeof fn === "function" && fn.apply(null, args);
        clearTimeout(timer);
      },
      delay > 0 ? delay : 100
    );
  };
}

export default {
  name: "VScaleScreen",
  props: {
    width: {
      type: [String, Number],
      default: 1920,
    },
    height: {
      type: [String, Number],
      default: 1080,
    },
    fullScreen: {
      type: Boolean,
      default: false,
    },
    autoScale: {
      type: [Object, Boolean],
      default: true,
    },
    selfAdaption: {
      type: Boolean,
      default: true,
    },
    delay: {
      type: Number,
      default: 500,
    },
    boxStyle: {
      type: Object,
      default: () => ({}),
    },
    wrapperStyle: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentWidth: 0,
      currentHeight: 0,
      originalWidth: 0,
      originalHeight: 0,
      onResize: null,
      observer: null,
    };
  },
  watch: {
    selfAdaption(val) {
      if (val) {
        this.resize();
        this.addListener();
      } else {
        this.clearListener();
        this.clearStyle();
      }
    },
  },
  computed: {
    screenWrapper() {
      return this.$refs["screenWrapper"];
    },
  },
  methods: {
    initSize() {
      return new Promise((resolve, reject) => {
        // console.log("初始化样式");
        //给父元素设置 overflow:hidden
        this.screenWrapper.parentNode.style.overflow = "hidden";
        this.screenWrapper.parentNode.scrollLeft = 0;
        this.screenWrapper.parentNode.scrollTop = 0;

        this.$nextTick(() => {
          // region èŽ·å–大屏真实尺寸
          if (this.width && this.height) {
            this.currentWidth = this.width;
            this.currentHeight = this.height;
          } else {
            this.currentWidth = this.screenWrapper.clientWidth;
            this.currentHeight = this.screenWrapper.clientHeight;
          }
          // endregion
          // region èŽ·å–画布尺寸
          if (!this.originalHeight || !this.originalWidth) {
            this.originalWidth = window.screen.width;
            this.originalHeight = window.screen.height;
          }
          // endregion
          resolve();
        });
      });
    },
    updateSize() {
      if (this.currentWidth && this.currentHeight) {
        this.screenWrapper.style.width = `${this.currentWidth}px`;
        this.screenWrapper.style.height = `${this.currentHeight}px`;
      } else {
        this.screenWrapper.style.width = `${this.originalWidth}px`;
        this.screenWrapper.style.height = `${this.originalHeight}px`;
      }
    },
    handleAutoScale(scale) {
      if (!this.autoScale) return;
      const screenWrapper = this.screenWrapper;
      const domWidth = screenWrapper.clientWidth;
      const domHeight = screenWrapper.clientHeight;
      const currentWidth = document.body.clientWidth;
      const currentHeight = document.body.clientHeight;
      screenWrapper.style.transform = `scale(${scale},${scale}) `;
      let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
      let my = Math.max((currentHeight - domHeight * scale) / 2, 0);
      if (typeof this.autoScale === "object") {
        // @ts-ignore
        !this.autoScale.x && (mx = 0);
        // @ts-ignore
        !this.autoScale.y && (my = 0);
      }
      // console.log({
      //   mx,
      //   my,
      //   currentWidth,
      //   currentHeight,
      //   domWidth,
      //   domHeight,
      //   scale,
      // });
      this.screenWrapper.style.margin = `${my}px ${mx}px`;
    },
    updateScale() {
      const screenWrapper = this.screenWrapper;
      // èŽ·å–真实视口尺寸
      const currentWidth = document.body.clientWidth;
      const currentHeight = document.body.clientHeight;
      // èŽ·å–大屏最终的宽高onResize
      const realWidth = this.currentWidth || this.originalWidth;
      const realHeight = this.currentHeight || this.originalHeight;
      // è®¡ç®—缩放比例
      const widthScale = currentWidth / realWidth;
      const heightScale = currentHeight / realHeight;
      // console.log({currentWidth, currentHeight,realWidth,realHeight});

      // è‹¥è¦é“ºæ»¡å…¨å±ï¼Œåˆ™æŒ‰ç…§å„自比例缩放
      if (this.fullScreen) {
        screenWrapper.style.transform = `scale(${widthScale},${heightScale})`;
        return false;
      }
      // æŒ‰ç…§å®½é«˜æœ€å°æ¯”例进行缩放
      const scale = Math.min(widthScale, heightScale);
      this.handleAutoScale(scale);
    },
    initMutationObserver() {
      const screenWrapper = this.screenWrapper;
      const observer = (this.observer = new MutationObserver(() => {
        this.onResize();
      }));

      observer.observe(screenWrapper, {
        attributes: true,
        attributeFilter: ["style"],
        attributeOldValue: true,
      });
    },
    clearListener() {
      window.removeEventListener("resize", this.onResize);
    },
    addListener() {
      window.addEventListener("resize", this.onResize);
    },
    clearStyle() {
      // console.log("清除");
      const screenWrapper = this.screenWrapper;
      screenWrapper.parentNode.style.overflow = "auto";

      screenWrapper.style = "";
    },
    async resize() {
      if (!this.selfAdaption) {
        return;
      }
      await this.initSize();
      this.updateSize();
      this.updateScale();
    },
  },
  mounted() {
    this.onResize = debounce(() => {
      this.resize();
    }, this.delay);
    this.$nextTick(() => {
      if (this.selfAdaption) {
        this.resize();
        this.addListener();
      }
    });
  },
  beforeDestroy() {
    this.clearListener();
    // this.observer.disconnect()
  },
};
//
</script>

<style scoped>
.screen-box {
  overflow: hidden;
  background-size: 100% 100%;
  background: #000;
  width: 100vw;
  height: 100vh;
}

.screen-wrapper {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  position: relative;
  overflow: hidden;
  z-index: 100;
  transform-origin: left top;
}
</style>

 CodeManagement/BigScreenVue/src/main.js

@@ -1,37 +1,54 @@
import Vue 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';
// æŒ‰éœ€å¼•å…¥vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';
import ElementUI from 'element-ui';
import axios from 'axios';
import VueAxios from 'vue-axios';
/*
 * @Author: daidai
 * @Date: 2022-01-12 14:05:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-07 17:12:07
 * @FilePath: \web-pc\src\pages\big-screen\main.js
 */
import Vue from "vue";
import App from "./App.vue";
import router from './router'
import store from './store'
import {loading,borderBox13,digitalFlop,capsuleChart,borderBox8} from '@jiaminghi/data-view'
import { Radio,Button,RadioGroup } from 'element-ui'
import Echart from './components/echart/index.vue'
import ItemWrap from './components/item-wrap/item-wrap.vue'
import Message from './components/message/message.vue'
import Reacquire from './components/reacquire/reacquire.vue'
import Messages from './components/message/message'
import dataV from '@jiaminghi/data-view'
import "vue-easytable/libs/theme-default/index.css";
import  '@/assets/css/public.scss'
import "@/assets/css/index.scss"

//引入echart
//4.x å¼•ç”¨æ–¹å¼
import echarts from 'echarts'
//5.x å¼•ç”¨æ–¹å¼ä¸ºæŒ‰éœ€å¼•ç”¨
//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
//import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

import * as filters from '@/directives/filters'

require('./mock/mock')//是否使用mock
Vue.config.productionTip = false;
Vue.use(VueAxios, axios)
// å…¨å±€æ³¨å†Œ
Vue.component('icon', Icon);
Vue.use(dataV);
Vue.use(ElementUI)

// è‡ªå®šä¹‰ç»„件
Vue.component("Echart",Echart)
Vue.component("ItemWrap",ItemWrap)
Vue.component("Message",Message)
Vue.component("Reacquire",Reacquire)
Vue.prototype.$Message =  Messages
// element组件
Vue.use(Radio);
Vue.use(Button);
Vue.use(RadioGroup)

// datav组件
Vue.use(loading)
Vue.use(borderBox13)
Vue.use(borderBox8)
Vue.use(digitalFlop)
Vue.use(capsuleChart)

// å…¨å±€æ•°æ®è¿‡æ»¤å™¨
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');
  render: h => h(App)
}).$mount("#app");

 CodeManagement/BigScreenVue/src/router/index.js

@@ -1,15 +1,36 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
/*
 * @Author: daidai
 * @Date: 2022-01-12 14:22:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-28 14:53:02
 * @FilePath: \web-pc\src\pages\big-screen\router\index.js
 */
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)
Vue.use(VueRouter);

const routes = [{
const routes = [  {
  path: '/',
  name: 'index',
  component: () => import('../views/index.vue')
}]
  redirect: '/index',
},
{
  path: '/home',
  name: 'home',
  component: () => import(/* webpackChunkName: "LSD.bighome" */ '../views/home.vue'),
  children:[
    {
      path: '/index',
      name: 'index',
      component: () => import(/* webpackChunkName: "LSD.bighome" */ '../views/indexs/index.vue'),
    }
  ]
}, 
];
const router = new VueRouter({
  mode: "hash",
  // base: process.env.BASE_URL,
  routes
})
});

export default router
export default router;

 CodeManagement/BigScreenVue/src/store/index.js

@@ -1,15 +1,37 @@
import Vue from 'vue'
import Vuex from 'vuex'
/*
 * @Author: your name
 * @Date: 2021-07-26 09:32:49
 * @LastEditTime: 2022-04-26 09:12:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web-pc\src\pages\big-screen\store\index.js
 */
import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName]=value.default
  modules[moduleName].namespaced = true;   //打开命名空间
  return modules
}, {})
export default new Vuex.Store({
  modules,
  state: {

  },
  mutations: {
      setCollapsed(state,value){
      },
  },
  actions: {
    getUserdata({commit}){

    },
    
  },
  modules: {
  }
  
})

 CodeManagement/BigScreenVue/src/utils/drawMixin.js

@@ -1,3 +1,10 @@
/*
 * @Author: daidai
 * @Date: 2022-02-28 10:48:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-26 14:55:41
 * @FilePath: \web-pc\src\pages\big-screen\utils\drawMixin.js
 */
// å±å¹•é€‚配 mixin å‡½æ•°

// * é»˜è®¤ç¼©æ”¾å€¼
@@ -17,15 +24,23 @@
  data() {
    return {
      // * å®šæ—¶å‡½æ•°
      drawTiming: null
      drawTiming: null,
    }
  },
  computed: {
    isScale(){
      return this.$store.state.setting.isScale
    }
  },
  mounted () {
    if(!this.isScale){
      return
    }
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
       window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate () {
@@ -48,6 +63,9 @@
      }
    },
    resize () {
      if(!this.isScale){
        return
      }
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()

 CodeManagement/BigScreenVue/src/utils/index.js

@@ -1,3 +1,11 @@
/*
 * @Author: daidai
 * @Date: 2022-02-23 08:59:26
 * @LastEditors: daidai
 * @LastEditTime: 2022-02-24 17:11:58
 * @FilePath: \big-screen-vue-datav\src\utils\index.js
 */

/**
 * @param {Function} fn é˜²æŠ–函数
 * @param {Number} delay å»¶è¿Ÿæ—¶é—´
@@ -13,7 +21,6 @@
    }, delay);
  };
}

/**
 * @param {date} time éœ€è¦è½¬æ¢çš„时间
 * @param {String} fmt éœ€è¦è½¬æ¢çš„格式 å¦‚ yyyy-MM-dd、yyyy-MM-dd HH:mm:ss

 CodeManagement/BigScreenVue/src/utils/resizeMixin.js

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/bottomView1.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/bottomView2.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/bottomView3.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/centerLeft1.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/centerRight1.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/centerView1.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/centerView2.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/echarView1.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/echarView2.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/home.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@
<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
  <ScaleScreen
    :width="1920"
    :height="1080"
    class="scale-wrap"
    :selfAdaption="$store.state.setting.isScale"
  >
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- å¤´éƒ¨ s -->
        <div class="d-flex jc-center title_wrap">
          <div class="zuojuxing"></div>
          <div class="youjuxing"></div>
          <div class="guang"></div>
          <div class="d-flex jc-center">
            <div class="title">
              <span class="title-text">淮安特创成品数据展示平台</span>
            </div>
          </div>
          <div class="timers">
            {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            <i
              class="blq-icon-shezhi02"
              style="margin-left: 10px"
              @click="showSetting"
            ></i>
          </div>
        </div>
        <!-- å¤´éƒ¨ e-->
        <!-- å†…容  s-->
        <router-view></router-view>
        <!-- å†…容 e -->
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
  <!-- </div> -->
</template>

<script>
import { formatTime } from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
export default {
  components: { Setting, ScaleScreen },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
  },
};
</script>

<style lang="scss">
@import "./home.scss";
</style>

 CodeManagement/BigScreenVue/src/views/index.vue

ÎļþÒÑɾ³ý

 CodeManagement/BigScreenVue/src/views/indexs/center-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,363 @@
<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
// import { currentGET } from "api/modules";
import { graphic } from "echarts";
import {Productions} from "@/api/http.js"
import axios from 'axios'
export default {
  data() {
    return {
      options: {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // æ·»åŠ å•ä½
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.value) {
                  result +=
                    item.marker +
                    " " +
                    "产量" +
                    " : " +
                    item.value +
                    "PCS</br>";
              } else {
                result += item.marker + " " + item.seriesName + " :  - </br>";
              }
            });
            return result;
          },
        },
        legend: {
          data: ["单位：PCS"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "-5",
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: ['8/12','8/13','8/14','8/15','8/16','8/17','8/18'],
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: true },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "单位：PCS",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: 5,
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" },
                  ]),
                  // label: {
                  //     show: true, //开启显示
                  //     position: 'top', //在上方显示
                  //     textStyle: { //数值样式
                  //     color: '#bdbae2',
                  //     fontSize: 10
                  //   }
                  // }
              }
            },
            data: ['200','180','190','185','190','188','195'],
          },
        ],
      },
    };
  },
  props: {},
  mounted() {
    this.getData();
    this.changeTiming();
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    changeTiming() {
      this.timer=setInterval(() => {
        this.getData();
      }, 3000);
    },
    async getData() {
      // this.numberData.forEach((item, index) => {
      //   item.number.number[0] += ++index
      //   item.number = { ...item.number }
      // })
      var rep = await Productions();
      console.log(rep);
      //获取rep中对象的的today值整合成数组
      var todays= rep.map((item) => {
        return item.today;
      });
      //获取rep中对象的的pcsCounts值整合成数组
      var pcsCounts= rep.map((item) => {
        return item.pcsCounts;
      });
      console.log(todays);
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // æ·»åŠ å•ä½
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.value) {
                  result +=
                    item.marker +
                    " " +
                    "产量" +
                    " : " +
                    item.value +
                    "PCS</br>";
              } else {
                result += item.marker + " " + item.seriesName + " :  - </br>";
              }
            });
            return result;
          },
        },
        legend: {
          data: ["单位：PCS"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "-5",
        },
        grid: {
          left: "60px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: todays.reverse(),
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: true },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          }
        ],
        series: [
          {
            name: "单位：PCS",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
            data: pcsCounts.reverse(),
          },
        ],
      };
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
    
    // async getData() {
    //   this.pageflag = true;
    //   let rep = await Timefault((a)=>{
    //       console.log(a);
    //     });

    //    this.init(rep);
    //   currentGET("big6", { companyName: this.companyName }).then((res) => {
    //     console.log("故障时长统计", res);
        
    //     // if (res.success) {
    //     //   this.init(res.data);
    //     //   console.log("测试2",res.data);
    //     // } else {
    //     //   this.pageflag = false;
    //     //   this.$Message({
    //     //     text: res.msg,
    //     //     type: "warning",
    //     //   });
    //     // }
    //   });
    // },
    // init(val) {
    //   console.log(val);
    //   this.options = {
    //     tooltip: {
    //       trigger: "axis",
    //       backgroundColor: "rgba(0,0,0,.6)",
    //       borderColor: "rgba(147, 235, 248, .8)",
    //       textStyle: {
    //         color: "#FFF",
    //       },
    //       formatter: function (params) {
    //         // æ·»åŠ å•ä½
    //         var result = params[0].name + "<br>";
    //         params.forEach(function (item) {
    //           if (item.value) {
    //               result +=
    //                 item.marker +
    //                 " " +
    //                 "合格产量" +
    //                 " : " +
    //                 item.value +
    //                 "ç®±</br>";
    //           } else {
    //             result += item.marker + " " + item.seriesName + " :  - </br>";
    //           }
    //         });
    //         return result;
    //       },
    //     },
    //     legend: {
    //       data: ["单位：箱"],
    //       textStyle: {
    //         color: "#B4B4B4",
    //       },
    //       top: "-5",
    //     },
    //     grid: {
    //       left: "50px",
    //       right: "40px",
    //       bottom: "30px",
    //       top: "20px",
    //     },
    //     xAxis: {
    //       data: [val[6].datetime,val[5].datetime,val[4].datetime,val[3].datetime,
    //             val[2].datetime,val[1].datetime,val[0].datetime],
    //       axisLine: {
    //         lineStyle: {
    //           color: "#B4B4B4",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     yAxis: [
    //       {
    //         splitLine: { show: true },
    //         axisLine: {
    //           lineStyle: {
    //             color: "#B4B4B4",
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value}",
    //         },
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "单位：箱",
    //         type: "bar",
    //         barWidth: 20,
    //         itemStyle: {
    //           borderRadius: 5,
    //           color: new graphic.LinearGradient(0, 0, 0, 1, [
    //             { offset: 0, color: "#956FD4" },
    //             { offset: 1, color: "#3EACE5" },
    //           ]),
    //         },
    //         data: [val[6].qty,val[5].qty,val[4].qty,val[3].qty,
    //               val[2].qty,val[1].qty,val[0].qty],
    //       },
    //     ],
    //   };
    // },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/center-map.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,384 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <!-- <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div> -->
    <div class="mapwrap">
      <dv-border-box-13>
        <img class="Screen" src="../../assets/img/3DScreen.png" width="700px" height="392px" alt="">
        <!-- <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
          ä¸­å›½
        </div>

        <Echart id="CenterMap" :options="options" ref="CenterMap" /> -->
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
export default {
  data() {
    return {
      maptitle: "小部件仓库预览图",
      options: {},
      code: "china", //china ä»£è¡¨ä¸­å›½ å…¶ä»–地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  ä¿®æ”¹æ­¤å€¼è¯·åˆ·æ–°é¡µé¢
    };
  },
  created() {},

  mounted() {
    // console.log(xzqCode);
    this.getData("china");
  },
  methods: {
    getData(code) {
      // currentGET("big8", { regionCode: code }).then((res) => {
      //   console.log("设备分布", res);
      //   if (res.success) {
      //     this.getGeojson(res.data.regionCode, res.data.dataList);
      //     this.mapclick();
      //   } else {
      //     this.$Message.warning(res.msg);
      //   }
      // });
    },
    /**
     * @description: èŽ·å–geojson
     * @param {*} name china è¡¨ç¤ºä¸­å›½ å…¶ä»–省份行政区编码
     * @param {*} mydata æŽ¥å£è¿”回列表数据
     * @return {*}
     */
    async getGeojson(name, mydata) {
      this.code = name;
      //如果要展示南海群岛并且展示的是中国的话
      let geoname=name
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册 äº†
      let mapjson = echarts.getMap(name);
      if (mapjson) {
        mapjson = mapjson.geoJSON;
      } else {
        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
          return res;
        });
        echarts.registerMap(name, mapjson);
      }
      let cityCenter = {};
      let arr = mapjson.features;
      //根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
      });
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
          newData.push({
            name: item.name,
            value: cityCenter[item.name].concat(item.value),
          });
        }
      });
      this.init(name, mydata, newData);
    },
    init(name, data, data2) {
      // console.log(data2);
      let top = 45;
      let zoom = 1.05;
      let option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        visualMap: {
          left: 20,
          bottom: 20,
          pieces: [
            { gte: 1000, label: "1000个以上" }, // ä¸æŒ‡å®š max，表示 max ä¸ºæ— é™å¤§ï¼ˆInfinity）。
            { gte: 600, lte: 999, label: "600-999个" },
            { gte: 200, lte: 599, label: "200-599个" },
            { gte: 50, lte: 199, label: "49-199个" },
            { gte: 10, lte: 49, label: "10-49个" },
            { lte: 9, label: "1-9个" }, // ä¸æŒ‡å®š min，表示 min ä¸ºæ— é™å¤§ï¼ˆ-Infinity）。
          ],
          inRange: {
            // æ¸å˜é¢œè‰²ï¼Œä»Žå°åˆ°å¤§
            color: [
              "#c3d7df",
              "#5cb3cc",
              "#8abcd1",
              "#66a9c9",
              "#2f90b9",
              "#1781b5",
            ],
          },
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: name,
          roam: false,
          selectedMode: false, //是否允许选中多个区域
          zoom: zoom,
          top: top,
          // aspectScale: 0.78,
          show: false,
        },
        series: [
          {
            name: "MAP",
            type: "map",
            map: name,
            // aspectScale: 0.78,
            data: data,
            // data: [1,100],
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            geoIndex: 1,
            top: top,
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            label: {
              show: false,
              color: "#000",
              // position: [-10, 0],
              formatter: function (val) {
                // console.log(val)
                if (val.data !== undefined) {
                  return val.name.slice(0, 2);
                } else {
                  return "";
                }
              },
              rich: {},
            },
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#389BB7",
                borderWidth: 1,
              },
            },
            itemStyle: {
              borderColor: "rgba(147, 235, 248, .8)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% å¤„的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% å¤„的颜色
                  },
                ],
                globalCoord: false, // ç¼ºä¸º false
              },
              shadowColor: "rgba(128, 217, 248, .3)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
          },
          {
            data: data2,
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: function (val) {
              return 4;
              // return val[2] / 50;
            },
            legendHoverLink: true,
            showEffectOn: "render",
            rippleEffect: {
              // period: 4,
              scale: 6,
              color: "rgba(255,255,255, 1)",
              brushType: "fill",
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"][2];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            label: {
              formatter: (param) => {
                return param.name.slice(0, 2);
              },

              fontSize: 11,
              offset: [0, 2],
              position: "bottom",
              textBorderColor: "#fff",
              textShadowColor: "#000",
              textShadowBlur: 10,
              textBorderWidth: 0,
              color: "#FFF",
              show: true,
            },
            // colorBy: "data",
            itemStyle: {
              color: "rgba(255,255,255,1)",
              borderColor: "rgba(2255,255,255,2)",
              borderWidth: 4,
              shadowColor: "#000",
              shadowBlur: 10,
            },
          },
        ],
         //动画效果
            // animationDuration: 1000,
            // animationEasing: 'linear',
            // animationDurationUpdate: 1000
      };
      this.options = option;
    },
    message(text) {
      this.$Message({
        text: text,
        type: "warning",
      });
    },
    mapclick() {
      if (this.echartBindClick) return;
      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap.chart.on("click", (params) => {
        // console.log(params);
        let xzqData = xzqCode[params.name];
        if (xzqData) {
          this.getData(xzqData.adcode);
        } else {
          this.message("暂无下级地市!");
        }
      });
      this.echartBindClick = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
.Screen{
  position: absolute;
      right: 10px;
      top: 60px;
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,207 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="contents">
    <div class="contetn_left">
      <div class="pagetab">
        
      </div>
      <!-- <ItemWrap class="contetn_left-top contetn_lr-item" title="故障--种类频率">
        <LeftCenter />
      </ItemWrap> -->

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品执行任务统计"
      >
      <stationone/>
      </ItemWrap>

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品库存属性分布"
      >
      <stationtwo/>
      </ItemWrap>

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品货位状态信息"
      >
      <stationthree/>
      </ItemWrap>

    </div>
    <div class="contetn_center">
      <div style="height:70vh;margin-bottom: -30px">
        <LeftBottom/>
      </div>
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品库存展示信息"
        style="padding: 0 10px 16px 10px"
      >
        <RightCenter />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品产品信息排行"
        style="padding: 0 10px 16px 10px"
      >
      <passtwo />
      </ItemWrap>

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品入库产量统计"
        style="padding: 0 10px 16px 10px"
      >
      <CenterBottom />
      </ItemWrap>

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="成品出库产量统计"
      >
        <plan />
      </ItemWrap> 

    </div>
  </div>
</template>

<script>
import LeftTop from './left-top.vue'
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
import LeftCenterRight from "./left-center-right.vue";
import stationone from './station-one.vue'
import stationtwo from './station-two.vue'
import stationthree from './station-three.vue'
import stationfour from './station-four.vue'
import passtwo from './pass-two.vue'
import plan from './plan.vue'
export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftCenterRight,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
    stationone,
    stationtwo,
    stationthree,
    stationfour,
    passtwo,
    plan
  },
  data() {
    return {
    
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {},
  methods: {
  
  },
};
</script>
<style lang="scss" scoped>
// å†…容
.contents {
  .contetn_left,
  .contetn_right {
    width: 540px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 720px;
  }

  //左右两侧 ä¸‰ä¸ªå—
  .contetn_lr-item {
    height: 310px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // ä¸­é—´
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 å³è¾¹ ç»“构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;

  
  }
}
.labels {
        flex-shrink: 0;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.6);
        float: left; 
        margin-right: 11.5%;
      }
      .labelsd {
        flex-shrink: 0;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.6);
        float: left; 
        margin-left: 6%;
      }

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/left-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,630 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div id="name" style="width: 100%; height: 100%">
    <Echart :options="options" style="width: 100%; height: 100%"></Echart>
  </div>
</template>

<script>
import { currentGET } from "api/modules";
import { ProLocationStatistics } from "@/api/http.js";
import * as echarts from 'echarts';
let style = {
  fontSize: 24,
};
export default {
  data() {
    return {
      pageflag: true,
      myChart: {},
      options: {},
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    init() {
      this.options = {
     backgroundColor: '#0a1256',
     //浮动框
     tooltip: {},
     //图例
     legend: {
         right: '12%',
         bottom: '4%',
         textStyle: {
             color: '#fff',
             fontSize: '13'
         },
         itemGap: 20,
         itemWidth: 10,
         itemHeight: 10,
         icon: 'circle',
         data: ['PM2.5', 'CO2', 'SO']
     },
     grid: {
         left: '8%',
         top: '15%',
         bottom: '14%',
         width: '86%',
     },
     visualMap: [{
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#69dbf7'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'SO',
         seriesIndex: 2
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#1be57a'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'CO2',
         seriesIndex: 1
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#feb01e'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'PM2.5',
         seriesIndex: 0
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#69dbf7'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'SO',
         seriesIndex: 5
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#1be57a'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'CO2',
         seriesIndex: 4
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#feb01e'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'PM2.5',
         seriesIndex: 3
     }],
     //xè½´
     xAxis: {
         axisLine: {
             lineStyle: {
                 color: '#132987'
             }
         },
         axisLabel: {
             textStyle: {
                 color: '#FFF',
                 fontSize: 12
             },
         },
         //刻度线
         axisTick: {
             show: false
         },
         //坐标轴显示值
         data: ["1时", "2时", "3时", "4时", "5时", "6时", "7时", "8时"]
     },
     //yè½´
     yAxis: {
         min: 0,
         max: 100,
         axisLabel: { //  æ”¹å˜y轴字体颜色和大小
             //formatter: '{value} m³ ', //  ç»™y轴添加单位
             textStyle: {
                 color: '#fff',
                 fontSize: 12,
             },
         },
         //坐标轴线
         axisLine: {
             show: false,
         },
         //刻度线
         axisTick: {
             show: false
         },
         //在grid区域中的分隔线
         splitLine: {
             show: true,
             lineStyle: {
                 color: '#132987',
             }
         },
     },

     //
     series: [{
         name: 'PM2.5',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#feb01e'
         },
         data: [43, 50, 41, 18, 28, 25, 26, 40],
     }, {
         name: 'CO2',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#1be57a'
         },
         data: [21, 30, 37, 39, 23, 37, 5, 50]
     }, {
         name: 'SO',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#69dbf7'
         },
         data: [76, 58, 60, 38, 49, 59, 78, 60]
     }, { //水波纹点
         name: 'PM2.5',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#feb01e'
             }, {
                 offset: 1,
                 color: 'rgba(254,176,30,.3)'
             }])
         },
         data: [43, 50, 41, 18, 28, 25, 26, 40]

     }, { //水波纹点
         name: 'CO2',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#1be57a'
             }, {
                 offset: 1,
                 color: 'rgba(27,229,122,.3)'
             }])
         },
         data: [21, 30, 37, 39, 23, 37, 5, 50]

     }, { //水波纹点
         name: 'SO',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#69dbf7'
             }, {
                 offset: 1,
                 color: '#aefbc3'
             }])
         },
         markLine: {
             symbol: "none",
             label: {
                 normal: {
                     show: false,
                 }
             },
             lineStyle: {
                 type: "solid",
                 color: 'rgba(210,56,56,.6)',
                 width: 2
             },
             data: [{
                 yAxis: 60
             }]
         },
         data: [76, 58, 60, 38, 49, 59, 78, 60]

     }]
 };
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    async getData() {
      this.pageflag = true;
      // currentGET("big2").then((res) => {
      //     if (!this.timer) {
      //         console.log("设备总览2", res);
      //     }
      //     if (res.success) {
      //         this.userOverview = res.data;
      //            this.onlineconfig = {
      //             ...this.onlineconfig,
      //             number: [1]
      //         }
      //         this.config = {
      //             ...this.config,
      //             number: [7]
      //         }
      //         this.offlineconfig = {
      //             ...this.offlineconfig,
      //             number: [4]
      //         }
      //         this.laramnumconfig = {
      //             ...this.laramnumconfig,
      //             number: [10]
      //         }
      //         this.switper();
      //     } else {
      //         this.pageflag = false;
      //         this.$Message.warning(res.msg);
      //     }
      // });
      var rep = await ProLocationStatistics();
      this.options = {
     backgroundColor: '#0a1256',
     //浮动框
     tooltip: {},
     //图例
     legend: {
         right: '12%',
         bottom: '4%',
         textStyle: {
             color: '#fff',
             fontSize: '13'
         },
         itemGap: 20,
         itemWidth: 10,
         itemHeight: 10,
         icon: 'circle',
         data: ['成品入库', '成品出库', '成品回框']
     },
     grid: {
         left: '8%',
         top: '15%',
         bottom: '14%',
         width: '86%',
     },
     visualMap: [{
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#69dbf7'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: '成品入库',
         seriesIndex: 2
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#1be57a'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: '成品出库',
         seriesIndex: 1
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#feb01e'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: '成品回框',
         seriesIndex: 0
     }],
     //xè½´
     xAxis: {
         axisLine: {
             lineStyle: {
                 color: '#132987'
             }
         },
         axisLabel: {
             textStyle: {
                 color: '#FFF',
                 fontSize: 12
             },
         },
         //刻度线
         axisTick: {
             show: false
         },
         //坐标轴显示值
         data: ["04/19", "04/20", "04/21", "04/22", "04/23", "04/24", "04/25"]
     },
     //yè½´
     yAxis: {
         axisLabel: { //  æ”¹å˜y轴字体颜色和大小
             //formatter: '{value} m³ ', //  ç»™y轴添加单位
             textStyle: {
                 color: '#fff',
                 fontSize: 12,
             },
         },
         //坐标轴线
         axisLine: {
             show: false,
         },
         //刻度线
         axisTick: {
             show: false
         },
         //在grid区域中的分隔线
         splitLine: {
             show: true,
             lineStyle: {
                 color: '#132987',
             }
         },
     },

     //
     series: [{
         name: '成品入库',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#feb01e'
         },
         data: [160, 156, 150, 180, 170, 200, 20],
     }, {
         name: '成品出库',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#1be57a'
         },
         data: [80, 115, 120, 130, 91, 99,  20]
     }, {
         name: '成品回框',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#69dbf7'
         },
         data: [70, 113, 118, 111, 89, 99,  32]
     }, { //水波纹点
         name: '成品入库',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#feb01e'
             }, {
                 offset: 1,
                 color: 'rgba(254,176,30,.3)'
             }])
         },
         data: [160, 156, 150, 180, 170, 200,  20]

     }, { //水波纹点
         name: '成品出库',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#1be57a'
             }, {
                 offset: 1,
                 color: 'rgba(27,229,122,.3)'
             }])
         },
         data: [80, 115, 120, 130, 91, 99,  20]

     }, { //水波纹点
         name: '成品回框',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#69dbf7'
             }, {
                 offset: 1,
                 color: '#aefbc3'
             }])
         },
         markLine: {
             symbol: "none",
             label: {
                 normal: {
                     show: false,
                 }
             },
             lineStyle: {
                 type: "solid",
                 color: 'rgba(210,56,56,.6)',
                 width: 2
             },
             data: [{
                 yAxis: 60
             }]
         },
         data: [70, 113, 118, 111, 89, 99, 32]

     }]
 };
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
  },
};
</script>
<style lang='scss' scoped>
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      // background-image: url("../../assets/img/left_top_lan.png");
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
      }
    }
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/left-center-right.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,257 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <Echart id="leftcenterright" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
    <Reacquire v-else @onclick="getData" style="line-height:200px">
      é‡æ–°èŽ·å–
    </Reacquire>
  </template>
  
  <script>
  import { currentPOST } from 'api/modules'
  import {Equipmentfault} from "@/api/http.js"
  export default {
    data() {
      return {
        options: {},
        countUserNumData: {
          HoistNum: 0,
          decoderNum: 0,
          uncoderNum: 0,
          elevatorNum:0,
          TransmissionlineNum:0,
          totalNum: 0
        },
        pageflag: true,
        timer: null
      };
    },
    created() {
      this.getData()
    },
    mounted() {
      this.changeTiming();
    },
    beforeDestroy() {
      // this.clearData()
  
    },
    methods: {
      changeTiming() {
      setInterval(() => {
        this.getData();
      }, 5000);
    },
      // clearData() {
      //   if (this.timer) {
      //     clearInterval(this.timer)
      //     this.timer = null
      //   }
      // },
       async getData() {
         this.pageflag = true
        // this.pageflag =false
  
        // currentPOST('big1').then(res => {

        //   //只打印一次
        //   if (!this.timer) {
        //     console.log("设备总览", res);
        //   }
        //   if (res.success) {
        //     // this.countUserNumData = res.data
        //     this.$nextTick(() => {
        //       this.init()
        //     })
  
        //   } else {
        //     this.pageflag = false
        //     this.$Message({
        //       text: res.msg,
        //       type: 'warning'
        //     })
        //   }
        // })


        let rep = await Equipmentfault((a)=>{
          console.log(a);
        });
        
        this.countUserNumData = rep;
            this.$nextTick(() => {
              this.init()
            })
      },
      //轮询
      switper() {
        if (this.timer) {
          return
        }
        let looper = (a) => {
          this.getData()
        };
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        let myChart = this.$refs.charts.chart
        myChart.on('mouseover', params => {
          this.clearData()
        });
        myChart.on('mouseout', params => {
          this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        });
      },
      init() {
        let total = this.countUserNumData.total;
        let colors = ["#ECA444", "#33A1DB", "#56B557","#ffb8c6","#FF21FA"];
        let piedata = {
          name: "故障设备频率",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 4,
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 2,
          },
  
          color: colors,
          data: [
            // {
            //   value: 0,
            //   name: "告警",
            //   label: {
            //     shadowColor: colors[0],
            //   },
            // },
            {
              value: this.countUserNumData.elevator,
              name: "提升机故障",
              label: {
                shadowColor: colors[0],
              },
            },
            {
              value: this.countUserNumData.discremover,
              name: "拆码机故障",
              label: {
                shadowColor: colors[2],
              },
            },
            {
              value: this.countUserNumData.rgVcCar,
              name: "四向车故障",
              label: {
                shadowColor: colors[1],
              },
            },
            {
              value: this.countUserNumData.pipeline,
              name: "输送线故障",
              label: {
                shadowColor: colors[4],
              },
            }
          ],
        };
        this.options = {
          title: {
            // zlevel: 0,
            text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                value: {
                  color: "#ffffff",
                  fontSize: 24,
                  fontWeight: "bold",
                  lineHeight: 20,
                },
                name: {
                  color: "#ffffff",
                  lineHeight: 20,
                },
              },
            },
          },
          tooltip: {
            trigger: "item",
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, .8)",
            textStyle: {
              color: "#FFF",
            },
          },
          legend: {
            show: false,
            top: "5%",
            left: "center",
          },
          series: [
            //展示圆点
            {
              ...piedata,
              tooltip: { show: true },
              label: {
                formatter: " {b|{b}}",
                // formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
                //   position: "outside",
                rich: {
                  b: {
                    color: "#fff",
                    fontSize: 12,
                    lineHeight: 26,
                  },
                  c: {
                    color: "#31ABE3",
                    fontSize: 14,
                  },
                  per: {
                    color: "#31ABE3",
                    fontSize: 14,
                  },
                },
              },
              labelLine: {
                length: 30, // ç¬¬ä¸€æ®µçº¿ é•¿åº¦
                length2: 46, // ç¬¬äºŒæ®µçº¿ é•¿åº¦
                show: true,
              
              },
                emphasis: {
                  show: true,
                },
            },
            {
              ...piedata,
              tooltip: { show: true },
              itemStyle: {},
              label: {
                backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
                height: 0,
                width: 0,
                lineHeight: 0,
                borderRadius: 2.5,
                shadowBlur: 8,
                shadowColor: "auto",
                padding: [2.5, -2.5, 2.5, -2.5],
              },
              labelLine: {
                length: 30, // ç¬¬ä¸€æ®µçº¿ é•¿åº¦
                length2: 46, // ç¬¬äºŒæ®µçº¿ é•¿åº¦
                show: false,
              },
            },
          ],
        };
      },
    },
  };
  </script>
  <style lang='scss' scoped>
  </style>

 CodeManagement/BigScreenVue/src/views/indexs/left-center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,256 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    é‡æ–°èŽ·å–
  </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import {Failuremode} from "@/api/http.js"
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0
      },
      pageflag: true,
      timer: null
    };
  },
  created() {
    this.getData()
  },
  mounted() {
    this.changeTiming();
    
  },
  beforeDestroy() {
    // this.clearData()
  },
  methods: {
    changeTiming() {
      setInterval(() => {
        this.getData();
      }, 5000);
    },
    // clearData() {
    //   if (this.timer) {
    //     clearInterval(this.timer)
    //     this.timer = null
    //   }
    // },
    async getData() {
     // this.pageflag = true
     let rep = await Failuremode((a)=>{
          console.log(a);
        });
      this.countUserNumData = {
        offlineNum: rep.overtime,
        onlineNum: rep.sensitization,
        lockNum: rep.rgVcCar,
        totalNum: rep.total
        },
        this.$nextTick(() => {
            this.init()
          })
      // this.pageflag =false

      // currentGET('big1').then(res => {
      //   //只打印一次
      //   if (!this.timer) {
      //     console.log("设备总览", res);
      //   }
      //   if (res.success) {
      //     this.countUserNumData = res.data
          // this.$nextTick(() => {
          //   this.init()
          // })

      //   } else {
      //     this.pageflag = false
      //     this.$Message({
      //       text: res.msg,
      //       type: 'warning'
      //     })
      //   }
      // })
      
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      });
    },
    init() {
      let total = this.countUserNumData.totalNum;
      let colors = ["#ECA444", "#33A1DB", "#56B557","#ffb8c6"];
      let piedata = {
        name: "故障种类频率",
        type: "pie",
        radius: ["42%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },

        color: colors,
        data: [
          // {
          //   value: 0,
          //   name: "告警",
          //   label: {
          //     shadowColor: colors[0],
          //   },
          // },
          {
            value: this.countUserNumData.onlineNum,
            name: "光电故障",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.countUserNumData.lockNum,
            name: "四向车故障",
            label: {
              shadowColor: colors[2],
            },
          },
          // {
          //   value: this.countUserNumData.onlineNum,
          //   name: "超限位故障",
          //   label: {
          //     shadowColor: colors[1],
          //   },
          // },
          {
            value: this.countUserNumData.offlineNum,
            name: "超时故障",
            label: {
              shadowColor: colors[3],
            },
          },
        ],
      };
      this.options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: " {b|{b}}",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 30, // ç¬¬ä¸€æ®µçº¿ é•¿åº¦
              length2: 46, // ç¬¬äºŒæ®µçº¿ é•¿åº¦
              show: true,
            
            },
              emphasis: {
                show: true,
              },
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
            },
            labelLine: {
              length: 30, // ç¬¬ä¸€æ®µçº¿ é•¿åº¦
              length2: 46, // ç¬¬äºŒæ®µçº¿ é•¿åº¦
              show: false,
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>

 CodeManagement/BigScreenVue/src/views/indexs/left-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,250 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <ul class="user_Overview flex" v-if="pageflag">
        <li class="user_Overview-item" style="color: #00fdfa">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>三楼货架</p>
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
            </div>
            <p>五楼货架</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

            </div>
            <p>六楼货架</p>
        </li>
        <li class="user_Overview-item" style="color: #f5023d">
            <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>七楼货架</p>
        </li>
    </ul>
    <Reacquire v-else @onclick="getData" line-height="200px">
        é‡æ–°èŽ·å–
    </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import {Floorfault} from "@/api/http.js"
let style = {
    fontSize: 24
}
export default {
    data() {
        return {
            options: {},
            userOverview: {
                alarmNum: 2,
                offlineNum: 3,
                onlineNum: 5,
                totalNum: 10,
            },
            pageflag: true,
            timer: null,
            config: {
                number: [100],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#00fdfa",
                },
            },
            onlineconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#07f7a8",
                    fill: "#07f7a8",
                },
            },
            offlineconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#e3b337",
                    fill: "#e3b337",
                },
            },
            laramnumconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#f5023d",
                    fill: "#f5023d",
                },
            }

        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        this.getData()
    },
    mounted() {
    },
    beforeDestroy() {
        this.clearData()

    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        async getData() {
            this.pageflag = true;
            // currentGET("big2").then((res) => {
            //     if (!this.timer) {
            //         console.log("设备总览2", res);
            //     }
            //     if (res.success) {
            //         this.userOverview = res.data;
            //            this.onlineconfig = {
            //             ...this.onlineconfig,
            //             number: [1]
            //         }
            //         this.config = {
            //             ...this.config,
            //             number: [7]
            //         }
            //         this.offlineconfig = {
            //             ...this.offlineconfig,
            //             number: [4]
            //         }
            //         this.laramnumconfig = {
            //             ...this.laramnumconfig,
            //             number: [10]
            //         }
            //         this.switper();  
            //     } else {
            //         this.pageflag = false;
            //         this.$Message.warning(res.msg);
            //     }
            // });
                    let rep = await Floorfault((a)=>{
                            console.log(a);
                    });
                       this.onlineconfig = {
                        ...this.onlineconfig,
                        number: [rep.threefloor]
                    }
                    this.config = {
                        ...this.config,
                        number: [rep.fivefloor]
                    }
                    this.offlineconfig = {
                        ...this.offlineconfig,
                        number: [rep.sixfloor]
                    }
                    this.laramnumconfig = {
                        ...this.laramnumconfig,
                        number: [rep.sevenfloor]
                    }
                    this.switper(); 
        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
    },
};
</script>
<style lang='scss' scoped>
.user_Overview {
    li {
        flex: 1;

        p {
            text-align: center;
            height: 16px;
            font-size: 16px;
        }

        .user_Overview_nums {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 50px auto 30px;
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {

            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");

            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");

            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");

            }
        }
    }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/pass-two.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,442 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div id="name" style="width: 100%; height: 100%">
    <Echart :options="options" style="width: 100%; height: 100%"></Echart>
  </div>
</template>

<script>
import { currentGET } from "api/modules";
import { ProductionRanking } from "@/api/http.js";
import * as echarts from 'echarts';
let style = {
  fontSize: 24,
};
export default {
  data() {
    return {
      pageflag: true,
      myChart: {},
      options: {},
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    init() {
      // import echarts from 'echarts'
var charts = { // æŒ‰é¡ºåºæŽ’列从大到小
  cityList: ['38号点（1）', '38号点（2）', '15号点', '16号点', '24号点'],
  cityData: [7500, 6200, 5700, 4200, 3500]
}
var top10CityList = charts.cityList
var top10CityData = charts.cityData
var color = ['rgba(248,195,248', 'rgba(100,255,249', 'rgba(135,183,255', 'rgba(248,195,248', 'rgba(100,255,249']

let lineY = []
for (var i = 0; i < charts.cityList.length; i++) {
  var x = i
  if (x > color.length - 1) {
    x = color.length - 1
  }
  var data = {
    name: charts.cityList[i],
    color: color[x] + ')',
    value: top10CityData[i],
    itemStyle: {
      normal: {
        show: true,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: color[x] + ', 0.3)'
        }, {
          offset: 1,
          color: color[x] + ', 1)'
        }], false),
        barBorderRadius: 10
      },
      emphasis: {
        shadowBlur: 15,
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      }
    }
  }
  lineY.push(data)
}

console.log(lineY)
this.options= {
    backgroundColor:'#000',
  title: {
    show: false
  },
  tooltip: {
    trigger: 'item'
  },
  grid: {
    borderWidth: 0,
    top: '10%',
    left: '5%',
    right: '15%',
    bottom: '3%'
  },
  color: color,
  yAxis: [{
    type: 'category',
    inverse: true,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false,
      inside: false
    },
    data: top10CityList
  }, {
    type: 'category',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      inside: false,
      textStyle: {
        color: '#b3ccf8',
        fontSize: '14',
        fontFamily: 'PingFangSC-Regular'
      },
      formatter: function (val) {
        return `${val}k`
      }
    },
    splitArea: {
      show: false
    },
    splitLine: {
      show: false
    },
    data: top10CityData
  }],
  xAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  series: [{
    name: '',
    type: 'bar',
    zlevel: 2,
    barWidth: '10px',
    data: lineY,
    animationDuration: 1500,
    label: {
      normal: {
        color: '#b3ccf8',
        show: true,
        position: [0, '-24px'],
        textStyle: {
          fontSize: 16
        },
        formatter: function (a, b) {
          return a.name
        }
      }
    }
  }],
  animationEasing: 'cubicOut'
}
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    async getData() {
      this.pageflag = true;
      // currentGET("big2").then((res) => {
      //     if (!this.timer) {
      //         console.log("设备总览2", res);
      //     }
      //     if (res.success) {
      //         this.userOverview = res.data;
      //            this.onlineconfig = {
      //             ...this.onlineconfig,
      //             number: [1]
      //         }
      //         this.config = {
      //             ...this.config,
      //             number: [7]
      //         }
      //         this.offlineconfig = {
      //             ...this.offlineconfig,
      //             number: [4]
      //         }
      //         this.laramnumconfig = {
      //             ...this.laramnumconfig,
      //             number: [10]
      //         }
      //         this.switper();
      //     } else {
      //         this.pageflag = false;
      //         this.$Message.warning(res.msg);
      //     }
      // });
      var rep = await ProductionRanking();
      var cityLists= rep.map((item,index) => {
        return '#'+(index+1)+' äº§å“'+item.pCode;
      });
      var cityDatas= rep.map((item,index) => {
        return item.qtys;
      });
      var charts = { // æŒ‰é¡ºåºæŽ’列从大到小
  cityList: cityLists,
  cityData: cityDatas
}
var top10CityList = charts.cityList
var top10CityData = charts.cityData
var color = ['rgba(248,195,248', 'rgba(100,255,249', 'rgba(135,183,255', 'rgba(248,195,248', 'rgba(100,255,249']

let lineY = []
for (var i = 0; i < charts.cityList.length; i++) {
  var x = i
  if (x > color.length - 1) {
    x = color.length - 1
  }
  var data = {
    name: charts.cityList[i],
    color: color[x] + ')',
    value: top10CityData[i],
    itemStyle: {
      normal: {
        show: true,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: color[x] + ', 0.3)'
        }, {
          offset: 1,
          color: color[x] + ', 1)'
        }], false),
        barBorderRadius: 10
      },
      emphasis: {
        shadowBlur: 15,
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      }
    }
  }
  lineY.push(data)
}

console.log(lineY)
this.options= {
    backgroundColor:'#000',
  title: {
    show: false
  },
  tooltip: {
    trigger: 'item'
  },
  grid: {
    borderWidth: 0,
    top: '10%',
    left: '5%',
    right: '15%',
    bottom: '3%'
  },
  color: color,
  yAxis: [{
    type: 'category',
    inverse: true,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false,
      inside: false
    },
    data: top10CityList
  }, {
    type: 'category',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      inside: false,
      textStyle: {
        color: '#b3ccf8',
        fontSize: '14',
        fontFamily: 'PingFangSC-Regular'
      },
      formatter: function (val) {
        return `${val}PCS`
      }
    },
    splitArea: {
      show: false
    },
    splitLine: {
      show: false
    },
    data: top10CityData.reverse()
  }],
  xAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  series: [{
    name: '',
    type: 'bar',
    zlevel: 2,
    barWidth: '10px',
    data: lineY,
    animationDuration: 1500,
    label: {
      normal: {
        color: '#b3ccf8',
        show: true,
        position: [0, '-24px'],
        textStyle: {
          fontSize: 16
        },
        formatter: function (a, b) {
          return a.name
        }
      }
    }
  }],
  animationEasing: 'cubicOut'
}
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
  },
};
</script>
<style lang='scss' scoped>
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      // background-image: url("../../assets/img/left_top_lan.png");
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
      }
    }
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,363 @@
<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
// import { currentGET } from "api/modules";
import { graphic } from "echarts";
import {ProductionsOut} from "@/api/http.js"
import axios from 'axios'
export default {
  data() {
    return {
      options: {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // æ·»åŠ å•ä½
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.value) {
                  result +=
                    item.marker +
                    " " +
                    "产量" +
                    " : " +
                    item.value +
                    "PCS</br>";
              } else {
                result += item.marker + " " + item.seriesName + " :  - </br>";
              }
            });
            return result;
          },
        },
        legend: {
          data: ["单位：PCS"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "-5",
        },
        grid: {
          left: "60px",
          right: "0px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: ['8/12','8/13','8/14','8/15','8/16','8/17','8/18'],
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: true },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "单位：PCS",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: 5,
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" },
                  ]),
                  // label: {
                  //     show: true, //开启显示
                  //     position: 'top', //在上方显示
                  //     textStyle: { //数值样式
                  //     color: '#bdbae2',
                  //     fontSize: 10
                  //   }
                  // }
              }
            },
            data: ['200','180','190','185','190','188','195'],
          },
        ],
      },
    };
  },
  props: {},
  mounted() {
    this.getData();
    this.changeTiming();
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    changeTiming() {
      this.timer=setInterval(() => {
        this.getData();
      }, 3000);
    },
    async getData() {
      // this.numberData.forEach((item, index) => {
      //   item.number.number[0] += ++index
      //   item.number = { ...item.number }
      // })
      var rep = await ProductionsOut();
      console.log(rep);
      //获取rep中对象的的today值整合成数组
      var todays= rep.map((item) => {
        return item.today;
      });
      //获取rep中对象的的pcsCounts值整合成数组
      var pcsCounts= rep.map((item) => {
        return item.pcsCounts;
      });
      console.log(todays);
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // æ·»åŠ å•ä½
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (item.value) {
                  result +=
                    item.marker +
                    " " +
                    "产量" +
                    " : " +
                    item.value +
                    "PCS</br>";
              } else {
                result += item.marker + " " + item.seriesName + " :  - </br>";
              }
            });
            return result;
          },
        },
        legend: {
          data: ["单位：PCS"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "-5",
        },
        grid: {
          left: "60px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: todays.reverse(),
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: true },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          }
        ],
        series: [
          {
            name: "单位：PCS",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
            data: pcsCounts.reverse(),
          },
        ],
      };
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
    
    // async getData() {
    //   this.pageflag = true;
    //   let rep = await Timefault((a)=>{
    //       console.log(a);
    //     });

    //    this.init(rep);
    //   currentGET("big6", { companyName: this.companyName }).then((res) => {
    //     console.log("故障时长统计", res);
        
    //     // if (res.success) {
    //     //   this.init(res.data);
    //     //   console.log("测试2",res.data);
    //     // } else {
    //     //   this.pageflag = false;
    //     //   this.$Message({
    //     //     text: res.msg,
    //     //     type: "warning",
    //     //   });
    //     // }
    //   });
    // },
    // init(val) {
    //   console.log(val);
    //   this.options = {
    //     tooltip: {
    //       trigger: "axis",
    //       backgroundColor: "rgba(0,0,0,.6)",
    //       borderColor: "rgba(147, 235, 248, .8)",
    //       textStyle: {
    //         color: "#FFF",
    //       },
    //       formatter: function (params) {
    //         // æ·»åŠ å•ä½
    //         var result = params[0].name + "<br>";
    //         params.forEach(function (item) {
    //           if (item.value) {
    //               result +=
    //                 item.marker +
    //                 " " +
    //                 "合格产量" +
    //                 " : " +
    //                 item.value +
    //                 "ç®±</br>";
    //           } else {
    //             result += item.marker + " " + item.seriesName + " :  - </br>";
    //           }
    //         });
    //         return result;
    //       },
    //     },
    //     legend: {
    //       data: ["单位：箱"],
    //       textStyle: {
    //         color: "#B4B4B4",
    //       },
    //       top: "-5",
    //     },
    //     grid: {
    //       left: "50px",
    //       right: "40px",
    //       bottom: "30px",
    //       top: "20px",
    //     },
    //     xAxis: {
    //       data: [val[6].datetime,val[5].datetime,val[4].datetime,val[3].datetime,
    //             val[2].datetime,val[1].datetime,val[0].datetime],
    //       axisLine: {
    //         lineStyle: {
    //           color: "#B4B4B4",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     yAxis: [
    //       {
    //         splitLine: { show: true },
    //         axisLine: {
    //           lineStyle: {
    //             color: "#B4B4B4",
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value}",
    //         },
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "单位：箱",
    //         type: "bar",
    //         barWidth: 20,
    //         itemStyle: {
    //           borderRadius: 5,
    //           color: new graphic.LinearGradient(0, 0, 0, 1, [
    //             { offset: 0, color: "#956FD4" },
    //             { offset: 1, color: "#3EACE5" },
    //           ]),
    //         },
    //         data: [val[6].qty,val[5].qty,val[4].qty,val[3].qty,
    //               val[2].qty,val[1].qty,val[0].qty],
    //       },
    //     ],
    //   };
    // },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/right-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,194 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
    <component :is="components" :data="list" :class-option="defaultOption">
      <ul class="right_center ">
        <li class="right_center_item" v-for="(item, i) in list" :key="i">
          <span class="orderNum">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="labels ">设备ID：</span>
                <span class="contents zhuyao"> {{ item.gatewayno }}</span>
              </div>
              <div class="info">
                <span class="labels">型号：</span>
                <span class="contents "> {{ item.terminalno }}</span>
              </div>
              <div class="info">
                <span class="labels">告警值：</span>
                <span class="contents warning"> {{ item.alertvalue | montionFilter }}</span>
              </div>
            </div>


            <div class="flex">

              <div class="info">
                <span class="labels"> åœ°å€ï¼š</span>
                <span class="contents ciyao" style="font-size:12px"> {{ item.provinceName }}/{{ item.cityName }}/{{ item.countyName }}</span>
              </div>
              <div class="info time">
                <span class="labels">时间：</span>
                <span class="contents" style="font-size:12px"> {{ item.createtime }}</span>
              </div>

            </div>
            <div class="flex">

              <div class="info">
                <span class="labels">报警内容：</span>
                <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
                }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height:200px" />

</template>

<script>
import { currentGET } from 'api/modules'
import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
import Kong from '../../components/kong.vue'
export default {
  components: { vueSeamlessScroll, Kong },

  data() {
    return {
      list: [],
      pageflag: true,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        limitMoveNum: 3, 
        singleHeight: 250, 
        step:0,
      }

    };
  },
  computed: {
    sbtxSwiperFlag() {
      let ssyjSwiper = this.$store.state.setting.ssyjSwiper
      if (ssyjSwiper) {
        this.components = vueSeamlessScroll
      } else {
        this.components = Kong
      }
      return ssyjSwiper
    }
  },
  created() {
    this.getData()
  },

  mounted() { },
  methods: {
    getData() {
      this.pageflag = true
      // this.pageflag =false
      currentGET('big5', { limitNum: 50 }).then(res => {
        console.log('实时预警', res);
        if (res.success) {
          this.list = res.data.list
          let timer = setTimeout(() => {
              clearTimeout(timer)
              this.defaultOption.step=this.$store.state.setting.defaultOption.step
          }, this.$store.state.setting.defaultOption.waitTime);
        } else {
          this.pageflag = false
          this.$Message.warning(res.msg)
        }
      })
    },

  },
};
</script>
<style lang='scss' scoped>
.right_center {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }


    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #E6A23C;
        font-size: 15px;
      }
    }

  }
}

.right_center_wrap {
  overflow: hidden;
  width: 100%;
  height: 250px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/right-center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,451 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div id="name" style="width: 100%; height: 100%">
    <Echart :options="options" style="width: 100%; height: 100%"></Echart>
  </div>
</template>

<script>
import { currentGET } from "api/modules";
import { ProductionStock } from "@/api/http.js";
import * as echarts from 'echarts';
let style = {
  fontSize: 24,
};
export default {
  data() {
    return {
      pageflag: true,
      myChart: {},
      options: {},
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    init() {
      var data1 = [{
          text: '本月扶持金额(万元)',
          value: '588,10',
          color: '#5dd054'
      }, {
          text: '本年扶持金额(万元)',
          value: '14,131',
          color: '#097ff9'
      }, {
          text: '扶持总金额(万元)',
          value: '12,131',
          color: '#ff6804'
      }];

      function dataFormat(v = {
          value: '12345,12',
          color: '#5dd054'
      }) {
          return [{
              value: 0,
              name: v.value,
             itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00feff'
                            },
                            {
                                offset: 1,
                                color: v.color
                            }
                        ]
                    )
                }
            },
              label: {
                  normal: {
                      textStyle: {
                          fontSize: 30,
                          fontWeight: 500,
                          color: '#fff'
                      }
                  }
              }
          }]
      }

      function childrenFun(str = '按钮') {
          return [{
              type: 'rect',
              left: 'center',
              top: 'center',
              shape: {
                  width: 150,
                  height: 40,
                  r: 20
              },
              style: {
                  fill: '#4709f9',
                  shadowColor:'#f909a1',
                  shadowOffsetX:3,
                  shadowOffsetY:3,
                  lineWidth:2,
                  shadowBlur:10
                //   stroke: '#00feff'
              }
          }, {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                  fill: '#fff',
                  text: str,
                  font: '14px Microsoft YaHei'
              }
          }]
      }


      this.options = {
          backgroundColor:'#04184A',
          legend: {
              show: false
          },
          tooltip: {
              show: false
          },
          series: [{
              type: 'pie',
              radius: [65, 73],
              center: ['18%', '40%'],
              hoverAnimation: false,
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: dataFormat(data1[0])
          }, {
              type: 'pie',
              radius: [65, 73],
              center: ['50%', '40%'],
              hoverAnimation: false,
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: dataFormat(data1[1])
          }, {
              type: 'pie',
              radius: [65, 73],
              center: ['82%', '40%'],
              hoverAnimation: false,
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: dataFormat(data1[2])
          }],
          graphic: {
              elements: [{
                      type: 'group',
                      left: '11%',
                      bottom: '40%',
                      z: 100,
                      children: childrenFun(data1[0].text)
                  },
                  {
                      type: 'group',
                      left: '43%',
                      bottom: '40%',
                      z: 100,
                      children: childrenFun(data1[1].text)
                  },
                  {
                      type: 'group',
                      left: '75%',
                      bottom: '40%',
                      z: 100,
                      children: childrenFun(data1[2].text)
                  }
              ]
          }
      };
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    async getData() {
      this.pageflag = true;
      // currentGET("big2").then((res) => {
      //     if (!this.timer) {
      //         console.log("设备总览2", res);
      //     }
      //     if (res.success) {
      //         this.userOverview = res.data;
      //            this.onlineconfig = {
      //             ...this.onlineconfig,
      //             number: [1]
      //         }
      //         this.config = {
      //             ...this.config,
      //             number: [7]
      //         }
      //         this.offlineconfig = {
      //             ...this.offlineconfig,
      //             number: [4]
      //         }
      //         this.laramnumconfig = {
      //             ...this.laramnumconfig,
      //             number: [10]
      //         }
      //         this.switper();
      //     } else {
      //         this.pageflag = false;
      //         this.$Message.warning(res.msg);
      //     }
      // });
      var rep = await ProductionStock();
      var data1 = [{
          text: '成品库存(PCS)',
          value: rep.cpCount,
          color: '#5dd054'
      }, {
          text: '研发库存(PCS)',
          value: rep.yfCount,
          color: '#097ff9'
      }, {
          text: '尾数库存(PCS)',
          value: rep.wsCount,
          color: '#ff6804'
      }];

      function dataFormat(v = {
          value: '12345,12',
          color: '#5dd054'
      }) {
          return [{
              value: 0,
              name: v.value,
             itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00feff'
                            },
                            {
                                offset: 1,
                                color: v.color
                            }
                        ]
                    )
                }
            },
              label: {
                  normal: {
                      textStyle: {
                          fontSize: 30,
                          fontWeight: 500,
                          color: '#fff'
                      }
                  }
              }
          }]
      }

      function childrenFun(str = '按钮') {
          return [{
              type: 'rect',
              left: 'center',
              top: 'center',
              shape: {
                  width: 150,
                  height: 40,
                  r: 50
              },
              style: {
                  fill: '#67C23A',
                //   stroke: '#00feff'
              }
          }, {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                  fill: '#fff',
                  text: str,
                  font: '14px Microsoft YaHei'
              }
          }]
      }


      this.options = {
          legend: {
              show: false
          },
          tooltip: {
              show: false
          },
          series: [{
              type: 'pie',
              radius: [65, 73],
              center: ['18%', '40%'],
              hoverAnimation: false,
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: dataFormat(data1[0])
          }, {
              type: 'pie',
              radius: [65, 73],
              center: ['50%', '40%'],
              hoverAnimation: false,
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: dataFormat(data1[1])
          }, {
              type: 'pie',
              radius: [65, 73],
              center: ['82%', '40%'],
              hoverAnimation: false,
              label: {
                  normal: {
                      position: 'center'
                  }
              },
              data: dataFormat(data1[2])
          }],
          graphic: {
              elements: [{
                      type: 'group',
                      left: '6.5%',
                      bottom: '10%',
                      z: 100,
                      children: childrenFun(data1[0].text)
                  },
                  {
                      type: 'group',
                      left: '38.5%',
                      bottom: '10%',
                      z: 100,
                      children: childrenFun(data1[1].text)
                  },
                  {
                      type: 'group',
                      left: '70.5%',
                      bottom: '10%',
                      z: 100,
                      children: childrenFun(data1[2].text)
                  }
              ]
          }
      };
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
  },
};
</script>
<style lang='scss' scoped>
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      // background-image: url("../../assets/img/left_top_lan.png");
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
      }
    }
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/right-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,299 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart
    id="rightTop"
    :options="option"
    class="right_top_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    é‡æ–°èŽ·å–
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
import {graphic} from "echarts"
export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
    };
  },
  created() {
   
  },

  mounted() {
     this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false
      currentGET("big4").then((res) => {
        if (!this.timer) {
          console.log("报警次数", res);
        }
        if (res.success) {
          this.countUserNumData = res.data;
          this.$nextTick(() => {
            this.init(res.data.dateList, res.data.numList, res.data.numList2),
              this.switper();
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
        );
      });
    },
    init(xData, yData, yData2) {
      this.option = {
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false, // ä¸ç•™ç™½ï¼Œä»ŽåŽŸç‚¹å¼€å§‹
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        grid: {
          //布局
          show: true,
          left: "10px",
          right: "30px",
          bottom: "10px",
          top: "28px",
          containLabel: true,
          borderColor: "#1F63A3",
        },
        series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            symbol: "none", //去除点
            name: "报警1次数",
            color: "rgba(252,144,16,.7)",
            areaStyle: {
                //右，下，左，上
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(252,144,16,.7)",
                    },
                    {
                      offset: 1,
                      color: "rgba(252,144,16,.0)",
                    },
                  ],
                  false
                ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    color: "#FC9010",
                    backgroundColor: "rgba(252,144,16,0.1)",
                    borderRadius: 6,
                    padding: [7, 14],
                    borderWidth: 0.5,
                    borderColor: "rgba(252,144,16,.5)",
                    formatter: "报警1：{c}",
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#FC9010",
                    shadowColor: "#FC9010",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
          {
            data: yData2,
            type: "line",
            smooth: true,
            symbol: "none", //去除点
            name: "报警2次数",
            color: "rgba(9,202,243,.7)",
            areaStyle: {
                //右，下，左，上
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(9,202,243,.7)",
                    },
                    {
                      offset: 1,
                      color: "rgba(9,202,243,.0)",
                    },
                  ],
                  false
                ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    color: "#09CAF3",
                    backgroundColor: "rgba(9,202,243,0.1)",

                    borderRadius: 6,
                    borderColor: "rgba(9,202,243,.5)",
                    padding: [7, 14],
                    formatter: "报警2：{c}",
                    borderWidth: 0.5,
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#09CAF3",
                    shadowColor: "#09CAF3",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/station-four.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,237 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <ul class="user_Overview flex" v-if="pageflag">
      <li class="user_Overview-item" style="color: #00fdfa">
          <div class="user_Overview_nums allnum ">
              <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
          </div>
          <p>10号检修台</p>
          <br>
          <p>{{stationstate[9].station_state}}</p>
      </li>
      <li class="user_Overview-item" style="color: #07f7a8">
          <div class="user_Overview_nums online">
              <dv-digital-flop :config="config" style="width:100%;height:100%;" />
          </div>
          <p>11号检修台</p>
          <br>
          <p>{{stationstate[10].station_state}}</p>
      </li>
      <li class="user_Overview-item" style="color: #e3b337">
          <div class="user_Overview_nums offline">
              <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

          </div>
          <p>12号检修台</p>
          <br>
          <p>{{stationstate[11].station_state}}</p>
      </li>
  </ul>
  <Reacquire v-else @onclick="getData" line-height="200px">
      é‡æ–°èŽ·å–
  </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import {Floorfault} from "@/api/http.js"
let style = {
  fontSize: 24
}
export default {
  data() {
      return {
          options: {},
          stationstate:[],
          userOverview: {
              alarmNum: 2,
              offlineNum: 3,
              onlineNum: 5,
              totalNum: 10,
          },
          pageflag: true,
          timer: null,
          config: {
              number: [100],
              content: '{nt}',
              style: {
                  ...style,
                  // stroke: "#00fdfa",
                  fill: "#00fdfa",
              },
          },
          onlineconfig: {
              number: [0],
              content: '{nt}',
              style: {
                  ...style,
                  // stroke: "#07f7a8",
                  fill: "#07f7a8",
              },
          },
          offlineconfig: {
              number: [0],
              content: '{nt}',
              style: {
                  ...style,
                  // stroke: "#e3b337",
                  fill: "#e3b337",
              },
          },
      };
  },
  filters: {
      numsFilter(msg) {
          return msg || 0;
      },
  },
  created() {
      this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
      this.clearData()

  },
  methods: {
      clearData() {
          if (this.timer) {
              clearInterval(this.timer)
              this.timer = null
          }
      },
      async getData() {
          this.pageflag = true;
          // currentGET("big2").then((res) => {
          //     if (!this.timer) {
          //         console.log("设备总览2", res);
          //     }
          //     if (res.success) {
          //         this.userOverview = res.data;
          //            this.onlineconfig = {
          //             ...this.onlineconfig,
          //             number: [1]
          //         }
          //         this.config = {
          //             ...this.config,
          //             number: [7]
          //         }
          //         this.offlineconfig = {
          //             ...this.offlineconfig,
          //             number: [4]
          //         }
          //         this.laramnumconfig = {
          //             ...this.laramnumconfig,
          //             number: [10]
          //         }
          //         this.switper();  
          //     } else {
          //         this.pageflag = false;
          //         this.$Message.warning(res.msg);
          //     }
          // });
                  let rep = await Floorfault((a)=>{
                  });
                  this.stationstate=rep;
                     this.onlineconfig = {
                      ...this.onlineconfig,
                      number: [rep[9].station_qty]
                  }
                  this.config = {
                      ...this.config,
                      number: [rep[10].station_qty]
                  }
                  this.offlineconfig = {
                      ...this.offlineconfig,
                      number: [rep[11].station_qty]
                  }
                  this.switper(); 
      },
      //轮询
      switper() {
          if (this.timer) {
              return
          }
          let looper = (a) => {
              this.getData()
          };
          this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      },
  },
};
</script>
<style lang='scss' scoped>
.user_Overview {
  li {
      flex: 1;

      p {
          text-align: center;
          height: 16px;
          font-size: 16px;
      }

      .user_Overview_nums {
          width: 100px;
          height: 100px;
          text-align: center;
          line-height: 100px;
          font-size: 22px;
          margin: 50px auto 30px;
          background-size: cover;
          background-position: center center;
          position: relative;

          &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
          }

          &.bgdonghua::before {
              animation: rotating 14s linear infinite;
          }
      }

      .allnum {

          // background-image: url("../../assets/img/left_top_lan.png");
          &::before {
              background-image: url("../../assets/img/left_top_lan.png");

          }
      }

      .online {
          &::before {
              background-image: url("../../assets/img/left_top_lv.png");

          }
      }

      .offline {
          &::before {
              background-image: url("../../assets/img/left_top_huang.png");

          }
      }

      .laramnum {
          &::before {
              background-image: url("../../assets/img/left_top_hong.png");

          }
      }
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/station-one.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,294 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <ul class="user_Overview flex" v-if="pageflag">
        <li class="user_Overview-item" style="color: #00fdfa">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="inboundConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品入库</p>
            <br>
            <!-- <p>{{stationstate[0].station_state}}</p> -->
            <!-- <p v-if="stationstate[0].station_state == '检修中'">{{stationstate[0].station_checkName}}</p> -->
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="outboundConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品出库</p>
            <br>
            <!-- <p>{{stationstate[1].station_state}}</p> -->
            <!-- <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p> -->
        </li>
        <li class="user_Overview-item" style="color: #E6A23C">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="backConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品回框</p>
            <br>
            <!-- <p>{{stationstate[1].station_state}}</p> -->
            <!-- <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p> -->
        </li>
        <li class="user_Overview-item" style="color: #f56c6c">
            <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="surplusConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品退库</p>
            <br>
            <!-- <p>{{stationstate[1].station_state}}</p> -->
            <!-- <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p> -->
        </li>
        <!-- <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>3号检修台</p>
            <br>
            <p>{{stationstate[2].station_state}}</p>
            <p v-if="stationstate[2].station_state == '检修中'">{{stationstate[2].station_checkName}}</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>4号检修台</p>
            <br>
            <p>{{stationstate[3].station_state}}</p>
            <p v-if="stationstate[3].station_state == '检修中'">{{stationstate[3].station_checkName}}</p>
        </li> -->
    </ul>
    <Reacquire v-else @onclick="getData" line-height="200px">
        é‡æ–°èŽ·å–
    </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import {Floorfault} from "@/api/http.js"
let style = {
    fontSize: 24
}
export default {
    data() {
        return {
            options: {},
            userOverview: {
                alarmNum: 2,
                offlineNum: 3,
                onlineNum: 5,
                totalNum: 10,
            },
            stationstate:[],
            pageflag: true,
            timer: null,
            backConfig: { //成品回框
                number: [9999],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#E6A23C",
                },
            },
            surplusConfig: { //成品余料
                number: [100],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#f56c6c",
                },
            },
            inboundConfig: { //成品入库
                number: [100],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#00fdfa",
                },
            },
            outboundConfig: { //成品出库
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#07f7a8",
                    fill: "#07f7a8",
                },
            },
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        this.getData()
    },
    mounted() {
    },
    beforeDestroy() {
        this.clearData()

    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        async getData() {
            this.pageflag = true;
            // currentGET("big2").then((res) => {
            //     if (!this.timer) {
            //         console.log("设备总览2", res);
            //     }
            //     if (res.success) {
            //         this.userOverview = res.data;
            //            this.onlineconfig = {
            //             ...this.onlineconfig,
            //             number: [1]
            //         }
            //         this.config = {
            //             ...this.config,
            //             number: [7]
            //         }
            //         this.offlineconfig = {
            //             ...this.offlineconfig,
            //             number: [4]
            //         }
            //         this.laramnumconfig = {
            //             ...this.laramnumconfig,
            //             number: [10]
            //         }
            //         this.switper();  
            //     } else {
            //         this.pageflag = false;
            //         this.$Message.warning(res.msg);
            //     }
            // });
                    var rep = await Floorfault();
                    
                    this.inboundConfig={
                        ...this.inboundConfig,
                        number: [rep.inboundCount]
                    }
                    this.outboundConfig={
                        ...this.outboundConfig,
                        number: [rep.outboundCount]
                    }
                    this.backConfig={
                        ...this.backConfig,
                        number: [rep.backboundCount]
                    }
                    this.surplusConfig={
                        ...this.surplusConfig,
                        number: [rep.surplusCount]
                    }
                    // this.onlineconfig = {
                    //     ...this.onlineconfig,
                    //     number: [rep[0].station_qty]
                    // }
                    // this.config = {
                    //     ...this.config,
                    //     number: [rep[1].station_qty]
                    // }
                    // this.offlineconfig = {
                    //     ...this.offlineconfig,
                    //     number: [rep[2].station_qty]
                    // }
                    // this.offlineconfig = {
                    //     ...this.offlineconfig,
                    //     number: [rep[3].station_qty]
                    // }
                    this.switper(); 
        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
    },
};
</script>
<style lang='scss' scoped>
.user_Overview {
    li {
        flex: 1;

        p {
            text-align: center;
            height: 16px;
            font-size: 16px;
        }

        .user_Overview_nums {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 50px auto 30px;
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {

            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");

            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");

            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");

            }
        }
    }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/station-three.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,441 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div id="name" style="width: 100%; height: 100%">
    <Echart :options="options" style="width: 100%; height: 100%"></Echart>
  </div>
</template>

<script>
import { currentGET } from "api/modules";
import { ProLocationStatistics } from "@/api/http.js";
let style = {
  fontSize: 24,
};
export default {
  data() {
    return {
      pageflag: true,
      myChart: {},
      options: {},
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    init() {
      var img =
        "data:image/png;base64,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";
      var trafficWay = [
        {
          name: "锁定",
          value: 10,
        },
        {
          name: "空闲",
          value: 10,
        },
        {
          name: "有货",
          value: 30,
        },
      ];
      var data = [];
      var color = ["#ffa800", "#67C23A", "#ff5b00"];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [70, 80],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return percent + "%";
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      this.options = {
        color: color,
        title: {
          text: "",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["锁定", "空闲", "有货"],
          left: 0,
          top: 0,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    async getData() {
      this.pageflag = true;
      // currentGET("big2").then((res) => {
      //     if (!this.timer) {
      //         console.log("设备总览2", res);
      //     }
      //     if (res.success) {
      //         this.userOverview = res.data;
      //            this.onlineconfig = {
      //             ...this.onlineconfig,
      //             number: [1]
      //         }
      //         this.config = {
      //             ...this.config,
      //             number: [7]
      //         }
      //         this.offlineconfig = {
      //             ...this.offlineconfig,
      //             number: [4]
      //         }
      //         this.laramnumconfig = {
      //             ...this.laramnumconfig,
      //             number: [10]
      //         }
      //         this.switper();
      //     } else {
      //         this.pageflag = false;
      //         this.$Message.warning(res.msg);
      //     }
      // });
      var rep = await ProLocationStatistics();

      var img =
        "data:image/png;base64,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";
      var trafficWay = [
        {
          name: "锁定",
          value: rep.lockCount,
        },
        {
          name: "空闲",
          value: rep.freeCount,
        },
        {
          name: "有货",
          value: rep.inStockCount,
        },
      ];
      var data = [];
      var color = ["#ffa800", "#67C23A", "#ff5b00"];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [70, 80],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return percent + "%";
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      this.options = {
        color: color,
        title: {
          text: `总量\n${rep.lockCount+rep.freeCount+rep.inStockCount}`,
          top: "40%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["锁定", "空闲", "有货"],
          left: 0,
          top: 0,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
  },
};
</script>
<style lang='scss' scoped>
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      // background-image: url("../../assets/img/left_top_lan.png");
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
      }
    }
  }
}
</style>

 CodeManagement/BigScreenVue/src/views/indexs/station-two.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,463 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <div id="name" style="width: 100%; height: 100%">
      <Echart :options="options" style="width: 100%; height: 100%"></Echart>
    </div>
  </template>
  
  <script>
  import { currentGET } from "api/modules";
  import { ProductionStock } from "@/api/http.js";
  import * as echarts from 'echarts';
  let style = {
    fontSize: 24,
  };
  export default {
    data() {
      return {
        pageflag: true,
        myChart: {},
        options: {},
      };
    },
    filters: {
      numsFilter(msg) {
        return msg || 0;
      },
    },
    created() {
      this.getData();
    },
    mounted() {
      this.init();
    },
    beforeDestroy() {
      this.clearData();
    },
    methods: {
      init() {
        let dataPie = [

    {
        value: 410,
        name: '企业'
    },
    {
        value: 380,
        name: '政府'
    },
    {
        value: 501,
        name: '个人'
    },
];
let colorPie = ['#173852', '#0b2036', '#002e49'];
let colorWrap = ['#3087d6', '#afe1ff', '#4be1ff'];
let baseDataPie = [],
    baseDataWrap = [];
for (var i = 0; i < dataPie.length; i++) {
    baseDataPie.push({
        value: dataPie[i].value,
        name: dataPie[i].name,
        itemStyle: {
            normal: {
                borderWidth: 50,

                borderColor: colorPie[i],

            }
        }
    });
    baseDataWrap.push({
        value: dataPie[i].value,
        name: dataPie[i].name,
        itemStyle: {
            normal: {
                color: colorWrap[i],
                borderWidth: 10,
                borderColor: colorWrap[i],
                shadowBlur: 50,
                shadowColor: 'rgba(48, 135, 214, 0.3)',
            }
        }
    }, {
        value: 10,
        name: '',
        itemStyle: {
            normal: {
                color: 'transparent',
                borderWidth: 10,
                borderColor: 'transparent',

            }
        }
    });
}


this.options = {
    backgroundColor: '#021228',
    title: {
        text: '报警总数',
        subtext: '10,225',
        textStyle: {
            color: '#00b5f3',
            fontSize: 12,
            
        },
        subtextStyle: {
            align: 'center',
            fontSize: 18,
            color: ['#85c7e3'],
            fontWeight:800
        },
        x: '38%',
        y: 'center',
    },
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: "{a}：{b} <br/>占比：{d}%"
    },
    legend: {
        data: ['企业', '政府', '个人'],
        icon: 'vertical',
        right: '1%',
        top: 'center',
        orient: 'vertical',
        itemGap: 20,
        itemWidth: 15,
        itemHeight: 8,

        formatter: function(name) {
            let target;
            for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                    target = dataPie[i].value
                }
            }
            let arr = [name, target];
            return arr.join("\n")

        },
        textStyle: {
            lineHeight: 20,
            color: '#9ed2f5',

        },
    },
    grid: {
        left: '1%', // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
        right: '1%', // ä¸Žå®¹å™¨å³ä¾§çš„距离
        top: '1%', // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
        bottom: '1%', // ä¸Žå®¹å™¨åº•éƒ¨çš„距离

    },
    series: [
        {
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['40%', '50%'],
            radius: ['80%', '81%'],
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            data: baseDataWrap
        },
        {

            name: '报警',
            type: 'pie',
            color: colorPie,
            selectedMode: 'single',
            radius: ['55%', '58%'],
            center: ['40%', '50%'],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                }
            },

            data: baseDataPie
        },

    ]
};
      },
      clearData() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      async getData() {
        this.pageflag = true;
        // currentGET("big2").then((res) => {
        //     if (!this.timer) {
        //         console.log("设备总览2", res);
        //     }
        //     if (res.success) {
        //         this.userOverview = res.data;
        //            this.onlineconfig = {
        //             ...this.onlineconfig,
        //             number: [1]
        //         }
        //         this.config = {
        //             ...this.config,
        //             number: [7]
        //         }
        //         this.offlineconfig = {
        //             ...this.offlineconfig,
        //             number: [4]
        //         }
        //         this.laramnumconfig = {
        //             ...this.laramnumconfig,
        //             number: [10]
        //         }
        //         this.switper();
        //     } else {
        //         this.pageflag = false;
        //         this.$Message.warning(res.msg);
        //     }
        // });
        // var rep = await ProductionStock();
        let dataPie = [
    {
        value: 430,
        name: '库存产品'
    },
];
let colorPie = ['#173852'];
let colorWrap = ['#3087d6'];
let baseDataPie = [],
    baseDataWrap = [];
for (var i = 0; i < dataPie.length; i++) {
    baseDataPie.push({
        value: dataPie[i].value,
        name: dataPie[i].name,
        itemStyle: {
            normal: {
                borderWidth: 50,

                borderColor: colorPie[i],

            }
        }
    });
    baseDataWrap.push({
        value: dataPie[i].value,
        name: dataPie[i].name,
        itemStyle: {
            normal: {
                color: colorWrap[i],
                borderWidth: 10,
                borderColor: colorWrap[i],
                shadowBlur: 50,
                shadowColor: 'rgba(48, 135, 214, 0.3)',
            }
        }
    }, {
        value: 10,
        name: '',
        itemStyle: {
            normal: {
                color: 'transparent',
                borderWidth: 10,
                borderColor: 'transparent',

            }
        }
    });
}


this.options = {
    title: {
        text: '产品总数',
        subtext: '430',
        textStyle: {
            color: '#00b5f3',
            fontSize: 12,
            
        },
        subtextStyle: {
            align: 'center',
            fontSize: 18,
            color: ['#85c7e3'],
            fontWeight:800
        },
        x: '33%',
        y: 'center',
    },
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: "{a}：{b} <br/>占比：{d}%"
    },
    legend: {
        data: ['库存产品'],
        icon: 'vertical',
        right: '1%',
        top: 'center',
        orient: 'vertical',
        itemGap: 20,
        itemWidth: 15,
        itemHeight: 8,

        formatter: function(name) {
            let target;
            for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                    target = dataPie[i].value
                }
            }
            let arr = [name, target];
            return arr.join("\n")

        },
        textStyle: {
            lineHeight: 20,
            color: '#9ed2f5',

        },
    },
    grid: {
        left: '1%', // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
        right: '1%', // ä¸Žå®¹å™¨å³ä¾§çš„距离
        top: '1%', // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
        bottom: '1%', // ä¸Žå®¹å™¨åº•éƒ¨çš„距离

    },
    series: [
        {
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['40%', '50%'],
            radius: ['80%', '81%'],
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            data: baseDataWrap
        },
        {

            name: '种类',
            type: 'pie',
            color: colorPie,
            selectedMode: 'single',
            radius: ['55%', '58%'],
            center: ['40%', '50%'],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                }
            },

            data: baseDataPie
        },

    ]
};
        this.switper();
      },
      //轮询
      switper() {
        if (this.timer) {
          return;
        }
        let looper = (a) => {
          this.getData();
        };
        this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
        );
      },
    },
  };
  </script>
  <style lang='scss' scoped>
  .user_Overview {
    li {
      flex: 1;
  
      p {
        text-align: center;
        height: 16px;
        font-size: 16px;
      }
  
      .user_Overview_nums {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 22px;
        margin: 50px auto 30px;
        background-size: cover;
        background-position: center center;
        position: relative;
  
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
  
        &.bgdonghua::before {
          animation: rotating 14s linear infinite;
        }
      }
  
      .allnum {
        // background-image: url("../../assets/img/left_top_lan.png");
        &::before {
          background-image: url("../../assets/img/left_top_lan.png");
        }
      }
  
      .online {
        &::before {
          background-image: url("../../assets/img/left_top_lv.png");
        }
      }
  
      .offline {
        &::before {
          background-image: url("../../assets/img/left_top_huang.png");
        }
      }
  
      .laramnum {
        &::before {
          background-image: url("../../assets/img/left_top_hong.png");
        }
      }
    }
  }
  </style>

 CodeManagement/BigScreenVue/src/views/setting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,105 @@
<template>
    <transition name="yh-setting-fade">
        <div class="setting" :class="{ settingShow: settingShow }" v-show="settingShow">
            <div class="setting_dislog" @click="settingShow = false">

            </div>
            <div class="setting_inner">
                <div class="setting_header">
                    è®¾ç½®
                </div>
                <div class="setting_body">
                    <!-- <div class="left_shu"> å®žæ—¶ç›‘测</div> -->
                    <div class="left_shu"> å…¨å±€è®¾ç½®</div> 
                      <div class="setting_item">
                        <span class="setting_label">
                            æ˜¯å¦è¿›è¡Œè‡ªåŠ¨é€‚配<span class="setting_label_tip">(默认分辨率1920*1080)</span>: 
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="isScaleradio" @change="(val) => radiochange(val, 'isScale')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>

                        </div>
                    </div>
                    <!-- <div class="left_shu"> å®žæ—¶ç›‘测</div>
                    <div class="setting_item">
                        <span class="setting_label">
                            è®¾å¤‡æé†’自动轮询: <span class="setting_label_tip"></span>
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>

                        </div>
                    </div>
                    <div class="setting_item">
                        <span class="setting_label">
                            å®žæ—¶é¢„警轮播:
                        </span>
                        <div class="setting_content">
                            <el-radio-group v-model="ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </div>
                    </div> -->
                    <div class="flex justify-center">
                        <!-- <el-button type="primary" round size="mini">确定</el-button> -->
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            settingShow: false,
            sbtxradio:true,
            ssyjradio: true,
            isScaleradio:true,
        };
    },
    computed: {},
    methods: {
        init() {
            this.settingShow = true
        },
        radiochange(val, type) {
            this.$store.commit('setting/updateSwiper', { val, type })
            if(type==='isScale'){
                // this.$router.go(0)
                // location.reload()
                // window.location.href=window.location.href+"?t="+Date.now()
            }
        },
    },
    created() {
        this.$store.commit('setting/initSwipers')
        this.sbtxradio = this.$store.state.setting.sbtxSwiper,
        this.ssyjradio = this.$store.state.setting.ssyjSwiper,
        this.isScaleradio = this.$store.state.setting.isScale;
    },
    mounted() {
        document.body.appendChild(this.$el);
    },
    beforeDestroy() {
    },
    destroyed() {
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    }
}
</script>

<style lang='scss' scoped>
</style>

 CodeManagement/BigScreenVue/src/views/tjfx/tjfx.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,37 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:52:25
 * @LastEditors: daidai
 * @LastEditTime: 2022-03-04 11:03:40
 * @FilePath: \web-pc\src\pages\big-screen\view\tjfx\tjfx.vue
-->
<template>
    <div>
       
    </div>
</template>

<script>
   export default {
      data() {
          return {

          }
      },
     created(){ 
       
     },

     mounted() {

     },
      methods: {


      },
 }
</script>
<style lang='scss' scoped>


</style>

 CodeManagement/BigScreenVue/vue.config.js

@@ -1,16 +1,129 @@
const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
/*
 * @Author: daidai
 * @Date: 2021-11-22 14:57:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-29 15:12:50
 */
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: './',
  devServer:{
    host:'0.0.0.0',
    port:8090
  outputDir: process.env.VUE_APP_outputDir || 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  lintOnSave: false,
  runtimeCompiler: false,
  transpileDependencies: [],
  productionSourceMap: false,
  css: {
    // æ˜¯å¦ä½¿ç”¨css分离插件 ExtractTextPlugin
    extract: process.env.NODE_ENV === "production" ? true : false,//是否将组件中的 CSS æå–至一个独立的 CSS æ–‡ä»¶ä¸­ (而不是动态注入到 JavaScript ä¸­çš„ inline ä»£ç )。
    sourceMap: false,//是否为 CSS å¼€å¯ source map。设置为 true ä¹‹åŽå¯èƒ½ä¼šå½±å“æž„建的性能。
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/variable.scss";`
      }
    },
    requireModuleExtension: true,
  },
  chainWebpack: config => {

  chainWebpack: (config) => {
    // é…ç½®åˆ«å
    config.resolve.alias
      .set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('assetsBig', resolve('src/pages/big-screen/assets'))
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
      .set('api', resolve('src/api'))
      .set('lib', resolve('src/lib'))

    if (process.env.NODE_ENV === "production") {
      // åˆ é™¤ç³»ç»Ÿé»˜è®¤çš„splitChunk
      config.optimization.delete("splitChunks");
    }
    // åˆ é™¤é¢„加载
    //  // ç§»é™¤ prefetch  æ’件
    //  config.plugins.delete('prefetch-index')
    //  // ç§»é™¤ preload æ’件
    //  config.plugins.delete('preload-index');
    //   config.optimization.minimizer('terser').tap((args) => {
    //     // åŽ»é™¤ç”Ÿäº§çŽ¯å¢ƒconsole
    //     args[0].terserOptions.compress.drop_console = true
    //     return args
    //   })
  },
  lintOnSave: false
}
  configureWebpack: config => {
    // ç»™è¾“出的js名称添加hash
    config.output.filename = "static/js/[name].[hash].js";
    config.output.chunkFilename = "static/js/[name].[hash].js";
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          // æŠ½ç¦»æ‰€æœ‰å…¥å£çš„公用资源为一个chunk
          common: {
            name: "chunk-common",
            chunks: "initial",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
            enforce: true
          },
          // æŠ½ç¦»node_modules下的库为一个chunk
          // vendors: {
          //   name: "chunk-vendors",
          //   test: /[\\/]node_modules[\\/]/,
          //   chunks: "initial",
          //   priority: 2,
          //   reuseExistingChunk: true,
          //   enforce: true
          // },
          element: {
            name: "chunk-element-ui",
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            chunks: "all",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          },
          yhhtUi: {
            name: "chunk-yhht-ui",
            test: /[\\/]node_modules[\\/]yhht-ui[\\/]/,
            chunks: "all",
            priority: 4,
            reuseExistingChunk: true,
            enforce: true
          },
          datav: {
            name: "chunk-datav",
            test: /[\\/]node_modules[\\/]@jiaminghi[\\/]data-view[\\/]/,
            chunks: "all",
            priority: 4,
            reuseExistingChunk: true,
            enforce: true
          },
        }
      }
    };
  },
  // æ˜¯å¦ä¸º Babel æˆ– TypeScript ä½¿ç”¨ thread-loader。该选项在系统的 CPU æœ‰å¤šäºŽä¸€ä¸ªå†…核时自动启用，仅作用于生产构建。
  parallel: require('os').cpus().length > 1,
  devServer: {
    // '/api':{
    //   target: 'http://192.168.8.211:8098/',
    //   // è·¨åŸŸé…ç½®
    //   changeOrigin: true,
    //   // è·¯å¾„重写 
    //   pathRewrite:{
    //         '^/api': '/'
    //     }
    // }
  },
  pluginOptions: {
  }
}

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_Common/TaskEnum/TaskTypeEnum.cs

@@ -95,6 +95,12 @@
        /// </summary>
        [Description("空托直接出库")]
        TrayInToOut = 107,

        /// <summary>
        /// ç«è­¦å‡ºåº“
        /// </summary>
        [Description("火警出库")]
        OutFireAlarm = 500,
    }

    public enum TaskRelocationTypeEnum

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_ITaskInfoService/ITaskService.cs

@@ -307,5 +307,12 @@
        /// <param name="deviceNo"></param>
        /// <returns></returns>
        Dt_Task QueryRelocationTask(string deviceNo);

        /// <summary>
        /// æŸ¥è¯¢æ˜¯å¦å­˜åœ¨ç«è­¦ä»»åŠ¡
        /// </summary>
        /// <param name="deviceNo"></param>
        /// <returns></returns>
        Dt_Task QueryOutFireAlarmTask(string deviceNo);
    }
}

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_Server/Properties/PublishProfiles/FolderProfile.pubxml.user

@@ -5,7 +5,7 @@
<Project>
  <PropertyGroup>
    <_PublishTargetUrl>E:\GET\BaiBuSanLouNew\CodeManagement\WCS\WIDESEAWCS_Server\WIDESEAWCS_Server\bin\Debug\net6.0\publish\</_PublishTargetUrl>
    <History>True|2025-04-21T07:19:45.4644293Z||;True|2025-04-21T14:45:38.3552372+08:00||;True|2025-04-21T14:44:01.6152039+08:00||;True|2025-04-21T14:22:37.4989518+08:00||;True|2025-04-18T10:22:32.9554647+08:00||;True|2025-04-18T09:51:29.1384947+08:00||;True|2025-04-18T09:46:26.7326043+08:00||;True|2025-04-18T09:43:19.2433438+08:00||;False|2025-04-18T09:42:10.6513617+08:00||;True|2025-04-17T16:04:03.4011403+08:00||;True|2025-04-17T16:00:41.6595004+08:00||;True|2025-04-17T14:49:41.2104816+08:00||;True|2025-04-17T14:27:37.3613209+08:00||;True|2025-04-17T13:55:36.7316380+08:00||;True|2025-04-17T13:10:06.6039892+08:00||;True|2025-04-17T12:07:35.7350054+08:00||;True|2025-04-17T11:00:00.9151591+08:00||;True|2025-04-17T10:57:57.3417841+08:00||;True|2025-04-17T10:47:23.2976245+08:00||;True|2025-04-17T10:41:39.7210960+08:00||;True|2025-04-17T10:19:33.9192570+08:00||;True|2025-04-17T10:16:34.7379074+08:00||;True|2025-04-17T10:08:53.3641425+08:00||;True|2025-04-17T09:53:51.9356344+08:00||;True|2025-03-27T13:37:49.9939026+08:00||;True|2025-03-27T13:29:20.1926150+08:00||;True|2025-03-26T23:19:20.7301591+08:00||;True|2025-03-26T23:17:14.1194337+08:00||;True|2025-03-26T23:06:39.1521743+08:00||;True|2025-03-26T22:45:13.0771457+08:00||;True|2025-03-26T15:49:56.7831444+08:00||;True|2025-03-26T11:17:59.8156703+08:00||;True|2025-03-25T10:07:06.2413400+08:00||;True|2025-03-24T22:07:19.1662430+08:00||;True|2025-03-24T17:46:50.5366700+08:00||;True|2025-03-23T22:21:52.3680226+08:00||;True|2025-03-23T22:04:03.0344904+08:00||;True|2025-03-23T18:11:25.3235647+08:00||;True|2025-03-23T16:46:42.6441101+08:00||;True|2025-03-22T17:15:44.8475192+08:00||;True|2025-03-22T16:40:56.2937788+08:00||;True|2025-03-22T16:16:19.5470008+08:00||;True|2025-03-22T15:49:39.1178646+08:00||;True|2025-03-22T15:44:56.2071472+08:00||;True|2025-03-22T15:38:57.0439012+08:00||;True|2025-03-22T15:02:20.9416020+08:00||;True|2025-03-22T14:33:13.6730569+08:00||;True|2025-03-21T23:34:47.6039521+08:00||;True|2025-03-21T02:10:54.8314020+08:00||;True|2025-03-18T16:25:46.4649995+08:00||;True|2025-02-19T11:41:36.9348078+08:00||;True|2025-02-18T18:28:41.9967285+08:00||;True|2025-02-18T18:25:36.2264950+08:00||;True|2025-02-18T10:30:56.5234743+08:00||;True|2025-02-15T15:24:40.7310549+08:00||;True|2025-02-15T14:26:13.5854743+08:00||;True|2025-02-15T14:23:09.9103735+08:00||;True|2025-02-15T14:11:58.0255348+08:00||;True|2025-02-15T13:55:31.3438054+08:00||;True|2025-02-15T13:47:31.3307267+08:00||;True|2025-02-15T13:46:24.9001959+08:00||;True|2025-02-15T13:23:47.4161644+08:00||;True|2025-02-15T13:10:20.4988808+08:00||;True|2025-02-15T13:05:10.7619905+08:00||;True|2025-02-15T12:55:42.2397751+08:00||;True|2025-02-15T12:43:42.1819119+08:00||;True|2025-02-15T10:19:42.3871047+08:00||;True|2025-01-03T16:15:25.4007394+08:00||;True|2025-01-03T15:59:55.6586669+08:00||;True|2025-01-03T15:58:54.7953589+08:00||;True|2025-01-03T15:54:46.8938743+08:00||;True|2025-01-03T15:30:32.7439557+08:00||;True|2025-01-03T15:27:53.2337341+08:00||;True|2025-01-03T15:24:30.7045349+08:00||;True|2025-01-02T14:13:36.7820311+08:00||;</History>
    <History>True|2025-04-24T04:21:20.2135420Z||;True|2025-04-24T12:16:36.7251179+08:00||;True|2025-04-21T15:19:45.4644293+08:00||;True|2025-04-21T14:45:38.3552372+08:00||;True|2025-04-21T14:44:01.6152039+08:00||;True|2025-04-21T14:22:37.4989518+08:00||;True|2025-04-18T10:22:32.9554647+08:00||;True|2025-04-18T09:51:29.1384947+08:00||;True|2025-04-18T09:46:26.7326043+08:00||;True|2025-04-18T09:43:19.2433438+08:00||;False|2025-04-18T09:42:10.6513617+08:00||;True|2025-04-17T16:04:03.4011403+08:00||;True|2025-04-17T16:00:41.6595004+08:00||;True|2025-04-17T14:49:41.2104816+08:00||;True|2025-04-17T14:27:37.3613209+08:00||;True|2025-04-17T13:55:36.7316380+08:00||;True|2025-04-17T13:10:06.6039892+08:00||;True|2025-04-17T12:07:35.7350054+08:00||;True|2025-04-17T11:00:00.9151591+08:00||;True|2025-04-17T10:57:57.3417841+08:00||;True|2025-04-17T10:47:23.2976245+08:00||;True|2025-04-17T10:41:39.7210960+08:00||;True|2025-04-17T10:19:33.9192570+08:00||;True|2025-04-17T10:16:34.7379074+08:00||;True|2025-04-17T10:08:53.3641425+08:00||;True|2025-04-17T09:53:51.9356344+08:00||;True|2025-03-27T13:37:49.9939026+08:00||;True|2025-03-27T13:29:20.1926150+08:00||;True|2025-03-26T23:19:20.7301591+08:00||;True|2025-03-26T23:17:14.1194337+08:00||;True|2025-03-26T23:06:39.1521743+08:00||;True|2025-03-26T22:45:13.0771457+08:00||;True|2025-03-26T15:49:56.7831444+08:00||;True|2025-03-26T11:17:59.8156703+08:00||;True|2025-03-25T10:07:06.2413400+08:00||;True|2025-03-24T22:07:19.1662430+08:00||;True|2025-03-24T17:46:50.5366700+08:00||;True|2025-03-23T22:21:52.3680226+08:00||;True|2025-03-23T22:04:03.0344904+08:00||;True|2025-03-23T18:11:25.3235647+08:00||;True|2025-03-23T16:46:42.6441101+08:00||;True|2025-03-22T17:15:44.8475192+08:00||;True|2025-03-22T16:40:56.2937788+08:00||;True|2025-03-22T16:16:19.5470008+08:00||;True|2025-03-22T15:49:39.1178646+08:00||;True|2025-03-22T15:44:56.2071472+08:00||;True|2025-03-22T15:38:57.0439012+08:00||;True|2025-03-22T15:02:20.9416020+08:00||;True|2025-03-22T14:33:13.6730569+08:00||;True|2025-03-21T23:34:47.6039521+08:00||;True|2025-03-21T02:10:54.8314020+08:00||;True|2025-03-18T16:25:46.4649995+08:00||;True|2025-02-19T11:41:36.9348078+08:00||;True|2025-02-18T18:28:41.9967285+08:00||;True|2025-02-18T18:25:36.2264950+08:00||;True|2025-02-18T10:30:56.5234743+08:00||;True|2025-02-15T15:24:40.7310549+08:00||;True|2025-02-15T14:26:13.5854743+08:00||;True|2025-02-15T14:23:09.9103735+08:00||;True|2025-02-15T14:11:58.0255348+08:00||;True|2025-02-15T13:55:31.3438054+08:00||;True|2025-02-15T13:47:31.3307267+08:00||;True|2025-02-15T13:46:24.9001959+08:00||;True|2025-02-15T13:23:47.4161644+08:00||;True|2025-02-15T13:10:20.4988808+08:00||;True|2025-02-15T13:05:10.7619905+08:00||;True|2025-02-15T12:55:42.2397751+08:00||;True|2025-02-15T12:43:42.1819119+08:00||;True|2025-02-15T10:19:42.3871047+08:00||;True|2025-01-03T16:15:25.4007394+08:00||;True|2025-01-03T15:59:55.6586669+08:00||;True|2025-01-03T15:58:54.7953589+08:00||;True|2025-01-03T15:54:46.8938743+08:00||;True|2025-01-03T15:30:32.7439557+08:00||;True|2025-01-03T15:27:53.2337341+08:00||;True|2025-01-03T15:24:30.7045349+08:00||;True|2025-01-02T14:13:36.7820311+08:00||;</History>
    <LastFailureDetails />
  </PropertyGroup>
</Project>

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_TaskInfoService/Partial/TaskService.cs

@@ -7,6 +7,7 @@
using WIDESEAWCS_Common.TaskEnum;
using WIDESEAWCS_Core;
using WIDESEAWCS_Core.Helper;
using WIDESEAWCS_Core.LogHelper;
using WIDESEAWCS_DTO.TaskInfo;
using WIDESEAWCS_Model.Models;
using WIDESEAWCS_QuartzJob.Models;
@@ -656,12 +657,10 @@
            catch (Exception ex)
            {
                content = WebResponseContent.Instance.Error($"任务完成异常,任务号:【{taskNum}】");
                QuartzLogger.WriteLogToFile($"Info_分容任务完成", $"任务完成异常,任务号:【{taskNum}】异常信息【{ex.StackTrace}】{Environment.NewLine}{Environment.NewLine}");
            }
            QuartzLogger.WriteLogToFile($"Info_分容任务完成", $"任务完成,任务号:【{taskNum}】返回参数【{JsonConvert.SerializeObject(content)}】{Environment.NewLine}{Environment.NewLine}");
            return content;
        }
        //public override WebResponseContent DeleteData(Dt_Task entity)
        //{
        //    return base.DeleteData(entity);
        //}
    }
}

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_TaskInfoService/TaskService.cs

@@ -104,7 +104,7 @@
                            task.NextAddress = item.TargetAddress;
                        }
                        // åˆ¤æ–­ä»»åŠ¡ç›®æ ‡åœ°å€å’Œè·¯å¾„是否满足特定条件
                        else if ((task.TargetAddress == "002-071-001" || task.TargetAddress == "001-061-001") && (task.Roadway.Contains("JZ")|| task.Roadway.Contains("CH")))
                        else if (((task.TargetAddress == "002-071-001" || task.TargetAddress == "001-061-001") && (task.Roadway.Contains("JZ")|| task.Roadway.Contains("CH")))|| task.TaskType == (int)TaskOutboundTypeEnum.OutFireAlarm)
                        {
                            // è®¾ç½®ä»»åŠ¡çŠ¶æ€ä¸ºå‡ºåº“新建
                            task.TaskState = (int)TaskOutStatusEnum.OutNew;
@@ -827,7 +827,7 @@
            catch (Exception ex)
            {
                content = WebResponseContent.Instance.Error($"任务完成异常,任务号:【{taskNum}】");
                QuartzLogger.WriteLogToFile($"Info_任务完成", $"任务完成异常,任务号:【{taskNum}】异常信息【{ex.Message}】{Environment.NewLine}{Environment.NewLine}");
                QuartzLogger.WriteLogToFile($"Info_任务完成", $"任务完成异常,任务号:【{taskNum}】异常信息【{ex.StackTrace}】{Environment.NewLine}{Environment.NewLine}");
            }
            QuartzLogger.WriteLogToFile($"Info_任务完成", $"任务完成,任务号:【{taskNum}】返回参数【{JsonConvert.SerializeObject(content)}】{Environment.NewLine}{Environment.NewLine}");
            return content;
@@ -928,6 +928,11 @@
            return BaseDal.QueryFirst(x => x.Roadway == deviceNo && x.TaskType == (int)TaskRelocationTypeEnum.Relocation && x.TaskState == (int)TaskStatus.Created);
        }

        public Dt_Task QueryOutFireAlarmTask(string deviceNo)
        {
            return BaseDal.QueryFirst(x => x.Roadway == deviceNo && x.TaskType == (int)TaskOutboundTypeEnum.OutFireAlarm && x.TaskState == (int)TaskOutStatusEnum.OutNew);
        }

        public Dt_Task QueryExecutingTaskByBarcode(string barcode, string nextAddress)
        {
            return BaseDal.QueryFirst(x => x.PalletCode == barcode && x.NextAddress == nextAddress && (x.TaskState == (int)TaskInStatusEnum.Line_InExecuting || x.TaskState == (int)TaskOutStatusEnum.Line_OutExecuting), TaskOrderBy);

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_Tasks/StackerCraneJob/CommonStackerCraneJob.cs

@@ -212,7 +212,7 @@
                        Dt_Task? newTask = _taskService.UpdatePosition(task.TaskNum, task.CurrentAddress);
                        _taskService.UpdateData(newTask);
                    }
                    if (task.TaskType.GetTaskTypeGroup() == TaskTypeGroup.OutbondGroup && (task.TargetAddress == "002-071-001" || task.TargetAddress == "001-061-001"))
                    if ((task.TaskType.GetTaskTypeGroup() == TaskTypeGroup.OutbondGroup && (task.TargetAddress == "002-071-001" || task.TargetAddress == "001-061-001"))||task.TaskType == (int)TaskOutboundTypeEnum.OutFireAlarm)
                    {
                        var TASKHTY = task.Adapt<Dt_Task_Hty>();
                        _taskRepository.DeleteData(task);
@@ -234,6 +234,12 @@
        private Dt_Task? GetTask(CommonStackerCrane commonStackerCrane)
        {
            Dt_Task task = null;

            task = _taskService.QueryOutFireAlarmTask(commonStackerCrane.DeviceCode);
            if (task != null)
            {
                return task;
            }
            if (commonStackerCrane.LastTaskType == null)
            {
                task = _taskService.QueryStackerCraneTask(commonStackerCrane.DeviceCode);
@@ -546,7 +552,7 @@
            }
            else if (task.TaskType.GetTaskTypeGroup() == TaskTypeGroup.OutbondGroup)
            {
                if (task.Roadway.Contains("GW"))
                if (task.Roadway.Contains("GW") || task.TaskType == (int)TaskOutboundTypeEnum.OutFireAlarm)
                {
                    string[] endCodes = task.NextAddress.Split("-");
                    stackerCraneTaskCommand.EndRow = Convert.ToInt16(endCodes[0]);
@@ -559,7 +565,7 @@
                }
                else
                {
                    if ((task.TargetAddress == "002-071-001" || task.TargetAddress == "001-061-001") && (task.Roadway.Contains("JZ") || task.Roadway.Contains("CH")))
                    if (((task.TargetAddress == "002-071-001" || task.TargetAddress == "001-061-001") && (task.Roadway.Contains("JZ") || task.Roadway.Contains("CH"))) || task.TaskType == (int)TaskOutboundTypeEnum.OutFireAlarm)
                    {
                        string[] endCodes = task.NextAddress.Split("-");
                        stackerCraneTaskCommand.EndRow = Convert.ToInt16(endCodes[0]);

 CodeManagement/WCS/WIDESEAWCS_Server/WIDESEAWCS_Tasks/StackerStationJob/CommonStackerStationCraneJob.cs

@@ -202,6 +202,12 @@
        {
            Dt_Task task;

            task = _taskService.QueryOutFireAlarmTask(commonStackerCrane.DeviceCode);
            if (task != null)
            {
                return task;
            }

            task = _taskService.QueryRelocationTask(commonStackerCrane.DeviceCode);
            if (task != null)
            {

 CodeManagement/WMS/WIDESEA_WMSServer/WIDESEA_Common/CustomModels/DTSEmergencyTask.cs

@@ -30,5 +30,10 @@
        /// å··é“
        /// </summary>
        public string Roadway { get; set; }

        /// <summary>
        /// è´§ä½ID
        /// </summary>
        public string LocationCode { get; set; }
    }
}

 CodeManagement/WMS/WIDESEA_WMSServer/WIDESEA_Core/Enums/ManageEnum.cs

@@ -192,6 +192,12 @@
        /// </summary>
        [Description("直接出库")]
        InToOut = 106,

        /// <summary>
        /// ç«è­¦å‡ºåº“
        /// </summary>
        [Description("火警出库")]
        OutFireAlarm = 500,
    }

    public enum TaskRelocationTypeEnum

 CodeManagement/WMS/WIDESEA_WMSServer/WIDESEA_StorageTaskServices/Task/Dt_TaskService.cs

@@ -276,6 +276,36 @@

    #endregion å‡ºåº“任务完成

    #region ç«è­¦ä»»åŠ¡å®Œæˆ
    public async Task<WebResponseContent> CompleteOutFireAlarmTaskAsync(Dt_Task task, DtStockInfo stock)
    {
        WebResponseContent content = new WebResponseContent();
        (var loc, var tas) = UpdateStockAndTaskStatus(stock, task);
        var taskHty = task.Adapt<Dt_Task_Hty>();
        taskHty.FinishTime = DateTime.Now;
        taskHty.OperateType = App.User.UserName != null ? (int)OperateTypeEnum.人工完成 : (int)OperateTypeEnum.自动完成;
        taskHty.Creater = App.User.UserName != null ? App.User.UserName : "System";

        DtStockInfo_Hty stockInfo_Hty = stock.Adapt<DtStockInfo_Hty>();
        stockInfo_Hty.ModifyDate = DateTime.Now;

        // äº‹åŠ¡å¤„理
        await _unitOfWorkManage.UseTranAsync(async () =>
        {
            if (task.TaskType != (int)TaskOutboundTypeEnum.OutQuality)
            {
                await DeleteStockInfoAsync(stock.Id);
                await DeleteStockInfoDetailsAsync(stock.StockInfoDetails);
                await AddStockInfoHtyAsync(stockInfo_Hty);
                await UpdateLocationAsync(loc); //质检任务需要持续锁定库位
            }
            await DeleteTaskAsync(task.TaskId);
            await AddTaskHtyAsync(taskHty);
        });
        return content.OK("任务完成成功", task.Remark);
    }
    #endregion

    #region ç§»åº“任务完成

    /// <summary>
@@ -596,6 +626,11 @@
            case (int)TaskOutboundTypeEnum.OutNG:
                LogFactory.GetLog("任务完成").InfoFormat(true, "出库任务", "");
                return await CompleteStackTaskAsync(task, stock);

            case (int)TaskOutboundTypeEnum.OutFireAlarm:

                LogFactory.GetLog("任务完成").InfoFormat(true, "火警任务", "");
                return await CompleteOutFireAlarmTaskAsync(task, stock);

            case (int)TaskRelocationTypeEnum.Relocation:
                return await CompleteTransferTaskAsync(task, stock);
@@ -1641,7 +1676,10 @@
            return content.Error(ex.Message);
        }
    }

    /// <summary>
    /// èŽ·å–库存信息
    /// </summary>
    /// <returns></returns>
    public WebResponseContent GetStockInfo()
    {
        WebResponseContent content = new WebResponseContent();

 CodeManagement/WMS/WIDESEA_WMSServer/WIDESEA_StorageTaskServices/Task/Partial/Dt_TaskService.cs

@@ -1092,100 +1092,119 @@

            if (emergencyTask == null) throw new Exception("火警参数为空");

            DtLocationInfo locationInfo = _locationRepository.QueryFirst(x => x.Row == emergencyTask.row && x.Column == emergencyTask.column && x.Layer == emergencyTask.layer && x.AreaId == emergencyTask.zone);
            if (locationInfo == null)
            string[] strings = emergencyTask.LocationCode.Split("-");

            string[] Roadways = strings[0].Select(x => x.ToString()).ToArray();
            string Roadway = string.Empty;
            switch (Roadways[0])
            {
                throw new Exception("未知库位");
                case "J":
                    Roadway = "JZSC" + Roadways[1];
                    break;
                case "G":
                    Roadway = "GWSC" + Roadways[1];
                    break;
                case "C":
                    Roadway = "CWSC" + Roadways[1];
                    break;
                default: throw new Exception("未识别库位编码");
            }

            //查找消防站台
            var station = _stationManagerRepository.QueryFirst(t => t.Roadway == locationInfo.RoadwayNo
                 && t.stationType == (int)StationManager.FireStation
                 /*&& t. == "Enable"*/);
            if (station == null)
            for (int i = 0; i < 2; i++)
            {
                throw new Exception("消防站台未配置!");
            }

            //查找库存信息
            var stockInfo = _stockInfoRepository.QueryFirst(x => x.LocationCode == locationInfo.LocationCode && x.LocationInfo.RoadwayNo == locationInfo.RoadwayNo);
            //托盘码
            string barcode = string.Empty;
            if (stockInfo != null)
            {
                barcode = stockInfo.PalletCode;
            }
            else
            {
                //无库存信息，生成随机托盘码
                barcode = "M" + DateTime.Now.ToString("MMddHHmmss") + "-" + new Random().Next(100, 1000);
            }

            Dt_Task fireTask = BaseDal.QueryFirst(x => x.TaskType == 500 && x.SourceAddress == locationInfo.LocationCode && x.Roadway == station.Roadway);

            if (fireTask != null)
            {
                throw new Exception("已添加火警出库任务");
            }

            int taskNum = BaseDal.GetTaskNo().Result;
            Dt_Task task = new Dt_Task
            {
                CreateDate = DateTime.Now,
                Creater = "DTS",
                CurrentAddress = locationInfo.LocationCode,
                Grade = 1,
                Dispatchertime = DateTime.Now,
                PalletCode = barcode,
                Roadway = station.Roadway,
                SourceAddress = locationInfo.LocationCode,
                TaskState = (int)TaskOutStatusEnum.OutNew,
                TaskType = 500,
                TargetAddress = station.stationLocation,
                NextAddress = station.stationChildCode,
                TaskNum = taskNum, //_taskRepository.GetTaskNo().Result,
                TaskId = 0,
            };

            // å°è¯•æ·»åŠ æ–°ä»»åŠ¡
            WMSTaskDTO taskDTO = new WMSTaskDTO()
            {
                TaskNum = task.TaskNum.Value,
                Grade = 1,
                PalletCode = task.PalletCode,
                RoadWay = task.Roadway,
                SourceAddress = task.SourceAddress,
                TargetAddress = task.TargetAddress,
                TaskState = task.TaskState.Value,
                Id = 0,
                TaskType = 500,
            };

            var configs = _configService.GetConfigsByCategory(CateGoryConst.CONFIG_SYS_IPAddress);
            var ipAddress = configs.FirstOrDefault(x => x.ConfigKey == SysConfigConst.WCSIPAddress)?.ConfigValue;
            var ReceiveByWMSTask = configs.FirstOrDefault(x => x.ConfigKey == SysConfigConst.ReceiveByWMSTask)?.ConfigValue;
            if (ReceiveByWMSTask == null || ipAddress == null)
            {
                throw new Exception("WMS IP æœªé…ç½®");
            }
            var wmsIpAddrss = ipAddress + ReceiveByWMSTask;

            var respon = HttpHelper.Post(wmsIpAddrss, JsonConvert.SerializeObject(taskDTO));
            if (respon != null)
            {
                WebResponseContent respone = JsonConvert.DeserializeObject<WebResponseContent>(respon.ToString());
                if (respone.Status)
                DtLocationInfo locationInfo = _locationRepository.QueryFirst(x => x.Row == Convert.ToInt16(strings[1]) && x.Column == Convert.ToInt16(strings[2]) && x.Layer == (i == 0 ? Convert.ToInt16(strings[3]) * 2 - 1 : Convert.ToInt16(strings[3]) * 2) && x.RoadwayNo == Roadway);
                if (locationInfo == null)
                {
                    var taskId = BaseDal.AddData(task);
                    throw new Exception("未知库位");
                }

                //查找消防站台
                var station = _stationManagerRepository.QueryFirst(t => t.Roadway == locationInfo.RoadwayNo && t.stationType == (int)StationManager.FireStation);
                if (station == null)
                {
                    throw new Exception("消防站台未配置!");
                }

                //查找库存信息
                var stockInfo = _stockInfoRepository.QueryFirst(x => x.LocationCode == locationInfo.LocationCode && x.LocationInfo.RoadwayNo == locationInfo.RoadwayNo);
                //托盘码
                string barcode = string.Empty;
                if (stockInfo != null)
                {
                    barcode = stockInfo.PalletCode;
                }
                else
                {
                    throw new Exception("WCS处理失败:" + respone.Message);
                    //无库存信息，生成随机托盘码
                    barcode = "M" + DateTime.Now.ToString("MMddHHmmss") + "-" + new Random().Next(100, 1000);
                }
            }
            else
            {
                throw new Exception("请求处理失败");

                Dt_Task fireTask = BaseDal.QueryFirst(x => x.TaskType == (int)TaskOutboundTypeEnum.OutFireAlarm && x.SourceAddress == locationInfo.LocationCode && x.Roadway == station.Roadway);

                if (fireTask != null)
                {
                    throw new Exception("已添加火警出库任务");
                }

                int taskNum = BaseDal.GetTaskNo().Result;
                Dt_Task task = new Dt_Task
                {
                    CreateDate = DateTime.Now,
                    Creater = "DTS",
                    CurrentAddress = locationInfo.LocationCode,
                    Grade = i == 0 ? 5 : 3,
                    Dispatchertime = DateTime.Now,
                    PalletCode = barcode,
                    Roadway = station.Roadway,
                    SourceAddress = locationInfo.LocationCode,
                    TaskState = (int)TaskOutStatusEnum.OutNew,
                    TaskType = (int)TaskOutboundTypeEnum.OutFireAlarm,
                    TargetAddress = station.stationLocation,
                    NextAddress = station.stationLocation,
                    TaskNum = taskNum, //_taskRepository.GetTaskNo().Result,
                    TaskId = 0,
                };

                // å°è¯•æ·»åŠ æ–°ä»»åŠ¡
                WMSTaskDTO taskDTO = new WMSTaskDTO()
                {
                    TaskNum = task.TaskNum.Value,
                    Grade = 1,
                    PalletCode = task.PalletCode,
                    RoadWay = task.Roadway,
                    SourceAddress = task.SourceAddress,
                    TargetAddress = task.TargetAddress,
                    TaskState = task.TaskState.Value,
                    Id = 0,
                    TaskType = task.TaskType,
                };

                var configs = _configService.GetConfigsByCategory(CateGoryConst.CONFIG_SYS_IPAddress);
                var ipAddress = configs.FirstOrDefault(x => x.ConfigKey == SysConfigConst.WCSIPAddress)?.ConfigValue;
                var ReceiveByWMSTask = configs.FirstOrDefault(x => x.ConfigKey == SysConfigConst.ReceiveByWMSTask)?.ConfigValue;
                if (ReceiveByWMSTask == null || ipAddress == null)
                {
                    throw new Exception("WMS IP æœªé…ç½®");
                }
                var wmsIpAddrss = ipAddress + ReceiveByWMSTask;

                var respon = HttpHelper.Post(wmsIpAddrss, JsonConvert.SerializeObject(taskDTO));
                if (respon != null)
                {
                    WebResponseContent respone = JsonConvert.DeserializeObject<WebResponseContent>(respon.ToString());
                    if (respone.Status)
                    {
                        var taskId = BaseDal.AddData(task);
                    }
                    else
                    {
                        throw new Exception("WCS处理失败:" + respone.Message);
                    }
                }
                else
                {
                    throw new Exception("请求处理失败");
                }
            }
            LogFactory.GetLog("DTS火警出库").Info(true, $"\r\r--------------------------------------");
            LogFactory.GetLog("DTS火警出库").Info(true, obj.ToJsonString());

 CodeManagement/WMS/WIDESEA_WMSServer/WIDESEA_StorageTaskServices/Task/Partial/RequestInTaskAsync.cs

@@ -79,7 +79,7 @@
            // TODO åˆ¤æ–­åœ¨é€”数量

            var needBarcode = await SqlSugarHelper.DbWCS.Queryable<dt_needBarcode>().FirstAsync(x => x.productLine == STATION.productLine && x.fromArea == "CW");
            var needCount = needBarcode.inLineNum;
            var needCount = needBarcode.inLineNum = BaseDal.QueryData(x => x.TargetAddress == STATION.stationChildCode).Count();
            //var count = BaseDal.QueryData(x => x.TargetAddress == stationManagers[0].Roadway).Count;
            if (needCount < needBarcode.cacheNum)
            {