Skip to content

S
super-hive-web
Commit 85bbd610 authored by wends's avatar wends
Browse files
Options

remove useless components

parent 94b4cef2
Hide whitespace changes
Inline Side-by-side
Showing with 1 addition and 2619 deletions
mock/index.js
View file @ 85bbd610
......@@ -14,11 +14,6 @@ import tenantManagement from './tenant-management/tenant-management'
import tenantAuth from './tenant-management/tenant-auth'
import tenantAccount from './tenant-management/tenant-account'
import mineDataset from './dataset-management/mine-dateset'
import mineService from './online-service/mine-service'
import serviceMonitor from './online-service/service-monitor'
import mineModel from './model-warehouse/mine-model'
import modelVersion from './model-warehouse/model-version'
import visualization from './model-training/visualization'
import overview from './overview/overview'
const mocks = [
......@@ -35,11 +30,6 @@ const mocks = [
...tenantAuth,
...tenantAccount,
...mineDataset,
...mineService,
...serviceMonitor,
...mineModel,
...modelVersion,
...visualization,
...overview
]
......
mock/model-training/visualization.js deleted 100644 → 0
View file @ 94b4cef2
const data = [
{
id: 1,
taskName: '设备故障诊断',
status: 0,
updateTime: 1593321093655
},
{
id: 2,
taskName: '个人信用贷款',
status: 1,
updateTime: 1593321093655
},
{
id: 3,
taskName: '物流最优路径',
status: 2,
updateTime: 1593321093655
}
]
const modelDetail = {
'nodes': [
{
'name': '线性回归',
'groupName': '机器学习',
'label': '线性回归',
'size': [
'170',
'34'
],
'type': 'node',
'x': 406,
'y': 395,
'shape': 'customNode',
'color': '#1890ff',
'image': '/static/img/tezhenggongcheng.d621fe0d.svg',
'stateImage': '',
'inPoints': [
[
0,
0.5
]
],
'outPoints': [
[
1,
0.5
]
],
'paramType': 'g',
'params': {
'alpha': 0,
'lambda': '1',
'randomSeed': '2',
'maxIterations': '1',
'targetConvergenceThreshold': '1',
'crossValidation': 1
},
'fieldType': 'd',
'fields': {
'featureId': [
1,
2
],
'labelId': 1
},
'offsetX': 80,
'offsetY': 34,
'id': 'node1291',
'style': {}
},
{
'name': '数据集',
'groupName': '数据集组件',
'label': '数据集',
'size': [
'170',
'34'
],
'type': 'node',
'x': 426,
'y': 102,
'shape': 'customNode',
'color': '#1890ff',
'image': '/static/img/dataset.5b96d2e4.svg',
'stateImage': '/static/img/ok.463ab0e4.svg',
'inPoints': [
[
0,
0.5
]
],
'outPoints': [
[
1,
0.5
]
],
'fieldType': 'a',
'fields': {
'datasetId': 1
},
'offsetX': 77,
'offsetY': 19,
'id': 'node1298',
'style': {}
},
{
'name': '数据类型转换',
'groupName': '数据处理组件',
'label': '数据类型转换',
'size': [
'170',
'34'
],
'type': 'node',
'x': 415,
'y': 183,
'shape': 'customNode',
'color': '#1890ff',
'image': '/static/img/dataChange.ad51f236.svg',
'stateImage': '',
'inPoints': [
[
0,
0.5
]
],
'outPoints': [
[
1,
0.5
]
],
'paramType': 'c',
'params': {
'exportType': 1
},
'fieldType': 'c',
'fields': {
'columnId': [
1,
2
]
},
'offsetX': 83,
'offsetY': 21,
'id': 'node1305',
'style': {}
},
{
'name': '异常值处理',
'groupName': '数据预处理',
'label': '异常值处理',
'size': [
'170',
'34'
],
'type': 'node',
'x': 411,
'y': 289,
'shape': 'customNode',
'color': '#1890ff',
'image': '/static/img/tezhenggongcheng.d621fe0d.svg',
'stateImage': '',
'inPoints': [
[
0,
0.5
]
],
'outPoints': [
[
1,
0.5
]
],
'paramType': 'f',
'params': {
'outlierType': 1,
'fillingType': 1,
'customValue': '1',
'fillingValue': '1',
'quantile': 0,
'rule': null
},
'fieldType': 'c',
'fields': {
'columnId': [
1
]
},
'offsetX': 97,
'offsetY': 28,
'id': 'node1312',
'style': {}
}
],
'edges': [
{
'id': 'edge1405',
'source': 'node1298',
'target': 'node1305',
'sourceId': 'node1298',
'targetId': 'node1305',
'start': {
'x': 0,
'y': 17
},
'end': {
'x': 0,
'y': -17
},
'shape': 'customEdge',
'type': 'edge',
'style': {},
'startPoint': {
'x': 423.62345679012344,
'y': 119.5
},
'endPoint': {
'x': 417.37654320987656,
'y': 165.5
}
},
{
'id': 'edge1479',
'source': 'node1305',
'target': 'node1312',
'sourceId': 'node1305',
'targetId': 'node1312',
'start': {
'x': 0,
'y': 17
},
'end': {
'x': 0,
'y': -17
},
'shape': 'customEdge',
'type': 'edge',
'style': {},
'startPoint': {
'x': 414.33962264150944,
'y': 200.5
},
'endPoint': {
'x': 411.66037735849056,
'y': 271.5
}
},
{
'id': 'edge1569',
'source': 'node1312',
'target': 'node1291',
'sourceId': 'node1312',
'targetId': 'node1291',
'start': {
'x': 0,
'y': 17
},
'end': {
'x': 0,
'y': -17
},
'shape': 'customEdge',
'type': 'edge',
'style': {},
'startPoint': {
'x': 410.17452830188677,
'y': 306.5
},
'endPoint': {
'x': 406.82547169811323,
'y': 377.5
}
}
],
'combos': [],
'groups': []
}
export default [
// 获取任务列表
{
url: '/cc/linque/getTaskList',
type: 'post',
response: _ => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {
pageNum: 1,
pageSize: 10,
totalSize: data.length,
records: data
}
}
}
},
// 创建实验
{
url: '/cc/linque/createTask',
type: 'post',
response: (req, res) => {
const { taskName } = req.body
const date = new Date()
const task = {
taskName,
id: data.length + 1,
status: 2,
updateTime: date.getTime()
}
data.push(task)
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {}
}
}
},
// 删除实验
{
url: '/cc/linque/deleteTask',
type: 'post',
response: (req, res) => {
const { id } = req.body
const index = data.findIndex(item => item.id === id)
data.splice(index, 1)
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {}
}
}
},
// 创建模型
{
url: '/cc/linque/createModel',
type: 'post',
response: (req, res) => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {}
}
}
},
// 获取模型数据
{
url: '/cc/linque/getModelVisualization',
type: 'post',
response: (req, res) => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: modelDetail
}
}
}
]
mock/model-warehouse/mine-model.js deleted 100644 → 0
View file @ 94b4cef2
const data = [
{
id: 1,
modelName: '金融风控_1',
versionCount: 2,
info: '',
createTime: 1593321093655,
updateTime: 1593321093655
},
{
id: 2,
modelName: '金融风控_2',
versionCount: 1,
info: '',
createTime: 1593321093655,
updateTime: 1593321093655
}
]
export default [
// 获取模型列表
{
url: '/cc/linque/getModelList',
type: 'post',
response: _ => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {
pageNum: 1,
pageSize: 10,
totalSize: data.length,
records: data
}
}
}
},
// 获取模型详情
{
url: '/cc/linque/getModelDetail',
type: 'post',
response: _ => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {
id: 1,
modelName: '金融风控_1',
version: '0.0.1',
info: '',
createTime: 1593321093655,
updateTime: 1593321093655
}
}
}
},
// 获取模型列表
{
url: '/cc/linque/getAllModelList',
type: 'post',
response: _ => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: data
}
}
}
]
mock/model-warehouse/model-version.js deleted 100644 → 0
View file @ 94b4cef2
const data = [
{
id: 1,
versionNumber: '0.0.1',
createTime: 1593321093655,
updateTime: 1593321093655
},
{
id: 2,
versionNumber: '0.0.2',
createTime: 1593321093655,
updateTime: 1593321093655
}
]
export default [
// 获取模型列表
{
url: '/cc/linque/getModelVersionList',
type: 'post',
response: _ => {
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {
pageNum: 1,
pageSize: 10,
totalSize: data.length,
records: data
}
}
}
},
// 删除模型版本
{
url: '/cc/linque/deleteModelVersion',
type: 'post',
response: (req, res) => {
const { id } = req.body
const index = data.findIndex(item => item.id === id)
data.splice(index, 1)
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {}
}
}
},
// 获取模型版本详情
{
url: '/cc/linque/getModelVersionDetail',
type: 'post',
response: (req, res) => {
// const { id } = req.body
// const model = data.find(item => item.id === id)
return {
code: 200,
message: 'success',
responseTime: 1593321093655,
data: {
modelName: '金融'
}
}
}
}
]
src/api/model-training/visualization.js deleted 100644 → 0
View file @ 94b4cef2
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取任务列表-分页
export function getTaskList(data) {
return request({
url: `${baseURL}/cc/linque/getTaskList`,
method: 'post',
data
})
}
// 创建实验
export function createTask(data) {
return request({
url: `${baseURL}/cc/linque/createTask`,
method: 'post',
data
})
}
// 删除实验
export function deleteTask(data) {
return request({
url: `${baseURL}/cc/linque/deleteTask`,
method: 'post',
data
})
}
// 发布模型
export function createModel(data) {
return request({
url: `${baseURL}/cc/linque/createModel`,
method: 'post',
data
})
}
// 获取模型数据
export function getModelVisualization(data) {
return request({
url: `${baseURL}/cc/linque/getModelVisualization`,
method: 'post',
data
})
}
src/api/model-warehouse/mine-model.js deleted 100644 → 0
View file @ 94b4cef2
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取模型列表-分页
export function getModelList(data) {
return request({
url: `${baseURL}/cc/linque/getModelList`,
method: 'post',
data
})
}
// 获取模型详情
export function getModelDetail(data) {
return request({
url: `${baseURL}/cc/linque/getModelDetail`,
method: 'post',
data
})
}
// 获取模型列表
export function getAllModelList(data) {
return request({
url: `${baseURL}/cc/linque/getAllModelList`,
method: 'post',
data
})
}
src/api/model-warehouse/model-version.js deleted 100644 → 0
View file @ 94b4cef2
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取模型版本列表-分页
export function getModelVersionList(data) {
return request({
url: `${baseURL}/cc/linque/getModelVersionList`,
method: 'post',
data
})
}
// 删除模型版本
export function deleteModelVersion(data) {
return request({
url: `${baseURL}/cc/linque/deleteModelVersion`,
method: 'post',
data
})
}
// 获取模型版本详情
export function getModelVersionDetail(data) {
return request({
url: `${baseURL}/cc/linque/getModelVersionDetail`,
method: 'post',
data
})
}
src/api/online-service/mine-service.js deleted 100644 → 0
View file @ 94b4cef2
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取服务列表-分页
export function getServiceList(data) {
return request({
url: `${baseURL}/cc/linque/getServiceList`,
method: 'post',
data
})
}
// 获取服务列表
export function getServiceListByModelVersion(data) {
return request({
url: `${baseURL}/cc/linque/getServiceListByModelVersion`,
method: 'post',
data
})
}
// 删除服务
export function deleteService(data) {
return request({
url: `${baseURL}/cc/linque/deleteService`,
method: 'post',
data
})
}
// 创建服务
export function createService(data) {
return request({
url: `${baseURL}/cc/linque/createService`,
method: 'post',
data
})
}
src/api/online-service/service-monitor.js deleted 100644 → 0
View file @ 94b4cef2
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取数据
export function getMonitorData(data) {
return request({
url: `${baseURL}/cc/linque/getMonitorData`,
method: 'post',
data
})
}
src/router/index.js
View file @ 85bbd610
......@@ -96,10 +96,6 @@ export const constantRoutes = routes
*/
// 数据管理
import datasetManagement from './modules/datasetManagement'
// 模型仓库
import modelWarehouse from './modules/modelWarehouse'
// 在线服务
import onlineService from './modules/onlineService'
// 系统管理
import systemManagement from './modules/systemManagement'
// 租户管理
......@@ -107,8 +103,6 @@ import tenantManagement from './modules/tenantManagement'
export const asyncRoutes = [
datasetManagement,
modelWarehouse,
onlineService,
systemManagement,
tenantManagement,
// 404 page must be placed at the end !!!
......
src/router/modules/modelTraining.js deleted 100644 → 0
View file @ 94b4cef2
import Common from '@/layout/common/index'
const router = {
menuId: 'ModelTraining',
path: '/model-training',
name: '模型训练',
component: Common,
redirect: '/model-training/visualization',
meta: { title: '模型训练', icon: 'model' },
alwaysShow: true,
children: [
{
menuId: 'Visualization',
path: 'visualization',
name: '可视化模型',
component: () => import('@/views/model-training/visualization'),
meta: { title: '可视化模型', icon: 'vis' }
},
{
menuId: 'EditModel',
path: 'edit-model',
name: '编辑画布',
hidden: true,
component: () => import('@/views/model-training/edit-model'),
meta: { title: '编辑画布', icon: 'vis' }
}
]
}
export default router
src/router/modules/modelWarehouse.js deleted 100644 → 0
View file @ 94b4cef2
import Common from '@/layout/common/index'
const router = {
menuId: 'ModelWarehouse',
path: '/model-warehouse',
name: '模型仓库',
component: Common,
redirect: '/model-warehouse/mine-model',
meta: { title: '模型仓库', icon: 'warehouse' },
alwaysShow: true,
children: [
{
menuId: 'ModelWarehouseMine',
path: 'mine-model',
name: '我的模型',
component: () => import('@/views/model-warehouse/mine-model'),
meta: { title: '我的模型', icon: 'my-model' }
},
{
menuId: 'ModelWarehouseVersion',
path: 'model-version',
name: '模型版本',
hidden: true,
component: () => import('@/views/model-warehouse/model-version'),
meta: {
title: '模型版本',
icon: 'my-model',
activeMenu: '/model-warehouse/mine-model'
}
},
{
menuId: 'ModelWarehouseDetail',
path: 'version-detail',
name: '版本详情',
hidden: true,
component: () => import('@/views/model-warehouse/version-detail'),
meta: {
title: '版本详情',
icon: 'my-model',
activeMenu: '/model-warehouse/mine-model'
}
}
]
}
export default router
src/router/modules/onlineService.js deleted 100644 → 0
View file @ 94b4cef2
import Common from '@/layout/common/index'
const router = {
menuId: 'OnlineService',
path: '/online-service',
name: '在线服务',
component: Common,
redirect: '/online-service/mine-service',
meta: { title: '在线服务', icon: 'onlineService' },
alwaysShow: true,
children: [
{
menuId: 'OnlineServiceMine',
path: 'mine-service',
name: '我的服务',
component: () => import('@/views/online-service/mine-service'),
meta: { title: '我的服务', icon: 'my-service' }
},
{
menuId: 'OnlineServiceMonitor',
path: 'service-monitor',
name: '服务监控',
hidden: true,
component: () => import('@/views/online-service/service-monitor'),
meta: { title: '服务监控', icon: 'my-service' }
}
]
}
export default router
src/views/model-training/components/CreateModel.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-form
ref="form"
:model="form"
label-width="90px"
:rules="rules"
>
<el-form-item
label="方式:"
prop="type"
>
<el-radio-group v-model="form.type">
<el-radio-button :label="1">新模型</el-radio-button>
<el-radio-button :label="2">已有模型</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="form.type === 1"
label="模型名称:"
prop="modelName"
>
<el-input v-model="form.modelName" />
</el-form-item>
<el-form-item
v-if="form.type === 2"
label="已有模型:"
prop="modelId"
>
<el-select v-model="form.modelId" placeholder="请选择">
<el-option
v-for="item in modelList"
:key="item.id"
:label="item.modelName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
label="模型版本:"
prop="version"
>
<el-input v-model="form.version" />
</el-form-item>
<el-form-item
label="备注:"
prop="info"
>
<el-input
v-model="form.info"
type="textarea"
row="2"
/>
</el-form-item>
</el-form>
<div style="text-align: right">
<el-button @click="$emit('cancel')">取消</el-button>
<el-button type="primary" @click="saveService">提交</el-button>
</div>
</div>
</template>
<script>
import { getAllModelList } from '@/api/model-warehouse/mine-model'
import { createModel } from '@/api/model-training/visualization'
export default {
name: 'CreateModel',
props: {
modelVersionList: {
type: Array,
default: _ => {
return []
}
},
id: {
type: Number,
default: null
}
},
data() {
return {
form: {
type: 1,
modelName: null,
modelId: null,
version: null,
info: null
},
modelList: [],
rules: {
type: [
{ required: true, message: '请选择方式', trigger: 'change' }
],
modelName: [
{ required: true, message: '请输入模型名', trigger: 'blur' }
],
modelId: [
{ required: true, message: '请选择模型', trigger: 'change' }
],
version: [
{ required: true, message: '请输入版本', trigger: 'blur' }
]
}
}
},
watch: {
'form.type'(val) {
this.$refs.form.clearValidate(['modelName', 'modelId'])
}
},
created() {
getAllModelList()
.then(res => {
this.modelList = res.data
})
.catch(_ => {})
},
methods: {
saveService() {
this.$refs.form.validate()
.then(_ => {
const { type, modelName, modelId, version, info } = this.form
let params = {}
if (type === 1) {
// 新服务
params = {
type,
modelName,
version,
info
}
} else {
// 已有服务新版本
params = {
type,
modelId,
version,
info
}
}
return Promise.resolve(params)
})
.then(params => createModel(params))
.then(_ => {
this.$message.success('创建成功')
this.$emit('confirm')
})
.catch(_ => {})
}
}
}
</script>
<style scoped>
</style>
src/views/model-training/edit-model/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<el-card ref="container" class="container">
<G6Editor
mode="edit"
:width="width"
:height="height"
:data="modelData"
@createModel="dialogVisible = true"
@trainingDone="onTrainingDone"
/>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<create-model
v-if="dialogVisible"
@cancel="dialogVisible = false"
@confirm="onConfirm"
/>
</el-dialog>
<el-dialog
title="提示"
:visible.sync="trainingDialogVisible"
width="30%"
top="20vh"
>
<span>模型训练已完成，是否返回上一页</span>
<span slot="footer" class="dialog-footer">
<el-button @click="trainingDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="onConfirm">确 定</el-button>
</span>
</el-dialog>
</el-card>
</template>
<script>
import G6Editor from '@/components/G6Editor/components/G6Editor'
import CreateModel from '@/views/model-training/components/CreateModel'
import { getModelVisualization } from '@/api/model-training/visualization'
export default {
name: 'EditModel',
components: {
G6Editor,
CreateModel
},
data() {
return {
width: 0,
height: 0,
dialogVisible: false,
trainingDialogVisible: false,
modelData: {}
}
},
mounted() {
this.width = this.$refs.container.$el.clientWidth - 40
this.height = document.body.clientHeight - 90 - 40
getModelVisualization()
.then(res => {
this.modelData = res.data
})
.catch(_ => {})
},
methods: {
onConfirm() {
this.trainingDialogVisible = false
this.dialogVisible = false
this.$router.go(-1)
},
onTrainingDone() {
this.trainingDialogVisible = true
}
}
}
</script>
<style scoped lang="scss">
.container >>> .el-card__body{
display: flex;
}
</style>
src/views/model-training/visualization/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-card class="no-bottom">
<el-form
ref="searchForm"
:model="searchForm"
label-width="80px"
inline
@submit.native.prevent
>
<el-form-item
label="实验名称:"
prop="input"
>
<el-input v-model="searchForm.input" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTaskList">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" @click="addRow">新建实验</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="taskName"
label="实验名称"
/>
<el-table-column
prop="status"
label="设备状态"
:formatter="statusFormatter"
/>
<el-table-column
prop="updateTime"
label="最后编辑时间"
:formatter="$moment"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="scope">
<el-button type="text" @click="editModel(scope)">编辑</el-button>
<el-button type="text" @click="copyTask(scope.row)">复制</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteItem(scope.row.id)"
>
<el-button slot="reference" type="text" style="padding-left: 10px">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<el-dialog
:title="add ? '新建实验' : '复制实验'"
:visible.sync="dialogVisible"
width="700px"
>
<el-form
ref="form"
:model="addForm"
label-width="90px"
:rules="rule"
>
<el-form-item
label="实验名称:"
prop="taskName"
>
<el-input v-model="addForm.taskName" />
</el-form-item>
<el-form-item
label="实验描述:"
>
<el-input v-model="addForm.info" type="textarea" row="2" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getTaskList, createTask, deleteTask } from '@/api/model-training/visualization'
export default {
name: 'Visualization',
props: {},
data() {
return {
searchForm: {
input: null,
status: null
},
add: true,
dialogVisible: false,
tableData: [],
addForm: {
taskName: null,
info: null
},
pageForm: {
pageSize: 10,
pageNum: 1,
total: 0
},
rule: {
taskName: [
{ required: true, message: '请输入实验名称', trigger: 'blur' }
]
}
}
},
created() {
this.getTaskList(1)
},
mounted() {},
methods: {
editModel() {
this.$router.push({ path: '/model-training/edit-model' })
},
copyTask(row) {
this.addForm.taskName = row.taskName
this.add = false
this.dialogVisible = true
},
statusFormatter(row, column, cellValue) {
const data = {
0: '编辑中',
1: '已开始',
2: '未开始'
}
return data[cellValue]
},
getTaskList(pageNum) {
const params = {
...this.searchForm,
pageNum,
pageSize: this.pageForm.pageSize
}
getTaskList(params)
.then(res => {
const { records, totalSize } = res.data
this.tableData = records
this.pageForm.total = totalSize
})
.catch(_ => {})
},
resetForm() {
this.$refs.searchForm.resetFields()
},
addRow() {
this.add = true
this.dialogVisible = true
},
deleteItem(id) {
deleteTask({ id })
.then(_ => this.$message.success('操作成功'))
.then(_ => this.getTaskList(1))
.catch(_ => {})
},
saveSystem() {
this.$refs.form.validate()
.then(_ => {
return {
...this.addForm
}
})
.then(params => createTask(params))
.then(_ => this.$message.success('创建成功'))
.then(_ => this.getTaskList(this.pageForm.pageNum))
.then(_ => {
this.dialogVisible = false
})
.catch(_ => {})
},
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getTaskList(1)
},
handleCurrentChange(val) {
this.pageForm.pageNum = val
this.getTaskList(val)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/model-warehouse/components/CreateService.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-form
ref="form"
:model="form"
label-width="90px"
:rules="rules"
>
<el-form-item
label="创建方式:"
prop="type"
>
<el-radio-group v-model="form.type">
<el-radio-button :label="1">创建新服务</el-radio-button>
<el-radio-button :label="2">创建已有服务新版本</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="form.type === 1"
label="服务名称:"
prop="serviceName"
>
<el-input v-model="form.serviceName" style="width: 220px" />
</el-form-item>
<el-form-item
v-if="form.type === 2"
label="服务名称:"
prop="serviceId"
>
<el-select v-model="form.serviceId" placeholder="请选择">
<el-option
v-for="item in serviceList"
:key="item.id"
:label="item.serviceName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item
label="服务版本:"
prop="version"
>
<el-input v-model="form.version" style="width: 220px" />
</el-form-item>
<el-form-item
label="选择模型:"
prop="modelVersionId"
>
<el-select v-model="form.modelVersionId" placeholder="请选择">
<el-option
v-for="item in modelVersionList"
:key="item.id"
:label="item.versionNumber"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<div style="text-align: right">
<el-button @click="$emit('cancel')">取消</el-button>
<el-button type="primary" @click="saveService">提交</el-button>
</div>
</div>
</template>
<script>
import { getServiceListByModelVersion, createService } from '@/api/online-service/mine-service'
export default {
name: 'CreateService',
props: {
modelVersionList: {
type: Array,
default: _ => {
return []
}
},
id: {
type: Number,
default: null
}
},
data() {
return {
form: {
type: 1,
serviceName: null,
serviceId: null,
version: null,
modelVersionId: null
},
serviceList: [],
rules: {
type: [
{ required: true, message: '请选择创建方式', trigger: 'change' }
],
serviceName: [
{ required: true, message: '请输入服务名', trigger: 'blur' }
],
serviceId: [
{ required: true, message: '请选择服务', trigger: 'change' }
],
version: [
{ required: true, message: '请输入版本', trigger: 'blur' }
],
modelVersionId: [
{ required: true, message: '请选择模型版本', trigger: 'change' }
]
}
}
},
watch: {
'form.type'(val) {
this.$refs.form.clearValidate(['serviceName', 'serviceId'])
}
},
created() {
getServiceListByModelVersion({ id: this.id })
.then(res => {
this.serviceList = res.data
})
.catch(_ => {})
},
methods: {
saveService() {
this.$refs.form.validate()
.then(_ => {
const { type, serviceName, serviceId, version, modelVersionId } = {
...this.form
}
let params = {}
if (type === 1) {
// 新服务
params = {
type,
serviceName,
version,
modelVersionId
}
} else {
// 已有服务新版本
params = {
type,
serviceId,
version,
modelVersionId
}
}
return Promise.resolve(params)
})
.then(params => createService(params))
.then(_ => {
this.$message.success('创建成功')
this.$emit('save')
})
.catch(_ => {})
}
}
}
</script>
<style scoped>
</style>
src/views/model-warehouse/mine-model/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-card class="no-bottom">
<el-form
ref="searchForm"
:model="searchForm"
label-width="80px"
inline
>
<el-form-item
label="模型名称:"
prop="modelName"
>
<el-input v-model="searchForm.modelName" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getModelList(1)">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" disabled>导入模型</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="modelName"
label="模型名称"
/>
<el-table-column
prop="versionCount"
label="版本数"
/>
<el-table-column
prop="info"
label="备注"
/>
<el-table-column
prop="createTime"
label="创建时间"
:formatter="$moment"
/>
<el-table-column
prop="updateTime"
label="更新时间"
:formatter="$moment"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="props">
<el-button v-permission="'SysMgr_update'" type="text" @click="goVersion(props.row)">版本</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteItem(props.row.id)"
>
<el-button slot="reference" type="text" style="padding-left: 10px">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<el-dialog
:title="add ? '增加系统' : '编辑系统'"
:visible.sync="dialogVisible"
width="700px"
>
<el-form
:model="addForm"
label-width="90px"
>
<el-form-item
label="input:"
>
<el-input v-model="addForm.input" />
</el-form-item>
<el-form-item
label="status:"
>
<el-input v-model="addForm.status" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getModelList } from '@/api/model-warehouse/mine-model'
export default {
name: 'MyModel',
props: {},
data() {
return {
searchForm: {
modelName: null
},
add: true,
dialogVisible: false,
tableData: [],
addForm: {
input: null,
status: null
},
pageForm: {
pageSize: 10,
pageNum: 1,
total: 0
}
}
},
created() {
this.getModelList(1)
},
mounted() {},
methods: {
goVersion(row) {
this.$router.push({ path: '/model-warehouse/model-version', query: { id: row.id, modelName: row.modelName }})
},
getModelList(pageNum) {
const params = {
pageNum,
pageSize: this.pageForm.pageSize,
modelName: this.searchForm.modelName
}
getModelList(params)
.then(res => {
const { records, totalSize } = res.data
this.tableData = records
this.pageForm.total = totalSize
})
.catch(_ => this.$message.error('查询遇到问题'))
},
resetForm() {
this.$refs.searchForm.resetFields()
},
addRow() {
this.add = true
this.dialogVisible = true
},
editItem() {
this.add = false
this.dialogVisible = true
},
deleteItem(id) {},
saveSystem() {},
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getModelList(1)
},
handleCurrentChange(val) {
this.pageForm.pageNum = val
this.getModelList(val)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/model-warehouse/model-version/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-card>
<el-page-header
:content="modelName"
@back="goBack"
/>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" disabled>创建版本</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="versionNumber"
label="版本号"
/>
<el-table-column
prop="createTime"
label="创建时间"
:formatter="$moment"
/>
<el-table-column
prop="updateTime"
label="更新时间"
:formatter="$moment"
/>
<el-table-column
label="操作"
width="180px"
align="center"
>
<template slot-scope="scope">
<el-button type="text" @click="checkDetail(scope.row)">查看</el-button>
<el-button type="text" @click="addService(scope.row)">新建服务</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteItem(scope.row.id)"
>
<el-button slot="reference" type="text" style="padding-left: 10px">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<el-dialog
title="新建服务"
:visible.sync="dialogVisible"
width="700px"
>
<create-service
v-if="dialogVisible"
:id="currentModelVersionId"
:model-version-list="tableData"
@cancel="dialogVisible = false"
@save="onSave"
/>
</el-dialog>
</div>
</template>
<script>
import { getModelVersionList, deleteModelVersion } from '@/api/model-warehouse/model-version'
import CreateService from '@/views/model-warehouse/components/CreateService'
export default {
name: 'ModelVersion',
components: {
CreateService
},
props: {},
data() {
return {
add: true,
dialogVisible: false,
tableData: [],
addForm: {
input: null,
status: null
},
pageForm: {
pageSize: 10,
pageNum: 1,
total: 0
},
modelName: null,
modelId: null,
currentModelVersionId: null
}
},
created() {
this.modelId = this.$route.query.id
this.modelName = this.$route.query.modelName
},
mounted() {
this.getModelVersionList(1)
},
methods: {
onSave() {
this.dialogVisible = false
this.getModelVersionList(this.pageForm.pageNum)
},
addService(row) {
this.currentModelVersionId = row.id
this.dialogVisible = true
},
checkDetail(row) {
this.$router.push({ path: '/model-warehouse/version-detail', query: { id: row.id }})
},
getModelVersionList(pageNum) {
const params = {
id: this.modelId,
pageNum,
pageSize: this.pageForm.pageSize
}
getModelVersionList(params)
.then(res => {
const { records, totalSize } = res.data
this.tableData = records
this.pageForm.total = totalSize
})
.catch(_ => {})
},
goBack() {
this.$router.go(-1)
},
deleteItem(id) {
deleteModelVersion({ id })
.then(_ => this.getModelVersionList(1))
.catch(_ => {})
},
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getModelVersionList(1)
},
handleCurrentChange(val) {
this.pageForm.pageNum = val
this.getModelVersionList(val)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/model-warehouse/version-detail/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-card>
<el-page-header
content="版本详情"
@back="goBack"
/>
</el-card>
<el-card class="no-bottom margin-top-20">
<div slot="header">
<span>模型基本信息</span>
</div>
<descriptions label-position="right">
<descriptions-item :span="8" label="模型名称" :value="modelDetail.modelName" />
<descriptions-item :span="8" label="版本号" :value="modelDetail.version" />
<descriptions-item :span="8" label="创建时间" :value="$moment(modelDetail.createTime)" />
<descriptions-item :span="8" label="更新时间" :value="$moment(modelDetail.updateTime)" />
<descriptions-item :span="16" label="备注" :value="modelDetail.info" />
</descriptions>
</el-card>
<el-card class="margin-top-20">
<div slot="header" class="clearfix">
<span>相关在线服务</span>
<el-button
style="float: right; padding: 3px 0"
icon="el-icon-plus"
type="text"
@click="dialogVisible = true"
>新建服务</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="serviceName"
label="服务名称"
/>
<el-table-column
prop="version"
label="服务版本"
/>
<el-table-column
prop="createTime"
label="创建时间"
:formatter="$moment"
/>
<el-table-column
prop="updateTime"
label="更新时间"
:formatter="$moment"
/>
</el-table>
</el-card>
<el-dialog
title="新建服务"
:visible.sync="dialogVisible"
width="700px"
>
<create-service
v-if="dialogVisible"
:id="modelVersionId"
:model-version-list="tableData"
@cancel="dialogVisible = false"
@save="onSave"
/>
</el-dialog>
</div>
</template>
<script>
import { getModelDetail } from '@/api/model-warehouse/mine-model'
import { getServiceListByModelVersion } from '@/api/online-service/mine-service'
import CreateService from '@/views/model-warehouse/components/CreateService'
export default {
name: 'VersionDetail',
components: {
CreateService
},
props: {},
data() {
return {
modelDetail: {
modelName: null,
version: null,
info: null,
createTime: null,
updateTime: null
},
add: true,
dialogVisible: false,
tableData: [],
addForm: {
input: null,
status: null
},
modelVersionId: null
}
},
created() {
this.modelVersionId = this.$route.query.id
getModelDetail({ id: this.modelVersionId })
.then(res => {
this.modelDetail = {
...res.data
}
})
.then(_ => this.getServiceListByModelVersion())
.catch(_ => {})
},
methods: {
getServiceListByModelVersion() {
getServiceListByModelVersion({ id: this.modelVersionId })
.then(res => {
this.tableData = res.data
})
},
goBack() {
this.$router.go(-1)
},
addRow() {
this.add = true
this.dialogVisible = true
},
onSave() {
this.dialogVisible = false
this.getServiceListByModelVersion()
}
}
}
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
src/views/online-service/mine-service/JsonEditor.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<div ref="jsonEditor" style="width:500px;height: 400px" />
</div>
</template>
<script>
import JSONEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.min.css'
export default {
name: 'Debugging',
data() {
return {
editor: null
}
},
mounted() {
this.init()
},
methods: {
init() {
const container = this.$refs.jsonEditor
const options = {
mode: 'code',
enableSort: false,
enableTransform: false,
mainMenuBar: false,
statusBar: false
}
this.editor = new JSONEditor(container, options)
},
getJson() {
return this.editor.get()
}
}
}
</script>
<style scoped>
</style>
src/views/online-service/mine-service/RequestForm.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-form
ref="form"
:model="form"
label-width="160px"
>
<el-form-item label="接口地址:">
<el-input v-model="form.url">
<el-button
slot="append"
icon="el-icon-copy-document"
@click="doCopy"
/>
</el-input>
</el-form-item>
<el-form-item label="token:">
<el-input
v-model="form.token"
:type="passwordType"
>
<el-button
slot="append"
:icon="passwordType === 'password' ? 'el-icon-lock' : 'el-icon-unlock'"
@click="showPwd"
/>
</el-input>
</el-form-item>
<el-form-item label="Request Body:">
<json-editor ref="request" />
<div style="text-align: right;margin-top: 20px">
<el-button
type="primary"
@click="debugging"
>调试</el-button>
</div>
</el-form-item>
<el-form-item label="Response:">
<div class="json-pretty">
<vue-json-pretty
:data="form.res"
:show-line="false"
/>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
import JsonEditor from '@/views/online-service/mine-service/JsonEditor'
import VueJsonPretty from 'vue-json-pretty'
import axios from 'axios'
export default {
name: 'RequestForm',
components: {
JsonEditor,
VueJsonPretty
},
data() {
return {
form: {
url: 'http://localhost:9527/dev-api/cc/linque/getServiceList',
token: 'asdasdy879123hih3o1273190823u',
req: {},
res: {}
},
passwordType: 'password'
}
},
methods: {
getRequestBody() {
console.log(this.$refs.request.getJson())
},
debugging() {
axios.post(this.form.url, this.form.req)
.then(res => {
this.form.res = res.data
})
.catch(err => {
console.error(err)
})
},
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
},
doCopy() {
this.$copyText(this.form.url).then(e => {
this.$message.success('已复制至剪切板')
console.log(e)
}, e => {
console.log(e)
})
}
}
}
</script>
<style scoped lang="scss">
.json-pretty{
background-color: rgb(246, 248, 251);
padding: 10px;
}
</style>
src/views/online-service/mine-service/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div>
<el-card class="no-bottom">
<el-form
ref="searchForm"
:model="searchForm"
label-width="80px"
inline
>
<el-form-item
label="服务名称:"
prop="serviceName"
>
<el-input v-model="searchForm.serviceName" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getServiceList(1)">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" disabled @click="addRow">新建服务</el-button>
</div>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="serviceName"
label="服务名称"
/>
<el-table-column
prop="version"
label="当前版本"
/>
<el-table-column
prop="status"
label="状态"
:formatter="serviceStatus"
/>
<el-table-column
label="模型文件"
>
<template slot-scope="scope">
<el-button
type="text"
@click="goModelDetail(scope.row)"
>{{ scope.row.modelName }}</el-button>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
:formatter="$moment"
/>
<el-table-column
prop="updateTime"
label="更新时间"
:formatter="$moment"
/>
<el-table-column
label="操作"
width="220px"
align="center"
>
<template slot-scope="scope">
<el-button type="text" @click="dialogVisible = true">在线调试</el-button>
<el-button type="text" @click="goMonitor(scope.row)">服务监控</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteService(scope.row.id)"
>
<el-button slot="reference" type="text" style="padding-left: 10px">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
<el-dialog
title="在线调试"
:visible.sync="dialogVisible"
width="700px"
>
<request-form />
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getServiceList, deleteService } from '@/api/online-service/mine-service'
import RequestForm from '@/views/online-service/mine-service/RequestForm'
export default {
name: 'MineService',
components: {
RequestForm
},
props: {},
data() {
return {
searchForm: {
serviceName: null
},
add: true,
dialogVisible: false,
tableData: [],
addForm: {
input: null,
status: null
},
pageForm: {
pageSize: 10,
pageNum: 1,
total: 0
}
}
},
created() {
this.getServiceList(1)
},
mounted() {},
methods: {
goModelDetail(row) {
this.$router.push({
path: '/model-warehouse/version-detail',
query: {
id: row.modelVersionId
}
})
},
goMonitor(row) {
this.$router.push({
path: '/online-service/service-monitor',
query: {
id: row.id,
serviceName: row.serviceName
}
})
},
serviceStatus(row, column, cellValue, index) {
const data = {
1: '运行中',
2: '失败'
}
return data[cellValue]
},
getServiceList(pageNum) {
const params = {
...this.searchForm
}
getServiceList(params)
.then(res => {
const { records, totalSize } = res.data
this.tableData = records
this.pageForm.total = totalSize
})
.catch(_ => {
this.$message.error('查询遇到问题')
})
},
resetForm() {
this.$refs.searchForm.resetFields()
},
addRow() {
this.add = true
this.dialogVisible = true
},
editItem() {
this.add = false
this.dialogVisible = true
},
deleteService(id) {
deleteService({ id })
.then(_ => this.$message.success('操作成功'))
.then(_ => this.getServiceList(1))
.catch(_ => this.$message.error('操作遇到问题'))
},
saveSystem() {},
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getServiceList(1)
},
handleCurrentChange(val) {
this.pageForm.pageNum = val
this.getServiceList(val)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/online-service/service-monitor/index.vue deleted 100644 → 0
View file @ 94b4cef2
<template>
<div class="monitor">
<el-card class="no-bottom top">
<div style="padding-top: 6px">
<el-page-header
content="服务监控"
@back="goBack"
/>
</div>
<el-form
ref="searchForm"
:model="searchForm"
label-width="80px"
inline
>
<el-form-item
label="时间:"
prop="startAndEndTime"
>
<el-date-picker
v-model="searchForm.startAndEndTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy/M/d"
@change="onChange"
/>
</el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :lg="6">
<el-card ref="rowOne" class="box-card row-one">
<div slot="header">
<span>总PV</span>
</div>
<div class="number">
{{ summary.pv }}
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-card ref="rowTwo" class="box-card row-one">
<div slot="header">
<span>总处理时长</span>
</div>
<div class="number">
{{ summary.timeConsuming }}s
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-card ref="rowThree" class="box-card row-one">
<div slot="header">
<span>总流量</span>
</div>
<div class="number">
{{ summary.bytes }} B
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-card ref="rowFour" class="box-card row-one">
<div slot="header">
<span>访问成功占比</span>
</div>
<div class="number">
{{ Math.round((summary.successCount / summary.totalCount)* 100) }}%
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :lg="6">
<el-card>
<div ref="donut" style="height: 600px" />
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="18">
<el-card>
<div ref="line" style="height: 600px" />
</el-card>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { Donut, Line } from '@antv/g2plot'
import { getMonitorData } from '@/api/online-service/service-monitor'
export default {
name: 'Monitor',
props: {},
data() {
return {
searchForm: {
startAndEndTime: null
},
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
tinyAreaPlot: null,
tinyColumnPlot: null,
progressPlot: null,
line: null,
summary: {
pv: 0,
timeConsuming: 0,
bytes: 0,
successCount: 0,
totalCount: 0
}
}
},
created() {
this.searchForm.startAndEndTime = ['2020/7/1', '2020/7/7']
},
mounted() {
const [startTime, endTime] = this.searchForm.startAndEndTime
this.getMonitorData({ startTime, endTime })
.then(res => {
const { lineData, donutData, summary } = res
this.summary = {
...summary
}
this.initDonut(donutData)
this.initLine(lineData.flat())
})
.catch(err => {
console.error(err)
})
},
beforeMount() {
window.addEventListener('resize', this.repaint)
},
beforeDestroy() {
window.removeEventListener('resize', this.repaint)
},
methods: {
goBack() {
this.$router.go(-1)
},
onChange(date) {
if (date !== null) {
const [startTime, endTime] = date
this.updateMonitorData({ startTime, endTime })
}
},
getMonitorData(params) {
return new Promise((resolve, reject) => {
getMonitorData(params)
.then(res => {
const { data } = res
const arr = new Array(5).fill(0)
let [pv, timeConsuming, bytes, successCount, totalCount] = arr
let [twoHundred, threeHundred, fourHundred, fiveHundred, other] = arr
const lineData = data.map(v => {
pv += v.pv
timeConsuming += v.timeConsuming
bytes += v.timeConsuming
successCount += v.successCount
totalCount += v.totalCount
twoHundred += v.statusCode.twoHundred
threeHundred += v.statusCode.threeHundred
fourHundred += v.statusCode.fourHundred
fiveHundred += v.statusCode.fiveHundred
other += v.statusCode.other
return [
{
date: v.date,
type: '总访问量',
value: v.totalCount
},
{
date: v.date,
type: '成功次数',
value: v.successCount
}
]
})
const donutData = [
{
type: '2XX',
value: twoHundred
},
{
type: '3XX',
value: threeHundred
},
{
type: '4XX',
value: fourHundred
},
{
type: '5XX',
value: fiveHundred
},
{
type: '其它',
value: other
}
]
const summary = {
pv,
timeConsuming,
bytes,
successCount,
totalCount
}
resolve({ lineData, donutData, summary })
})
.catch(err => reject(err))
})
},
updateMonitorData(params) {
this.getMonitorData(params)
.then(res => {
const { lineData, donutData, summary } = res
this.summary = {
...summary
}
this.line.changeData(lineData.flat())
this.donut.changeData(donutData)
})
.catch(err => {
console.error(err)
})
},
initDonut(data) {
const donutContainer = this.$refs.donut
this.donut = new Donut(donutContainer, {
title: {
visible: true,
text: '状态码'
},
description: {
visible: true,
text: '展示指定时间段内服务状态码占比情况'
},
data,
radius: 0.8,
angleField: 'value',
colorField: 'type',
forceFit: true,
legend: {
position: 'bottom-center',
flipPage: false,
text: {
formatter: (text, cfg) => {
return '11'
}
}
}
})
this.donut.render()
},
initLine(data) {
const lineContainer = this.$refs.line
this.line = new Line(lineContainer, {
title: {
visible: true,
text: '用量统计'
},
description: {
visible: true,
text: '将数据按照总访问量和总流量进行分组，展示总访问量和总流量变化的趋势。'
},
padding: 'auto',
forceFit: true,
data,
xField: 'date',
yField: 'value',
yAxis: {
label: {
// 数值格式化为千分位
formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
}
},
legend: {
position: 'top-center'
},
seriesField: 'type',
responsive: true,
interactions: [
{
type: 'slider',
cfg: {
start: 0,
end: 1
}
}
]
})
this.line.render()
}
}
}
</script>
<style lang="scss" scoped>
.monitor{
.top >>>.el-card__body{
display: flex;
justify-content: space-between;
align-content: center;
}
.row-one{
margin-bottom: 20px;
.number{
font-size: 30px;
}
.content{
height: 80px;
line-height: 80px;
}
.el-divider{
margin-top: 12px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment