Poi_test_component NPM

公共组件库使用文档

图表类

通用图表渲染组件

组件名: EchartTool

功能描述：
   1 提供通用的图表渲染方案，具备简单的默认配置内容
   2 更新图表内容时，可以自动刷新图表缓存
   3 展示区间变化时，自动调整表格宽度
   4 点击图表，触发回调函数

入参：
   1 resData: 图表渲染对象
      {
         id: 图表动态id配置
         data: echart配置对象，与官网配置参数一样
      }
   2 callback_click (Function): 点击图表，回调函数

template 配置示例
   <EchartTool :resData="chartOption" class="chartStyle" />

图片示例： Image text

bar / line / pie 公共样式渲染组件

组件名: ChartRender

功能描述：
   1 提供丰富的公共图表配置方案，只需要传入数据对象，就可以渲染公共的图表样式
   2 更新图表内容时，可以自动刷新图表缓存
   3 展示区间变化时，自动调整表格宽度
   4 点击图表，触发回调函数
   5 提供下钻、返回操作
   6 支持 bar / line / pie 组件
   7 柱图、线图可选择滑块配置

入参：
   1 height: 图表展示高度设置（number, string - '300px/vh/rem'）
   2 props(必传 - type、name、value、unit、title): 自定义配置参数
      {
         type: bar / line / pie
         name: 参数 ‘anaysisData’ 的 name 配置参数
         value: 参数 ‘anaysisData’ 的 value 配置参数
         unit: 单位配置
         title: legend、series 的名称配置
         colors: string - '#1F90FF'
         xAxisLengthMax: 是否展示滑块，设置滑块的默认展示长度
         tooltip: tooltip 自定义配置（与echart配置参数一致） 
         grid: grid 自定义配置（与echart配置参数一致） 
         yAxis: yAxis 自定义配置（与echart配置参数一致） 
         xAxis: xAxis 自定义配置（与echart配置参数一致） 
         series: series 自定义配置（与echart配置参数一致） 
         legend: legend 自定义配置（与echart配置参数一致） 
      }
   3 anaysisData(必传): 图表渲染数据源（注：value、name参数取决于props的设置参数）
      [
         { value: 222, name: '数据一' },
         { value: 223, name: '数据二' },
      ]
   4 isGoDown: 是否需要下钻，默认false
   5 callback (Function): 点击图表，回调函数

template 配置示例
   <ChartRender class="mt15" :height="300"
      :props="{
         type: 'line', name: 'label', value: 'value', title: 'Chart Tezt', unit: 't',
         colors: ['blue'],
         xAxisLengthMax: 6
      }"
      :anaysisData="anaysisData"
      :callback="callback"
   />

图片示例： Image text

多轴图表（柱图、线图）公共样式渲染组件

组件名: MultiChartRender

功能描述：
   1 提供丰富的公共图表配置方案，只需要传入数据对象，就可以渲染公共的图表样式
   2 更新图表内容时，可以自动刷新图表缓存
   3 展示区间变化时，自动调整表格宽度
   4 点击图表，触发回调函数
   5 支持 bar / line 组件
   6 可选择滑块配置
   7 可隐藏y轴内容

