front-global-compoments

这里存放的是前端公共组件, 目的是实现前端组件的npm化。

组件列表

• frame
• inputSearch
• lampNav
• logo
• myModal
• rightNav
• scaling
• summaryList
• table

安装

npm install front-global-components

使用

在入口文件如main.js中按需引入和使用

import {
    RightNav,
    LampNav,
    commonTable,
    scaling,
    myFrame,
    summaryList,
    Logo,
    inputSearch,
    myModal
} from 'front-gloabl-components'

Vue.use(RightNav)
Vue.use(LampNav)
Vue.use(commonTable)
Vue.use(scaling)
Vue.use(myFrame)
Vue.use(summaryList)
Vue.use(Logo)
Vue.use(inputSearch)
Vue.use(myModal)

frame

划分区块的框，用于存放内容

基本用法

<my-frame
:modal="frameModal"
:title="selectedItem.name">
    <template>
      <div class="detail">
        内容
      </div>
    </template>
</my-frame>

API

参数 | 说明 | 类型 | 默认值 --- | --- | --- | --- modal | 控制使用显示 | Boolean | false title | 区块的名称 | String | -

inputSearch

各模块左上角的全局搜索框

基本用法

<input-search
    @on-search="searchLampPole"
    @drawerShow="drawerShow"></input-search>
    

Event

事件名 | 说明 | 参数 --- | ---| --- on-search | 用于搜索名称 | 返回的是输入的值 drawerShow | 控制抽屉组件的显示 | 返回的是布尔值

lampNav

灯杆模块专用左侧列表组件

基本用法

<lamp-nav
  :headerData="headerData"
  :eventTypes="eventTypes"
  @on-search="searchLampPole"
  :currentTypeCode='currentTypeCode'
  :list="groupList"
  @setIndex="selectGroup"
  :initIndex="currentIndex"
  class="lampPole"
  :bottomHeight="bottomHeight"
>
</lamp-nav>

API

参数 | 说明 | 类型 | 默认值 ---| ---| ---| --- bottomHeight | 距离底部的距离 | Boolean | 0 list | 数据列表 | Array | [] initIndex | 选中的项的下标 | Number | -2 currentType | 当前的类型 | String | 'style1' eventTypes | 事件类型列表 | Array | [] shipData | 车船调度里面的船只数据 | Object | {repair: '0',work: '0',free: '0'} headerData | 相关的头部数据，用于切换 | Object | {renderTitleList: [], renderTitle: ''} currentTypeCode | 当前类型的code值 | String | 'light_pole_lamp_holder'

Event

事件名 | 说明 | 参数 --- | --- | --- setIndex | 点击列表某一项时的回调 | 参数是当前项和下标 return-current-item | 返回当前项 | 当前项 on-search | 用于搜索灯杆 | 参数为搜索值

logo

右下角的公司LOGO, 图片来自后台设置。

基本用法

<Logo></Logo>

myModal

视频识别模块的自定义弹出框

基本用法

<my-modal
    class="photo-seek"
    title="照片寻人"
    :value="currentState==='photoSeeking'"
    @on-click="closeModal"
>
    <slot></slot>
</my-modal>

API

参数 | 说明 | 类型 | 默认值 --- | --- | --- | --- title | 弹出框的标题 | String | '' value | 控制弹出框的显示 | Boolean | false width | 弹出框宽度 | Number | 536

Event

事件名 | 说明 | 参数 --- | --- | --- on-click | 点击关闭按钮的回调 | -

rightNav

通用左侧列表

基本用法

<right-nav
:list="groupList"
@setIndex="onChildClick" :initIndex="currentIndex"></right-nav>

<right-nav
:list="noRepairList"
:shipData="shipData"
:currentType="currentType"
:headerData="headerData"
:initIndex="currentIndex"
@setIndex="changeState" ></right-nav>

API

参数 | 说明 | 类型 | 默认值 ---| ---| ---| --- bottomHeight | 距离底部的距离 | Boolean | 0 list | 数据列表 | Array | [] initIndex | 选中的项的下标 | Number | -2 currentType | 当前的类型 | String | 'style1' shipData | 车船调度里面的船只数据 | Object | {repair: '0',work: '0',free: '0'} headerData | 相关的头部数据，用于切换 | Object | {renderTitleList: [], renderTitle: ''}

Event

事件名 | 说明 | 参数 --- | --- | --- setIndex | 点击列表某一项时的回调 | 参数是当前项和下标 return-current-item | 返回当前项 | 当前项

scaling

左下角的伸缩框

基本用法

<scaling :height="300" :width="272">
    <template>
      <div class="msg">
        内容
      </div>
    </template>
</scaling>

API

参数 | 说明 | 类型 | 默认值 --- | --- | --- | --- width | 定义宽度 | Number | 272 height | 定义高度 | Number | 300

summaryList

左下角数据一览， 如设备各状态及对应数值

基本用法

<summary-list :summaryList="summaryList">
    <div slot="header">
      <div class="title sum-title">
        总灯杆数：
        <b class="num">{{total}}</b>
      </div>
    </div>
    <div slot="footer" class="mybtn">
      <Button type="success" long @click="statusTemp='gatewayControl';hideHandle()" >网关控制</Button>
      <Button type="success" long @click="showLoop" >照明回路</Button>
    </div>
</summary-list>

API

参数 | 说明 | 类型 | 默认值 --- | --- | --- | --- summaryList | 数据一览 | Array | []

table

基于 Vue 和 iView 的表格与分页组合

基本用法

<common-table
  :columns="columns"
  :data="list"
  :loading="loading"
  :page="page"
  :queryData="queryData"></common-table>

API

查看 iView table / 查看 iView page

参数 | 说明 | 类型 | 默认值 --- |--- | --- | --- columns | 表格列的配置描述 | Array | [] data | 显示的结构化数据 | Array | [] loading | 表格是否加载中 | Boolean | false page | 分页对象,包含当前页码、数据总数、每页条数 | Object | {pageSize: 10,total: 0,current: 1}

Event

事件名 | 说明 | 参数 --- | --- | --- queryData | 页码改变和切换每页条数时的回调 | --