# useQuickMonitor
> 监控（项目监控、企业监控、客户监控）业务

::: tip
该业务模型已集成 API 接口请求。
:::

## 前置要求

* 使用 `interceptors-data-models.js`，将 service axios 实例中注入

```javascript
// interceptors-data-models.js
import service from './interceptors-anti'
import { injectRequest } from '@jy/data-models'

injectRequest(service)
```


## 业务模型使用
```javascript
// 导入监控业务模型
import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'

const useMonitor = useQuickMonitor({
  type: 'project',
  params: {
    id: '项目ID'
  }
})

// 监控状态
// useMonitor.model
// useMonitor.id
// useMonitor.fid
// useMonitor.loading

// async 初始化，获取当前监控状态信息
useMonitor.doFetch()

// async 改变监控状态
useMonitor.doChange()
```

### useQuickMonitor()
#### 参数文档

|      参数       |  描述   |                        类型                         |     默认值      |
|:-------------:|:-----:|:-------------------------------------------------:|:------------:|
|  type  | 用于监控的类型 (project - 项目 | ent - 企业 | client - 客户) | String | project |
| params.id | 对应的监控项目ID、企业ID、客户ID | String |      ''      |



### model 数据模型
* 可通过 `useMonitor.model` 获取实时数据
* 或者 `useMonitor.createModel()` 创建初始默认值
```
return {
  // 是否可以展示监控按钮
  canFollow: false,
  // 当前监控状态
  follow: false,
  // 可扩展字段
  expands: {
    // 剩余可用数量
    surplus: 0,
    // 已用数量
    used: 0
  }
}
```

### async doFetch()
> 初始化，获取当前监控数据
#### 返回值
返回值等于 model

### async doChange()
> 改变监控状

#### 返回值
```
{
  // 操作是否成功
  success: false,
  msg: '',
  // 接口返回值
  data: {}
}
```

## Setup 用法
### 组合式
````vue
<script setup>
  import { reactive, toRefs } from 'vue'
  import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'

  const useMonitor = useQuickMonitor({
    type: props.type,
    params: {
      id: props.params
    }
  })

  const { doFetch, doChange } = useMonitor

  const { model } = toRefs(reactive(useMonitor))

  // 未监控时可点击监控
  function changeFollow() {
    if (!model.value.follow) {
      doChange()
    }
  }
  
<script>
````