From da4257bc32483409af02a06dd342c6981ec786ec Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期一, 17 十一月 2025 17:14:14 +0800
Subject: [PATCH] 更新大屏幕页面和任务信息页面
---
项目代码/BigScreen/README.md | 430 ++++++++++++++++++++++++-----------------------------
1 files changed, 196 insertions(+), 234 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/README.md" "b/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/README.md"
index 303b36b..43f4389 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/README.md"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/README.md"
@@ -1,238 +1,200 @@
-
-
-## 椤圭洰鎻忚堪
-
-
-
-鏍规嵁濂旇窇鍚ч潰鏉＄殑**[vue-big-screen](https://gitee.com/MTrun/big-screen-vue-datav)**寮�婧愭鏋跺熀纭�涓婅繘琛屼慨鏀广��
-
-- 椤圭洰闇�瑕佸叏灞忓睍绀猴紙鎸� F11锛夈��
-
-- 椤圭洰閮ㄥ垎鍖哄煙浣跨敤浜嗗叏灞�娉ㄥ唽鏂瑰紡锛屽鍔犱簡鎵撳寘浣撶Н锛屽湪瀹為檯杩愮敤涓浣跨敤 **鎸夐渶寮曞叆**銆�
-
-- 椤圭洰鐜锛歏ue-cli銆丏ataV銆丒charts銆乄ebpack銆丯pm銆丯ode锛宎xios,mock銆�
-
-- 璇锋媺鍙� master 鍒嗘敮鐨勪唬鐮侊紝鍏朵綑鍒嗘敮鏄紑鍙戝垎鏀��
-
-- 鍦ㄩ」鐩畃ublic鐩綍涓嬪瓨鏀惧湴鍥炬暟鎹悎闆嗭紝鏍规嵁鍦板競缂栧瓨鏀俱��
-
-
-鍙嬫儏閾炬帴锛�
-
-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](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鐗堟湰寮�濮嬮噰鐢ㄨ嚜閫傚簲缁勪欢鏂瑰紡锛屼笉鍐嶄娇鐢╩ixin鏂瑰紡銆�
-
-### 婊氬姩璁剧疆锛岃嚜閫傚簲璁剧疆
-
-椤圭洰涓彲浠ヨ繘琛屾粴鍔ㄩ厤缃紝鍐呭鏄惁婊氬姩
-
-鐐瑰嚮鍙充笂瑙掕缃寜閽�
-
-
-
-
-鍙互杩涜浠ヤ笅閰嶇疆锛屽彲浠ヨ嚜琛屼唬鐮佷腑杩涜淇敼鎴栧鍔犻厤缃�
-
-
-
-
+
+## 涓�銆侀」鐩弿杩�
+
+- 涓�涓熀浜� Vue銆丏atav銆丒chart 妗嗘灦鐨� " **鏁版嵁澶у睆椤圭洰** "锛岄�氳繃 Vue 缁勪欢瀹炵幇鏁版嵁鍔ㄦ�佸埛鏂版覆鏌擄紝鍐呴儴鍥捐〃鍙疄鐜拌嚜鐢辨浛鎹€�傞儴鍒嗗浘琛ㄤ娇鐢� DataV 鑷甫缁勪欢锛屽彲杩涜鏇存敼锛岃鎯呰鐐瑰嚮涓嬫柟 DataV 鏂囨。銆�
+
+- [**Vue3 鐗堟湰璇风偣鍑昏繖閲屾煡鐪嬶紝浣跨敤 Hooks+TypeScript 瀹炵幇锛屽叏鏂板唴瀹圭瓑浣犳帰绱�!**](https://gitee.com/MTrun/vue-big-screen-plugin)
+- [**React 鐗堟湰璇风偣鍑昏繖閲屾煡鐪嬶紝鍏ㄦ柊鐣岄潰瓒呯骇濂界湅锛侊紒锛�**](https://gitee.com/MTrun/react-big-screen)
+- 椤圭洰闇�瑕佸叏灞忓睍绀猴紙鎸� F11锛夈��
+- 椤圭洰閮ㄥ垎鍖哄煙浣跨敤浜嗗叏灞�娉ㄥ唽鏂瑰紡锛屽鍔犱簡鎵撳寘浣撶Н锛屽湪瀹為檯杩愮敤涓浣跨敤 **鎸夐渶寮曞叆**銆�
+- 鎷夊彇椤圭洰涔嬪悗锛屽缓璁寜鐓ц嚜宸辩殑鍔熻兘鍖哄煙閲嶅懡鍚嶆枃浠讹紝鐜颁互绠�鍗曠殑浣嶇疆杩涜鍖哄垎銆�
+- 椤圭洰鐜锛歏ue-cli-3.0銆丏ataV-2.7.3銆丒charts-4.6.0(濡傛灉5.x鐗堟湰鏈夐棶棰橈紝璇峰垏鎹㈠埌4.x鐗堟湰)銆乄ebpack-4.0銆丯pm-6.13銆丯ode-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)
+
+椤圭洰灞曠ず
+
+
+## 浜屻�佷富瑕佹枃浠朵粙缁�
+
+| 鏂囦欢 | 浣滅敤/鍔熻兘 |
+| ------------------- | --------------------------------------------------------------------- |
+| 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锛歴cale` 缂╂斁鏂规锛岄�氳繃 `ref` 鎸囧悜 `views/index`锛屽睆骞曟敼鍙樻椂缂╂斁鍐呭銆傞」鐩殑鍩哄噯灏哄鏄� `1920px*1080px`锛屾墍浠ユ敮鎸佸悓姣斾緥灞忓箷 100% 濉厖锛屽鏋滈潪鍚屾瘮渚嬪垯浼氳嚜鍔ㄨ绠楁瘮渚嬪眳涓～鍏咃紝涓嶈冻鐨勯儴鍒嗗垯鐣欑櫧銆傚疄鐜颁唬鐮佸湪 `src/utils/userDraw` 锛屽鏋滄湁鍏跺畠鐨勯�傞厤鏂规锛屾杩庝氦娴併��
+
+### 璇锋眰鏁版嵁
+
+鐜板湪鐨勯」鐩湭浣跨敤鍓嶅悗绔暟鎹姹傦紝寤鸿浣跨敤 axios 杩涜鏁版嵁璇锋眰锛屽湪 main.js 浣嶇疆杩涜鍏ㄥ眬閰嶇疆銆�
+
+- axios 鐨� main.js 閰嶇疆鍙傝�冭寖渚嬶紙鍥犱汉鑰屽紓锛�
+
+```js
+import axios from 'axios';
+
+//鎶婃柟娉曟斁鍒皏ue鐨勫師鍨嬩笂锛岃繖鏍峰氨鍙互鍏ㄥ眬浣跨敤浜�
+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锛屽鏋滄湁闂璇疯繘琛岃瘎璁猴紝鎴戜篃浼氬敖鍔涘幓鏇存柊锛岃嚜宸变篃鍦ㄥ墠绔涔犵殑璺笂锛屾杩庝氦娴侊紝闈炲父鎰熻阿锛�
\ No newline at end of file
--
Gitblit v1.9.3