# 晶合厂务看板

**Repository Path**: Staringworld/factory-kpi

## Basic Information

- **Project Name**: 晶合厂务看板
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-07
- **Last Updated**: 2026-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 产品架构

+ 字体为思源字体
  + SourceHanSansCN-Regular 正常字体
  + SourceHanSansCN-Medium 加粗字体
+ 代码压缩 compression-webpack-plugin
+ 配置文件 baseConfig.json 相关的基本配置数据
+ 接口工具 利用Nswage工具依据swagger.json生成
+ vue-kst-auth 封装的授权npm包
+ vue-router
+ vuex
+ element-ui
+ vue-property-decorator
+ axios

## 目录结构
```
|—— public
    |—— font // 字体（思源字体）
    |—— baseConfig.json // 接本配置
    |—— favicon.ico
|—— src
    |—— assets
        |—— them // 主题文件（element-ui自定义主题）
    |—— plugins // 插件
    |—— router // 路由
    |—— store
        |—— baseData.ts // 基本数据
    |—— views
    | App.vue
```

## 封装成npm包提醒

+ 封装组件使用element-ui需要在组件中引用并实例化，不然引用后报错
  ```
  1、按需使用
  import { Button, Select } from 'element-ui';
  Vue.use(Button)
  Vue.use(Select)
  [其他](https://element.eleme.cn/#/zh-CN/component/quickstart)
  
  2、全部使用
  import ElementUI from "element-ui";
  Vue.use(ElementUI)
  ```

## 封装Web Components
```
1、命令 vue-cli-service build --target wc --name my-element [entry]
注：如果需要添加对vue的内部依赖 在命令后加 --inline-vue
(详情)[https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6]

```
## 公共数据介绍
```
引用数据：如
<img src="/publicData/images/logo.png">
转发服务器地址为：http://api.svc.htres.cn/
文件目录：
|--publicData
    |-- images
        |-- favicon.ico
        |-- logo.png
        |-- bg.png
        |-- 等
    |-- styles
        |-- theme
            |-- fonts
            |-- index.css
            |-- 等
    |-- 等
```

## 公用组件 web components

+ 学习 [web components](https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6)
+ 公共头部导航
```
代码：
<template>
  <div class="layout1">
    <!-- 头 -->
    <div class="layout-head">
      <div class="head_L">
        <a href="./" title="星环视界">
          <img src="/publicData/images/logo.png" alt="logo" />
        </a>
      </div>
      <div class="head_R">
        <!-- 导航列表 -->
        <slot name="navList"></slot>
      </div>
      <div class="head_end">
        <!-- 尾部内容 -->
        <slot name="handEnd"></slot>
      </div>
    </div>
  </div>
</template>

转发服务器地址为：http://api.svc.htres.cn/
项目中引入：如
<script src="/asset-model/components/xhkj-layout1.min.js"></script>

使用：
<xhkj-layout1>
    <div slot="navList">
    <router-link to="/model" exact>根模型</router-link>
    <router-link to="/equipment">运行模型</router-link>
    <router-link to="/asset">资产管理</router-link>
    <router-link to="/dataset">数据设置</router-link>
    <a href="/work-flow">作业流程</a>
    </div>
    <router-link slot="handEnd" to="/login">切换租户</router-link>
</xhkj-layout1>

```

## 安装最新vue-kst-auth包
```
yarn add vue-kst-auth
```

## 项目开始
```
yarn install
```

### 项目运行
```
yarn run serve
```

### 打包
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).