mixlinker-tools

说明

一个基于智物联业务的前端组件包，基于vue3开发，项目需在vue3环境下使用；

快速安装

npm i mixlinker-tools 或者 yarn add mixlinker-tools

组件引入

因部分插件使用了antdv框架，使用本包需引入antdv，antdv包在安装本包时会自动安装，直接按如下代码在main.js引入即可

import mixlinker from 'mixlinker-tools'
import 'mixlinker-tools/style'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as antIcons from '@ant-design/icons-vue'
import emitter from 'mitt';
app.config.globalProperties.emitter = emitter()
Object.keys(antIcons).forEach(key => {
    app.component(key, antIcons[key])
})

app.use(Antd)
app.use(mixlinker)

mix-dashboard

显示板组件

<mix-dashboard :params="params"></mix-dashboard>

注意事项：如果显示需使用地图组件，则需要在项目的index.html中引入百度的相关js文件，如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//api.map.baidu.com/getscript?v=3.0&ak=你的ak"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <title>Mixlinker</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

mix-show

大屏显示板组件

<mix-show :params="params"></mix-show>

mix-agrid

表格组件

<mix-aggrid 
	:columnDefs.sync="columns" 
	:rowData="dataSource" 
    :height='200' 
    :pager="pager"
     @pageChange="pageChange"
>
</mix-agrid>
<script setup>
const columns = ref([
      { 
        field: "make" ,//字段名
        headerName:"列标题名",
        width:"150",
        flex:1,//默认占据剩余宽度
       },
      { field: "model" },
      { field: "price" },
    ])
const dataSource = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxster", price: 72000 },
    ]
</script>

事件

mix-right-menu

mix-agrid里的右键按钮组件

  <mix-right-menu ref="rightMenu" :localButtons="localButtons" />
      
   const localButtons = [
       {
           type:'item',
           role_checked:true
       }
   ]
  //mix-aggrid的cellContextMenu事件
  const rightMenu = ref(null)
  const onCellContextMenu = (params) => {
    rightMenu.value.showRightMenu(params.event, params.data)
}

菜单类型

mix-edit-page

弹窗组件

<mix-edit-page :title='title' :show='show' @ok="handleOk">
  <template #content>
  	弹窗内容区域
  </tempate>
</mix-edit-page>

参数

mix-script-modal

脚本编辑器弹窗

<mix-script-modal :script='script'></mix-script-moadl>