更新大屏幕页面和任务信息页面

liulijun

2025-11-17 da4257bc32483409af02a06dd342c6981ec786ec

 ÏîÄ¿´úÂë/BigScreen/README.md

@@ -1,238 +1,200 @@


## é¡¹ç›®æè¿°



根据奔跑吧面条的**[vue-big-screen](https://gitee.com/MTrun/big-screen-vue-datav)**开源框架基础上进行修改。

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

- é¡¹ç›®éƒ¨åˆ†åŒºåŸŸä½¿ç”¨äº†å…¨å±€æ³¨å†Œæ–¹å¼ï¼Œå¢žåŠ äº†æ‰“包体积，在实际运用中请使用 **按需引入**。

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

- è¯·æ‹‰å– master åˆ†æ”¯çš„代码，其余分支是开发分支。

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


友情链接：

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://www.daidaibg.com/bigscreen/a-img/home.png)

### é¡¹ç›®é¢„览地址

[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)

### é¡¹ç›®ä»“库地址

**github地址**

[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)

**Gitee地址**

[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)

### vue3+vite版本地址

**github地址**

[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)

**Gitee地址**

[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)

### 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>
  <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 ScaleScreen from 'scale-screen'

export default {
  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   |

## å…¬ç”¨ç»„件

封装了除面条外个别用到的组件

### 5.1 message消息提示

因为刚开始没想着用第三方提示库，自己简单封装了一个。

注：组件内部目前只有warning，类型，如果需要其他类型自己组件内添加。

因在main.js注册全局可以直接使用，不需要引入

```js
  this.$Message({
      text: res.msg,
      type: 'warning'
  })
//也可以这样
this.$Message.warning(res.msg)
```

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

### 5.2 å¤–边框

因为我的项目外边框几乎一样，还有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交流群： 713105837 å¼€æºé¡¹ç›®Vue/Vue3/React-big-screen交流群** 

QQ群二维码：

![输入图片说明](https://gitee.com/MTrun/big-screen-vue-datav/raw/master/public/image.png)
![输入图片说明](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)
- é¡¹ç›®éœ€è¦å…¨å±å±•ç¤ºï¼ˆæŒ‰ 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。
- è¯·æ‹‰å– master åˆ†æ”¯çš„代码，其余分支是开发分支。
- éœ€è¦å…¶å®ƒåœ°å›¾æ•°æ®çš„，请查看我的其它项目（有一个地图合集）

友情链接：

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)

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

## äºŒã€ä¸»è¦æ–‡ä»¶ä»‹ç»

| æ–‡ä»¶                | ä½œç”¨/功能                                                              |
| ------------------- | --------------------------------------------------------------------- |
| 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 æ’件代码（适配屏幕尺寸，可定制化修改）     |

## ä¸‰ã€ä½¿ç”¨ä»‹ç»

### å¯åŠ¨é¡¹ç›®

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

### å°è£…组件渲染图表

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

项目配置了默认的 ECharts å›¾è¡¨æ ·å¼ï¼Œæ–‡ä»¶åœ°å€ï¼š`common/echart/theme.json`。

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

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

### åŠ¨æ€æ¸²æŸ“图表

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

chart æ–‡ä»¶çš„主要逻辑为：

```html
<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
</template>

<script>
  // å¼•å…¥å°è£…组件
import Echart from '@/common/echart'
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: {
          ...
        }
      }
    ]
  }
}
```

### æ›´æ¢è¾¹æ¡†

边框是使用了 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>
```

### æ›´æ¢å›¾è¡¨

直接进入 `components/echart` ä¸‹çš„文件修改成你要的 echarts æ¨¡æ ·ï¼Œå¯ä»¥åŽ»[echarts å®˜æ–¹ç¤¾åŒº](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。

### 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 é…ç½®å‚考范例（因人而异）

```js
import axios from 'axios';

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

## å››ã€æ›´æ–°æƒ…况

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

这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！