ZSystem前端

main.ts

// 整个main.ts只需要这2句代码快速开始
import {zsysapp, addFrameRouters,zsysappMount} from 'zsysview'
import 'zsysview/dist/zsysview.css'
zsysappMount()

vite.config.ts 请求重写

server: {
    host: "0.0.0.0",
    port: 5173,
    proxy: {
      "/api/": {
        target: "http://localhost:1788/api",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/public/": {
        target: "http://localhost:1788/public",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/public/, ""),
      },
    },
  },

左侧菜单

zsysapp.provide('app_menus',[
    { name: '首页', icon: markRaw(House), url: '/desktop'},
    { name: '数据看板', icon: markRaw(Odometer), url: '/chart' },
    { name: '事件管理', icon: markRaw(Collection), url: '/eventgroup/event'},
    // {
    //     name: '事件管理', icon: markRaw(Collection), url: '/111', show: false,
    //     children: [
    //         { name: '数据看板', icon: markRaw(Odometer), url: '/user', show: false },
    //         { name: '事件', icon: markRaw(Collection), url: '/eventgroup/event', show: false },
    //     ]
    // },
    { name: '行为分析引擎', icon: markRaw(SetUp), url: '/engine' },
    { name: '设备管理', icon: markRaw(VideoCamera), url: '/equipment' },
    { name: '区域管理', icon: markRaw(Location), url: '/area' },
    { name: '报表与统计', icon: markRaw(Document), url: '/building?1' },
    { name: '报警与通知', icon: markRaw(Bell), url: '/building?2'},

])

路由添加

import {addFrameRouter} from 'zsysview'

addFrameRouter({
  path: "/department",
  meta: { title: '组织架构' },
  component: () => import("../view/department/department.vue"),
})

系统组件

名称 | 描述 ---------|--------- breadcrumb | 面包屑、系统地址栏 zsyslist | 列表控件 zsys_delbutton | 列表删除操作按钮

zsys_delbutton

<el-table-column label="操作" width="130">
  <template #default="{ row }">
    <el-space>
      <zsys_delbutton :id="BigInt(row.area_id)" :api_url="AppApiV1.url_area_del" />
    </el-space>
  </template>
</el-table-column>

系统API

zsys_eventBus

const eventBus = zsysEventBus()
eventBus.emit('aud', { module: 'equipment', id: form.value.id })

公共方法

分类 | 名称 | 描述 ---------|----------|--------- 时间 | formatPreciseOralTime | 口语化时间 时间 | formatDateTime | 格式化时间

全局变量

import {inject} from 'vue'
inject('变量名')

名称 | 变量名 | 描述 ---------|----------|--------- 系统名称 | appname | 管理员可以修改的系统名称 备案信息 | icp | 系统的ICP备案描述