入参：
   1 height: 图表展示高度设置（number, string - '300px/vh/rem'）
   2 props(必传 - type、name、value、unit、title): 自定义配置参数
      {
         type: bar / line
         name: 参数 ‘anaysisData’ 的 name 配置参数
         value: 参数 ‘anaysisData’ 的 value 配置参数
         unit: 单位配置
         title: legend、series 的名称配置
         colors: string - '#1F90FF'
         xAxisLengthMax: 是否展示滑块，设置滑块的默认展示长度
         tooltip: tooltip 自定义配置（与echart配置参数一致） 
         grid: grid 自定义配置（与echart配置参数一致） 
         yAxis: yAxis 自定义配置（与echart配置参数一致） 
         xAxis: xAxis 自定义配置（与echart配置参数一致） 
         series: series 自定义配置（与echart配置参数一致） 
         legend: legend 自定义配置（与echart配置参数一致） 

         xAxis_unit: x轴坐标名称
         xAxixShowType: x轴展示方式（'index' - 下标数值）
         multi_yAxis: 是否多y轴
         isTime(true): tooltip 默认展示类型，默认是时间类型；false 时，直接展示series配置的名称
         customValue (Function): 自定义 series-data 数据处理逻辑
      }
   3 anaysisData(必传): 图表渲染数据源（注：value、name参数取决于props的设置参数）
      [
         {
            desc: '数据一',
            unit: 'kWh',
            data: [
               { value: 222, name: '2020-10-01 10:00:00' },
               { value: 223, name: '2020-10-01 10:00:00' },
            ]
         }
      ]
   4 isHasY: 是否需要隐藏y轴，默认false
   5 callback (Function): 点击图表，回调函数

template 配置示例
   <MultiChartRender class="mt15" :height="300"
      :props="{ type: 'line', name: 'timestamp', value: 'value', xAxisLengthMax: 60 * 6, xAxis_unit: 'h', multi_yAxis: true, xAxixShowType: 'index', xAxis: xAxisLable }"
      :anaysisData="historyDataList"
   />

图片示例： Image text

表格类

通用表格自定义配置组件

组件名: TableTemplateConfig

功能描述:
   1 全结构可自定义配置表格 - 可控制 'el-table' 的所有配置，通过 v-bind、v-on 方式配置
   2 表头、表体 都可以自定义插入展示内容和交互 - 通过 slot 方式插入
   3 表格头部、底部，可插入自定义内容 - 如表格底部插入页码
   4 配置有默认的表格样式
   
入参:
   1 formRef: ref 绑定el-table组件
   2 tableItem: (必传：tableData / optionItem)表格配置参数
      {
         tableData: [ // 数据源
            { finishDate: '2020-11-23', productNum: '2020-01-01-XM01', finishBatchNum: '0000001(0012)', outputName: '物料A', shift: '早班', factoryUnit: '1#水泥磨', finishNum: 1000, checkoutResult: 2 },
            { finishDate: '2020-11-24', productNum: '2020-01-01-XM02', finishBatchNum: '0000002(0012)', outputName: '物料B', shift: '早班', factoryUnit: '2#水泥磨', finishNum: 1000, checkoutResult: 1 },
         ],
         props: { // 参考 el-table 'Table Attributes'的配置， 通过 v-bind 写入 el-table
            'max-height': 300
         },
         event: { // 参考 el-table 'Table Events'的配置， 通过 v-on 写入 el-table）
            'select-all': () => {}
         },
         columnType: { // 表格是否需要 index(序号), selection(多选框)
            index: true, selection: false
         },
         optionItem: [ // 表格展示及 slot 插槽配置
            {
               required: 是否显示必填标示 * 
               label: 表头名称
               prop: 内容对应type
               headerSlotName: 自定义表头项展示插槽
               slotName: 自定义表格内容项展示插槽

               ... // el-table 'Table-column Attributes'的配置参数，通过 v-bind 写入 el-table-column

               btnList: { text: 按钮文本, props: v-bind 参数, event: v-on 按钮事件 } 按钮列表
               columnType: 通用表单内容组件 ( Input / Select / Operation )
               formProps: 设置通用表单组件'columnType'时, 表单组件的参数配置 v-bind
               formEvent: 设置通用表单组件'columnType'时, 表单组件的
            },
            { label: '完工日期', prop: 'finishDate', headerSlotName: 'finishDate' },
            { label: '生产任务号', prop: 'productNum', headerSlotName: 'productNum', 'min-width': '150px' },
            { label: '完工数量', prop: 'finishNum' },
            { label: '质检结果', prop: 'checkResult', headerSlotName: 'checkResult', slotName: 'checkoutResult' },
            {
               label: "操作",
               align: "left",
               columnType: "Operation",
               fixed: "right",
               width: 100,
               btnList: [
                  {
                     text: "添加分析",
                     props: {
                        class: "web-point-edit",
                     },
                     event: ({row}: any) => ({
                        click: () => console.log({ row }),
                     }),
                  },
               ],
            },
         ],
      };

