Merge pull request '111' (#200) from jhnine/JCC-RIP:ai4m into ai4m
|
@ -3,5 +3,5 @@ ENV = 'production'
|
|||
|
||||
# base api
|
||||
VUE_APP_BASE_API = '/jcc-ks'
|
||||
VUE_APP_PUBLIC_SOURCE_API = '/monitor'
|
||||
VUE_APP_PUBLIC_SOURCE_API = ''
|
||||
|
||||
|
|
|
@ -42,6 +42,8 @@
|
|||
"script-loader": "0.7.2",
|
||||
"sortablejs": "1.8.4",
|
||||
"spark-md5": "^3.0.2",
|
||||
"three": "^0.126.1",
|
||||
"three.meshline": "^1.4.0",
|
||||
"vue": "2.6.10",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-count-to": "1.0.13",
|
||||
|
@ -21769,6 +21771,16 @@
|
|||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.126.1",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz",
|
||||
"integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
|
||||
},
|
||||
"node_modules/three.meshline": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/three.meshline/-/three.meshline-1.4.0.tgz",
|
||||
"integrity": "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
|
||||
},
|
||||
"node_modules/throat": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
|
||||
|
@ -41639,6 +41651,16 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"three": {
|
||||
"version": "0.126.1",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz",
|
||||
"integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
|
||||
},
|
||||
"three.meshline": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/three.meshline/-/three.meshline-1.4.0.tgz",
|
||||
"integrity": "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
|
||||
},
|
||||
"throat": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
|
||||
|
|
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 976 KiB After Width: | Height: | Size: 976 KiB |
|
@ -39,7 +39,8 @@
|
|||
"close": "Close",
|
||||
"userNameMsg": "Please enter the correct user name",
|
||||
"passwordMsg": "The password can not be less than 6 digits",
|
||||
"check": "Check"
|
||||
"check": "Check",
|
||||
"submit": "Submit"
|
||||
},
|
||||
"menu": {
|
||||
"taskManagement": "Task",
|
||||
|
@ -535,6 +536,19 @@
|
|||
"adapterCheckText": "After filling in the adapter information, click the Validate button. Check if the adapter is connected successfully; it must be connected successfully before you can click the Confirm button.",
|
||||
"bindClusterText": "After binding the cluster, return to the homepage to create a new task.",
|
||||
"newTask": "Add Task",
|
||||
"guideFinish": " Guidance has been completed."
|
||||
"guideFinish": " Guidance has been completed.",
|
||||
"taskInvocation": "Task Invocation",
|
||||
"taskCmdInput": "Task command input",
|
||||
"taskResult": "Task result output",
|
||||
"taskSimulateNum": "Number of task simulation",
|
||||
"picName": "Picture Name",
|
||||
"result": "Result",
|
||||
"pictureUpload": "Picture Upload",
|
||||
"createDeductiveTask": "Create Deductive Task",
|
||||
"image": "Image",
|
||||
"initFile": "Init File",
|
||||
"codeUpload": "Code Upload",
|
||||
"selectModel": "Select Model",
|
||||
"modelType": "Model Type"
|
||||
}
|
||||
}
|
|
@ -39,7 +39,8 @@
|
|||
"close": "关闭",
|
||||
"userNameMsg": "请输入正确的用户名",
|
||||
"passwordMsg": "密码不能少于6位",
|
||||
"check": "验证"
|
||||
"check": "验证",
|
||||
"submit": "提交"
|
||||
},
|
||||
"menu": {
|
||||
"taskManagement": "任务管理",
|
||||
|
@ -232,8 +233,8 @@
|
|||
"password": "密码",
|
||||
"createVirtualmachine": "创建虚拟机",
|
||||
"createHpcbase": "创建超算基础模板",
|
||||
"createAibase": "创建智算任务",
|
||||
"createAiCard": "创建指定算力卡任务",
|
||||
"createAibase": "创建智算训练任务",
|
||||
"createAiCard": "创建指定算力卡训练任务",
|
||||
"dict": "字典",
|
||||
"dictName": "字典名称",
|
||||
"dictCode": "code",
|
||||
|
@ -535,6 +536,19 @@
|
|||
"adapterCheckText": "填写完成适配器信息后,点击验证按钮。校验适配器是否连接成功,必须连接成功,才能点击确定保存。",
|
||||
"bindClusterText": "绑定集群后返回首页新建任务。",
|
||||
"newTask": "新建任务",
|
||||
"guideFinish": "引导已完成"
|
||||
"guideFinish": "引导已完成",
|
||||
"taskInvocation": "任务调用",
|
||||
"taskCmdInput": "任务指令输入",
|
||||
"taskResult": "任务结果输出",
|
||||
"taskSimulateNum": "任务模拟提交数",
|
||||
"picName": "图片名称",
|
||||
"result": "结果",
|
||||
"pictureUpload": "图片上传",
|
||||
"createDeductiveTask": "创建智算推理任务",
|
||||
"image": "镜像",
|
||||
"initFile": "启动文件",
|
||||
"codeUpload": "代码上传",
|
||||
"selectModel": "选择模型",
|
||||
"modelType": "模型类型"
|
||||
}
|
||||
}
|
|
@ -28,7 +28,7 @@ export function getTrainJob(params) {
|
|||
// 大屏左上角数据返回
|
||||
export function getComputeArea() {
|
||||
return request({
|
||||
url: 'pcm/v1/core/listDomainResource',
|
||||
url: 'pcm/v1/core/getDomainResource',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
@ -57,6 +57,13 @@ export function getStorageData() {
|
|||
})
|
||||
}
|
||||
|
||||
export function getScreenInfo() {
|
||||
return request({
|
||||
url: 'pcm/v1/core/getScreenInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 配置图片上传接口
|
||||
export function uploadImage(data) {
|
||||
return request({
|
||||
|
|
|
@ -18,6 +18,26 @@ export const addVirtualMachine = (data) => {
|
|||
export const addNewApp = (params) => {
|
||||
return request({ url: '/pcm/v1/core/commitTask', method: 'post', params })
|
||||
}
|
||||
|
||||
export const addDeductiveTask = (data) => {
|
||||
return request({
|
||||
url: '/pcm/v1/inference/images',
|
||||
method: 'post',
|
||||
data,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
export const getDeductiveDetail = (taskId) => {
|
||||
return request({ url: '/pcm/v1/inference/taskDetail?taskId=' + taskId, method: 'get' })
|
||||
}
|
||||
export const getModelType = () => {
|
||||
return request({ url: '/pcm/v1/inference/modelTypes', method: 'get' })
|
||||
}
|
||||
export const getModelName = (type) => {
|
||||
return request({ url: '/pcm/v1/inference/modelNames?type=' + type, method: 'get' })
|
||||
}
|
||||
export const getDetail = (name, params) => {
|
||||
return request({ url: '/pcm/v1/apps/detail/' + name, method: 'get', params })
|
||||
}
|
||||
|
|
|
@ -67,74 +67,15 @@ export function getEarthDetails(area) {
|
|||
})
|
||||
}
|
||||
|
||||
// CPU平均使用率接口
|
||||
// export function getCpuAverage(start, end, step) {
|
||||
// return request({
|
||||
// url: '/monitoringscreen/api/v1/query_range?query=avg(1%20-%20avg(rate(node_cpu_seconds_total%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%2Cmode%3D%22idle%22%7D%5B2m%5D))%20by%20(instance))%20*%20100' + '&start=' + start + '&end=' + end + '&step=' + step + '&_=1642578431700',
|
||||
// method: 'get',
|
||||
// data: JSON,
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 整体总负载 平均使用情况
|
||||
export function getTotalAverage() {
|
||||
return request({
|
||||
url: '/jcc-schedule/api/v1/resource/getOverallMetrics',
|
||||
url: '/pcm/v1/core/getScreenChart',
|
||||
// url: '/jcc-schedule/api/v1/resource/getOverallMetrics',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 计量计费接口总价格
|
||||
export function getMeasure(start, end, step) {
|
||||
return request({
|
||||
url: process.env.VUE_APP_BASE_API + '/kapis/clusters/host/metering.kubesphere.io/v1alpha1/cluster' + '?start=' + start + '&end=' + end + '&step=' + step + 's&metrics_filter=meter_cluster_cpu_usage%7Cmeter_cluster_memory_usage%7Cmeter_cluster_net_bytes_transmitted%7Cmeter_cluster_net_bytes_received%7Cmeter_cluster_pvc_bytes_total&resources_filter=host',
|
||||
method: 'get',
|
||||
data: JSON,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// // 内存整体负载接口
|
||||
// export function getRamLoad(start, end, step) {
|
||||
// return request({
|
||||
// url: '/monitoringscreen/api/v1/query_range?query=sum(node_memory_MemTotal_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D%20-%20node_memory_MemAvailable_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D)&start=' + start + '&end=' + end + '&step=' + step + '&_=1642669327729',
|
||||
// method: 'get',
|
||||
// data: JSON,
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 计量计费列表接口
|
||||
export function getMeteringList(start, end, step) {
|
||||
return request({
|
||||
url: process.env.VUE_APP_BASE_API + '/kapis/clusters/host/metering.kubesphere.io/v1alpha1/cluster' + '?start=' + start + '&end=' + end + '&step=' + step + 's&metrics_filter=meter_cluster_cpu_usage%7Cmeter_cluster_memory_usage%7Cmeter_cluster_net_bytes_transmitted%7Cmeter_cluster_net_bytes_received%7Cmeter_cluster_pvc_bytes_total&resources_filter=host',
|
||||
method: 'get',
|
||||
data: JSON,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// // CPU整体负载接口
|
||||
// export function getCpuAllload(start, end) {
|
||||
// return request({
|
||||
// url: '/monitoringscreen/api/v1/query_range?query=node_load15%7Binstance%3D~%22k8s-master%22%7D&start=' + start + '&end=' + end + '&step=900&_=1645409802467',
|
||||
// method: 'get',
|
||||
// data: JSON,
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 累计任务情况接口
|
||||
export function getTaskList() {
|
||||
return request({
|
||||
|
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 312 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 778 KiB |
After Width: | Height: | Size: 23 KiB |
|
@ -5,7 +5,7 @@
|
|||
<el-col :span="10"><div class="img" /></el-col>
|
||||
<el-col :span="14">
|
||||
<div class="text">
|
||||
<el-carousel direction="vertical" :autoplay="false" @change="changeItem">
|
||||
<el-carousel direction="vertical" :autoplay="true" @change="changeItem">
|
||||
<el-carousel-item v-for="(item, index) in areaItem" :key="'areaItem' + index" class="areaList">
|
||||
<div class="area">{{ item.domainName || 'DomainName' }}</div>
|
||||
<table>
|
||||
|
@ -33,7 +33,7 @@
|
|||
</el-row>
|
||||
<el-row class="bottom">
|
||||
<el-col :span="10">
|
||||
<div id="radarChart" ref="radarChart" style="width: 100%; height: 14vh" />
|
||||
<div id="radarChart" ref="radarChart" style="width: 100%; height: 16vh" />
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="text">
|
||||
|
@ -249,8 +249,9 @@ export default {
|
|||
}
|
||||
}
|
||||
.bottom{
|
||||
margin-top: 2vh;
|
||||
.text{
|
||||
margin-top: 0.5vh;
|
||||
margin-top: 1.5vh;
|
||||
height: 14vh;
|
||||
}
|
||||
table tr td:nth-child(2) {
|
||||
|
@ -287,7 +288,7 @@ export default {
|
|||
background-color: rgba(135, 189, 245, 0.2);
|
||||
}
|
||||
.el-progress-bar__inner{
|
||||
background-image: linear-gradient(90deg, #419eff, #00d9a6);
|
||||
background: rgba(17, 252, 254, 1);
|
||||
}
|
||||
}
|
||||
// @media screen and (min-width: 1921px) {
|
||||
|
|
|
@ -12,24 +12,40 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataArray: [
|
||||
{
|
||||
name: '算力中心总数(计算域)',
|
||||
value: 34
|
||||
value: '-'
|
||||
},
|
||||
{
|
||||
name: '已接入算力 POps@FP16',
|
||||
value: '112.06'
|
||||
value: '-'
|
||||
},
|
||||
{
|
||||
name: '接入集群数',
|
||||
value: '48'
|
||||
value: '-'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newValue, oldValue) {
|
||||
this.dataArray[0].value = newValue.centerCount
|
||||
this.dataArray[1].value = newValue.computingPower
|
||||
this.dataArray[2].value = newValue.clusterCount
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
@ -46,6 +62,8 @@ export default {
|
|||
>div{
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
// background: url('../../../assets/images/monitorSelect/dataBg.png') no-repeat left;
|
||||
// background-size: auto 100%;
|
||||
}
|
||||
.title{
|
||||
font-size: 1.1rem;
|
||||
|
@ -60,6 +78,7 @@ export default {
|
|||
font-family: Impact;
|
||||
font-weight: 400;
|
||||
// padding-bottom: 5px;
|
||||
// text-align: right;
|
||||
width: 80%;
|
||||
// text-indent: 130%;
|
||||
letter-spacing: 0.1rem;
|
||||
|
@ -68,26 +87,4 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// @media screen and (min-width: 1921px) {
|
||||
// .one{
|
||||
// background-size: 39px 39px;
|
||||
// font-size: 20px;
|
||||
// .num{
|
||||
// font-size: 38px;
|
||||
// }
|
||||
// }
|
||||
// .two{
|
||||
// p{
|
||||
// margin: 16px 0 ;
|
||||
// }
|
||||
// .title{
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// .num{
|
||||
// font-size: 27px;
|
||||
// padding: 0 17px 5px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
@ -68,7 +68,7 @@ export default {
|
|||
color: '#008B45'
|
||||
}
|
||||
},
|
||||
color: ['rgba(79, 172, 254, 1)'],
|
||||
color: ['rgba(14, 214, 250, 1)'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
|
@ -95,7 +95,7 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 28,
|
||||
// interval: 28,
|
||||
// rotate: -18,
|
||||
// padding: [1, 0, 0, -10],
|
||||
margin: scaleRate ? 14 : 10,
|
||||
|
@ -188,11 +188,11 @@ export default {
|
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 242, 254, 1)' // 0% 处的颜色
|
||||
color: 'rgba(10, 227, 244, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(79, 172, 254, 1)' // 100% 处的颜色
|
||||
color: 'rgba(14, 214, 250, 1)' // 100% 处的颜色
|
||||
}
|
||||
])
|
||||
}
|
||||
|
|
|
@ -267,11 +267,11 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(24, 144, 255)' // 0% 处的颜色
|
||||
color: 'rgba(135, 189, 245, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(24, 144, 255,0.5)' // 100% 处的颜色
|
||||
color: 'rgba(1, 16, 37, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
|
|
|
@ -14,14 +14,14 @@ export default {
|
|||
const day = [[], [], [], [], [], [], []]
|
||||
for (let i = 0; i < 7; i++) {
|
||||
day[i][0] = moment().subtract(7 - i, 'days').endOf('day').unix()
|
||||
day[i][1] = moment().subtract(7 - i, 'days').endOf('day').format('MMDD')
|
||||
day[i][1] = moment().subtract(7 - i, 'days').endOf('day').format('MM/DD')
|
||||
}
|
||||
return {
|
||||
day,
|
||||
ramLoad: [2, 3, 4, 5, 6, 4, 5], // 内存整体负载
|
||||
cpuLoad: [1, 2, 3, 4, 5, 3, 4], // CPU整体负载
|
||||
cpuAverage: [3, 4, 5, 3, 4, 3, 4], // cpu 平均负载
|
||||
ramAverage: [7, 6, 5, 4, 6, 5, 4] // 内存平均负载
|
||||
ramLoad: [], // 内存整体负载
|
||||
cpuLoad: [], // CPU整体负载
|
||||
cpuAverage: [], // cpu 平均负载
|
||||
ramAverage: [] // 内存平均负载
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -40,33 +40,38 @@ export default {
|
|||
// 获取资源负载状况
|
||||
async getAllData() {
|
||||
await getTotalAverage().then(res => {
|
||||
const data = res.data
|
||||
// 内存整体负载 (GB)
|
||||
const ramData = data.find(item => item.metric_name === 'mem_total_usage').data.result[0].values || []
|
||||
ramData.forEach(element => {
|
||||
this.ramLoad.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
// this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
})
|
||||
this.ramLoad = this.ramLoad.slice(0, 7)
|
||||
// CPU整体负载 (Core)
|
||||
const cpuLoad = data.find(item => item.metric_name === 'cpu_total_usage').data.result[0].values || []
|
||||
cpuLoad.forEach(element => {
|
||||
this.cpuLoad.push(((element[1] - 0)).toFixed(2))
|
||||
})
|
||||
this.cpuLoad = this.cpuLoad.slice(0, 7)
|
||||
// cpu 平均负载 (%)
|
||||
const cpuData = data.find(item => item.metric_name === 'cpu_avg_usage').data.result[0].values || []
|
||||
cpuData.forEach(element => {
|
||||
this.cpuAverage.push((element[1] - 0).toFixed(2))
|
||||
// this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
})
|
||||
this.cpuAverage = this.cpuAverage.slice(0, 7)
|
||||
// 内存平均负载 (%)
|
||||
const ramAverage = data.find(item => item.metric_name === 'mem_avg_usage').data.result[0].values || []
|
||||
ramAverage.forEach(element => {
|
||||
this.ramAverage.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
})
|
||||
this.ramAverage = this.ramAverage.slice(0, 7)
|
||||
this.ramLoad = res.data.memoryLoad
|
||||
this.ramAverage = res.data.memoryAvg
|
||||
this.cpuLoad = res.data.cpuLoad
|
||||
this.cpuAverage = res.data.cpuAvg
|
||||
|
||||
// const data = res.data
|
||||
// // 内存整体负载 (GB)
|
||||
// const ramData = data.find(item => item.metric_name === 'mem_total_usage').data.result[0].values || []
|
||||
// ramData.forEach(element => {
|
||||
// this.ramLoad.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
// // this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
// })
|
||||
// this.ramLoad = this.ramLoad.slice(0, 7)
|
||||
// // CPU整体负载 (Core)
|
||||
// const cpuLoad = data.find(item => item.metric_name === 'cpu_total_usage').data.result[0].values || []
|
||||
// cpuLoad.forEach(element => {
|
||||
// this.cpuLoad.push(((element[1] - 0)).toFixed(2))
|
||||
// })
|
||||
// this.cpuLoad = this.cpuLoad.slice(0, 7)
|
||||
// // cpu 平均负载 (%)
|
||||
// const cpuData = data.find(item => item.metric_name === 'cpu_avg_usage').data.result[0].values || []
|
||||
// cpuData.forEach(element => {
|
||||
// this.cpuAverage.push((element[1] - 0).toFixed(2))
|
||||
// // this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
// })
|
||||
// this.cpuAverage = this.cpuAverage.slice(0, 7)
|
||||
// // 内存平均负载 (%)
|
||||
// const ramAverage = data.find(item => item.metric_name === 'mem_avg_usage').data.result[0].values || []
|
||||
// ramAverage.forEach(element => {
|
||||
// this.ramAverage.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
// })
|
||||
// this.ramAverage = this.ramAverage.slice(0, 7)
|
||||
})
|
||||
this.initCharts()
|
||||
},
|
||||
|
|
|
@ -20,17 +20,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getStorageData } from '@/api/container/monitorSelect'
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
storageData: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getStorageData().then(e => {
|
||||
this.storageData = e
|
||||
})
|
||||
watch: {
|
||||
data: {
|
||||
handler(newValue, oldValue) {
|
||||
this.storageData = newValue
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -101,12 +109,12 @@ export default {
|
|||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
z-index: -1;
|
||||
// z-index: -1;
|
||||
.num, .percent{
|
||||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
z-index: -1;
|
||||
// z-index: -1;
|
||||
}
|
||||
.num{
|
||||
text-align: left;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="monitor">
|
||||
<div class="top-menu">
|
||||
<!-- <div class="top-menu">
|
||||
<div class="menu">
|
||||
<a href="">首页</a>
|
||||
<a @click="viewMenu()">数算资源</a>
|
||||
|
@ -10,7 +10,7 @@
|
|||
<a @click="viewMenu('hpc/hpcOverview')">超算资源</a>
|
||||
<a @click="viewMenu('modelarts/autoStudy')">智算资源</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="top">
|
||||
<div class="top-title">
|
||||
<h1>材料AI云际计算平台</h1>
|
||||
|
@ -44,14 +44,15 @@
|
|||
</div>
|
||||
<div class="right_3">
|
||||
<div class="title"><p>存储资源用量</p></div>
|
||||
<StorageResourceUsage />
|
||||
<StorageResourceUsage :data="powerData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ComputingPowerTotal />
|
||||
<ComputingPowerTotal :data="powerData" />
|
||||
</div>
|
||||
<Earth :key="resizeKey" :center="{name: monitorSettingForm.center, longitude: Number(monitorSettingForm.centerPosition.split(',')[0]), latitude: Number(monitorSettingForm.centerPosition.split(',')[1])}" />
|
||||
<div class="bottom" />
|
||||
</div>
|
||||
<el-dialog
|
||||
title="创建云际跨域任务"
|
||||
|
@ -77,7 +78,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
// import moment from 'moment'
|
||||
import ComputeDomain from './components/ComputeDomain.vue'
|
||||
import ComputingPowerTotal from './components/ComputingPowerTotal.vue'
|
||||
import CumulativeTasks from './components/CumulativeTasks.vue'
|
||||
|
@ -86,14 +87,14 @@ import ComputingPowerTrend from './components/ComputingPowerTrend.vue'
|
|||
import ComputingResourceLoad from './components/ComputingResourceLoad.vue'
|
||||
import ComputingPowerUse from './components/ComputingPowerUse.vue'
|
||||
import Earth from '@/views/prometheusMonitor/earth'
|
||||
import { getComputePower, getCPUsage } from '@/api/container/monitorSelect.js'
|
||||
import { getComputePower, getCPUsage, getScreenInfo } from '@/api/container/monitorSelect.js'
|
||||
import { getTaskCount, createScheduleTask } from '@/api/top-menu/TotalNum'
|
||||
import { order } from '@/utils/data-process'
|
||||
import { getMonitorSetting } from '@/api/container/monitorSelect'
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
components: { ComputeDomain, ComputingPowerTotal, ComputingPowerTrend, ComputingResourceLoad, ComputingPowerUse, CumulativeTasks, StorageResourceUsage, Earth },
|
||||
components: { ComputeDomain, ComputingPowerTotal, ComputingPowerTrend, ComputingPowerUse, ComputingResourceLoad, CumulativeTasks, StorageResourceUsage, Earth },
|
||||
data() {
|
||||
return {
|
||||
monitorSettingForm: {
|
||||
|
@ -113,11 +114,12 @@ export default {
|
|||
fileList: [],
|
||||
pageSize: 100,
|
||||
taskData: {},
|
||||
powerData: {},
|
||||
currentDate: '',
|
||||
tendData: { used: [], xData: [] },
|
||||
centerData: { used: [], unused: [], xData: [] },
|
||||
tendConfig: { unit: '单位: 卡时', status: ['使用量'] },
|
||||
statusConfig: { unit: '单位: 卡时', status: ['使用量', '使用量2'] }
|
||||
statusConfig: { unit: '单位: 卡时', status: ['使用量'] }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
@ -129,6 +131,7 @@ export default {
|
|||
|
||||
this.$nextTick(() => {
|
||||
this.getTend()
|
||||
this.getPower()
|
||||
this.getAccrueCenter()
|
||||
})
|
||||
|
||||
|
@ -178,39 +181,26 @@ export default {
|
|||
document.documentElement.style.fontSize = `${14 * scale}px`
|
||||
}
|
||||
},
|
||||
getPower() {
|
||||
getScreenInfo().then((res) => {
|
||||
this.powerData = res.data
|
||||
})
|
||||
},
|
||||
getTend() {
|
||||
getComputePower().then((res) => {
|
||||
this.tendData = { used: [], xData: [] }
|
||||
if (res.dailyComputerPowers !== null) {
|
||||
const timeArr = []// 最近12个月的月份
|
||||
for (let i = 0; i < 180; i++) {
|
||||
timeArr.push(
|
||||
`${moment(new Date()).subtract(i, 'days').format('YYYY-MM-DD')}`
|
||||
)
|
||||
}
|
||||
timeArr.reverse()// 时间排序
|
||||
const arr = [] // 模拟一个假数据
|
||||
for (let i = 0; i < timeArr.length; i++) {
|
||||
arr.push({ date: timeArr[i], computerPower: 0 })
|
||||
// 将真实数据塞进arr里面
|
||||
for (let j = 0; j < res.dailyComputerPowers.length; j++) {
|
||||
if (res.dailyComputerPowers[j].date === timeArr[i]) {
|
||||
arr[i] = { date: res.dailyComputerPowers[j].date, computerPower: res.dailyComputerPowers[j].computerPower }
|
||||
}
|
||||
}
|
||||
}
|
||||
arr.forEach((item) => {
|
||||
this.tendData.used.push(item.computerPower.toFixed(1))
|
||||
this.tendData.xData.push(item.date)
|
||||
const arr = res.data?.chart?.thirtyDayData // 模拟一个假数据
|
||||
if (arr !== null) {
|
||||
arr.reverse().forEach((item) => {
|
||||
this.tendData.used.push(item.cardTime)
|
||||
this.tendData.xData.push(item.perDay)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// this.tendData.used = [59688.1, 59252.5, 59189.0, 55766.5, 55537.2, 54804.4, 52764.9]
|
||||
// this.tendData.xData = ['2022-06-30', '2022-07-31', '2022-07-31', '2022-08-31', '2022-09-30', '2022-10-31', '2022-11-30']
|
||||
},
|
||||
getAccrueCenter() {
|
||||
getCPUsage().then((res) => {
|
||||
getCPUsage().then((response) => {
|
||||
const res = response.data?.chart
|
||||
this.centerData = { used: [], xData: [] }
|
||||
if (res.perCenterComputerPowers) {
|
||||
const data = res.accOtJobInfo
|
||||
|
@ -230,16 +220,12 @@ export default {
|
|||
data1.sort(order)
|
||||
data1.forEach((item) => {
|
||||
if (item.computerPower !== 0) {
|
||||
this.centerData.used.push(item.computerPower.toFixed(1))
|
||||
this.centerData.used.push(item.computerPower.toFixed(2))
|
||||
this.centerData.xData.push(item.centerName)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// this.centerData.used = [12, 22, 3, 55, 66, 77, 44, 32]
|
||||
// this.centerData.unused = [12, 22, 3, 55, 66, 77, 44, 32]
|
||||
// this.centerData.xData = ['2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8']
|
||||
},
|
||||
getTrainJob() {
|
||||
getTaskCount().then(e => {
|
||||
|
@ -321,9 +307,9 @@ export default {
|
|||
height: 18vh;
|
||||
// vertical-align: baseline;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
z-index: 9;
|
||||
background: url(../../assets/monitor/top-bg.png) center top no-repeat;
|
||||
background-size: 100% 65%;
|
||||
background-size: 100% 20vh;
|
||||
.top-title{
|
||||
margin:0 auto;
|
||||
height: 100%;
|
||||
|
@ -399,7 +385,7 @@ export default {
|
|||
margin-top: 10vh;
|
||||
}
|
||||
.floatLeft, .floatRight{
|
||||
margin-top: 5vh;
|
||||
margin-top: 4vh;
|
||||
padding: 0 1vh 0 2vh;
|
||||
padding-top: 5vh;
|
||||
padding-bottom: 4vh;
|
||||
|
@ -421,16 +407,15 @@ export default {
|
|||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
height: 95vh;
|
||||
min-height: 800px;
|
||||
.left {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
height: 84vh;
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #02020a96;
|
||||
box-shadow: 20px -30px 30px 0px #02020a96;
|
||||
// background: #02020a96;
|
||||
// box-shadow: 20px 30px 30px 0px #02020a96;
|
||||
&::before{
|
||||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
|
@ -439,15 +424,15 @@ export default {
|
|||
left: -2vh;
|
||||
}
|
||||
.left_1{
|
||||
height: 29vh;
|
||||
height: 34vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left_2 {
|
||||
height: 33vh;
|
||||
height: 26vh;
|
||||
}
|
||||
.left_3 {
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
height: 24vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -458,7 +443,6 @@ export default {
|
|||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
height: 95vh;
|
||||
min-height: 800px;
|
||||
padding: 0 2vh 0 1vh;
|
||||
padding-top: 5vh;
|
||||
|
@ -479,8 +463,8 @@ export default {
|
|||
}
|
||||
}
|
||||
.right {
|
||||
background: #02020a96;
|
||||
box-shadow: -20px -30px 30px 0px #02020a96;
|
||||
// background: #02020a96;
|
||||
// box-shadow: -20px 30px 30px 0px #02020a96;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 10px;
|
||||
|
@ -494,10 +478,25 @@ export default {
|
|||
height: 27vh;
|
||||
}
|
||||
.right_3{
|
||||
height: 21vh;
|
||||
height: 22vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 8vh;
|
||||
&::after{
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: url(../../assets/monitor/bottom_bg.png) no-repeat;
|
||||
background-size: 100% 8vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
</transition>
|
||||
<div v-show="!globe" class="switchDataBtn">
|
||||
<el-button :class="activeTab === 'cp'?'active':''" @click="switchData('cp')">算力网</el-button>
|
||||
<el-button :class="activeTab === 'dsxs' ? 'active':''" @click="switchData('dsxs')">东数西算</el-button>
|
||||
<!-- <el-button :class="activeTab === 'dsxs' ? 'active':''" @click="switchData('dsxs')">东数西算</el-button> -->
|
||||
<el-button :class="activeTab === 'net' ? 'active':''" @click="switchData('net')">新型网络</el-button>
|
||||
</div>
|
||||
<!-- <a class="switchBtn toChina" :class="!globe?'activeBtn':''" @click="toChina"><svg-icon icon-class="china" /></a>
|
||||
|
@ -32,7 +32,11 @@
|
|||
</template>
|
||||
<script>
|
||||
import * as Three from 'three'
|
||||
import { defaultFlyLineOptions, getLineTexture, setSatellites, setCurPoint, setCurLinePoint, getChinaFont, filterRepeatPoint, getPosition, transformToLatLon } from '@/utils/earth-calcu'
|
||||
import { defaultFlyLineOptions, getLineTexture,
|
||||
// setSatellites,
|
||||
setCurPoint, setCurLinePoint, getChinaFont, filterRepeatPoint, getPosition
|
||||
// transformToLatLon
|
||||
} from '@/utils/earth-calcu'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||||
import { getEarthRegion, getProvinceDetail } from '@/api/top-menu/TotalNum'
|
||||
import chinaJson from './chinaProvince.json'
|
||||
|
@ -702,11 +706,11 @@ export default {
|
|||
var textureLoader = new Three.TextureLoader()
|
||||
// this.worldMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg')
|
||||
// this.chinaMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.jpg')
|
||||
textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.jpg', (texture) => {
|
||||
textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.png', (texture) => {
|
||||
var material = new Three.MeshLambertMaterial({
|
||||
color: 0x0a263e,
|
||||
color: '0ae3f4FF',
|
||||
transparent: true,
|
||||
opacity: 0.96,
|
||||
opacity: 0.6,
|
||||
map: texture
|
||||
})
|
||||
// var geometry2 = new Three.SphereGeometry(101, 40, 40)
|
||||
|
@ -743,9 +747,9 @@ export default {
|
|||
})
|
||||
|
||||
// 卫星 satellites
|
||||
const satellites = setSatellites({ x: -Math.PI / 2, y: 0, z: 0 }, 0.021, this.monitorColor)
|
||||
this.scene.add(satellites.satellite)
|
||||
this.satellitesArr.push(satellites)
|
||||
// const satellites = setSatellites({ x: -Math.PI / 2, y: 0, z: 0 }, 0.021, this.monitorColor)
|
||||
// this.scene.add(satellites.satellite)
|
||||
// this.satellitesArr.push(satellites)
|
||||
|
||||
this.renderer.setSize(this.width, this.height)
|
||||
// this.renderer.setClearColor(0x03060f, 1) // 设置背景颜色
|
||||
|
@ -776,7 +780,7 @@ export default {
|
|||
const coordinates = elem.geometry.coordinates
|
||||
coordinates.forEach(multiPolygon => {
|
||||
multiPolygon.forEach(polygon => {
|
||||
const lineMaterial = new Three.LineBasicMaterial({ color: 0x0a315ab8 })
|
||||
const lineMaterial = new Three.LineBasicMaterial({ color: 'rgba(14, 214, 250, 1)' })
|
||||
const positions = []
|
||||
const lineGeometry = new Three.BufferGeometry()
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
|
@ -824,7 +828,7 @@ export default {
|
|||
// 生成线材质
|
||||
const material = new MeshLineMaterial({
|
||||
useMap: 0,
|
||||
color: new Three.Color(0x3EDFFC),
|
||||
color: new Three.Color('rgba(10, 227, 244, 1)'),
|
||||
opacity: 1,
|
||||
// resolution: new Three.Vector2(window.innerWidth, window.innerHeight),
|
||||
sizeAttenuation: 1,
|
||||
|
@ -846,41 +850,41 @@ export default {
|
|||
const continents = new Three.Object3D()
|
||||
const coordinates = elem.geometry.coordinates
|
||||
coordinates.forEach(multiPolygon => {
|
||||
if (elem.geometry.type === 'MultiPolygon') {
|
||||
multiPolygon.forEach(polygon => {
|
||||
const lineMaterial = new Three.LineBasicMaterial({ color: 0x0a315a80 }) // 0x3BFA9E
|
||||
const positions = []
|
||||
const linGeometry = new Three.BufferGeometry()
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
const LL = transformToLatLon(polygon[i], continentsJson['hc-transform'].default)
|
||||
var pos = getPosition(LL.x + 90, LL.y, 100)
|
||||
if (pos.x) {
|
||||
positions.push(pos.x, pos.y, pos.z)
|
||||
} else {
|
||||
console.log(multiPolygon[i])
|
||||
}
|
||||
}
|
||||
linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
|
||||
const line = new Three.Line(linGeometry, lineMaterial)
|
||||
continents.add(line)
|
||||
})
|
||||
} else {
|
||||
const lineMaterial = new Three.LineBasicMaterial({ color: 0x0a315a80 })
|
||||
const positions = []
|
||||
const linGeometry = new Three.BufferGeometry()
|
||||
for (let i = 0; i < multiPolygon.length; i++) {
|
||||
const LL = transformToLatLon(multiPolygon[i], continentsJson['hc-transform'].default)
|
||||
var pos = getPosition(LL.x + 90, LL.y, 100)
|
||||
if (pos.x) {
|
||||
positions.push(pos.x, pos.y, pos.z)
|
||||
} else {
|
||||
console.log(multiPolygon[i])
|
||||
}
|
||||
}
|
||||
linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
|
||||
const line = new Three.Line(linGeometry, lineMaterial)
|
||||
continents.add(line)
|
||||
}
|
||||
// if (elem.geometry.type === 'MultiPolygon') {
|
||||
// multiPolygon.forEach(polygon => {
|
||||
// const lineMaterial = new Three.LineBasicMaterial({ color: 'red' }) // 0x3BFA9E
|
||||
// const positions = []
|
||||
// const linGeometry = new Three.BufferGeometry()
|
||||
// for (let i = 0; i < polygon.length; i++) {
|
||||
// const LL = transformToLatLon(polygon[i], continentsJson['hc-transform'].default)
|
||||
// var pos = getPosition(LL.x + 90, LL.y, 100)
|
||||
// if (pos.x) {
|
||||
// positions.push(pos.x, pos.y, pos.z)
|
||||
// } else {
|
||||
// console.log(multiPolygon[i])
|
||||
// }
|
||||
// }
|
||||
// linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
|
||||
// const line = new Three.Line(linGeometry, lineMaterial)
|
||||
// continents.add(line)
|
||||
// })
|
||||
// } else {
|
||||
// const lineMaterial = new Three.LineBasicMaterial({ color: 'rgba(1,1,1,0)' })
|
||||
// const positions = []
|
||||
// const linGeometry = new Three.BufferGeometry()
|
||||
// for (let i = 0; i < multiPolygon.length; i++) {
|
||||
// const LL = transformToLatLon(multiPolygon[i], continentsJson['hc-transform'].default)
|
||||
// var pos = getPosition(LL.x + 90, LL.y, 100)
|
||||
// if (pos.x) {
|
||||
// positions.push(pos.x, pos.y, pos.z)
|
||||
// } else {
|
||||
// console.log(multiPolygon[i])
|
||||
// }
|
||||
// }
|
||||
// linGeometry.setAttribute('position', new Three.Float32BufferAttribute(positions, 3))
|
||||
// const line = new Three.Line(linGeometry, lineMaterial)
|
||||
// continents.add(line)
|
||||
// }
|
||||
})
|
||||
map1.add(continents)
|
||||
})
|
||||
|
@ -1201,13 +1205,15 @@ export default {
|
|||
.switchDataBtn{
|
||||
position: absolute;
|
||||
bottom: 3vh;
|
||||
right: 35vw;
|
||||
right: 38vw;
|
||||
z-index: 11;
|
||||
.el-button,.el-button + .el-button{
|
||||
width: 10vw;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px 15px;
|
||||
padding: 0 0 2vh;
|
||||
// width: 100%;
|
||||
// background-color: #24253a;
|
||||
background: none;
|
||||
background-image: url('../../assets/images/monitorSelect/btn.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
@ -1224,8 +1230,8 @@ export default {
|
|||
color: #91d4fe;
|
||||
}
|
||||
.active{
|
||||
color: #ffffff;
|
||||
background-image: url('../../assets/images/monitorSelect/btn-p.png')!important;
|
||||
color: #0ae3f4FF;
|
||||
// background-image: url('../../assets/images/monitorSelect/btn-p.png')!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<div>
|
||||
<h3> {{ $t('page.createDeductiveTask') }} </h3>
|
||||
<el-alert
|
||||
v-if="!adapterId"
|
||||
:title="$t('page.selectDiver')"
|
||||
type="warning"
|
||||
show-icon
|
||||
/>
|
||||
<br>
|
||||
<el-form
|
||||
ref="formData"
|
||||
class="form-wrap"
|
||||
label-position="left"
|
||||
:model="formData"
|
||||
:rules="formDataRules"
|
||||
>
|
||||
<el-form-item :label="$t('page.taskName')" prop="taskName">
|
||||
<el-input
|
||||
v-model="formData.taskName"
|
||||
:placeholder="$t('page.inputWarn')"
|
||||
:max-length="30"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.taskDes')" prop="taskDesc">
|
||||
<el-input
|
||||
v-model="formData.taskDesc"
|
||||
:max-length="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item :label="$t('page.image')" prop="image">
|
||||
<el-radio-group v-model="formData.image" class="checkBox">
|
||||
<el-radio label="ac" />
|
||||
<el-radio label="slurm" />
|
||||
<el-radio label="paratera" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.datasetName')" prop="datasets">
|
||||
<el-select v-model="formData.datasets" style="width: 280px;margin-right: 10px;">
|
||||
<el-option v-for="item in dataSetList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item :label="$t('page.modelType')" prop="modelType">
|
||||
<el-select v-model="formData.modelType" style="width: 280px;margin-right: 10px;">
|
||||
<el-option v-for="item in modelTypeList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.selectModel')" prop="modelName">
|
||||
<el-select v-model="formData.modelName" style="width: 280px;margin-right: 10px;">
|
||||
<el-option v-for="item in modelNameList" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.pictureUpload')">
|
||||
<!-- <el-input v-model="taskInput" type="textarea" rows="10" /> -->
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
>
|
||||
<el-button slot="trigger" size="small">选取文件</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('page.codeUpload')" prop="codeUpload">
|
||||
<el-input
|
||||
v-model="formData.codeUpload"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.initFile')" prop="initFile">
|
||||
<el-input
|
||||
v-model="formData.initFile"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.enVariable')">
|
||||
<el-button
|
||||
v-if="formData.envs.length === 0"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="appendEnvs"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-for="(env, index) in formData.envs" :key="env.id" class="network-wrap">
|
||||
<div class="list-item">
|
||||
<el-input v-model="env.key" placeholder="key" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<span>=</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<el-input v-model="env.value" placeholder="value" />
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<el-button
|
||||
v-if="index === 0"
|
||||
icon="el-icon-circle-plus"
|
||||
style="margin-right:8px"
|
||||
@click="appendEnvs"
|
||||
/>
|
||||
<el-button v-else icon="el-icon-delete-solid" @click="removeEnvs(index)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.commandContent')" prop="cmdScript">
|
||||
<el-input
|
||||
v-model="formData.cmdScript"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
|
||||
<h3> 静态策略 </h3>
|
||||
<!-- <div v-if="formData.strategy === 'staticWeight'"> -->
|
||||
<!-- staticWeightMap -->
|
||||
<el-form-item :label="$t('page.staticWeight')" prop="strategy">
|
||||
<table class="tableInput">
|
||||
<tr v-for="env in formData.staticWeightMap" :key="env.key">
|
||||
<td>{{ env.key }}</td>
|
||||
<td>
|
||||
<el-input-number
|
||||
v-model="env.value"
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getModelName, getModelType } from '@/api/task/task'
|
||||
import generate from 'nanoid/generate'
|
||||
import { getClusterList } from '@/api/container/cluster'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
adapterId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
'taskName': 'deductiveTask-' + generate('abcdefghijklmnopqrstuvwxyz', 12),
|
||||
'taskDesc': '',
|
||||
'modelType': '',
|
||||
'modelName': '',
|
||||
'staticWeightMap': [],
|
||||
'strategy': 'staticWeight'
|
||||
},
|
||||
fileList: [],
|
||||
modelTypeList: [],
|
||||
modelNameList: [],
|
||||
currentClusterList: [],
|
||||
form: new FormData()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formDataRules() {
|
||||
return {
|
||||
taskName: [
|
||||
{ required: true, message: this.$t('check.input') + this.$t('message.name') }
|
||||
// {
|
||||
// pattern: /^[a-z]([-a-z0-9]*[a-z0-9])?$/,
|
||||
// message: this.$t('check.inputInvalid')
|
||||
// }
|
||||
// { validator: this.nameValidator }
|
||||
],
|
||||
taskDesc: [
|
||||
{ required: true, message: this.$t('check.input') + this.$t('page.taskDes') }
|
||||
],
|
||||
modelType: [{ required: true, message: this.$t('check.requireSelect'), trigger: 'change' }],
|
||||
modelName: [{ required: true, message: this.$t('check.requireSelect'), trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'adapterId'() {
|
||||
const query = { 'type': '1', 'adapterId': this.formData.adapterId, pageNum: 1, pageSize: 1000 }
|
||||
getClusterList(query).then(e => {
|
||||
// this.currentClusterList =
|
||||
(e.data.list || []).forEach(e => {
|
||||
this.formData.staticWeightMap.push({ key: e.name, id: e.id, value: 0 })
|
||||
})
|
||||
})
|
||||
},
|
||||
'formData.modelType'(val) {
|
||||
if (val) {
|
||||
this.formData.modelName = ''
|
||||
getModelName(val).then(e => {
|
||||
this.modelNameList = e.data.models
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getModelType().then(e => {
|
||||
this.modelTypeList = e.data.types
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
submitUpload() {
|
||||
// console.log(formData)
|
||||
|
||||
// 阻止默认上传行为
|
||||
return false
|
||||
},
|
||||
handleSuccess() {
|
||||
|
||||
},
|
||||
// httpRequest(data) {
|
||||
// const isJar = data.file.name.indexOf('.yaml') === (data.file.name.length - 5)
|
||||
// if (!isJar) {
|
||||
// this.$message.error(this.$t('page.yamlWarn'))
|
||||
// }
|
||||
// },
|
||||
appendEnvs() {
|
||||
this.formData.envs.push(
|
||||
{
|
||||
key: '',
|
||||
value: ''
|
||||
}
|
||||
)
|
||||
},
|
||||
removeEnvs(i) {
|
||||
this.formData.envs.splice(i, 1)
|
||||
},
|
||||
checkForm() {
|
||||
let returnVal
|
||||
this.$refs.formData.validate((valid) => {
|
||||
if (valid) {
|
||||
const form = new FormData()
|
||||
this.$refs.upload.uploadFiles.forEach((file, index) => {
|
||||
form.append(`images`, file.raw)
|
||||
})
|
||||
const obj = {}
|
||||
this.formData.staticWeightMap.forEach(e => {
|
||||
obj[e.id.toString()] = e.value
|
||||
})
|
||||
form.set('taskName', this.formData.taskName)
|
||||
form.set('taskDesc', this.formData.taskDesc)
|
||||
form.set('modelType', this.formData.modelType)
|
||||
form.set('modelName', this.formData.modelName)
|
||||
form.set('staticWeightMap', JSON.stringify(obj))
|
||||
form.set('strategy', this.formData.strategy)
|
||||
form.set('adapterId', this.adapterId)
|
||||
|
||||
returnVal = form
|
||||
} else {
|
||||
returnVal = false
|
||||
}
|
||||
})
|
||||
return returnVal
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.form-wrap .el-form-item__label-wrap .el-form-item__label{
|
||||
text-indent: -1rem!important;
|
||||
}
|
||||
</style>
|
|
@ -44,8 +44,9 @@
|
|||
<div v-show="!selectCluster&&!strategySetting">
|
||||
<application-form v-show="cpType === 'cloud'&&taskType === 'application'" ref="application" />
|
||||
<hpc-create v-if="cpType === 'hpc'" ref="hpcBase" />
|
||||
<ai-create v-if="cpType === 'ai'" ref="aiBase" :type="taskType" :adapter-id="formData.adapterId" />
|
||||
<ai-create v-if="cpType === 'ai'&&taskType!=='deductive'" ref="aiBase" :type="taskType" :adapter-id="formData.adapterId" />
|
||||
<vm-form v-if="taskType === 'virtualmachine'" ref="virtualmachine" />
|
||||
<deductive-form v-if="taskType === 'deductive'" ref="deductive" :adapter-id="formData.adapterId" />
|
||||
</div>
|
||||
<!-- <div v-if="taskType === 'virtualmachine' && selectCluster">
|
||||
</div> -->
|
||||
|
@ -181,7 +182,6 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item :label="$t('page.performancePrice')" prop="strategy">
|
||||
<el-slider
|
||||
v-model="formData.b"
|
||||
|
@ -192,7 +192,6 @@
|
|||
show-stops
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
|
@ -204,11 +203,11 @@
|
|||
<el-row type="flex" justify="end">
|
||||
<el-col :span="2.5">
|
||||
<el-button size="medium" @click="goBack">{{ $t("message.cancel") }}</el-button>
|
||||
<el-button v-if="!selectCluster&&!strategySetting&&taskType!=='aiCard'" size="medium" type="primary" @click="next">{{ $t('message.next') }}</el-button>
|
||||
<el-button v-if="!selectCluster&&!strategySetting&&taskType!=='aiCard'&&taskType!=='deductive'" size="medium" type="primary" @click="next">{{ $t('message.next') }}</el-button>
|
||||
<el-button v-if="selectCluster" size="medium" type="primary" @click="selectCluster=false">{{ $t('message.before') }}</el-button>
|
||||
<el-button v-if="selectCluster&&!strategySetting&&taskType!=='aiCard'" size="medium" type="primary" @click="setStrategy">{{ $t('message.next') }}</el-button>
|
||||
<el-button v-if="selectCluster&&!strategySetting&&taskType!=='aiCard'&&taskType!=='deductive'" size="medium" type="primary" @click="setStrategy">{{ $t('message.next') }}</el-button>
|
||||
<el-button v-if="strategySetting" size="medium" type="primary" @click="strategySetting=false;selectCluster=true">{{ $t('message.before') }}</el-button>
|
||||
<el-button v-if="strategySetting || taskType==='aiCard'" v-loading="submitLoading" size="medium" type="primary" @click="saveForm">{{ $t('message.create') }}</el-button>
|
||||
<el-button v-if="strategySetting || taskType==='aiCard' || taskType==='deductive'" v-loading="submitLoading" size="medium" type="primary" @click="saveForm">{{ $t('message.create') }}</el-button>
|
||||
<!-- <el-button size="medium" type="primary" @click="saveForm">{{ $t("message.easyCreate") }}</el-button> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
@ -217,18 +216,19 @@
|
|||
|
||||
<script>
|
||||
import List from '@/components/list'
|
||||
import { addApp, addHpcTask, addAITask, addVirtualMachine, getBalanceById } from '@/api/task/task'
|
||||
import { addApp, addHpcTask, addAITask, addVirtualMachine, getBalanceById, addDeductiveTask } from '@/api/task/task'
|
||||
import applicationForm from './components/applicationForm'
|
||||
import hpcCreate from './components/hpcCreate.vue'
|
||||
import { getClusterList } from '@/api/container/cluster'
|
||||
import aiCreate from './components/aiCreate.vue'
|
||||
import { getAdapterList } from '@/api/pcm/adapter'
|
||||
import vmForm from './components/virtualmachineForm.vue'
|
||||
import deductiveForm from './components/deductiveForm.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
// import jobForm from './components/jobForm.vue'
|
||||
export default {
|
||||
components: { applicationForm, List, hpcCreate, aiCreate, vmForm },
|
||||
components: { applicationForm, List, hpcCreate, aiCreate, vmForm, deductiveForm },
|
||||
data() {
|
||||
return {
|
||||
getClusterList,
|
||||
|
@ -259,7 +259,8 @@ export default {
|
|||
},
|
||||
'ai': {
|
||||
'aiBase': 'createAibase',
|
||||
'aiCard': 'createAiCard'
|
||||
'aiCard': 'createAiCard',
|
||||
'deductive': 'createDeductiveTask'
|
||||
}
|
||||
},
|
||||
adapterList: {
|
||||
|
@ -380,6 +381,10 @@ export default {
|
|||
list[i] = e.data.list.filter(r => r.type === '1')
|
||||
break
|
||||
}
|
||||
case 'deductive': {
|
||||
list[i] = e.data.list.filter(r => r.type === '1')
|
||||
break
|
||||
}
|
||||
default: {
|
||||
list[i] = e.data.list.filter(r => r.type === '0')
|
||||
break
|
||||
|
@ -433,7 +438,6 @@ export default {
|
|||
// if (this.taskType !== 'virtualmachine') {
|
||||
const type = this.taskType === 'aiCard' ? 'aiBase' : this.taskType
|
||||
const formHook = this.$refs[type].checkForm()
|
||||
// console.log(formHook)
|
||||
if (!formHook) return false
|
||||
// }
|
||||
this.getCluster()
|
||||
|
@ -453,22 +457,25 @@ export default {
|
|||
const type = this.taskType === 'aiCard' ? 'aiBase' : this.taskType
|
||||
let formHook = this.$refs[type].checkForm()
|
||||
if (!formHook) return false
|
||||
if (this.taskType !== 'aiCard') {
|
||||
formHook = { ...formHook, ...this.formData }
|
||||
if (this.taskType !== 'deductive') {
|
||||
if (this.taskType !== 'aiCard') {
|
||||
formHook = { ...formHook, ...this.formData }
|
||||
}
|
||||
formHook.adapterId = this.formData.adapterId
|
||||
if (this.formData.strategy === 'staticWeight') {
|
||||
const obj = {}
|
||||
this.formData.staticWeightMap.forEach(e => {
|
||||
obj[e.id.toString()] = e.value
|
||||
})
|
||||
formHook.staticWeightMap = obj
|
||||
} else {
|
||||
delete formHook.staticWeight
|
||||
delete formHook.staticWeightMap
|
||||
}
|
||||
formHook.adapterIds = [formHook.adapterId]
|
||||
delete formHook.adapterId
|
||||
}
|
||||
formHook.adapterId = this.formData.adapterId
|
||||
if (this.formData.strategy === 'staticWeight') {
|
||||
const obj = {}
|
||||
this.formData.staticWeightMap.forEach(e => {
|
||||
obj[e.id.toString()] = e.value
|
||||
})
|
||||
formHook.staticWeightMap = obj
|
||||
} else {
|
||||
delete formHook.staticWeight
|
||||
delete formHook.staticWeightMap
|
||||
}
|
||||
formHook.adapterIds = [formHook.adapterId]
|
||||
delete formHook.adapterId
|
||||
|
||||
this.submitLoading = true
|
||||
switch (type) {
|
||||
case 'application': {
|
||||
|
@ -477,6 +484,8 @@ export default {
|
|||
addApp(formHook).then(() => {
|
||||
this.$message.success(this.$t('page.createdSuccess'))
|
||||
this.$router.go(-1)
|
||||
}).catch(e => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
break
|
||||
}
|
||||
|
@ -484,6 +493,8 @@ export default {
|
|||
addHpcTask(formHook).then(() => {
|
||||
this.$message.success(this.$t('page.createdSuccess'))
|
||||
this.$router.go(-1)
|
||||
}).catch(e => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
break
|
||||
}
|
||||
|
@ -505,6 +516,19 @@ export default {
|
|||
})
|
||||
break
|
||||
}
|
||||
case 'deductive': {
|
||||
addDeductiveTask(formHook).then((e) => {
|
||||
if (e.code === 200) {
|
||||
this.$message.success('文件上传成功')
|
||||
this.$router.go(-1)
|
||||
} else {
|
||||
this.submitLoading = false
|
||||
}
|
||||
}).catch(e => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
break
|
||||
}
|
||||
case 'virtualmachine': {
|
||||
formHook.clusterIds = formHook.aiClusterIds
|
||||
delete formHook.aiClusterIds
|
||||
|
@ -512,6 +536,8 @@ export default {
|
|||
addVirtualMachine(formHook).then(() => {
|
||||
this.$message.success(this.$t('page.createdSuccess'))
|
||||
this.$router.go(-1)
|
||||
}).catch(e => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
break
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
<FormData :data="formData" :data-map="dataMap" />
|
||||
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane v-if="formData.clusterInfos" :label="$t('page.taskLog')">
|
||||
<el-tab-pane v-if="formData.clusterInfos && formData.taskTypeDict !== '11'" :label="$t('page.taskLog')">
|
||||
<el-select v-model="cluster" style="width:70%" @change="selectCluster(cluster)">
|
||||
<el-option
|
||||
v-for="item in formData.clusterInfos"
|
||||
|
@ -39,6 +39,35 @@
|
|||
<p />
|
||||
<el-input v-model="log" type="textarea" rows="20" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="formData.taskTypeDict === '11'" :label="$t('page.taskResult')">
|
||||
<el-form>
|
||||
<!-- <el-form-item :label="$t('page.taskCmdInput')">
|
||||
<el-input v-model="taskInput" type="textarea" rows="10" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('page.taskSimulateNum')">
|
||||
<el-input v-model="taskSimulateNum" style="width: 20%;" />
|
||||
</el-form-item>
|
||||
<el-button type="primary">{{ $t('message.submit') }}</el-button>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('page.taskResult')">
|
||||
<el-input v-model="taskOutput" type="textarea" rows="10" />
|
||||
</el-form-item> -->
|
||||
|
||||
<!-- <el-button type="primary" @click="submitUpload">{{ $t('message.submit') }}</el-button> -->
|
||||
<!-- <el-divider /> -->
|
||||
<el-form-item :label="$t('page.taskResult')">
|
||||
<List
|
||||
ref="multipleTable"
|
||||
:key="$i18n.locale"
|
||||
class="multipleTable"
|
||||
:columns="taskColumns"
|
||||
:table-list-data="taskResult"
|
||||
tooltip-effect="dark"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
|
@ -47,7 +76,7 @@
|
|||
<script>
|
||||
import List from '@/components/list'
|
||||
import { FormData } from '@/components/FormData'
|
||||
import { getTaskDetail, getTaskLog } from '@/api/task/task'
|
||||
import { getTaskDetail, getTaskLog, getDeductiveDetail } from '@/api/task/task'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
@ -62,6 +91,9 @@ export default {
|
|||
strategy: this.$t('page.policy'),
|
||||
synergyStatus: this.$t('page.synergyStatus')
|
||||
},
|
||||
taskInput: '',
|
||||
taskSimulateNum: '',
|
||||
taskOutput: '',
|
||||
cluster: '',
|
||||
formData: {
|
||||
'clusterInfos': [],
|
||||
|
@ -73,7 +105,8 @@ export default {
|
|||
'synergyStatus': '0'
|
||||
},
|
||||
activeName: '',
|
||||
log: ''
|
||||
log: '',
|
||||
taskResult: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -87,6 +120,14 @@ export default {
|
|||
{ prop: 'status', label: this.$t('page.taskStatus') },
|
||||
{ prop: 'remark', label: this.$t('page.description') }
|
||||
]
|
||||
},
|
||||
taskColumns() {
|
||||
return [
|
||||
{ prop: 'imageName', label: this.$t('page.picName') },
|
||||
{ prop: 'clusterName', label: this.$t('page.clusterIn') },
|
||||
{ prop: 'card', label: this.$t('page.card') },
|
||||
{ prop: 'result', label: this.$t('page.result') }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
@ -104,6 +145,11 @@ export default {
|
|||
this.formData.synergyStatus = !res.data.synergyStatus ? this.$t('page.notSynergistic') : this.$t('page.synergistic')
|
||||
// this.formData.clusterInfos ? this.selectCluster(this.formData.clusterInfos[0]) : ''
|
||||
// this.cluster = this.formData.clusterInfos ? this.formData.clusterInfos[0] : []
|
||||
if (this.formData.taskTypeDict === '11') {
|
||||
getDeductiveDetail(this.$route.query.id).then(e => {
|
||||
this.taskResult = e.data
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
10
yarn.lock
|
@ -12352,6 +12352,16 @@
|
|||
"loader-utils" "^1.1.0"
|
||||
"neo-async" "^2.6.0"
|
||||
|
||||
"three.meshline@^1.4.0":
|
||||
"integrity" "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
|
||||
"resolved" "https://registry.npmjs.org/three.meshline/-/three.meshline-1.4.0.tgz"
|
||||
"version" "1.4.0"
|
||||
|
||||
"three@^0.126.1":
|
||||
"integrity" "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
|
||||
"resolved" "https://registry.npmjs.org/three/-/three-0.126.1.tgz"
|
||||
"version" "0.126.1"
|
||||
|
||||
"throat@^4.0.0":
|
||||
"integrity" "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
|
||||
"resolved" "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz"
|
||||
|
|