newtv-ui-revision 0.0.1

package/packages/secondNav/src/newtvSecondNav.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-container class="newtv-second-nav">
+    <el-aside class="newtv-second-nav-aside" :style="{width: asideWidth}">
+      <el-scrollbar style="height:100%">
+      <h3 v-if="title" class="newtv-second-nav-title">{{title}}</h3>
+      <el-input
+        v-if="filter"
+        class="second-nav-search"
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        size="mini"
+      />
+      <el-tree
+        ref="secondNav"
+        :data="treeData"
+        :props="props"
+        default-expand-all
+        highlight-current
+        :expand-on-click-node="false"
+        :indent="10"
+        :node-key="nodeKey"
+        :current-node-key="currentNodeKey"
+        :filter-node-method="filterNode"
+        @node-click="nodeClick"
+      >
+        <span class="second-nav-node" slot-scope="{ node, data }">
+          <el-tooltip class="title" effect="dark" :content="data[props.label || 'label']" placement="top-start" :open-delay="500" :disabled="!tooltip">
+            <span>{{data[props.label || 'label']}}</span>
+          </el-tooltip>
+        </span>
+      </el-tree>
+      </el-scrollbar>
+    </el-aside>
+    <el-main class="second-nav-content" ref="secondNavContent">
+      <slot />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+  export default {
+    name: "newtvSecondNav",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      data: {
+        type: Array,
+        default: () => []
+      },
+      props: {
+        type: Object,
+        default: () => {}
+      },
+      nodeKey: {
+        type: String,
+        default: ''
+      },
+      currentNodeKey: {
+        type: [String, Number],
+        default: ''
+      },
+      tooltip: {
+        type: Boolean,
+        default: false
+      },
+      filter: {
+        type: Boolean,
+        default: false
+      },
+      filterNodeMethod: {
+        type: Function,
+        default: null
+      },
+      asideWidth: {
+        type: String,
+        default: '96px'
+      },
+    },
+    data() {
+      return {
+        treeData: [],
+        filterText: ''
+      }
+    },
+    created() {
+      this.treeData = JSON.parse(JSON.stringify(this.data));
+      this.filterText = '';
+    },
+    activated(){
+      this.treeData = JSON.parse(JSON.stringify(this.data));
+      this.filterText = '';
+    },
+    watch: {
+      data() {
+        this.treeData = JSON.parse(JSON.stringify(this.data));
+      },
+      filterText(val) {
+        if (this.filterNodeMethod) {
+          this.filterNodeMethod && this.filterNodeMethod(val, (params) => {
+            if (params) {
+              this.treeData = params
+              return
+            }
+            this.treeData = []
+          })
+        } else {
+          this.$refs.secondNav.filter(val)
+        }
+      }
+    },
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data[this.props.label || 'label'].indexOf(value) !== -1;
+      },
+      nodeClick(data, node, nodeSelf) {
+        this.$emit('click', data, node, nodeSelf)
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .newtv-second-nav {
+    height: 100%;
+    .newtv-second-nav-aside {
+      background: #fff;
+    }
+    .newtv-second-nav-title {
+      height: 30px;
+      line-height: 30px;
+      background: #ebeef5;
+      text-align: center;
+      color: #9a9daf;
+    }
+    .second-nav-search {
+      margin-bottom: 10px;
+    }
+    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
+      background: transparent;
+      color: #56a2f7;
+    }
+    .el-tree-node__content>.el-tree-node__expand-icon{
+      padding: 0px;
+    }
+    .second-nav-node {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .second-nav-content {
+      padding: 0 0 0 10px;
+    }
+  }
+</style>

package/packages/table/index.js

@@ -0,0 +1,11 @@
+
+// 导入组件，组件必须声明 name
+import newtvTable from './src/newtvTable'
+
+// 为组件提供 install 安装方法，供按需引入
+newtvTable.install = function (Vue) {
+  Vue.component(newtvTable.name, newtvTable)
+}
+
+// 默认导出组件
+export default newtvTable

package/packages/table/src/newtvTable.vue

@@ -0,0 +1,421 @@
+<template>
+	<div class="newtv-table-body" :class="{ 'newtv-table-body--revision': UIRevision, 'dialog-table-container': dialogTableContainer}">
+		<el-table
+			ref="table"
+			:data="tableData"
+			:height="height"
+			:stripe="stripe"
+			:border="border"
+			:row-class-name="rowClassName"
+			:default-sort="defaultSort"
+			:show-header="showHeader"
+			@row-click="rowClick"
+			@row-dblclick="rowDblclick"
+			@select="select"
+			@select-all="selectAll"
+			@selection-change="selectionChange"
+			:span-method="spanMethod"
+			@sort-change="sortChange"
+			@expand-change="expandChange"
+			:row-key="rowKey"
+			:expand-row-keys="expandRowKeys"
+      :empty-text="empty"
+		>
+			<template v-for="(col,index) in tableCols">
+				<el-table-column
+					v-if="col.type === 'slot' || col.type == 'expand'"
+					:key="index"
+					:align="col.align || 'center'"
+					:header-align="col['header-align'] || 'center'"
+					:show-overflow-tooltip="showOverflowTooltip"
+					:label="col.label"
+					:width="col.width"
+					:fixed="col.fixed"
+					:formatter="col.formatter"
+					:type="col.type == 'slot'? '' : col.type "
+					:sortable="col.sortable || false"
+					:sort-method="col.sortMethod"
+					:sort-by="col.sortBy"
+					:sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+					:reserve-selection="reserveSelection"
+				>
+					<template slot-scope="scope">
+						<slot :name="col.prop" :row="scope.row" :$index="scope.$index"></slot>
+					</template>
+				</el-table-column>
+				<el-table-column
+					v-else-if="col.type === 'spbtn'"
+					:key="index"
+					:align="col.align || 'center'"
+					:header-align="col['header-align'] || 'center'"
+					:show-overflow-tooltip="showOverflowTooltip"
+					:label="col.label"
+					:width="col.width"
+					:fixed="col.fixed"
+					:formatter="col.formatter"
+				>
+					<template slot-scope="scope">
+						<template v-if="col.groups.filter(group => typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row)).length > 3">
+							<template v-for="(item, index) in col.groups.filter(group => typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row)).splice(0,2)">
+								<el-tooltip v-if="!col.hideTitle && index < 3" :key="`btn${index}`" :disabled="!col.openTooltip" class="item" :effect="col.effect || 'dark'" :content="typeof item.title === 'function' ? item.title(scope.row) : item.title" placement="top-start">
+									<el-button
+										:type="item.type"
+										:size="col.size || 'small'"
+										:icon="item.icon"
+										:style="item.style"
+										@click="() => item.clickHandler && item.clickHandler(scope.row)"
+										:circle="col.shape === 'circle'"
+										:plain="col.shape === 'plain'"
+										:round="col.shape === 'round'"
+										:disabled="typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled"
+									>
+										{{typeof item.title === 'function' ? item.title(scope.row) : item.title}}
+									</el-button>
+								</el-tooltip>
+								<el-tooltip v-else-if="col.hideTitle &&  index < 3" :key="`btn${index}`" :disabled="!col.openTooltip" class="item" :effect="col.effect || 'dark'" :content="typeof item.title === 'function' ? item.title(scope.row) : item.title" placement="top-start">
+									<el-button
+										:type="item.type"
+										:size="col.size || 'small'"
+										:icon="item.icon"
+										:style="item.style"
+										@click="() => item.clickHandler && item.clickHandler(scope.row)"
+										:circle="col.shape === 'circle'"
+										:plain="col.shape === 'plain'"
+										:round="col.shape === 'round'"
+										:disabled="typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled"
+									/>
+								</el-tooltip>
+							</template>
+							<el-dropdown style="margin-left: 10px" :trigger="col.dropdownTrigger || 'hover'" @command="handleCommand">
+								<el-tooltip :disabled="col.dropdownTrigger == null ||  col.dropdownTrigger === 'hover'" class="item" :effect="col.effect || 'dark'" content="更多" placement="top-start">
+									<el-button
+										type="primary"
+										:size="col.size  || 'small'"
+										:circle="col.shape === 'circle'"
+										:plain="col.shape === 'plain'"
+										:round="col.shape === 'round'"
+									> ... </el-button>
+								</el-tooltip>
+								<el-dropdown-menu slot="dropdown">
+									<el-dropdown-item v-for="(list, index) in col.groups.filter(group => typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row)).slice(2)" :key="`drop${index}`" :command="{fn: list.clickHandler, row: scope.row}">{{typeof list.title === 'function' ? list.title(scope.row) : list.title}}</el-dropdown-item>
+								</el-dropdown-menu>
+							</el-dropdown>
+						</template>
+						<template v-else>
+							<template v-for="(item, index) in col.groups.filter(group => typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row))">
+								<el-tooltip v-if="!col.hideTitle" :key="`btn${index}`" :disabled="!col.openTooltip" class="item" :effect="col.effect || 'dark'" :content="typeof item.title === 'function' ? item.title(scope.row) : item.title" placement="top-start">
+								<el-button
+									:type="item.type"
+									:size="col.size || 'small'"
+									:icon="item.icon"
+									:style="item.style"
+									@click="() => item.clickHandler && item.clickHandler(scope.row)"
+									:circle="col.shape === 'circle'"
+									:plain="col.shape === 'plain'"
+									:round="col.shape === 'round'"
+									:disabled="typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled"
+								>
+									{{typeof item.title === 'function' ? item.title(scope.row) : item.title}}
+								</el-button>
+								</el-tooltip>
+								<el-tooltip v-else :key="`btn${index}`" :disabled="!col.openTooltip" class="item" :effect="col.effect || 'dark'" :content="typeof item.title === 'function' ? item.title(scope.row) : item.title" placement="top-start">
+									<el-button
+										:type="item.type"
+										:size="col.size || 'small'"
+										:icon="item.icon"
+										:style="item.style"
+										@click="() => item.clickHandler && item.clickHandler(scope.row)"
+										:circle="col.shape === 'circle'"
+										:plain="col.shape === 'plain'"
+										:round="col.shape === 'round'"
+										:disabled="typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled"
+									/>
+								</el-tooltip>
+							</template>
+						</template>
+					</template>
+				</el-table-column>
+				<el-table-column
+					v-else-if="col.type === 'selection'"
+					:key="index"
+					:prop="col.prop"
+					:label="col.label"
+					:width="col.width"
+					:align="col.align || 'center'"
+					:header-align="col['header-align'] || 'center'"
+					:type="col.type || ''"
+					:show-overflow-tooltip="showOverflowTooltip"
+					:formatter="col.formatter"
+					:fixed="col.fixed"
+					:sortable="col.sortable || false"
+					:sort-method="col.sortMethod"
+					:sort-by="col.sortBy"
+					:sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+          :reserve-selection="reserveSelection"
+          :selectable="col.selectable"
+				>
+        </el-table-column>
+				<el-table-column
+						v-else-if="col.type === 'multilevel' && col.children"
+						:key="index"
+						:prop="col.prop"
+						:label="col.label"
+						:width="col.width"
+						:align="col.align || 'center'"
+						:header-align="col['header-align'] || 'center'"
+						:type="col.type || ''"
+						:show-overflow-tooltip="showOverflowTooltip"
+						:formatter="col.formatter"
+						:fixed="col.fixed"
+						:sortable="col.sortable || false"
+						:sort-method="col.sortMethod"
+						:sort-by="col.sortBy"
+						:sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+				>
+						<el-table-column
+								v-for="(item,index) of col.children"
+								:key="index"
+								:prop="item.prop"
+								:label="item.label"
+								:align="item.align || 'center'"
+								:width="item.width"
+						>
+						</el-table-column>
+				</el-table-column>
+
+				<el-table-column
+					v-else-if="col.type === 'tooltip'"
+					:key="index"
+					:prop="col.prop"
+					:label="col.label"
+					:width="col.width"
+					:align="col.align || 'center'"
+					:header-align="col['header-align'] || 'center'"
+					:type="''"
+					:show-overflow-tooltip="showOverflowTooltip"
+					:formatter="col.formatter"
+					:fixed="col.fixed"
+					:sortable="col.sortable || false"
+					:sort-method="col.sortMethod"
+					:sort-by="col.sortBy"
+					:sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+					:render-header="col.renderHeader"
+				>
+				</el-table-column>
+
+				<el-table-column
+					v-else
+					:key="index"
+					:prop="col.prop"
+					:label="col.label"
+					:width="col.width"
+					:align="col.align || 'center'"
+					:header-align="col['header-align'] || 'center'"
+					:type="col.type || ''"
+					:show-overflow-tooltip="showOverflowTooltip"
+					:formatter="col.formatter"
+					:fixed="col.fixed"
+					:sortable="col.sortable || false"
+					:sort-method="col.sortMethod"
+					:sort-by="col.sortBy"
+					:sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+				>
+				</el-table-column>
+			</template>
+		</el-table>
+		<div class="footer-pagination" v-if="showPagination">
+			<el-pagination
+				:small="pageOptions['small']"
+				:page-sizes="pageOptions['page-sizes']"
+				:page-size="pageOptions['page-size']"
+				:total="pageOptions['total']"
+				:pager-count="pageOptions['pager-count']"
+				:current-page="pageOptions['current-page']"
+				:layout="pageOptions['layout']"
+				:popper-class="pageOptions['popper-class']"
+				:prev-text="pageOptions['prev-text']"
+				:next-text="pageOptions['next-text']"
+				:disabled="pageOptions['disabled']"
+				:hide-on-single-page="pageOptions['hide-on-single-page']"
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				@prev-click="handlePrevClick"
+				@next-click="handleNextClick"
+			>
+				<slot name="pagination"></slot>
+			</el-pagination>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "newtvTable",
+		props: {
+			defaultSort: {
+				type: Object,
+				default: () => {}
+			},
+			tableCols: {
+				type: Array,
+				default: () => []
+			},
+			tableData: {
+				type: Array,
+				default: () => []
+			},
+			showHeader: {
+				type: Boolean,
+				default: true
+			},
+			reserveSelection: {
+				type: Boolean,
+				default: false
+			},
+			rowClassName: {
+				type: Function,
+				default: () => {}
+			},
+			expandRowKeys: {
+				type: Array,
+				default: () => []
+			},
+			height: {
+				type: Number || null,
+				default: null
+			},
+			stripe: {
+				type: Boolean,
+				default: true
+			},
+			UIRevision: {
+				type: Boolean,
+				default: false
+			},
+			dialogTableContainer: {
+				type: Boolean,
+				default: false
+			},
+			border: {
+				type: Boolean,
+				default: true
+			},
+			showOverflowTooltip: {
+				type: Boolean,
+				default: true
+			},
+			showPagination: {
+				type: Boolean,
+				default: true
+			},
+			paginationOption: {
+				type: Object,
+				default: () => {}
+			},
+			spanMethod: {
+				type: Function,
+				default: () => {}
+			},
+			rowKey: {
+				type: [Function, String],
+				default: 'id'
+			},
+			empty: {
+				type: String,
+				default: '暂无数据'
+			}
+		},
+		data() {
+			return {
+				pageOptions: {
+					'small': false,
+					'background': false,
+					'page-sizes': [10, 20, 50, 100],
+					'page-size': 10,
+					'total': 10,
+					'pager-count': 7,
+					'current-page': 1,
+					'layout': 'total, sizes, prev, pager, next, jumper',
+					'popper-class': null,
+					'prev-text': null,
+					'next-text': null,
+					'disabled': false,
+					'hide-on-single-page': false
+				}
+			}
+		},
+		mounted() {},
+		methods: {
+			rowClick(row, column, event) {
+				this.$emit('row-click', row, column, event)
+			},
+			// 双击表格
+			rowDblclick(row, column, event) {
+				this.$emit('row-dblclick', row, column, event)
+			},
+			//rowCellClick
+			rowCellClick(row, column, cell, event) {
+				this.$emit('cell-click', row, column, cell, event)
+			},
+			expandChange(row, expandedRows) {
+				this.$emit('expand-change', row, expandedRows)
+			},
+			select(selection, row) {
+				this.$emit('select', selection, row)
+			},
+			selectAll(selection, row) {
+				this.$emit('select-all', selection, row)
+			},
+			selectionChange(selection) {
+				this.$emit('selection-change', selection)
+			},
+			sortChange({ column, prop, order }) {
+				this.$emit('sort-change', { column, prop, order })
+			},
+			clearSelection() {
+				this.$refs.table.clearSelection()
+			},
+			toggleRowSelection(row, selected) {
+				this.$refs.table.toggleRowSelection(row, selected)
+			},
+			toggleAllSelection() {
+				this.$refs.table.toggleAllSelection()
+			},
+			// pageSize 改变时会触发
+			handleSizeChange(val) {
+				this.pageOptions = {
+					...this.pageOptions,
+					'current-page': 1
+				}
+				this.$emit('size-change', val)
+			},
+			// currentPage 改变时会触发
+			handleCurrentChange(val) {
+				this.$emit('current-change', val)
+			},
+			// 用户点击上一页按钮改变当前页后触发
+			handlePrevClick(val) {
+				this.$emit('prev-click', val)
+			},
+			// 用户点击下一页按钮改变当前页后触发
+			handleNextClick(val) {
+				this.$emit('next-click', val)
+			},
+			handleCommand(command) {
+				console.log(command)
+				command.fn && command.fn(command.row)
+			}
+		},
+		watch: {
+			paginationOption () {
+				this.pageOptions = {...this.pageOptions, ...this.paginationOption}
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.footer-pagination {
+		padding-top: 10px;
+	}
+</style>

package/packages/videoBar/index.js

@@ -0,0 +1,7 @@
+import videoBar from "./src/videoBar";
+
+videoBar.install = function (Vue) {
+  Vue.component(videoBar.name,videoBar)
+}
+
+export default videoBar

package/packages/videoBar/src/videoBar.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="newtv-video-bar">
+  	<div class="video-bar-content" :style="styleBar">
+	  <div class="bar-item" v-for="(videoPoint,index) in computeVideoList"
+	  	:style="videoPoint.style"
+			:key="index"
+		@click="playVideo(videoPoint.from,index)"
+	  ></div>
+	</div>
+  </div>
+</template>
+
+<script>
+  export default {
+	name: 'videoBar',
+	props: {
+	  width: {
+		type: String,
+		default: '100%'
+	  },
+	  height: {
+	    type: String,
+		default: '5'
+	  },
+	  videoList: {
+	    type: Array,
+		default: ()=>[],
+	  },
+	  videoTotal: {
+	    type: Number,
+		default: 0
+	  },
+	  barStyle: {
+	    type: Object,
+		default: () => {
+		  return {
+			bgColor: '#ffffff',
+			itemBgColor: '#f00'
+		  }
+		}
+	  }
+	},
+	methods: {
+	  playVideo(t,index) {
+		this.$emit('playVideo',t,index);
+	  }
+	},
+	computed: {
+	  computeVideoList() {
+		return this.videoList.map(item=>{
+		  item.width = Math.ceil(((item.to - item.from <=0) ? 1 : (item.to - item.from))/this.videoTotal*100);
+		  item.left = Math.ceil(item.from/this.videoTotal*100);
+		  item.style = `left:${item.left}%;width: ${item.width}%;height: ${this.height}px;borderRadius:${this.height/2}px;backgroundColor: ${this.barStyle.itemBgColor};`;
+		  return item;
+		});
+	  },
+	  styleBar() {
+	    return `height: ${this.height}px;borderRadius: ${this.height/2}px;backgroundColor: ${this.barStyle.bgColor};`
+	  }
+	},
+  };
+</script>
+
+<style scoped>
+.video-bar-content{
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+  .bar-item{
+	float: left;
+	position: absolute;
+	top: 0;
+  }
+</style>

package/types/component.d.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+/** ElementUI component common definition */
+export declare class NewtvUIComponent extends Vue {
+  /** Install component into Vue */
+  static install (vue: typeof Vue): any
+}

package/types/dashboard.d.ts

@@ -0,0 +1,10 @@
+import { NewtvUIComponent } from './component'
+
+export declare class newtvDashboard extends NewtvUIComponent {
+  title: string
+  height: string
+  fillet: string
+  center: boolean
+  isIcon: boolean
+  data: []
+}