template 配置案例

      <TableTemplateConfig class="box mt15" :tableItem="tableItem" >
         <template slot="finishDate" slot-scope="{ data }">
            <el-popover placement="bottom" trigger="click">
               <el-date-picker
                  class="ml15 w250" unlink-panels :clearable="false" range-separator="~" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
                  v-model="searchConfig.dateArr"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
               />
               <div class="curror" slot="reference">
                  <span>{{ data.column.label }}</span>
                  <i class="iconfont poi-shaixuan fz14 ml5 normal_color" />
               </div>
            </el-popover>
         </template>
      
         <template slot="productNum" slot-scope="{ data }">
            <el-popover placement="bottom" trigger="click">
               <el-input v-model="searchConfig.keyword" />
               <div class="curror" slot="reference">
                  <span>{{ data.column.label }}</span>
                  <i class="iconfont poi-search fz16 ml5 normal_color" />
               </div>
            </el-popover>
         </template>

         <template slot="checkResult" slot-scope="{ data }">
            <el-popover placement="bottom" trigger="click">
               <el-select
                  v-model="searchConfig.checkResult"
                  class="mr15 w200px"
                  size="small"
               >
                  <el-option
                     v-for="key of Object.keys(resultConfig)"
                     :key="key"
                     :value="key"
                     :label="resultConfig[key]"
                  />
               </el-select>
               <div class="curror" slot="reference">
                  <span>{{ data.column.label }}</span>
                  <i class="iconfont poi-shaixuan fz14 ml5 normal_color" />
               </div>
            </el-popover>
         </template>
         <template slot="checkoutResult" slot-scope="{ data }">
            <span class="result" :class="{ 'red': data.row.checkoutResult === 1, 'green': data.row.checkoutResult === 2 } ">{{ resultConfig[data.row.checkoutResult] }}</span>
         </template>
      </TableTemplateConfig>

Image text

工具组件类

收藏夹组件

组件名: CollectCom

功能描述:
   1 通用收藏夹组件
   
入参:
   1 routerPath: 传入判定的路由
   2 showFirst: 初始化时，是否需要返回收藏的第一条数据
   3 pathName: 左侧路由名称展示
   4 schemeContent: 传入方案保存的内容
   5 init: 初始化传入参数
      {
         getRequest: Function,
         postRequest: Function,
         callback: Function, 点击方案是，回调选中数据
         API: Record<string, any> 调用组件的项目需要配置下面三个接口
            API.cloud.selectSchemeList
            API.cloud.addSchemes
            API.cloud.deleteSchemes
      }

组件调用案例
   template: 
      <CollectCom pathName="无效生产分析" :schemeContent="schemeContent" :routerPath="$route.path" :init="collectInit" :showFirst="true" />

   data:
      private collectInit: Record<string, any> = {
         getRequest,
         postRequest,
         API,
         callback: this.callbackCollectCom,
      };

   methods:
      // 收藏夹回显 or 收藏夹新增
      private async callbackCollectCom({ type, content }: Record<string, any>) {
         // 'add' 类型直接调方案新增接口
         if (type === "add") {
            this.schemeContent = {};
            const headerConfig = (this.$refs.header as any).getParams();

            this.schemeContent = {
                  searchConfig: deepCopy({
                     reasonTreeId: this.reasonTreeId,
                     selectedReasonIds: this.selectedReasonIds,
                     headerConfig,
                  })
            };
            return;
         }

         const { searchConfig: { reasonTreeId, selectedReasonIds, headerConfig } } = content;
         this.reasonTreeId = reasonTreeId;
         this.selectedReasonIds = selectedReasonIds;
         !!this.$refs.header && (this.$refs.header as any).setSearchParams( headerConfig );
      }

Image text