:-: 視頻組件添加的代碼
#### 一.在基礎模塊 里添加視頻組件 也就是添加一個對象
~~~
{
name: "",
// 這里最重要屬性
type: "video",
coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/b1070.png",
coverImageWidth: "90%",
// 這里的名字在全局配置文件里 設置
tip: vsLang.comp_tip_static_video
}
~~~
#### 二.新建一個視頻自定義服務
~~~
vsPluginComponentModule.factory("$vcPlugin_basic_video", ["$vsPluginRegister", function (a) {
console.log(a)
var b = {
// 這里是判斷此組件要顯示的幾個全局設置配置項
showDataCategory: false,
showBorderCategory: true,
showBasicCategory: true,
showFixedCategory: true,
showEventCategory: false,
buildDataDescription: function (d, g, f, c, e) {},
buildChartDescription: function (h, f, c, e) {
console.log(c.description)
var l = {
name: "video",
title: vsLang.video,
groups: []
};
c.description.categories.push(l);
h.component = c;
console.log(h.component)
// 這里是容器的寬度 高度
h.calculateBackgroundSize = function (i) {
return f.width() > f.height() ? "auto 100%" : "100% auto"
};
var d = [];
// rtmp://live.hkstv.hk.lxdns.com/live/hks
console.log("dddd:" + h.component.config.content)
// push進去html這里是以框架引入的 視頻,angular的雙向數據綁定
d.push('<iframe ng-src={{"/js/definition.html?url='+h.component.config.content+'"}} height="100%" width="100%" frameborder="0" allowfullscreen></iframe>')
var g = e(d.join(""))(h);
f.append(g);
// push進去組件
l.groups.push({
name: "video",
title: {
text: vsLang.video_url
},
// 這里是html判斷顯示的設置項 稍后下面有說明
elements: [{
title: "",
type: "video",
bind: "content"
}]
});
console.log(l)
console.log("c-----");
console.log(c);
console.log(h)
console.log("c-----end");
}
};
console.log(b)
// 注冊此組件在基本圖庫里
a.register("basic", "video", b);
return null
}]);
~~~
#### 三.修改mian.html
~~~
<!-- 谷建文 視頻組件-->
<div ng-switch-when="video" id="id324242343535435435">
<div style="margin:5px 0;" ng-show="element.showTitle == null || element.showTitle === true">
// 標題
{{element.title}}
</div>
<div class="col col-xs-12 ui input">
雙向數據綁定文本域,填寫視頻地址的
<textarea ng-model="component.config[element.bind]" style="width:100%;border:1px solid #DDD;" rows="5"></textarea>
</div>
<div class="col col-xs-12 ui bg-primary" style="text-align:left;padding-left:5px;line-heignt:20px;margin-top:15px;">
<p>支持http協議下的flv,f4v,mp4,支持rtmp視頻流和rtmp視頻回放,支持m3u8格式.</p>
</div>
</div>
<!-- end -->
~~~
ps(在ComponentPanelCtrl這個控制器里,html寫在cp-tab-content這個容器里面)
* * * * *
四.修改design.js文件
ps:修改這里是分享包括預覽頁面,新添加的組件,必須在這里也要一一對應,不然在分享和預覽 是沒有效果的,會報錯,
buildBasicComponent在這個函數里添加一個switch判斷,判斷條件就是 第一步里添加的type屬性也就是(video)
看下面代碼
* * * * *
~~~
case "video":
// 組件大小函數
scope.calculateBackgroundSize = function (dom) {
return element.width() > element.height() ? "auto 100%" : "100% auto"
};
var html = [];
// console.log(component.config.content)
// html結構
html.push('<iframe src="/js/definition.html?url='+component.config.content+'" height="100%" width="100%" frameborder="0" allowfullscreen></iframe>')
var el = $compile(html.join(""))(scope);
element.append(el);
break;
~~~
以上是視頻組件添加的代碼
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸(new)
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明