事業の発展に伴い、多くの場合、一部のデータが大画面を必要と受け取ります。私は2つのオプション、人間の肉まで1セットがあります実現課は、第二はアリクラウドDataVに設定されています。
人間の肉を設定し、足場は、ローカルの開発環境でエンコードされ、努力、能力の再利用性が悪いの重複がたくさんある、フロントの貴重な開発時間を占めていました。
DataV強力は、使用に支払う必要があり、部品を使いやすいだけでなく、追加料金で、展開のローカライズをサポートするだけでなく、多数の2つの位置を維持する必要はありません。
要約すると、このような大規模な画面、明らかにビジネスの重要性のためのより多くの需要があれば、あなたは考慮する必要があり、開発の複雑さを軽減R＆Dの効率を改善し、コストを削減するために、大画面システムを開発するための独自のを構築することが必要です。ビッグを解体するシステムを構築するために、この論文の試みは、デザインとすべての人のために、このようなシステムの仕組みの実装を提供するクラウドベースのフロントエンドの大画面データチームを採用することを政府に説明します。
何がビッグで
ビッグ政府はすぐに大画面を構築するためにルバニ、大画面とデータコンポーネントライブラリ、データ可視化システムを構築するために、クラウドベースのフロントエンドシステムを採用します。
なぜ、ビッグ？オープンBaiduの翻訳と呼んで大画面を入力し、英語の翻訳は、ビッグと呼ばれる丸め、ビッグスクリーンです。
自分の長所のシステム
カスタマイズ：インテリア製品、部品や表示形態は、個人テーラー
サポートローカライズ展開：ビジネスニーズは（アリ雲を含む）、外部ネットワークにアクセスすることはできません、ネットワークアクセスなど、ビジネスの一部のみを決定する
位置の数の二組を維持するために、問題のDataVニーズ解決するために
保存することを同社のコストは、同社の製品データ機能を強化、ブースト収入
要約
データは、多くの場合、会議や展示会、ビジネスのモニタリング、早期警戒リスク、地理情報分析やその他のビジネスシナリオで使用される視覚的な方法を使用して、複雑なデータの大画面ディスプレイ製品、です。以下は、テンプレートアリ雲DataVのは、次のとおりです。
ビューのフロントエンド実装の観点から、大画面の基本的な要素は、ように折れ線グラフ、棒グラフ、円グラフ、タイトル、背景、境界線となります。コンポーネント、ドラッグ・アンド・ドロップ・レイアウト、スタイルの設定、データソース、データベースに格納されたデータを選択することによって、コンポーネントのこれらの基本的な要素に基づいてアイデアを実現します。依存コンポーネント、ユーザーに提示様式やデータについては、ページを表示します。
シーンによって大画面を編集し、閲覧に分けることができます。
編集：大画面を作るために大画面メーカーを指します。
表示：両方のケースが含まれ、大画面を表示するには、大画面のプレビューと実際のユーザーの生産。
編集します
大画面の可視化システムを編集することは、ページ・レイアウト参照DataVコアデータです。
トップ、組立エリア、キャンバス、構成データ領域：4つの部分に分解。今度は地区を打破する、ケースのデザインのアイデアについて話をします。
デザインのアイデア
ページデータと依存コンポーネントはSSRにより、HTMLファイル内に注入された
アプリケーション状態に格納されたアプリケーションデータ、未使用Vuex（後続Vuexの使用を検討するために）
サブアセンブリに小道具を使用してデータ転送
データは、祖父母のコンポーネントはサブアセンブリにイベントの中心を通過しました。
上部
表題中間大画面;及びプレビュー権が保存され、表示層、構成要素のリスト、構成データ隠蔽領域を制御し、スイッチ領域の左側：上部領域は、3つの部分を含みます。
組立ゾーンが
アセンブリ追加の成分を含む、層（追加成分）リストと右の成分の左側に分割され、層の選択操作、パケットアライメント機能。
層
移動層支持体、下、上部、削除操作、操作メニューを表示する権利をサポートする（複数選択をサポートし、グループ化しません）。原理は、基本的な配列を変更する方法の配列を使用することです
コンポーネントアセンブリをクリックして選択し、キャンバスエリア選択したコンポーネント、データ構成表示領域の設定項目
コンポーネント一覧
すべてのコンポーネントは、コンポーネントを追加するために、すべての大画面コンポーネントを示しクリックまたはドラッグ
の着信ゾーン属性の設定、DOMにJS、CSS、構成スキーマ、CSS、JSを取得するための非同期成分を使用してコンポーネントを追加するには、configureを
、部品の種類によってグループ化されたサポートユーザーフレンドリー使用しています。
キャンバス
アセンブリ大画面のリアルタイム表示、寸法、特性及びデータ変更エフェクトのキャンバスです。
ドラッグとサイズ変更の位置とサイズの変更アセンブリVUE-ドラッグ・サイズ変更可能なメソッドを登録することにより、対応するコンポーネントのプロパティを変更します。絶対位置、上部及びドラッグの左修正値を使用してコンポーネント。
props.modelsを変更することによって変更されたコンポーネントに対応する属性の値を変更します。
データは静的データとインターフェースデータに分割されています。あなたは、静的なデータを有効にすると、利用者から得られたデータは、データを記入します。そうでない場合は、インターフェースコンポーネント時計ID、再送要求データは、各変化で取得されます。
キャンバストップと左側には、定規、キャンバスをズームするとき変化を追跡するための定規です。スケール上を移動する際の基準線の動きを表示します。クリックされたときに基準線を追加します。基準線を削除するにはダブルクリックします。示されたスケールと、キャンバス、Y軸は90度を得ることができる回転しました。
右下には、ズームスライダ、ユーザーフレンドリーなズーム図です。フルスクリーンサイズを表示するデフォルトのページのズームを入力します。ズームはCSS3変換を使用して実装さ：規模（$ {} this.scale ）。
コンポーネントは、キャンバス上で選択されていない場合、ページ表示の基本的な構成は、画面が大きい幅と高さ、背景を含みます。
コンポーネントを選択した後、現在のコンポーネントを強調表示し、識別する位置、右側のデータ表示領域は、CIアセンブリスキーマ定義を配置しました。
コアコード
未チェックのコンポーネントレベルの設定ページの表示：大画面の幅と高さ、背景色、背景画像と他の
選択された成分：表示部品設定情報
ロジックの実装：コンポーネント属性の編集フィールドをレンダリングダイナミック、そして埋め戻しの属性の初期値に現在のユーザーの選択に応じて、良好な相互作用効果の編集を達成するために。同期プロパティの値は、ユーザが編集フィールドコンポーネント、大画面の通知トリガーリフレッシュコンポーネントをドラッグしたときに更新され、プロパティを変更するために編集フィールドのプロパティのリアルタイム編集を実現。
コンポーネントスキーマによって定義されたデータインターフェイスコンフィギュレーション領域、小道具定義された表示は、デフォルトのデータモデルを示すスキーマの詳細は下記を参照します。
タイプの決定にfiledsの種類によって編集され、入力を実装し、選択、画像、国境や他のタイプのコンポーネント、コンポーネントの動的な再利用のVueがショーにプロパティです。
データ戻る：各サブコンポーネント値の親コンポーネントを通知します修正は、親コンポーネントのAppのアップデート、アプリケーションが更新されたデータモデルを見つけることを避けるために、ここで使用され、戻りの全額にバックします。
ビュー
ビューは、コンポーネントと、データベースに格納されたデータをレンダリングされます。原理はページID、データのレンダリングによって部品を得ることです。コードは以下の通りであります：
コードフルスクリーン表示コピー
大画面注幅ビューポートを設定する全画面表示、設定画面に基づいて、大画面の幅と高さ、背景画像、背景色のボディスタイルは、画面が全画面を満たし、次いで圧縮比を設定画面の変更を監視することができています。適応キーコード次のように：
//は、大画面の幅と高さ、背景、背景色を設定して取得
IF（ウィンドウ。INITIAL_STATE）{
CONST {幅、高さ、backgroundImageの、のbackgroundColor} = INITIAL_STATE .preview.pageConfig.models;
window.scr {=
幅：幅、
高さ：高さ、
backgroundImageの：url(${backgroundImage})、
のbackgroundColor：backgroundColorの、
};
}そうでなければ{
window.scr = {
幅：window.screen.width、
高さ：window.screen.height、
};
}
//全屏展示
機能resizeFull（）{
場合（window.scr.height || window.scr.width！！）resizeFullBak（）を返します。
VAR ratioX = $（ウィンドウ）.width（）/ window.scr.width。
VAR ratioY = $（ウィンドウ）.height（）/ window.scr.height。
$（ 'ボディ'）、CSS（{
変換：「スケール（」+ ratioX + "" + ratioY + 『）』、
transformOrigin： 『左上』、
backgroundSize： 『100％、100％』、
}）。
}
関数resizeFullBak（）{
VAR ratioX = $（ウィンドウ）.width（）/ $（ 'ボディ'）の幅（）。
VAR ratioY = $（ウィンドウ）.height（）/ $（ '体'）の高さ（）。
$（ '体'）CSS（{。
変換：「スケール（」+ ratioX + "" + ratioY + 『）』、
transformOrigin： 『左上』、
backgroundSize： "100％" + ratioY * 100 + 『％』 、
}）;
}
コピーしたコードコンポーネントデザイン
コンポーネントは、大画面設計の基礎です。コンポーネントは、コンポーネントテンプレートによって初期化され、テンプレートは一つの簡単なデモを開発することができ、2つの主要な機能を提供し、第二の公開をパッケージ提供することです。
テンプレートのコードは、コントロールディスプレイ小道具やビジネス・ロジック・コンポーネントを渡すことによって、非常に簡単です。自動インストールコンポーネント、そのような構成要素は、組み立て時間をロードする非同期ページに識別することができます。スキーマ設計は、コンポーネントの一部を強調表示します。
schema.jsonの
schema.jsonコンポーネントが編集可能な項目とデフォルトの設定を定義するために使用されます。コンポーネントは、物事は、それが（デフォルト値です入力、選択、）どのようなものであったかの構成の形で設定することができるかを決めます。したがって、スキーマは、二つの小道具およびモデルプロパティを含みます。
小道具：配列は、各要素がのタブです。情報フィールドは、構成アイテムである、タブのヘッダー情報です。属性名のモデルの名前に対応するフィールド、タイプは構成のタイプを決定し、タイトルは中国名です。また、他のこのようなドロップダウン選択ボックスなどの特性、最大と最小の数の入力ボックスなどを定義することができます。
モデル：デフォルトのデータ、props.filedsでそれぞれの名前のデフォルト値。
：ここでは簡単なスキーマの定義がされている
{
「小道具」：[
{
「情報」：{
「タイトル」：「設定」、
「アイコン」：「アイコン設定」
}、
「フィールド」：[
{
「タイトル」： "コンポーネントの幅」、
『名前『：』幅』、
「説明」：「コンポーネント幅」、
「タイプ」：「番号」
}、
{
「タイトル」：「コンポーネントの高さ」、
「名」：「高さ」、
「説明」、「コンポーネントの高さ」、
「タイプ」： "番号"
}、
{
"タイトル"：" X座標"
"名"：" X"、
"説明"："コンポーネントx座標"、
"タイプ"："数"
}、
{
"タイトル"：" Y軸"は、座標
"：" Y ""名
"説明"：" Y軸成分の座標"、
"タイプ"："番号"
}
]
}
]、
"モデル"：{
"幅"300、
"高さ「： 200は、ある
"X"：0、
"Y"：0
}
}
遭遇したコードの問題コピー
通信
の大画面を通信する方法のコンポーネント間を？成分が大画面と通信できることを保証します。
コンポーネント間の通信を処理するためのイベントセンター。コアコードは以下の通りである：
//グローバルイベントセンター
Vue.prototype。
EventBus。
EventBus.onを（ 'eventNameの'、V => {
にconsole.log（V）;
}）
//アセンブリの変更やその他の変更ゾーニング親コンポーネントに通知
これを。
EMIT（ 'component__update-extraProps'、{DIST： '選択されたゾーニング'}）;
小道具の形態における各構成要素に挿入されたコードアプリ統合管理通信対象extraPropsをコピー。コンポーネントはextraPropsの性質の変化を監視することができます。
コンポーネントコード//
{
...、
小道具：{
extraProps：{
タイプ：オブジェクト、
デフォルト：（）=> {}
}
}、
計算：{
DIST（）{
リターン（this.extraProps && this.extraProps.dist）|| ' 「;
}
}、
ウォッチ：{
distの（ヴァル、OLDVAL）{
//新しいデータ収集ロジックの変更部門を追加する際
}
}
}
コードの権限をコピーします
元のページルバニ・アクセス・ロジックは何の権威ではありませんしながら、大画面データアクセス制御は、大画面を表示する権限を持っている人を行う必要があります。実装が編集され、アクセス中間プレビューページの呼び出しにビンタンServerインタフェース、中間サーバー、要求データにサーバーを達成するためにログオンします。ルバニのユーザーは、ページに埋め込まインラインフレームを表示し、実際の権限トークンサーバによって提供されたアドレスを持って来ます。あなたはそれ以外の場合は、401を大画面のページに戻りする権限を持っている、ルバニアドレスServer認証にアクセスするために移動します。
最適化することが
揺籃期にビッグを、完成する多くの場所があります。
パケット：同じパケット、分類と簡単な操作で同様にPS、スケッチ
、複数の選択肢：複数選択した後の整列を選択します。また、ユーザーフレンドリーな操作の
コード最適化の
経験の最適化
概要
DTの時代には、データの可視化はますます重要になるだろう。私はより多くの学生が大画面場面に遭遇すると信じています。同社のカスタマイズされたニーズのいくつかを満たしながら、大画面の可視化システムを構築することにより、エネルギー関連ビジネス面では、非専門家は、プロの大画面効果を作るためにそうすることを、割り当てることができます。ここでは、読書のためのおかげを共有するためのプログラムを構築するために、より視覚的なデータを開始することを期待して、開発段階では、現在はまだ、比較的浅いビルド大画面プログラムを実行するには。
