feat:课题四 全部代码整合
This commit is contained in:
haodedong
parent
e699e22f75
commit
cd178b86a9
|
|
@ -0,0 +1,269 @@
|
|||
#access {
|
||||
.radio {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.el-radio-button__inner {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
width: 75px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
padding: 7px 7px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.subtitle-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 11pt;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height: 19px
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-inner {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
margin-left: 38px;
|
||||
min-width: 1230px;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 85px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 20px 5%;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
margin: 20px 5% 0;
|
||||
}
|
||||
|
||||
.data-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-description {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions--medium.is-bordered .el-descriptions-item__cell {
|
||||
padding: 10px;
|
||||
color: whitesmoke;
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
.el-descriptions-item__label.is-bordered-label {
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
background: rgba(150, 150, 150, 0.26);
|
||||
}
|
||||
|
||||
div.el-pagination {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
background: center center no-repeat #fff0;
|
||||
background-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-pager li.active {
|
||||
color: #409EFF;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.el-pagination__editor.el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-pagination .el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
-webkit-box-shadow: -1px 0 0 0 #409EFF;
|
||||
box-shadow: 0 0 0 0 #409EFF;
|
||||
color: #5ea1ff;
|
||||
background-color: transparent !important;
|
||||
border-color: #b2d4ef !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div id="access" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
|
||||
<div id="tableContainer" style="position: absolute; top: 20px; left: 50px; right: 50px;">
|
||||
<div id="userInfo_information">接入配置</div>
|
||||
<!-- <div class="line"></div> -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div style="margin-left:10px; margin-top:10px;">
|
||||
<el-select v-model='form.cloudPlatformValue' placeholder='云商选择'>
|
||||
<el-option v-for='item in cloudPlatform' :label='item.label' :key='item.value' :value='item.value'></el-option>
|
||||
</el-select>
|
||||
<el-select v-model='form.resourceTypeValue' placeholder='资源类型选择' multiple style="margin-left: 2px;">
|
||||
<el-option v-for='item in resourceType' :label='item.label' :key='item.value' :value='item.value'></el-option>
|
||||
</el-select>
|
||||
<el-select v-model='form.authorityTypeValue' placeholder='权限选择' style="margin-left: 2px;">
|
||||
<el-option v-for='item in authorityType' :label='item.label' :key='item.value' :value='item.value'></el-option>
|
||||
</el-select>
|
||||
<el-button style="margin-left: 10px;" type="primary" @click="addButton">添加</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class='table_box'>
|
||||
<el-table
|
||||
:header-cell-style="{ background: 'transparent', color: '#606266' }"
|
||||
:data="tableData" height='66vh' border
|
||||
style="width: 99%; margin-left: 10px; margin-top: 15px; margin-right: 10px;">
|
||||
<el-table-column prop="cloudPlatformValue" label="云商名称"/>
|
||||
<el-table-column prop="resourceTypeValue" label="资源类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="item in scope.row.resourceTypeValue" :key="item" effect="plain" type="info"> {{ item }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="authorityTypeValue" label="权限类型"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-button style="margin-top:10px; float:right;" type="primary">保存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'/>
|
||||
<style lang="scss">
|
||||
|
||||
/* 最外层透明 */
|
||||
.el-table, .el-table__expanded-cell {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 表格内背景颜色 */
|
||||
.el-table th, .el-table tr, .el-table td {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-label-color .el-form-item__label {
|
||||
color: #FFFFFF; /* 白色 */
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #FFFFFF; /* 白色 */
|
||||
}
|
||||
|
||||
#access {
|
||||
|
||||
#expireNoteContainer {
|
||||
width: 100%;
|
||||
font-size: 35px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.line {
|
||||
align: center;
|
||||
height: 1px;
|
||||
background: #CED2DB;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tableContainer {
|
||||
// border: 1px solid #B3BFD7;
|
||||
margin: 0px auto 20px;
|
||||
-moz-box-shadow: 4px 4px 2px #F1F1F3;
|
||||
}
|
||||
|
||||
#userInfo_information {
|
||||
margin: 0;
|
||||
color: #8C95A6;
|
||||
text-align: center;
|
||||
padding: 18px 0 13px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
// margin: 20px 50px 20px 50px;
|
||||
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height: 19px
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import parent from '@/public/parent.js'
|
||||
import rules from '@/public/rules.js'
|
||||
|
||||
export default {
|
||||
name: 'access',
|
||||
mixins: [parent, rules],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
cloudPlatformValue: '',
|
||||
resourceTypeValue: [],
|
||||
authorityTypeValue: '',
|
||||
},
|
||||
resourceType: [{
|
||||
label: '虚拟机',
|
||||
value: '虚拟机'
|
||||
}, {
|
||||
label: '内存',
|
||||
value: '内存'
|
||||
}, {
|
||||
label: '网络',
|
||||
value: '网络'
|
||||
}, {
|
||||
label: '存储',
|
||||
value: '存储'
|
||||
}],
|
||||
authorityType: [{
|
||||
label: '复制权',
|
||||
value: '复制权'
|
||||
}, {
|
||||
label: '使用权',
|
||||
value: '使用权'
|
||||
}, {
|
||||
label: '交易权',
|
||||
value: '交易权'
|
||||
}],
|
||||
cloudPlatform: [{
|
||||
label: '阿里云-华东',
|
||||
value: '阿里云-华东'
|
||||
}, {
|
||||
label: '阿里云-华中',
|
||||
value: '阿里云-华中'
|
||||
}, {
|
||||
label: '腾讯云-上海',
|
||||
value: '腾讯云-上海'
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
cloudPlatformValue: '阿里云-华东',
|
||||
resourceTypeValue: ['内存', '网络'],
|
||||
authorityTypeValue: '使用权'
|
||||
},
|
||||
{
|
||||
cloudPlatformValue: '华为云-华中',
|
||||
resourceTypeValue: ['CPU', '网络'],
|
||||
authorityTypeValue: '交易权'
|
||||
},
|
||||
{
|
||||
cloudPlatformValue: '腾讯云-华中',
|
||||
resourceTypeValue: ['内存', '网络'],
|
||||
authorityTypeValue: '使用权'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
addButton() {
|
||||
let f = JSON.parse(JSON.stringify(this.form));
|
||||
this.tableData.push(f)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<!-- 数据流通确权 数据审核 -->
|
||||
<template>
|
||||
<div id='auditing'>
|
||||
<div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
|
||||
<div class='table_box' style="margin-right: 20px;">
|
||||
<div style="color: #FFFFFF; font-size: 18px; margin-left: 10px; margin-top: 10px;">数据流通确权-资源审核</div>
|
||||
<el-table
|
||||
:header-cell-style="{ background: 'transparent', color: '#606266' }"
|
||||
:data="tableData2" height='80vh' border
|
||||
v-loading="loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
|
||||
<el-table-column prop="resourceName" label="数据资源名称"/>
|
||||
<el-table-column prop="userShowName" label="申请用户"/>
|
||||
<el-table-column prop="applyNote" label="申请附言"/>
|
||||
<el-table-column prop="auditStatus" label="审核状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'NOT_SUBMITTED'">
|
||||
未提交
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'SUBMITTED'">
|
||||
已提交
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'AUDIT_APPROVE'">
|
||||
审核通过
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'REJECTED'">
|
||||
已驳回
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'DOWNLOADABLE'">
|
||||
可下载
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="applyTime" label="申请时间">
|
||||
<template slot-scope="scope">
|
||||
{{ timestampToDatetime(scope.row.applyTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" v-if="scope.row.auditStatus == 'SUBMITTED'"
|
||||
@click="changeApplyStatus1(scope.row.userId, scope.row.resourceId, true)">
|
||||
数据确认
|
||||
</el-button>
|
||||
<el-button type="danger" size="mini" v-if="scope.row.auditStatus == 'SUBMITTED'"
|
||||
@click="changeApplyStatus1(scope.row.userId, scope.row.resourceId, false)">
|
||||
数据拒绝
|
||||
</el-button>
|
||||
<el-button type="success" size="mini" v-if="scope.row.auditStatus == 'AUDIT_APPROVE'"
|
||||
@click="changeApplyStatus2(scope.row.userId, scope.row.resourceId)">
|
||||
平台确认
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
name: 'auditing',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tableData2: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 审核
|
||||
// http://localhost:8081/cloud/jcce/v1.0/kt1/userResourceApply?resourceId=106&userId=196618686130565120&applyNote=12321321312
|
||||
this.fetchDataApply()
|
||||
},
|
||||
methods: {
|
||||
fetchDataApply() {
|
||||
let _self = this
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/kt1/userResourceApplyList',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageNo: 1,
|
||||
pageSize: 100
|
||||
}
|
||||
}).then((data) => {
|
||||
console.log(data)
|
||||
_self.tableData2 = data.data.pageData
|
||||
})
|
||||
},
|
||||
timestampToDatetime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
},
|
||||
changeApplyStatus1(userId, resourceId, status) {
|
||||
let _self = this
|
||||
this.$confirm('是否需要确认要执行该操作?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/kt1/userResourceApply/' + resourceId + '/' + userId + '?status=' + status,
|
||||
method: 'put',
|
||||
}).then((data) => {
|
||||
console.log(data)
|
||||
_self.$message({
|
||||
message: '执行成功',
|
||||
type: 'success'
|
||||
})
|
||||
_self.fetchDataApply()
|
||||
})
|
||||
})
|
||||
},
|
||||
changeApplyStatus2(userId, resourceId) {
|
||||
let _self = this
|
||||
this.$confirm('是否需要确认要执行该操作?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/kt1/platform/userResourceApply/' + resourceId + '/' + userId,
|
||||
method: 'put',
|
||||
}).then((data) => {
|
||||
console.log(data)
|
||||
_self.$message({
|
||||
message: '执行成功',
|
||||
type: 'success'
|
||||
})
|
||||
_self.fetchDataApply()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.table_box {
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height: 19px
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<!-- 数据流通确权 数据审核 -->
|
||||
<template>
|
||||
<div id='auditing'>
|
||||
<div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
|
||||
<div class='table_box' style="margin-right: 20px;">
|
||||
<div style="color: #FFFFFF; font-size: 18px; margin-left: 10px; margin-top: 10px;">数据流通确权-数据审核</div>
|
||||
<el-table
|
||||
:header-cell-style="{ background: 'transparent', color: '#606266' }"
|
||||
:data="tableData" height='80vh' border
|
||||
v-loading="loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
|
||||
<el-table-column prop="name" label="数据资源名称"/>
|
||||
<el-table-column prop="proprietorshipStatus" label="所有权审核状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag effect="plain" type="info" v-if="scope.row.proprietorshipStatus == 'PENDING'">
|
||||
待确认
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="" v-if="scope.row.proprietorshipStatus == 'CONFIRMING'">
|
||||
确权中
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="success" v-if="scope.row.proprietorshipStatus == 'APPROVED'">
|
||||
已通过
|
||||
</el-tag>
|
||||
<el-tag effect="plain" type="danger" v-if="scope.row.proprietorshipStatus == 'REJECTED'">
|
||||
驳回
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dataType" label="数据类型"/>
|
||||
<el-table-column prop="dataCategory" label="数据分类"/>
|
||||
<el-table-column prop="dataFormat" label="数据拓展名"/>
|
||||
<el-table-column prop="proofType" label="证明文件类型"/>
|
||||
<el-table-column prop="price" label="价格" width="100"/>
|
||||
<el-table-column prop="createdAt" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ timestampToDatetime(scope.row.createdAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间">
|
||||
<template slot-scope="scope">
|
||||
{{ timestampToDatetime(scope.row.updatedAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" v-if="scope.row.proprietorshipStatus == 'PENDING'"
|
||||
@click="changeStatus(scope.row.id, 'CONFIRMING')">
|
||||
数据确认
|
||||
</el-button>
|
||||
<el-button type="success" size="mini" v-if="scope.row.proprietorshipStatus == 'CONFIRMING'"
|
||||
@click="changeStatus(scope.row.id, 'APPROVED')">确权通过
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.proprietorshipStatus == 'PENDING' || scope.row.proprietorshipStatus == 'CONFIRMING'"
|
||||
size="mini" type="danger" @click="changeStatus(scope.row.id, 'REJECTED')">驳回
|
||||
</el-button>
|
||||
<!-- <el-button v-if="scope.row.proprietorshipStatus == 'APPROVED'" size="mini" type=""-->
|
||||
<!-- @click="dialogVisible = true">区块信息-->
|
||||
<!-- </el-button>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="以太坊区块高度" :visible.sync="dialogVisible" width="600px">
|
||||
<div v-for="item in hashData">
|
||||
<div>
|
||||
<span>区块：</span>
|
||||
<el-link type="primary">{{ item.block }}</el-link>
|
||||
</div>
|
||||
<div>
|
||||
<span>由 </span>
|
||||
<el-link type="primary">{{ item.miner }}</el-link>
|
||||
<span> 开采</span>
|
||||
<span style="float: right;">矿工费</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>在 </span>
|
||||
<el-link type="primary">{{ item.time }}</el-link>
|
||||
<span> 秒内完成 </span>
|
||||
<el-link type="primary">{{ item.count }}</el-link>
|
||||
<span> 笔交易</span>
|
||||
<el-tag style="float: right;" type="success" size="mini">{{ item.fee }} ETH</el-tag>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog title="确认操作" :visible.sync="confirmDialogVisible" width="30%">
|
||||
<span>是否需要确认要执行该操作?</span>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-checkbox v-model="isTermsChecked" v-if="currentStatus=='APPROVED'">我已下载证明文件并阅读完毕</el-checkbox>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="confirmDialogVisible = false" size="mini">取消</el-button>
|
||||
<el-button type="primary" size="mini" :disabled="!isTermsChecked && currentStatus=='APPROVED'" @click="confirmAction">确定</el-button>
|
||||
<el-button type="success" size="mini" @click="downloadFile">下载证明文件</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import axios from "axios";
|
||||
import {getToken} from "../../../utils/auth";
|
||||
import {downloadNew} from "./js";
|
||||
|
||||
export default {
|
||||
name: 'auditing',
|
||||
data() {
|
||||
return {
|
||||
isDownloadFile: false,// 是否下载文件了
|
||||
isTermsChecked: false,
|
||||
currentId:'',
|
||||
currentStatus:'',
|
||||
confirmDialogVisible: false,
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
hashData: [{
|
||||
block: 100000,
|
||||
miner: '0x9a74e0aecf1dd5162d9802c60527c82230fdf703',
|
||||
time: 20,
|
||||
count: 22,
|
||||
fee: 0.00101
|
||||
},{
|
||||
block: 100001,
|
||||
miner: '0x000000633b68f5d6d3a76593eeb815b4663bcbe0',
|
||||
time: 5,
|
||||
count: 15,
|
||||
fee: 0.00231
|
||||
},{
|
||||
block: 100002,
|
||||
miner: '0x68d30f47f19c06bccef4bc7fae2dc12fca3e0dc9',
|
||||
time: 16,
|
||||
count: 12,
|
||||
fee: 0.00098
|
||||
},{
|
||||
block: 100003,
|
||||
miner: '0x68d30f47f19c07bccef4bc7fae2dc12fca3e0dc6',
|
||||
time: 13,
|
||||
count: 30,
|
||||
fee: 0.00324
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 审核
|
||||
// http://localhost:8081/cloud/jcce/v1.0/kt1/userResourceApply?resourceId=106&userId=196618686130565120&applyNote=12321321312
|
||||
this.fetchDataRes()
|
||||
},
|
||||
methods: {
|
||||
fetchDataRes() {
|
||||
let _self = this
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
userId: 1
|
||||
}
|
||||
}).then((data) => {
|
||||
_self.tableData = data.data.pageData
|
||||
})
|
||||
},
|
||||
timestampToDatetime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
},
|
||||
confirmAction() {
|
||||
this.confirmDialogVisible = false;
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource?id=' + this.currentId + '&proprietorshipStatus=' + this.currentStatus,
|
||||
method: 'put',
|
||||
}).then((data) => {
|
||||
debugger
|
||||
if(data.data.msg!=='SUCCESS'){
|
||||
this.$message.error(data.data.msg)
|
||||
this.isLoading = false
|
||||
return
|
||||
}
|
||||
console.log(data)
|
||||
this.fetchDataRes()
|
||||
})
|
||||
|
||||
},
|
||||
downloadFile() {
|
||||
// Implement your download logic here
|
||||
downloadNew(this.currentId, 'PROOF_FILE')
|
||||
},
|
||||
downloadNew(id, fileType) {
|
||||
axios.get('/cloud/jcce/v1.0/kt1/download?id=' + id + '&fileType=' + fileType, {
|
||||
headers: {
|
||||
Authorization: getToken()
|
||||
},
|
||||
responseType: 'blob'
|
||||
}).then(res => {
|
||||
// 这里的type最好参考Response Headers里面的content-type，有可能是application/vnd.ms-excel
|
||||
const blob = new Blob([res.data])
|
||||
// 获取文件名，根据自己需要的分割
|
||||
const content = res.headers['content-disposition']
|
||||
const index = content.indexOf('filename=')
|
||||
let fileName = content.substring(index + 9) // 截取文件名
|
||||
fileName = decodeURIComponent(fileName).replace(new RegExp('"', 'g'), '')
|
||||
const a = document.createElement('a')
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.href = url
|
||||
a.download = fileName
|
||||
document.body.appendChild(a)
|
||||
a.style.display = 'none'
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
window.URL.revokeObjectURL(url)
|
||||
})
|
||||
},
|
||||
changeStatus(id, status) {
|
||||
this.currentId = id;
|
||||
this.currentStatus = status;
|
||||
this.confirmDialogVisible =true;
|
||||
// let _self = this
|
||||
// _self.$confirm('是否需要确认要执行该操作?', '提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// request({
|
||||
// url: '/cloud/jcce/v1.0/kt1/dataResource?id=' + id + '&proprietorshipStatus=' + status,
|
||||
// method: 'put',
|
||||
// }).then((data) => {
|
||||
// console.log(data)
|
||||
// _self.fetchDataRes()
|
||||
// })
|
||||
// })
|
||||
this.currentId = id
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.table_box {
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height: 19px
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,480 @@
|
|||
<template>
|
||||
<div id="userInfo" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
|
||||
<div id="tableContainer" style="height: 90vh; overflow-y: scroll; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);" align="center">
|
||||
<loading v-if="loading"></loading>
|
||||
<div id="userInfo_information">数据资源上报</div>
|
||||
<div class="line"></div>
|
||||
<el-form :model="form" ref="form" :rules="rules" label-width="100px" id="form" class="demo-ruleForm" :inline="true">
|
||||
<el-form-item label="数据资源名称：" prop="dataResourceName" class="custom-label-color" :rules="[{validator: rules.dataResourceName, trigger:'blur', required: true}]">
|
||||
<el-input size="small" class="w300" placeholder="请输入数据资源名称" v-model.trim="form.dataResourceName"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据类型：" prop='dataType' class=" custom-label-color" :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]">
|
||||
<el-select v-model='form.dataType' placeholder='请选择'
|
||||
class="w300">
|
||||
<el-option v-for='item in typeList' :label='item.localName' :key='item.value' :value='item.value' ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据分类：" prop='dataCategory' class=" custom-label-color" :rules="[{ required: true, message: '请选择数据分类', trigger: 'change' }]">
|
||||
<el-select v-model='form.dataCategory' placeholder='请选择'
|
||||
class="w300">
|
||||
<el-option v-for='item in categoryList' :label='item.localName' :key='item.value' :value='item.value' ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="使用权明细："
|
||||
prop='usageRightDetail'
|
||||
class="custom-label-color"
|
||||
:rules="[{
|
||||
required: true,
|
||||
message: '请选择使用权',
|
||||
trigger: 'change'
|
||||
}]">
|
||||
<el-select
|
||||
class="w300"
|
||||
v-model="form.usageRightDetail"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in usageRightList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="价格：" prop="price" class=" custom-label-color" :rules="[{validator: rules.price, trigger:'blur', required: true}]">
|
||||
<el-input size="small" class="w300" placeholder="请输入价格" v-model.trim="form.price"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据文件：" prop="dataAttachments" class=" custom-label-color" >
|
||||
<el-upload
|
||||
class="upload-demo w300 " action="" :auto-upload=false accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.jpg,.png"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="dataHandlePreview"
|
||||
:on-change="dataHandlePreview"
|
||||
:file-list="dataAttachments">
|
||||
<el-button size="mini" type="primary">上传附件</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="证明文件类型：" prop='proofType' class=" custom-label-color" :rules="[{ required: true, message: '请选择证明文件类型', trigger: 'change' }]">
|
||||
<el-select v-model='form.proofType' placeholder='请选择'
|
||||
class="w300">
|
||||
<el-option v-for='item in proofTypeList' :label='item.localName' :key='item.value' :value='item.value'></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="证明文件：" prop="proofAttachments" class=" custom-label-color" >
|
||||
<el-upload
|
||||
class="upload-demo w300 " action="" :auto-upload=false accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.jpg,.png"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="proofHandlePreview"
|
||||
:on-change="proofHandlePreview"
|
||||
:file-list="proofAttachments">
|
||||
<el-button size="mini" type="primary">上传附件</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="封面图片："prop="imageAttachments" class=" custom-label-color" >
|
||||
<el-upload
|
||||
class="upload-demo w300 " action="" :auto-upload=false accept=".jpg,.jpeg,.png"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="imageHandlePreview"
|
||||
:on-change="imageHandlePreview"
|
||||
:file-list="imageAttachments">
|
||||
<el-button size="mini" type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<div style="margin-bottom: 30px;">
|
||||
<el-button style="margin-left: 10px;" size="small" type="primary" @click="updataClick">提交</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" @click="resetClick">返回</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="float: right; margin-top: 20px;margin-right: 20px;">
|
||||
<el-link type="primary" :href="'/download/' + encodeURIComponent('证明文件说明.pdf')" class="vertical-link">
|
||||
证明文件说明
|
||||
</el-link>
|
||||
<el-link type="primary" :href="'/download/' + encodeURIComponent('确权说明.pdf')" class="vertical-link">
|
||||
确权说明
|
||||
</el-link>
|
||||
<el-link type="primary" :href="'/download/' + encodeURIComponent('数据资源权属说明.pdf')" class="vertical-link">
|
||||
数据资源权属说明
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { getUserInfo, updateUserInfo, getUserInfoWithPrivateKey } from '@/api/login'
|
||||
import parent from '@/public/parent.js'
|
||||
import rules from '@/public/rules.js'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function search(type) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource/dict/' + type,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function createData(dataResourceName, userId, price, dataCategory ,usageRightDetail, proofType ,dataType, dataFiles) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource',
|
||||
method: 'post',
|
||||
params: {
|
||||
dataResourceName: dataResourceName,
|
||||
userId: userId,
|
||||
price: price,
|
||||
dataType: dataType,
|
||||
dataCategory: dataCategory,
|
||||
usageRightDetail: usageRightDetail.toString(),
|
||||
proofType: proofType,
|
||||
proprietorshipStatus: 'PENDING'
|
||||
},
|
||||
data: dataFiles
|
||||
})
|
||||
}
|
||||
export default {
|
||||
name: 'userInfo',
|
||||
mixins: [parent, rules],
|
||||
data() {
|
||||
// 定义校验规则
|
||||
const validateFileUrl = (rule, value, callback) => {
|
||||
if (this.dataAttachments.length < 1) { // 我控制了FileList 长度代表文件个数
|
||||
callback(new Error('请上传数据文件'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validatePFileUrl = (rule, value, callback) => {
|
||||
if (this.proofAttachments.length < 1) { // 我控制了FileList 长度代表文件个数
|
||||
callback(new Error('请上传证明文件'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validateIFileUrl = (rule, value, callback) => {
|
||||
if (this.imageAttachments.length < 1) { // 我控制了FileList 长度代表文件个数
|
||||
callback(new Error('请上传封面图片'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
rules: {
|
||||
confirmPassword: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== this.form.password) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
dataResourceName: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入数据资源名称'))
|
||||
} {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
price: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入价格')) // 这里的错误信息应该修改为与价格相关的提示，例如：“请输入价格”
|
||||
} else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
// 使用正则表达式校验价格格式
|
||||
// 这个正则表达式匹配非负整数或者小数（最多两位小数）
|
||||
callback(new Error('价格格式不正确，请输入非负数，最多包含两位小数'))
|
||||
} else {
|
||||
callback() // 如果没有错误，继续执行
|
||||
}
|
||||
},
|
||||
dataAttachments: [{ required: true, validator: validateFileUrl, trigger: 'change' }],
|
||||
proofAttachments: [{ required: true, validator: validatePFileUrl, trigger: 'change' }],
|
||||
imageAttachments: [{ required: true, validator: validateIFileUrl, trigger: 'change' }],
|
||||
password: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
},
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
isDisabled: false,
|
||||
dataAttachments: [],
|
||||
proofAttachments: [],
|
||||
imageAttachments: [],
|
||||
usageRightList:[{ value: '访问权', label: '访问权（有权访问和查看数据）' },
|
||||
{ value: '分享权', label: '分享权（有权将数据分享给第三方或公众）' },
|
||||
{ value: '保存权', label: '保存权（有权保留数据一段时间以备后续使用）' },
|
||||
{ value: '迁移权', label: '迁移权（有权将数据从一个平台迁移到另一个平台）' },
|
||||
{ value: '整合权', label: '整合权（有权将不同来源的数据整合起来使用）' },
|
||||
{ value: '分析权', label: '分析权（有权对数据进行分析和推理）' },
|
||||
{ value: '格式化权', label: '格式化权（有权选择和改变数据的存储和呈现格式）' },
|
||||
{ value: '备份权', label: '备份权（有权对数据进行定期备份以防丢失）' },
|
||||
{ value: '加注权', label: '加注权（有权对数据进行注释或添加元数据）' },
|
||||
{ value: '复制权', label: '复制权（有权复制数据以用于备份、分析或其他用途）' }
|
||||
],
|
||||
form: {
|
||||
proofType: '',
|
||||
dataResourceName: '',
|
||||
proprietorshipStatus: 'PENDING',
|
||||
price: '',
|
||||
dataType: '',
|
||||
dataCategory: '',
|
||||
usageRightDetail: [],// 使用权明细
|
||||
description: '',
|
||||
userId: ''
|
||||
},
|
||||
categoryList: [],
|
||||
proofTypeList: [],
|
||||
typeList: [],
|
||||
authorityList: [],
|
||||
applyList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
// this.createDefaultMLoading(null)
|
||||
this.getCurrentUserInfo()
|
||||
this.getBaseDatas()
|
||||
},
|
||||
methods: {
|
||||
validateDataAttachments(rule, value, callback) {
|
||||
debugger
|
||||
if (this.dataAttachments.length === 0) {
|
||||
callback(new Error('请上传数据文件'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
},
|
||||
imageHandlePreview(file, files) {
|
||||
if (!!file && file.size > 5 * 1024 * 1024) {
|
||||
this.$message({ showClose: true, message: '上传文件不超过5M', type: 'error' })
|
||||
files.pop()
|
||||
}
|
||||
this.imageAttachments = files
|
||||
},
|
||||
dataHandlePreview(file, files) {
|
||||
this.dataAttachments = files
|
||||
},
|
||||
proofHandlePreview(file, files) {
|
||||
if (!!file && file.size > 5 * 1024 * 1024) {
|
||||
this.$message({ showClose: true, message: '上传文件不超过5M', type: 'error' })
|
||||
files.pop()
|
||||
}
|
||||
this.proofAttachments = files
|
||||
},
|
||||
getBaseDatas() {
|
||||
// 分类
|
||||
search('category').then((data) => {
|
||||
this.categoryList = data.data
|
||||
// this.categoryList.unshift(this.firstInfo)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 类型
|
||||
search('type').then((data) => {
|
||||
this.typeList = data.data
|
||||
// this.typeList.unshift(this.firstInfo)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 证明文件类型
|
||||
search('proofType').then((data) => {
|
||||
this.proofTypeList = data.data
|
||||
// this.typeList.unshift(this.firstInfo)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
// 确权状态
|
||||
this.authorityList = [
|
||||
{ id: '0', label: '全部', value: '' },
|
||||
{ id: '1', label: '待确认', value: 'PENDING' },
|
||||
{ id: '2', label: '确权中', value: 'CONFIRMING' },
|
||||
{ id: '3', label: '已通过', value: 'APPROVED' },
|
||||
{ id: '4', label: '驳回', value: 'REJECTED' }
|
||||
]
|
||||
// 申请状态
|
||||
this.applyList = [
|
||||
{ id: '0', label: '全部', value: '' },
|
||||
{ id: '1', label: '未提交', value: 'NOT_SUBMITTED' },
|
||||
{ id: '2', label: '已提交', value: 'SUBMITTED' },
|
||||
{ id: '3', label: '审核通过', value: 'AUDIT_APPROVE' },
|
||||
{ id: '4', label: '已驳回', value: 'REJECTED' },
|
||||
{ id: '5', label: '可下载', value: 'DOWNLOADABLE' }
|
||||
]
|
||||
},
|
||||
updataClick() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
// this.mloading.show()
|
||||
var _self = this
|
||||
const dataFiles = new FormData()
|
||||
if (!!_self.dataAttachments && _self.dataAttachments.length > 0) {
|
||||
dataFiles.append('dataFile', _self.dataAttachments[0].raw)
|
||||
}
|
||||
|
||||
// const proofFile = new FormData()
|
||||
if (!!_self.proofAttachments && _self.proofAttachments.length > 0) {
|
||||
dataFiles.append('proofFile', _self.proofAttachments[0].raw)
|
||||
}
|
||||
|
||||
// const imageFile = new FormData()
|
||||
if (!!_self.imageAttachments && _self.imageAttachments.length > 0) {
|
||||
dataFiles.append('imageFile', _self.imageAttachments[0].raw)
|
||||
}
|
||||
|
||||
debugger
|
||||
// _self.form.userId = 44534646456;
|
||||
createData(
|
||||
_self.form.dataResourceName,
|
||||
_self.form.id, // userId
|
||||
_self.form.price,
|
||||
_self.form.dataCategory,
|
||||
_self.form.usageRightDetail,
|
||||
_self.form.proofType,
|
||||
_self.form.dataType,
|
||||
dataFiles).then(res => {
|
||||
// _self.mloading.hide()
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: '创建成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push({ name: 'authentic', params: { previousPage: 'pubCloud', routeLevel: 3 }})
|
||||
} else {
|
||||
this.$message({ showClose: true, message: error.msg, type: 'error' })
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
resetClick() {
|
||||
this.$router.push({ name: 'authentic', params: { previousPage: 'pubCloud', routeLevel: 3 }})
|
||||
},
|
||||
showPrivateKey() {
|
||||
this.$confirm('确认查看用户私钥操作，仅可查看一次，请务必妥善保存私钥?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// this.mloading.show()
|
||||
var _self = this
|
||||
getUserInfoWithPrivateKey().then(res => {
|
||||
// _self.mloading.hide()
|
||||
this.form.privateKey = res.data.privateKey
|
||||
this.dialogVisible = true
|
||||
}).catch((error) => {
|
||||
// _self.mloading.hide()
|
||||
this.$message.error(error.msg)
|
||||
console.error(error.msg)
|
||||
}).then(() => {
|
||||
})
|
||||
})
|
||||
},
|
||||
getCurrentUserInfo() {
|
||||
// this.mloading.show()
|
||||
var _self = this
|
||||
getUserInfo().then(res => {
|
||||
// _self.mloading.hide()
|
||||
this.form.id = res.data.id
|
||||
this.form.username = res.data.username
|
||||
this.form.password = res.data.password
|
||||
this.form.confirmPassword = res.data.password
|
||||
this.form.name = res.data.name
|
||||
this.form.email = res.data.email
|
||||
this.form.phone = res.data.phone
|
||||
this.form.wechat = res.data.wechat
|
||||
this.form.authorities = res.data.authorities
|
||||
this.form.state = res.data.state
|
||||
this.form.publicKey = res.data.publicKey
|
||||
this.isDisabled = res.data.privateKeyStatus === 1
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataAttachments(nowval, oldval) {
|
||||
this.$refs['form'].validateField('dataAttachments');
|
||||
},
|
||||
imageAttachments(nowval, oldval) {
|
||||
this.$refs['form'].validateField('imageAttachments');
|
||||
},
|
||||
proofAttachments(nowval, oldval) {
|
||||
this.$refs['form'].validateField('proofAttachments');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-label-color .el-form-item__label {
|
||||
color: #FFFFFF; /* 白色 */
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
color: #FFFFFF; /* 白色 */
|
||||
}
|
||||
|
||||
#userInfo {
|
||||
#expireNoteContainer {
|
||||
width: 100%;
|
||||
font-size: 35px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.line {
|
||||
align: center;
|
||||
height: 1px;
|
||||
background: #CED2DB;
|
||||
overflow: hidden;
|
||||
width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tableContainer {
|
||||
width: 780px;
|
||||
border: 1px solid #B3BFD7;
|
||||
margin: 0px auto 20px;
|
||||
|
||||
-moz-box-shadow: 4px 4px 2px #F1F1F3;
|
||||
//box-shadow: 4px 4px 2px #F1F1F3;
|
||||
}
|
||||
|
||||
#userInfo_information {
|
||||
margin: 0;
|
||||
color: #8C95A6;
|
||||
text-align: center;
|
||||
padding: 18px 0 13px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#ipsLabel, #macsLabel {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
}
|
||||
.vertical-link {
|
||||
display: block;
|
||||
margin-bottom: 10px; /* Adjust the spacing between links as needed */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
#authentic{
|
||||
.radio{
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.el-radio-button__inner {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
width: 75px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
padding: 7px 7px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.subtitle-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 11pt;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
.el-card__body{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color:white ;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height:19px
|
||||
}
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-inner {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-wrapper {
|
||||
margin-left: 38px;
|
||||
min-width: 1230px;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 85px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.detail-image {
|
||||
width: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: white;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 20px 5%;
|
||||
}
|
||||
.detail-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 0 5%;
|
||||
}
|
||||
.detail-description{
|
||||
margin: 20px 5% 0;
|
||||
}
|
||||
|
||||
.data-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-description{
|
||||
color:white;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions--medium.is-bordered .el-descriptions-item__cell {
|
||||
padding: 10px;
|
||||
color: whitesmoke;
|
||||
width: 16.66%;
|
||||
}
|
||||
.el-descriptions-item__label.is-bordered-label {
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
background: rgba(150, 150, 150, 0.26);
|
||||
}
|
||||
div.el-pagination {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
background: center center no-repeat #fff0;
|
||||
background-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-pager li {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
.el-pager li.active {
|
||||
color: #409EFF;
|
||||
cursor: default;
|
||||
}
|
||||
.el-pagination__total {
|
||||
color: #cccccc;
|
||||
}
|
||||
.el-pagination__jump {
|
||||
color: #cccccc;
|
||||
}
|
||||
.el-pagination__editor.el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
.el-pagination .el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
/* .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
|
||||
background-color: #494949;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
overflow: scroll;
|
||||
background: black;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
background: black;
|
||||
}*/
|
||||
.detail-card{
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
-webkit-box-shadow: -1px 0 0 0 #409EFF;
|
||||
box-shadow: 0 0 0 0 #409EFF;
|
||||
color: #5ea1ff;
|
||||
background-color: transparent !important;
|
||||
border-color: #b2d4ef !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,460 @@
|
|||
<template>
|
||||
<div id='authentic'>
|
||||
<div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div v-show='!showDataDetail&&!showSupplierDetail'>
|
||||
<div class='filter-wrapper'>
|
||||
<div class='filter-inner' style='margin-top: 20px'>
|
||||
<span style='color:white;width: 80px'>分类：</span>
|
||||
<el-radio-group v-model='selectedCategory' size='small'>
|
||||
<el-radio-button plain v-for='item in categoryList' :key='item.id' class='radio' :label='item.value'>
|
||||
<div>{{ item.localName }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class='filter-inner'>
|
||||
<span style='color:white;width: 80px'>类型：</span>
|
||||
<el-radio-group v-model='selectedType' size='small'>
|
||||
<el-radio-button plain v-for='item in typeList' :key='item.id' class='radio' :label='item.value'>
|
||||
<div>{{ item.localName }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class='filter-inner'>
|
||||
<span style='color:white;width: 80px'>确权状态：</span>
|
||||
<el-radio-group v-model='proprietorshipStatus' size='small'>
|
||||
<el-radio-button plain v-for='item in authorityList' :key='item.id' class='radio' :label='item.value'>
|
||||
<div>{{ item.label }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button type='primary' size='mini' @click='searchForList(0)'
|
||||
style='width: 75px;margin-top: 5px;margin-left: 6.5%;'>筛选
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
<el-button type='success' size='mini' @click='create()'
|
||||
style='width: 75px;margin-top: 5px;margin-left: 90%;display: block;'>新建
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
<div class='list-wrapper'>
|
||||
<el-card v-for='item in dataList' :key='item.id' style='margin: 10px'>
|
||||
<div class='card-content'>
|
||||
<div>
|
||||
<el-image :src='item.imageUrl' alt='数据图片' class='card-image' />
|
||||
</div>
|
||||
<div style='margin-top: 10px;margin-left: 30px'>
|
||||
<el-row style='width: 70%'>
|
||||
<el-col :span='6'>
|
||||
<el-tooltip placement='right'>
|
||||
<!-- <div slot="content">所有权：{{item.ownRight}}<br/>-->
|
||||
<!-- 交易权：<span v-for='tradingItem in item.tradingRightList'>{{tradingItem.name}}  </span><br/>-->
|
||||
<!-- 使用权：<span v-for='usingItem in item.usingRightList'>{{usingItem.name}}  </span></div>-->
|
||||
<span class='data-name' @click='toDataDetail(item)'>{{ item.name }}</span>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span='4'>
|
||||
<el-tag :type="item.proprietorshipStatus === 'APPROVED' ?'success':'warning'"
|
||||
style='margin-left: 20px' effect='dark'>{{ item.proprietorshipStatusLocalName }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
<el-col :span='4'>
|
||||
<el-tag :type='checkStatus(item.resourceApplyStatus)' effect='dark'>
|
||||
{{ item.resourceApplyStatusLocalName }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style='margin-top: 10px'>
|
||||
<span class='text-description'>{{ item.description }}</span>
|
||||
</div>
|
||||
<div style='display:flex;justify-content:space-between;align-items:center;margin-top:20px;'>
|
||||
<el-descriptions :column='4'>
|
||||
<el-descriptions-item label='供应商'>
|
||||
<el-tooltip placement='right'>
|
||||
<span style='cursor: pointer'>{{ item.dataSupplier }}</span>
|
||||
</el-tooltip>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='分类'>{{ item.dataCategory }}</el-descriptions-item>
|
||||
<el-descriptions-item label='类型'>{{ item.dataType }}</el-descriptions-item>
|
||||
<el-descriptions-item label='价格'> {{ item.price !== 0 && item.price !== null ? '￥' + item.price : item.price }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-button v-if='checkButtonShow(item.proprietorshipStatus, item.resourceApplyStatus)' style='margin-top: -12px;'
|
||||
:type=buttonCheckStatus(item.resourceApplyStatus) size='mini'
|
||||
@click='buttonOnclick(item.resourceApplyStatus,item.id,item.usageRightDetail)'
|
||||
>{{ buttonLabel(item.resourceApplyStatus) }}</el-button>
|
||||
|
||||
<el-button v-if='"APPROVED"=== item.proprietorshipStatus && item.resourceApplyStatus==="DOWNLOADABLE"' style='margin-top: -12px;'
|
||||
:type="success" size='mini'
|
||||
@click='dialogVisibleH = true'
|
||||
>区块信息</el-button>
|
||||
|
||||
<el-button v-if='"APPROVED"=== item.proprietorshipStatus && item.resourceApplyStatus==="DOWNLOADABLE"' style='margin-top: -12px;'
|
||||
:type="success" size='mini'
|
||||
@click='downloadFile(item.id)'
|
||||
:disabled="item.userId !== userId"
|
||||
>证书下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div style='margin-right: 30px'>
|
||||
<el-pagination
|
||||
@size-change='handleSizeChange'
|
||||
:page-sizes='[5, 10, 15, 20]'
|
||||
layout='total, sizes, prev, pager, next, jumper'
|
||||
:total='totalItems'
|
||||
:page-size='pageSize'
|
||||
@current-change='handlePageChange'
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="数据申请" :visible.sync="dialogVisible" width="30%">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="使用权明细" :rules="[{ required: true, message: '请选择确权', trigger: 'change' }]">
|
||||
<el-select v-model="form.rights" multiple placeholder="请选择" style="width: 440px;">
|
||||
<el-option v-for="item in rightsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开始时间" :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]">
|
||||
<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
|
||||
<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
|
||||
<el-input type="textarea" v-model="form.note" maxlength="50" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="以太坊区块高度" :visible.sync="dialogVisibleH" width="600px">
|
||||
<div v-for="item in hashData">
|
||||
<div>
|
||||
<span>区块：</span>
|
||||
<el-link type="primary">{{ item.block }}</el-link>
|
||||
</div>
|
||||
<div>
|
||||
<span>由 </span>
|
||||
<el-link type="primary">{{ item.miner }}</el-link>
|
||||
<span> 开采</span>
|
||||
<span style="float: right;">矿工费</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>在 </span>
|
||||
<el-link type="primary">{{ item.time }}</el-link>
|
||||
<span> 秒内完成 </span>
|
||||
<el-link type="primary">{{ item.count }}</el-link>
|
||||
<span> 笔交易</span>
|
||||
<el-tag style="float: right;" type="success" size="mini">{{ item.fee }} ETH</el-tag>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<div v-show='showDataDetail' style='width: 80%'>
|
||||
<el-card class='detail-card'>
|
||||
<el-button type='text' @click='showDataDetail=false'
|
||||
style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
|
||||
</el-button>
|
||||
<div class='detail-content' style='font-size: 11pt'>
|
||||
<img :src='currentDataDetail.image' alt='数据图片' class='detail-image' style='margin-top: 30px' />
|
||||
<div style='margin-top: 30px;margin-left: 30px'>
|
||||
<el-row style='width: 90%'>
|
||||
<el-col :span='9'>
|
||||
<span class='data-name' style='font-size: 14pt'>{{ currentDataDetail.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span='6'>
|
||||
<el-tag :type="currentDataDetail.isAuthorized?'success':'warning'" style='margin-left: 20px'
|
||||
effect='dark'>{{ currentDataDetail.isAuthorized ? '已确权' : '确权中' }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='text-description'>{{ currentDataDetail.description }}</span>
|
||||
</div>
|
||||
|
||||
<el-descriptions :column='2' style='margin-top:20px;width: 50%;font-size: 11pt'>
|
||||
<el-descriptions-item label='数据提供者'>{{ currentDataDetail.dataSupplier }}</el-descriptions-item>
|
||||
<el-descriptions-item label='价格'>
|
||||
<template v-if="currentDataDetail.price !== 0 && currentDataDetail.price !== null">
|
||||
￥{{ currentDataDetail.price }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ currentDataDetail.price }}
|
||||
</template>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='detail-card'>
|
||||
<div class='detail-description'>
|
||||
<div>
|
||||
<span class='title-name'>数据信息：</span>
|
||||
</div>
|
||||
<el-descriptions title=' ' :column='3' style='width:100%;font-size: 11pt' border>
|
||||
<el-descriptions-item label='数据名称'>{{ currentDataDetail.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据类型'>{{ currentDataDetail.dataType }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据分类'>{{ currentDataDetail.dataCategory }}</el-descriptions-item>
|
||||
<el-descriptions-item label='注册时间'>{{ currentDataDetail.registrationTime | formatDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据格式'>{{ currentDataDetail.dataFormat }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据大小'>{{ currentDataDetail.dataSize }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='title-name'>数据样例：</span>
|
||||
</div>
|
||||
<el-descriptions title='' :column='3' style='width:100%;font-size: 11pt;margin-top: 20px' border>
|
||||
<el-descriptions-item v-for='item in currentDataDetail.dataExample' :key='item.label'
|
||||
:label='item.label'>
|
||||
{{ item.value }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='detail-card'>
|
||||
<div class='detail-description' style='padding-bottom:0;'>
|
||||
<div>
|
||||
<span class='title-name'>权属信息：</span>
|
||||
</div>
|
||||
|
||||
<div class='table_box'>
|
||||
<el-table
|
||||
:data='currentDataDetail.ownerships'
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='userName' label='名称' :show-overflow-tooltip='true' min-width="50">
|
||||
</el-table-column>
|
||||
<el-table-column prop='ownershipEffectiveTime' label='确权生效时间' :show-overflow-tooltip='true' :formatter='formatDateTime' min-width="90"></el-table-column>
|
||||
<el-table-column prop='ownershipEndTime' label='确权结束时间' :show-overflow-tooltip='true' :formatter='formatDateTime'min-width="90"></el-table-column>
|
||||
<el-table-column prop='ownershipType' label='权属类型' :show-overflow-tooltip='true' min-width="50"></el-table-column>
|
||||
<el-table-column prop='ownershipProof' label='确权证明' :show-overflow-tooltip='true' ></el-table-column>
|
||||
<el-table-column prop='ownershipTime' label='确权时间' :show-overflow-tooltip='true' :formatter='formatDateTime' min-width="90"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div v-show='showSupplierDetail' style='width: 80%'>
|
||||
<el-card class='detail-card'>
|
||||
<el-button type='text' @click='showSupplierDetail=false'
|
||||
style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
|
||||
</el-button>
|
||||
<div class='detail-description' style='padding-bottom:0;'>
|
||||
<div>
|
||||
<span class='title-name'>账户信息：</span>
|
||||
</div>
|
||||
|
||||
<div id='supplierParentDiv'>
|
||||
<div id='supplierDiagramDiv' style=' width:100%;height:20vh' />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='detail-card'>
|
||||
<el-tabs v-model='activeName' type='card'>
|
||||
<el-tab-pane label='数据登记信息' name='1'>
|
||||
<div class='detail-description'>
|
||||
<!--<div>
|
||||
<span class="title-name">数据登记信息：</span>
|
||||
</div>-->
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>已确权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.confirmedDataList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(scope.row)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='registrationTime' label='注册时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='confirmedTime' label='确权时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>未确权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.unconfirmedDataList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='registrationTime' label='注册时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='数据交易信息' name='2'>
|
||||
<div class='detail-description'>
|
||||
<!--<div>
|
||||
<span class="title-name">数据交易信息：</span>
|
||||
</div>-->
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>交易权授权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.authorisedTradingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorisedTime' label='授权时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='被授权方' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>使用权授权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.authorisedUsingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorisedTime' label='授权时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='被授权方' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='数据购买信息' name='3'>
|
||||
<div class='detail-description'>
|
||||
<!--<div>
|
||||
<span class="title-name">数据购买信息：</span>
|
||||
</div>-->
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>交易权购买：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.purchasedTradingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='purchasedTime' label='购买时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='授权方' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>使用权购买：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.purchasedUsingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='purchasedTime' label='购买时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='授权方' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
//src: url('../../assets/iconfont/Alternate.ttf');
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import './css/authentic.scss';
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,276 @@
|
|||
#consult {
|
||||
.top-wrapper {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 14pt;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 10px;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.wholeDiv {
|
||||
|
||||
|
||||
.el-progress-bar__outer {
|
||||
height: 10px !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.el-card__body,
|
||||
.el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: #FFB90F !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.detailDiv {
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #ffc440 !important;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
|
||||
//表格间距
|
||||
.el-table--mini .el-table__cell {}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.graphDiv {
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.el-card__body,
|
||||
.el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: #FFB90F !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: #fff0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.detailDiv {
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #ffc440 !important;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
|
||||
//表格间距
|
||||
.el-table--mini .el-table__cell {}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
#consult{
|
||||
.top-wrapper {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 10pt;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 10px;
|
||||
height: 40vh;
|
||||
}
|
||||
.wholeDiv {
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: #FFB90F !important;
|
||||
}
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.detailDiv {
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #ffc440 !important;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.graphDiv {
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: #FFB90F !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: #fff0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.detailDiv {
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #ffc440 !important;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div id="consult">
|
||||
<div id="entirety" style="background-image: url('/static/background/background.png')">
|
||||
<div v-show="!showGraph" class="wholeDiv">
|
||||
<div class="top-wrapper">
|
||||
<span style="color: white; margin-top: 10px">已选择云商：</span>
|
||||
<el-tag v-for="item in selectedSupplier" :key="item.id" effect="dark" style="margin-right: 20px; margin-top: 10px" type="success">
|
||||
{{ item.name }}
|
||||
</el-tag>
|
||||
<el-tag v-for="item in selectedPrivateSupplier" :key="item.id" effect="dark" style="margin-right: 20px; margin-top: 10px">
|
||||
{{ item.name }}
|
||||
</el-tag>
|
||||
<el-button :disabled="this.selectedSupplier.length + this.selectedPrivateSupplier.length < 2" size="mini"
|
||||
style="margin-top: 10px" type="primary"
|
||||
@click="doConsult">磋商
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="17">
|
||||
<el-row :gutter="10" style="min-height: 85vh">
|
||||
<!-- 云商列表 -->
|
||||
<el-col v-for="item in dataListNew" :key="item.id" :span="8">
|
||||
<!-- 每个云商 -->
|
||||
<el-card class="card" style="overflow: auto">
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<el-checkbox v-model="item.checked" :disabled="item.initList.length === 0" style="color: white;margin-left:5px;"
|
||||
@change="handleCheckboxChange(item)"></el-checkbox>
|
||||
<span class="title-name" style="margin-left: 5px">{{ item.name }}</span>
|
||||
<el-popover v-model="item.visible" placement="bottom" popper-class="custom-poporange" style="color: #bbf0ff" trigger="click">
|
||||
<el-cascader-panel ref="cascader" v-model="item.selectedSupplierList" :options="item.initList"
|
||||
:props="{multiple: true, value: 'id', label: 'name'}"
|
||||
:show-all-levels="false" placeholder="请选择" @change="handleCascaderChange(item)"></el-cascader-panel>
|
||||
<i slot="reference" class="el-icon-arrow-down" style="cursor: pointer; margin-top: 3px"></i>
|
||||
</el-popover>
|
||||
<el-tag :type="item.type === '公有云'?'success': ''" effect="plain" size="mini" style="margin-left:20px">{{ item.type }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<div style="margin-top: 10px">
|
||||
<el-row v-for="(prop, index) in item.props" :key="index" style="margin-top: 15px; margin-left: 5px;">
|
||||
<el-col :span="1">
|
||||
<el-checkbox v-show="item.checked" style="margin-top:10px;" v-model="prop.test" @change="change"/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="3">
|
||||
<div style="padding-top: 5px;text-align: center;">
|
||||
<el-image :src="require('./pic/' + prop.type + '.svg')" alt="img" style="width: 30px"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="16">
|
||||
<el-row style="margin-top: 3px;font-size: 12px;">
|
||||
<el-col :span="7" style="text-align: left">
|
||||
<span style="color: #ffffff">{{ prop.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="17" style="text-align: right;padding-right: 70px;">
|
||||
<span style="color: #ffffff">{{ prop.value }}/{{ prop.total }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-progress :color="customColorMethod" :stroke-width="10" :text-inside="false"
|
||||
:percentage="parseFloat(((prop.value * 100) / prop.total).toFixed(2))" />
|
||||
</el-col>
|
||||
<el-col :offset="6" :span="18" v-show="prop.test && item.checked">
|
||||
<el-radio-group size="mini" v-model="prop.test1">
|
||||
<el-radio-button label="使用" value="0"></el-radio-button>
|
||||
<el-radio-button label="复制" value="1" disabled></el-radio-button>
|
||||
<el-radio-button label="交易" value="2"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
<el-col :offset="6" :span="12" v-show="prop.test && prop.test1 == '使用' && item.checked" style="margin-top: 3px;">
|
||||
<el-input placeholder="请输入配额" size="mini" v-model="prop.test3" @input="change"/>
|
||||
</el-col>
|
||||
<el-col :offset="6" :span="12" v-show="prop.test && prop.test1 == '复制' && item.checked" style="margin-top: 3px;">
|
||||
<el-input placeholder="请输入配额" size="mini" v-model="prop.test4" @input="change"/>
|
||||
</el-col>
|
||||
<el-col :offset="6" :span="12" v-show="prop.test && prop.test1 == '交易' && item.checked" style="margin-top: 3px;">
|
||||
<el-input placeholder="请输入配额" size="mini" v-model="prop.test5" @input="change"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<!-- 新增右侧三个图 -->
|
||||
<el-col :span="7">
|
||||
<div style="margin-top:10px;">
|
||||
<div id='up_chart' style='height: 28vh'></div>
|
||||
</div>
|
||||
<div style="">
|
||||
<div id='mid_chart' style='height: 28vh'></div>
|
||||
</div>
|
||||
<div style="">
|
||||
<div id='down_chart' style='height: 28vh'></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-drawer :visible.sync="drawerVisible" :with-header="false" direction="rtl">
|
||||
<div v-loading="drawerIsLoading" style="
|
||||
background-image: url('/static/background/background.png');
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
">
|
||||
<h2 style="color: #ffff">{{ drawerTitle }}</h2>
|
||||
<div class="table_box">
|
||||
<el-table
|
||||
:cell-style="{
|
||||
padding: '0',
|
||||
}"
|
||||
:data="drawerTableData"
|
||||
:header-cell-style="{
|
||||
padding: '0',
|
||||
}"
|
||||
:header-row-style="{
|
||||
height: '4vh',
|
||||
}"
|
||||
:row-style="{
|
||||
height: '4vh',
|
||||
}"
|
||||
border
|
||||
max-height="calc(100vh - 100px)"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in drawerTableColumn"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:prop="item"
|
||||
:show-overflow-tooltip="true"
|
||||
sortable
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./js/index.js"></script>
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
//src: url('../../assets/iconfont/Alternate.ttf');
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import './css/consult.scss';
|
||||
.ellipsis {
|
||||
display: block; /* 或 inline-block，具体根据布局需要调整 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.custom-poporange {
|
||||
background-image: url('/static/background/background.png');
|
||||
|
||||
.el-cascader-node:hover {
|
||||
background-color: #28496ea6 !important;
|
||||
}
|
||||
|
||||
.el-cascader-node:focus {
|
||||
background-color: #28496ea6 !important;
|
||||
}
|
||||
|
||||
.el-cascader-node__label {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,643 @@
|
|||
import go from 'gojs'
|
||||
import request from '@/utils/request'
|
||||
import vdcApi from '@/api/vdcApi.js'
|
||||
import vmApi from '@/api/vmApi'
|
||||
import networkApi from '@/api/networkApi'
|
||||
import echarts from 'echarts'
|
||||
|
||||
/**
|
||||
* 创建磋商任务
|
||||
* cloudPlatformIds 云平台逗号分割
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export async function createConsult(cloudPlatformIds, privateIds) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/consult/createConsult',
|
||||
method: 'post',
|
||||
params: {
|
||||
cloudPlatformIds: cloudPlatformIds,
|
||||
privatePlatformIds: privateIds
|
||||
}
|
||||
}).then(data => {
|
||||
resolve(data);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 概览列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function consultList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/overview2',
|
||||
// url: 'http://10.4.67.37:28081/jcce/v1.0/kt1/overview2',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 实例
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function vmList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/vms',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 硬盘
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function volumnList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/volumns',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据盘
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function dataVolumnList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/volumns',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据库
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function databaseList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/rds',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 中间件
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function middlewareList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/rds',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 网络
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function vpcList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/pub/v1.0/vpc/getVpcList',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'consult',
|
||||
data() {
|
||||
return {
|
||||
selectedSupplier: [],
|
||||
selectedPrivateSupplier: [],
|
||||
dataListNew: [],
|
||||
selectedSupplierList: [],
|
||||
drawerVisible: false,
|
||||
databaseList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '云数据库 RDS MySQL 版',
|
||||
childList: []
|
||||
}
|
||||
],
|
||||
dataList: [], // 数据列表
|
||||
privateDataList: [], // 私有云商列表
|
||||
graphData: [],
|
||||
graphLinkData: [],
|
||||
showGraph: false,
|
||||
imgSingleNormal: '/static/kt1/OWFS_DOWN.png',
|
||||
imgSingleConnect: '/static/kt1/OWFS.png',
|
||||
imgSingleConsult: '/static/kt1/OWFS_DOWN_WARNING.png',
|
||||
imgGroup: '/static/kt1/SPARK_STREAMING.png',
|
||||
detailDialogVisible: false,
|
||||
detailData: {},
|
||||
detailDataIdx: 0,
|
||||
drawerTableData: [],
|
||||
drawerTableColumn: [],
|
||||
drawerTitle: '',
|
||||
drawerIsLoading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
watch: {
|
||||
dataListNew: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.selectedSupplier = val.filter(item => item.type === '公有云')
|
||||
.flatMap(item => item.initList.filter(ins => ins.checked));
|
||||
this.selectedPrivateSupplier = val.filter(item => item.type === '私有云')
|
||||
.flatMap(item => item.initList.filter(ins => ins.checked));
|
||||
|
||||
// 计算资源总量
|
||||
const totalResources = this.calculateTotalResources(val);
|
||||
}
|
||||
},
|
||||
// 点击图的节点
|
||||
detailData: function () {
|
||||
for (let i in this.dataList) {
|
||||
if (this.dataList[i].id == this.detailData.cloudPlatformId) {
|
||||
this.detailDataIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 计算右侧饼状图
|
||||
calculateTotalResources(data) {
|
||||
const totals = {
|
||||
cpu: {used: 0, total: 0},
|
||||
memory: {used: 0, total: 0},
|
||||
storage: {used: 0, total: 0}
|
||||
};
|
||||
|
||||
data.forEach(cloud => {
|
||||
cloud.props.forEach(prop => {
|
||||
totals[prop.type].used += prop.value;
|
||||
totals[prop.type].total += prop.total;
|
||||
});
|
||||
});
|
||||
|
||||
const up_chart = echarts.init(document.getElementById('up_chart'), 'dark')
|
||||
const mid_chart = echarts.init(document.getElementById('mid_chart'), 'dark')
|
||||
const down_chart = echarts.init(document.getElementById('down_chart'), 'dark')
|
||||
const up_option = {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)', // 设置透明背景
|
||||
title: { text: 'CPU使用量', left: 'center', top: 'center',
|
||||
textStyle: {color: '#ffffff', fontStyle: 'normal', fontWeight: 'bold', fontSize: 12}
|
||||
},
|
||||
tooltip: {trigger: 'item'}, grid: {left: '0%', containLabel: true},
|
||||
series: [{
|
||||
name: 'CPU使用量', type: 'pie', radius: ['40%', '70%'],
|
||||
data: [{value: totals.cpu.used, name: '已用资源', itemStyle: {color: 'rgb(103, 194, 58)'}},
|
||||
{value: totals.cpu.total - totals.cpu.used, name: '未用资源', itemStyle: {color: '#409eff'}}]
|
||||
}]
|
||||
};
|
||||
const mid_option = {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)', // 设置透明背景
|
||||
title: { text: '内存使用量', left: 'center', top: 'center',
|
||||
textStyle: {color: '#ffffff', fontStyle: 'normal', fontWeight: 'bold', fontSize: 12}
|
||||
},
|
||||
tooltip: {trigger: 'item'}, grid: {left: '0%', containLabel: true},
|
||||
series: [{
|
||||
name: '内存使用量', type: 'pie', radius: ['40%', '70%'],
|
||||
data: [{value: totals.memory.used, name: '已用资源', itemStyle: {color: '#f5b000'}},
|
||||
{value: totals.memory.total - totals.memory.used, name: '未用资源', itemStyle: {color: '#6495ED'}}]
|
||||
}]
|
||||
};
|
||||
const down_option = {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)', // 设置透明背景
|
||||
title: { text: '存储使用量', left: 'center', top: 'center',
|
||||
textStyle: {color: '#ffffff', fontStyle: 'normal', fontWeight: 'bold', fontSize: 12}
|
||||
},
|
||||
tooltip: {trigger: 'item'}, grid: {left: '0%', containLabel: true},
|
||||
series: [{
|
||||
name: '存储使用量', type: 'pie', radius: ['40%', '70%'],
|
||||
data: [{value: totals.storage.used, name: '已用资源', itemStyle: {color: '#f5b000'}},
|
||||
{value: totals.storage.total - totals.storage.used, name: '未用资源', itemStyle: {color: '#6495ED'}}]
|
||||
}]
|
||||
};
|
||||
up_chart.setOption(up_option)
|
||||
mid_chart.setOption(mid_option)
|
||||
down_chart.setOption(down_option)
|
||||
},
|
||||
doConsult() {
|
||||
let ids = this.selectedSupplier.map(s => s.id).join(",")
|
||||
let privateIds = this.selectedPrivateSupplier.map(s => s.id).join(",")
|
||||
// 创建磋商任务
|
||||
createConsult(ids, privateIds).then(res => {
|
||||
this.$message.success("磋商成功")
|
||||
this.$router.push({ name: "磋商过程" })
|
||||
})
|
||||
},
|
||||
handleCheckboxChange(item) {
|
||||
if (item.checked) {
|
||||
let list = []
|
||||
// 将下拉列表的选中状态设置为全部选中
|
||||
item.initList.forEach(option => {
|
||||
// this.$set(option, 'checked', true);
|
||||
list.push(option.id)
|
||||
option.checked = true;
|
||||
|
||||
});
|
||||
this.$set(item, 'selectedSupplierList', list)
|
||||
}
|
||||
else {
|
||||
item.initList.forEach(option => {
|
||||
option.checked = false;
|
||||
})
|
||||
this.$set(item, 'selectedSupplierList', [])
|
||||
}
|
||||
|
||||
// 增加点击云商 下方配额等都展示出来
|
||||
for (let idx in item.props) {
|
||||
item.props[idx].test = true
|
||||
item.props[idx].test3 = item.props[idx].total
|
||||
item.props[idx].test5 = 0
|
||||
}
|
||||
},
|
||||
handleCascaderChange(item) {
|
||||
// 检查所有选项是否都被选中
|
||||
const allSelected = item.selectedSupplierList.length === item.initList.length;
|
||||
const list = item.initList.filter(i => item.selectedSupplierList.find(j => i.id === j[0])).map(item => item.id);
|
||||
item.initList.forEach(item => {
|
||||
if (list.includes(item.id)) {
|
||||
item.checked = true;
|
||||
}
|
||||
else {
|
||||
item.checked = false
|
||||
}
|
||||
})
|
||||
// const allSelected = item.initList.every(option => option.checked);
|
||||
if (allSelected) {
|
||||
// 将 el-checkbox 的选中状态设置为 true
|
||||
this.$set(item, 'checked', true);
|
||||
}
|
||||
else {
|
||||
this.$set(item, 'checked', false);
|
||||
}
|
||||
},
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 70) {
|
||||
return '#67C23A';
|
||||
} else if (percentage < 80) {
|
||||
return '#E6A23C';
|
||||
} else {
|
||||
return '#F56C6C';
|
||||
}
|
||||
},
|
||||
getDataList() {
|
||||
this.dataList = []
|
||||
consultList().then((data) => {
|
||||
this.dataListNew = data.data
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
async getGraphData() {
|
||||
let ids = this.selectedSupplier.map(s => s.id).join(",")
|
||||
let privateIds = this.selectedPrivateSupplier.map(s => s.id).join(",")
|
||||
|
||||
console.log('ids:' + ids)
|
||||
console.log('privateIds:' + privateIds)
|
||||
|
||||
// 创建磋商任务
|
||||
let res = await createConsult(ids, privateIds)
|
||||
console.log("create:")
|
||||
console.log(res)
|
||||
|
||||
this.graphLinkData = res.data.graphLinkDataList
|
||||
this.graphData = res.data.graphDataList
|
||||
|
||||
if (this.graphData.length > 0) {
|
||||
if (this.graphData[0].childList) {
|
||||
this.detailData = this.graphData[0].childList[0]
|
||||
} else {
|
||||
this.detailData = this.graphData[0]
|
||||
}
|
||||
}
|
||||
},
|
||||
chooseMenuItem(item, activeIndex) {
|
||||
item.isLoading = true
|
||||
switch (activeIndex) {
|
||||
case 'network':
|
||||
vpcList(item.id).then((data) => {
|
||||
item.networkList = data.data.pageData
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'instance':
|
||||
vmList(item.id).then((data) => {
|
||||
item.instanceList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'disk':
|
||||
volumnList(item.id).then((data) => {
|
||||
item.diskList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'dataDisk':
|
||||
volumnList(item.id).then((data) => {
|
||||
item.dataDiskList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'database':
|
||||
databaseList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
item.databaseList = this.databaseList
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
/* case 'middleware':
|
||||
middlewareList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
item.middlewareList = this.databaseList
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break*/
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
choosePrivateMenuItem(item, activeIndex) {
|
||||
item.showFlag = activeIndex
|
||||
},
|
||||
// 点击磋商按钮
|
||||
async initGraph() {
|
||||
const self = this
|
||||
await this.getGraphData()
|
||||
|
||||
var $$ = go.GraphObject.make
|
||||
const nodes = []
|
||||
const links = this.graphLinkData
|
||||
|
||||
for (let i = 0; i < this.selectedSupplier.length; i++) {
|
||||
for (let j = 0; j < this.graphData.length; j++) {
|
||||
if (this.graphData[j].id === this.selectedSupplier[i].id) {
|
||||
this.graphData[j].state = 2
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
console.log(links)
|
||||
for (let i = 0; i < this.graphData.length; i++) {
|
||||
if (this.graphData[i].childList) {
|
||||
nodes.push({
|
||||
key: this.graphData[i].id,
|
||||
text: this.graphData[i].name,
|
||||
source: this.getNodeImg(this.graphData[i]),
|
||||
isGroup: true
|
||||
})
|
||||
for (let j = 0; j < this.graphData[i].childList.length; j++) {
|
||||
nodes.push({
|
||||
key: this.graphData[i].childList[j].id,
|
||||
text: this.graphData[i].childList[j].name,
|
||||
source: this.imgSingleConnect,
|
||||
group: this.graphData[i].id,
|
||||
detailData: this.graphData[i].childList[j]
|
||||
})
|
||||
}
|
||||
} else {
|
||||
nodes.push({
|
||||
key: this.graphData[i].id,
|
||||
text: this.graphData[i].name,
|
||||
source: this.getNodeImg(this.graphData[i]),
|
||||
detailData: this.graphData[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(nodes)
|
||||
|
||||
const mygoChart = document.getElementById('diagramDiv')
|
||||
console.log(mygoChart)
|
||||
const diagramParentDiv = document.getElementById('diagramParentDiv')
|
||||
diagramParentDiv.removeChild(mygoChart)
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'diagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:90vh')
|
||||
diagramParentDiv.appendChild(div)
|
||||
this.dataDiagram = $$(go.Diagram, 'diagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.CircularLayout, {
|
||||
// layerSpacing: 40,
|
||||
// columnSpacing: 20,
|
||||
// direction: 0,
|
||||
// setsPortSpots: false
|
||||
// initializeOption:go.LayeredDigraphLayout.InitNaive,
|
||||
// layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
|
||||
})
|
||||
})
|
||||
this.dataDiagram.groupTemplate = $$(
|
||||
go.Group,
|
||||
'Auto',
|
||||
{
|
||||
isSubGraphExpanded: false,
|
||||
wasSubGraphExpanded: false
|
||||
},
|
||||
$$(go.Shape, 'Rectangle', { fill: null, stroke: 'rgba(255,255,255,0)' }),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Table',
|
||||
$$('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
row: 1,
|
||||
columnSpan: 20,
|
||||
stroke: '#ffffff',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'center',
|
||||
margin: 5,
|
||||
desiredSize: new go.Size(100, 20),
|
||||
stretch: go.GraphObject.Horizontal
|
||||
},
|
||||
new go.Binding('text'),
|
||||
),
|
||||
$$(go.Picture, { row: 0, column: 1, desiredSize: new go.Size(60, 60), stretch: go.GraphObject.Horizontal }, new go.Binding('source')),
|
||||
$$(
|
||||
go.Placeholder,
|
||||
{ row: 2, columnSpan: 3, padding: 10, alignment: go.Spot.TopLeft },
|
||||
new go.Binding('padding', 'isSubGraphExpanded', function (exp) {
|
||||
return exp ? 10 : 0
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
this.dataDiagram.linkTemplate = $$(
|
||||
go.Link,
|
||||
{
|
||||
curve: go.Link.Bezier
|
||||
},
|
||||
$$(
|
||||
go.Shape,
|
||||
{
|
||||
strokeWidth: 2,
|
||||
name: 'PIPE',
|
||||
strokeDashArray: [5, 5]
|
||||
},
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
})
|
||||
),
|
||||
$$(
|
||||
go.Shape,
|
||||
{ toArrow: 'Standard', stroke: '#eeeeee', scale: 1 },
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
}), new go.Binding('visible', 'state', this.pictureVisible)
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
textAlign: 'center',
|
||||
font: '16pt helvetica, arial, sans-serif',
|
||||
segmentOffset: new go.Point(0, 10),
|
||||
margin: 4,
|
||||
editable: false
|
||||
},
|
||||
)
|
||||
)
|
||||
|
||||
this.dataDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
{
|
||||
click: function (e, node) {
|
||||
if (node.data.detailData) {
|
||||
self.detailData = node.data.detailData
|
||||
self.detailDialogVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
$$(go.Panel, 'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle',
|
||||
{
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
|
||||
}
|
||||
),
|
||||
$$(go.Panel, 'Table',
|
||||
$$(go.Picture, { row: 0, column: 0, rowSpan: 2, desiredSize: new go.Size(60, 60) }, new go.Binding('source')),
|
||||
$$(go.TextBlock, { row: 2, column: 0, rowSpan: 2, alignment: go.Spot.Top, margin: 5, font: 'bold 14px sans-serif ', stroke: '#ffffff' }, new go.Binding('text'))
|
||||
)
|
||||
),
|
||||
)
|
||||
function colorSet(param) {
|
||||
switch (param) {
|
||||
case 0: return 'white'
|
||||
case 1: return '#ffaa3d'
|
||||
default: return '#6e6e6e'
|
||||
}
|
||||
}
|
||||
this.dataDiagram.model = new go.GraphLinksModel(nodes, links)
|
||||
console.log(this.selectedSupplier)
|
||||
this.showGraph = true
|
||||
this.linkLoop()
|
||||
},
|
||||
quitGraph() {
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
this.dataList[i].checked = false
|
||||
}
|
||||
this.showGraph = false
|
||||
},
|
||||
getNodeImg(node) {
|
||||
if (node.childList) {
|
||||
return this.imgGroup
|
||||
} else {
|
||||
if (node.state === 0) {
|
||||
return this.imgSingleNormal
|
||||
} else if (node.state === 1) {
|
||||
return this.imgSingleConnect
|
||||
} else {
|
||||
return this.imgSingleConsult
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureVisible(key, e) {
|
||||
const state = e.part.data.state
|
||||
return state === 0
|
||||
},
|
||||
linkLoop() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
const oldskips = this.dataDiagram.skipsUndoManager
|
||||
this.dataDiagram.skipsUndoManager = true
|
||||
this.dataDiagram.links.each(function (link) {
|
||||
const shape = link.findObject('PIPE')
|
||||
const off = shape.strokeDashOffset - 2
|
||||
shape.strokeDashOffset = off <= 0 ? 20 : off
|
||||
// speed = parseInt(link.jb.flow);
|
||||
})
|
||||
this.dataDiagram.skipsUndoManager = oldskips
|
||||
this.linkLoop()
|
||||
}, 200)
|
||||
},
|
||||
cutString(str, len) {
|
||||
if (str.length * 2 <= len) { //length属性读出来的汉字长度为1
|
||||
return str;
|
||||
}
|
||||
var strlen = 0;
|
||||
var s = "";
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
s = s + str.charAt(i);
|
||||
if (str.charCodeAt(i) > 128) {
|
||||
strlen = strlen + 2;
|
||||
if (strlen >= len) {
|
||||
return s.substring(0, s.length - 1) + "...";
|
||||
}
|
||||
} else {
|
||||
strlen = strlen + 1;
|
||||
if (strlen >= len) {
|
||||
return s.substring(0, s.length - 2) + "...";
|
||||
}
|
||||
}
|
||||
}
|
||||
return s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,708 @@
|
|||
import go from 'gojs'
|
||||
import request from '@/utils/request'
|
||||
import vdcApi from '@/api/vdcApi.js'
|
||||
import vmApi from '@/api/vmApi'
|
||||
import networkApi from '@/api/networkApi'
|
||||
|
||||
/**
|
||||
* 创建磋商任务
|
||||
* cloudPlatformIds 云平台逗号分割
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export async function createConsult(cloudPlatformIds, privateIds) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/consult/createConsult',
|
||||
method: 'post',
|
||||
params: {
|
||||
cloudPlatformIds: cloudPlatformIds,
|
||||
privatePlatformIds: privateIds
|
||||
}
|
||||
}).then(data => {
|
||||
resolve(data);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 概览列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function consultList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 实例
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function vmList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/vms',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 硬盘
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function volumnList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/volumns',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据盘
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function dataVolumnList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/volumns',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据库
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function databaseList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/rds',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 中间件
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function middlewareList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/rds',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 网络
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function vpcList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/pub/v1.0/vpc/getVpcList',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'consult',
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value2: [],
|
||||
drawerVisible: false,
|
||||
databaseList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '云数据库 RDS MySQL 版',
|
||||
childList: []
|
||||
}
|
||||
],
|
||||
dataList: [], // 数据列表
|
||||
privateDataList: [], // 私有云商列表
|
||||
graphData: [],
|
||||
graphLinkData: [],
|
||||
showGraph: false,
|
||||
imgSingleNormal: '/static/kt1/OWFS_DOWN.png',
|
||||
imgSingleConnect: '/static/kt1/OWFS.png',
|
||||
imgSingleConsult: '/static/kt1/OWFS_DOWN_WARNING.png',
|
||||
imgGroup: '/static/kt1/SPARK_STREAMING.png',
|
||||
detailDialogVisible: false,
|
||||
detailData: {},
|
||||
detailDataIdx: 0,
|
||||
drawerTableData: [],
|
||||
drawerTableColumn: [],
|
||||
drawerTitle: '',
|
||||
drawerIsLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedSupplier() {
|
||||
return this.dataList.filter(option => option.checked)
|
||||
},
|
||||
selectedPrivateSupplier() {
|
||||
return this.privateDataList.filter(option => option.checked)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
watch: {
|
||||
// 点击图的节点
|
||||
detailData: function () {
|
||||
for (let i in this.dataList) {
|
||||
if (this.dataList[i].id == this.detailData.cloudPlatformId) {
|
||||
this.detailDataIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDetailInfo(item, type) {
|
||||
this.drawerVisible = true;
|
||||
this.chooseBar(item, type);
|
||||
},
|
||||
showPrivateCloudDetailInfo(item, type) {
|
||||
const cnMap = {
|
||||
network: '网络',
|
||||
instance: '实例'
|
||||
}
|
||||
this.drawerTitle = cnMap[type]
|
||||
this.drawerVisible = true;
|
||||
if (type === 'instance') {
|
||||
this.drawerTableData = item.instanceList;
|
||||
this.drawerTableData = this.drawerTableData.map(item => ({
|
||||
...item,
|
||||
cpu: item.cpu + '核',
|
||||
memory: item.memory / 1024 / 1024 / 1024 + 'G'
|
||||
}))
|
||||
this.drawerTableColumn = ['name', 'privateIpAddress', 'cpu', 'memory']
|
||||
}
|
||||
else {
|
||||
this.drawerTableData = item.networkList
|
||||
this.drawerTableData = this.drawerTableData.map(item => ({
|
||||
...item,
|
||||
deployPattern: item.deployPattern ==
|
||||
'CLASSIC'
|
||||
? '经典网络'
|
||||
: networkItem.deployPattern,
|
||||
}))
|
||||
this.drawerTableColumn = ['name', 'physicalNetwork', 'deployPattern']
|
||||
|
||||
}
|
||||
// if (this.drawerTableData.length > 0) {
|
||||
// this.drawerTableColumn = Object.keys(this.drawerTableData[0]);
|
||||
// }
|
||||
// else {
|
||||
// this.drawerTableColumn = []
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
chooseBar(item, activeIndex) {
|
||||
const cnMap = {
|
||||
disk: '硬盘',
|
||||
database: '数据库',
|
||||
network: '网络',
|
||||
instance: '实例'
|
||||
|
||||
}
|
||||
this.drawerIsLoading = true
|
||||
this.drawerTitle = cnMap[activeIndex]
|
||||
|
||||
switch (activeIndex) {
|
||||
case 'network':
|
||||
vpcList(item.id).then((data) => {
|
||||
this.drawerTableData = data.data.pageData
|
||||
if (this.drawerTableData.length > 0) {
|
||||
this.drawerTableColumn = Object.keys(this.drawerTableData[0]);
|
||||
}
|
||||
else {
|
||||
this.drawerTableColumn = []
|
||||
}
|
||||
this.drawerIsLoading = false
|
||||
})
|
||||
break
|
||||
case 'instance':
|
||||
vmList(item.id).then((data) => {
|
||||
this.drawerTableData = data.data.type
|
||||
if (this.drawerTableData.length > 0) {
|
||||
this.drawerTableColumn = Object.keys(this.drawerTableData[0]);
|
||||
}
|
||||
else {
|
||||
this.drawerTableColumn = []
|
||||
}
|
||||
this.drawerIsLoading = false
|
||||
})
|
||||
break
|
||||
case 'disk':
|
||||
volumnList(item.id).then((data) => {
|
||||
this.drawerTableData = data.data.type
|
||||
if (this.drawerTableData.length > 0) {
|
||||
this.drawerTableColumn = Object.keys(this.drawerTableData[0]);
|
||||
}
|
||||
else {
|
||||
this.drawerTableColumn = []
|
||||
}
|
||||
this.drawerIsLoading = false
|
||||
})
|
||||
break
|
||||
case 'dataDisk':
|
||||
volumnList(item.id).then((data) => {
|
||||
this.drawerTableData = data.data.type
|
||||
if (this.drawerTableData.length > 0) {
|
||||
this.drawerTableColumn = Object.keys(this.drawerTableData[0]);
|
||||
}
|
||||
else {
|
||||
this.drawerTableColumn = []
|
||||
}
|
||||
this.drawerIsLoading = false
|
||||
})
|
||||
break
|
||||
case 'database':
|
||||
databaseList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
this.drawerTableData = this.databaseList
|
||||
if (this.drawerTableData.length > 0) {
|
||||
this.drawerTableColumn = Object.keys(this.drawerTableData[0]);
|
||||
}
|
||||
else {
|
||||
this.drawerTableColumn = []
|
||||
}
|
||||
this.drawerIsLoading = false
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 70) {
|
||||
return '#67C23A';
|
||||
} else if (percentage < 80) {
|
||||
return '#E6A23C';
|
||||
} else {
|
||||
return '#F56C6C';
|
||||
}
|
||||
},
|
||||
getDataList() {
|
||||
this.dataList = []
|
||||
consultList().then((data) => {
|
||||
data.data.forEach(element => {
|
||||
vpcList(element.id).then((data1) => {
|
||||
element.showFlag = 'network'
|
||||
element.checked = false
|
||||
element.networkList = data1.data.pageData
|
||||
element.isLoading = false
|
||||
this.dataList.push(element)
|
||||
})
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 增加私有云
|
||||
this.privateDataList = []
|
||||
vdcApi.vdcListRequest({ withDetail: false }).then(({ data }) => {
|
||||
// 循环datacenterlist，赋默认值
|
||||
data.forEach(element => {
|
||||
element.showFlag = 'network'
|
||||
element.checked = false
|
||||
element.networkList = []
|
||||
element.instanceList = []
|
||||
element.templateList = []
|
||||
element.isLoading = false
|
||||
this.privateDataList.push(element)
|
||||
})
|
||||
// 获取全部网络
|
||||
networkApi.networkPageDataRequest({ page: 1, size: 10000 }).then(data1 => {
|
||||
// 循环私有云vdc
|
||||
data.forEach(element => {
|
||||
element.networkList = []
|
||||
// 循环全部网络
|
||||
data1.data.pageData.forEach(ele => {
|
||||
if (ele.resourceDataCenterId == element.id) {
|
||||
element.networkList.push(ele)
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 获取VM
|
||||
vmApi.vmListRequest({ page: 1, size: 10000 }).then(data2 => {
|
||||
data.forEach(element => {
|
||||
// element.instanceList = data2.data.pageData
|
||||
element.instanceList = []
|
||||
// 循环全部网络
|
||||
data2.data.pageData.forEach(ele => {
|
||||
if (ele.resourceDataCenterId == element.id) {
|
||||
element.instanceList.push(ele)
|
||||
}
|
||||
})
|
||||
})
|
||||
//self.table.data = data.pageData
|
||||
})
|
||||
})
|
||||
},
|
||||
async getGraphData() {
|
||||
let ids = this.selectedSupplier.map(s => s.id).join(",")
|
||||
let privateIds = this.selectedPrivateSupplier.map(s => s.id).join(",")
|
||||
|
||||
console.log('ids:' + ids)
|
||||
console.log('privateIds:' + privateIds)
|
||||
|
||||
// 创建磋商任务
|
||||
let res = await createConsult(ids, privateIds)
|
||||
console.log("create:")
|
||||
console.log(res)
|
||||
|
||||
this.graphLinkData = res.data.graphLinkDataList
|
||||
this.graphData = res.data.graphDataList
|
||||
|
||||
if (this.graphData.length > 0) {
|
||||
if (this.graphData[0].childList) {
|
||||
this.detailData = this.graphData[0].childList[0]
|
||||
} else {
|
||||
this.detailData = this.graphData[0]
|
||||
}
|
||||
}
|
||||
},
|
||||
chooseMenuItem(item, activeIndex) {
|
||||
item.isLoading = true
|
||||
switch (activeIndex) {
|
||||
case 'network':
|
||||
vpcList(item.id).then((data) => {
|
||||
item.networkList = data.data.pageData
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'instance':
|
||||
vmList(item.id).then((data) => {
|
||||
item.instanceList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'disk':
|
||||
volumnList(item.id).then((data) => {
|
||||
item.diskList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'dataDisk':
|
||||
volumnList(item.id).then((data) => {
|
||||
item.dataDiskList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'database':
|
||||
databaseList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
item.databaseList = this.databaseList
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
/* case 'middleware':
|
||||
middlewareList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
item.middlewareList = this.databaseList
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break*/
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
choosePrivateMenuItem(item, activeIndex) {
|
||||
item.showFlag = activeIndex
|
||||
},
|
||||
// 点击磋商按钮
|
||||
async initGraph() {
|
||||
const self = this
|
||||
// console.log(this.selectedSupplier)
|
||||
await this.getGraphData()
|
||||
|
||||
var $$ = go.GraphObject.make
|
||||
const nodes = []
|
||||
const links = this.graphLinkData
|
||||
|
||||
for (let i = 0; i < this.selectedSupplier.length; i++) {
|
||||
for (let j = 0; j < this.graphData.length; j++) {
|
||||
if (this.graphData[j].id === this.selectedSupplier[i].id) {
|
||||
this.graphData[j].state = 2
|
||||
}
|
||||
}
|
||||
// PS：增加了一个节点，不太清楚什么意思，暂时注释掉
|
||||
// for (let k = i; k < this.selectedSupplier.length; k++) {
|
||||
// if (i !== k) {
|
||||
// links.push({ from: this.selectedSupplier[i].id, to: this.selectedSupplier[k].id, state: 1 })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
console.log(links)
|
||||
for (let i = 0; i < this.graphData.length; i++) {
|
||||
if (this.graphData[i].childList) {
|
||||
nodes.push({
|
||||
key: this.graphData[i].id,
|
||||
text: this.graphData[i].name,
|
||||
source: this.getNodeImg(this.graphData[i]),
|
||||
isGroup: true
|
||||
})
|
||||
for (let j = 0; j < this.graphData[i].childList.length; j++) {
|
||||
nodes.push({
|
||||
key: this.graphData[i].childList[j].id,
|
||||
text: this.graphData[i].childList[j].name,
|
||||
source: this.imgSingleConnect,
|
||||
group: this.graphData[i].id,
|
||||
detailData: this.graphData[i].childList[j]
|
||||
})
|
||||
}
|
||||
} else {
|
||||
nodes.push({
|
||||
key: this.graphData[i].id,
|
||||
text: this.graphData[i].name,
|
||||
source: this.getNodeImg(this.graphData[i]),
|
||||
detailData: this.graphData[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(nodes)
|
||||
|
||||
const mygoChart = document.getElementById('diagramDiv')
|
||||
console.log(mygoChart)
|
||||
const diagramParentDiv = document.getElementById('diagramParentDiv')
|
||||
diagramParentDiv.removeChild(mygoChart)
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'diagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:90vh')
|
||||
diagramParentDiv.appendChild(div)
|
||||
this.dataDiagram = $$(go.Diagram, 'diagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.CircularLayout, {
|
||||
// layerSpacing: 40,
|
||||
// columnSpacing: 20,
|
||||
// direction: 0,
|
||||
// setsPortSpots: false
|
||||
// initializeOption:go.LayeredDigraphLayout.InitNaive,
|
||||
// layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
|
||||
})
|
||||
})
|
||||
this.dataDiagram.groupTemplate = $$(
|
||||
go.Group,
|
||||
'Auto',
|
||||
{
|
||||
isSubGraphExpanded: false,
|
||||
wasSubGraphExpanded: false
|
||||
},
|
||||
$$(go.Shape, 'Rectangle', { fill: null, stroke: 'rgba(255,255,255,0)' }),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Table',
|
||||
$$('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
row: 1,
|
||||
columnSpan: 20,
|
||||
stroke: '#ffffff',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'center',
|
||||
margin: 5,
|
||||
desiredSize: new go.Size(100, 20),
|
||||
stretch: go.GraphObject.Horizontal
|
||||
},
|
||||
new go.Binding('text'),
|
||||
),
|
||||
$$(go.Picture, { row: 0, column: 1, desiredSize: new go.Size(60, 60), stretch: go.GraphObject.Horizontal }, new go.Binding('source')),
|
||||
$$(
|
||||
go.Placeholder,
|
||||
{ row: 2, columnSpan: 3, padding: 10, alignment: go.Spot.TopLeft },
|
||||
new go.Binding('padding', 'isSubGraphExpanded', function (exp) {
|
||||
return exp ? 10 : 0
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
this.dataDiagram.linkTemplate = $$(
|
||||
go.Link,
|
||||
{
|
||||
curve: go.Link.Bezier
|
||||
},
|
||||
$$(
|
||||
go.Shape,
|
||||
{
|
||||
strokeWidth: 2,
|
||||
name: 'PIPE',
|
||||
strokeDashArray: [5, 5]
|
||||
},
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
})
|
||||
),
|
||||
$$(
|
||||
go.Shape,
|
||||
{ toArrow: 'Standard', stroke: '#eeeeee', scale: 1 },
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
}), new go.Binding('visible', 'state', this.pictureVisible)
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
textAlign: 'center',
|
||||
font: '16pt helvetica, arial, sans-serif',
|
||||
segmentOffset: new go.Point(0, 10),
|
||||
margin: 4,
|
||||
editable: false
|
||||
},
|
||||
)
|
||||
)
|
||||
|
||||
this.dataDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
{
|
||||
click: function (e, node) {
|
||||
if (node.data.detailData) {
|
||||
self.detailData = node.data.detailData
|
||||
self.detailDialogVisible = true
|
||||
}
|
||||
}
|
||||
},
|
||||
$$(go.Panel, 'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle',
|
||||
{
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
|
||||
}
|
||||
),
|
||||
$$(go.Panel, 'Table',
|
||||
$$(go.Picture, { row: 0, column: 0, rowSpan: 2, desiredSize: new go.Size(60, 60) }, new go.Binding('source')),
|
||||
$$(go.TextBlock, { row: 2, column: 0, rowSpan: 2, alignment: go.Spot.Top, margin: 5, font: 'bold 14px sans-serif ', stroke: '#ffffff' }, new go.Binding('text'))
|
||||
)
|
||||
),
|
||||
)
|
||||
function colorSet(param) {
|
||||
switch (param) {
|
||||
case 0: return 'white'
|
||||
case 1: return '#ffaa3d'
|
||||
default: return '#6e6e6e'
|
||||
}
|
||||
}
|
||||
this.dataDiagram.model = new go.GraphLinksModel(nodes, links)
|
||||
console.log(this.selectedSupplier)
|
||||
this.showGraph = true
|
||||
this.linkLoop()
|
||||
},
|
||||
quitGraph() {
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
this.dataList[i].checked = false
|
||||
}
|
||||
this.showGraph = false
|
||||
},
|
||||
getNodeImg(node) {
|
||||
if (node.childList) {
|
||||
return this.imgGroup
|
||||
} else {
|
||||
if (node.state === 0) {
|
||||
return this.imgSingleNormal
|
||||
} else if (node.state === 1) {
|
||||
return this.imgSingleConnect
|
||||
} else {
|
||||
return this.imgSingleConsult
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureVisible(key, e) {
|
||||
const state = e.part.data.state
|
||||
return state === 0
|
||||
},
|
||||
linkLoop() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
const oldskips = this.dataDiagram.skipsUndoManager
|
||||
this.dataDiagram.skipsUndoManager = true
|
||||
this.dataDiagram.links.each(function (link) {
|
||||
const shape = link.findObject('PIPE')
|
||||
const off = shape.strokeDashOffset - 2
|
||||
shape.strokeDashOffset = off <= 0 ? 20 : off
|
||||
// speed = parseInt(link.jb.flow);
|
||||
})
|
||||
this.dataDiagram.skipsUndoManager = oldskips
|
||||
this.linkLoop()
|
||||
}, 200)
|
||||
},
|
||||
cutString(str, len) {
|
||||
if (str.length * 2 <= len) { //length属性读出来的汉字长度为1
|
||||
return str;
|
||||
}
|
||||
var strlen = 0;
|
||||
var s = "";
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
s = s + str.charAt(i);
|
||||
if (str.charCodeAt(i) > 128) {
|
||||
strlen = strlen + 2;
|
||||
if (strlen >= len) {
|
||||
return s.substring(0, s.length - 1) + "...";
|
||||
}
|
||||
} else {
|
||||
strlen = strlen + 1;
|
||||
if (strlen >= len) {
|
||||
return s.substring(0, s.length - 2) + "...";
|
||||
}
|
||||
}
|
||||
}
|
||||
return s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,557 @@
|
|||
import go from 'gojs'
|
||||
import request from '@/utils/request'
|
||||
import vdcApi from '@/api/vdcApi.js'
|
||||
import vmApi from '@/api/vmApi'
|
||||
import networkApi from '@/api/networkApi'
|
||||
|
||||
/**
|
||||
* 创建磋商任务
|
||||
* cloudPlatformIds 云平台逗号分割
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export async function createConsult(cloudPlatformIds, privateIds) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/consult/createConsult',
|
||||
method: 'post',
|
||||
params: {
|
||||
cloudPlatformIds: cloudPlatformIds,
|
||||
privatePlatformIds: privateIds
|
||||
}
|
||||
}).then(data => {
|
||||
resolve(data);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 概览列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function consultList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 实例
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function vmList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/vms',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 硬盘
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function volumnList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/volumns',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据盘
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function dataVolumnList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/volumns',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据库
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function databaseList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/rds',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 中间件
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function middlewareList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/rds',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 网络
|
||||
* @param dataCenterId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function vpcList(dataCenterId) {
|
||||
return request({
|
||||
url: '/cloud/pub/v1.0/vpc/getVpcList',
|
||||
method: 'get',
|
||||
params: {
|
||||
dataCenterId: dataCenterId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'consult',
|
||||
data() {
|
||||
return {
|
||||
databaseList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '云数据库 RDS MySQL 版',
|
||||
childList: []
|
||||
}
|
||||
],
|
||||
dataList: [], // 数据列表
|
||||
privateDataList: [], // 私有云商列表
|
||||
graphData: [],
|
||||
graphLinkData: [],
|
||||
showGraph: false,
|
||||
imgSingleNormal: '/static/kt1/OWFS_DOWN.png',
|
||||
imgSingleConnect: '/static/kt1/OWFS.png',
|
||||
imgSingleConsult: '/static/kt1/OWFS_DOWN_WARNING.png',
|
||||
imgGroup: '/static/kt1/SPARK_STREAMING.png',
|
||||
detailDialogVisible: false,
|
||||
detailData: {},
|
||||
detailDataIdx: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedSupplier() {
|
||||
return this.dataList.filter(option => option.checked)
|
||||
},
|
||||
selectedPrivateSupplier() {
|
||||
return this.privateDataList.filter(option => option.checked)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
watch: {
|
||||
// 点击图的节点
|
||||
detailData: function () {
|
||||
for (let i in this.dataList) {
|
||||
if (this.dataList[i].id == this.detailData.cloudPlatformId) {
|
||||
this.detailDataIdx = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDataList() {
|
||||
this.dataList = []
|
||||
consultList().then((data) => {
|
||||
data.data.forEach(element => {
|
||||
vpcList(element.id).then((data1) => {
|
||||
element.showFlag = 'network'
|
||||
element.checked = false
|
||||
element.networkList = data1.data.pageData
|
||||
element.isLoading = false
|
||||
this.dataList.push(element)
|
||||
})
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 增加私有云
|
||||
this.privateDataList = []
|
||||
vdcApi.vdcListRequest({ withDetail: false }).then(({ data }) => {
|
||||
// 循环datacenterlist，赋默认值
|
||||
data.forEach(element => {
|
||||
element.showFlag = 'network'
|
||||
element.checked = false
|
||||
element.networkList = []
|
||||
element.instanceList = []
|
||||
element.templateList = []
|
||||
element.isLoading = false
|
||||
this.privateDataList.push(element)
|
||||
})
|
||||
// 获取全部网络
|
||||
networkApi.networkPageDataRequest({ page:1, size: 10000 }).then(data1 => {
|
||||
// 循环私有云vdc
|
||||
data.forEach(element => {
|
||||
element.networkList = []
|
||||
// 循环全部网络
|
||||
data1.data.pageData.forEach(ele => {
|
||||
if (ele.resourceDataCenterId == element.id) {
|
||||
element.networkList.push(ele)
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 获取VM
|
||||
vmApi.vmListRequest({ page:1, size: 10000 }).then(data2 => {
|
||||
data.forEach(element => {
|
||||
// element.instanceList = data2.data.pageData
|
||||
element.instanceList = []
|
||||
// 循环全部网络
|
||||
data2.data.pageData.forEach(ele => {
|
||||
if (ele.resourceDataCenterId == element.id) {
|
||||
element.instanceList.push(ele)
|
||||
}
|
||||
})
|
||||
})
|
||||
//self.table.data = data.pageData
|
||||
})
|
||||
})
|
||||
},
|
||||
async getGraphData() {
|
||||
let ids = this.selectedSupplier.map(s => s.id).join(",")
|
||||
let privateIds = this.selectedPrivateSupplier.map(s => s.id).join(",")
|
||||
|
||||
console.log('ids:' + ids)
|
||||
console.log('privateIds:' + privateIds)
|
||||
|
||||
// 创建磋商任务
|
||||
let res = await createConsult(ids, privateIds)
|
||||
console.log("create:")
|
||||
console.log(res)
|
||||
|
||||
this.graphLinkData = res.data.graphLinkDataList
|
||||
this.graphData = res.data.graphDataList
|
||||
|
||||
if (this.graphData.length > 0) {
|
||||
if (this.graphData[0].childList) {
|
||||
this.detailData = this.graphData[0].childList[0]
|
||||
} else {
|
||||
this.detailData = this.graphData[0]
|
||||
}
|
||||
}
|
||||
},
|
||||
chooseMenuItem(item, activeIndex) {
|
||||
item.isLoading = true
|
||||
switch (activeIndex) {
|
||||
case 'network':
|
||||
vpcList(item.id).then((data) => {
|
||||
item.networkList = data.data.pageData
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'instance':
|
||||
vmList(item.id).then((data) => {
|
||||
item.instanceList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'disk':
|
||||
volumnList(item.id).then((data) => {
|
||||
item.diskList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'dataDisk':
|
||||
volumnList(item.id).then((data) => {
|
||||
item.dataDiskList = data.data.type
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
case 'database':
|
||||
databaseList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
item.databaseList = this.databaseList
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break
|
||||
/* case 'middleware':
|
||||
middlewareList(item.id).then((data) => {
|
||||
this.databaseList[0].childList = data.data
|
||||
item.middlewareList = this.databaseList
|
||||
item.showFlag = activeIndex
|
||||
item.isLoading = false
|
||||
})
|
||||
break*/
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
choosePrivateMenuItem(item, activeIndex) {
|
||||
item.showFlag = activeIndex
|
||||
},
|
||||
// 点击磋商按钮
|
||||
async initGraph() {
|
||||
const self = this
|
||||
// console.log(this.selectedSupplier)
|
||||
await this.getGraphData()
|
||||
|
||||
var $$ = go.GraphObject.make
|
||||
const nodes = []
|
||||
const links = this.graphLinkData
|
||||
|
||||
for (let i = 0; i < this.selectedSupplier.length; i++) {
|
||||
for (let j = 0; j < this.graphData.length; j++) {
|
||||
if (this.graphData[j].id === this.selectedSupplier[i].id) {
|
||||
this.graphData[j].state = 2
|
||||
}
|
||||
}
|
||||
// PS：增加了一个节点，不太清楚什么意思，暂时注释掉
|
||||
// for (let k = i; k < this.selectedSupplier.length; k++) {
|
||||
// if (i !== k) {
|
||||
// links.push({ from: this.selectedSupplier[i].id, to: this.selectedSupplier[k].id, state: 1 })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
console.log(links)
|
||||
for (let i = 0; i < this.graphData.length; i++) {
|
||||
if (this.graphData[i].childList) {
|
||||
nodes.push({
|
||||
key: this.graphData[i].id,
|
||||
text: this.graphData[i].name,
|
||||
source: this.getNodeImg(this.graphData[i]),
|
||||
isGroup: true
|
||||
})
|
||||
for (let j = 0; j < this.graphData[i].childList.length; j++) {
|
||||
nodes.push({
|
||||
key: this.graphData[i].childList[j].id,
|
||||
text: this.graphData[i].childList[j].name,
|
||||
source: this.imgSingleConnect,
|
||||
group: this.graphData[i].id,
|
||||
detailData: this.graphData[i].childList[j]
|
||||
})
|
||||
}
|
||||
} else {
|
||||
nodes.push({
|
||||
key: this.graphData[i].id,
|
||||
text: this.graphData[i].name,
|
||||
source: this.getNodeImg(this.graphData[i]),
|
||||
detailData: this.graphData[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(nodes)
|
||||
|
||||
const mygoChart = document.getElementById('diagramDiv')
|
||||
console.log(mygoChart)
|
||||
const diagramParentDiv = document.getElementById('diagramParentDiv')
|
||||
diagramParentDiv.removeChild(mygoChart)
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'diagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:90vh')
|
||||
diagramParentDiv.appendChild(div)
|
||||
this.dataDiagram = $$(go.Diagram, 'diagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.CircularLayout, {
|
||||
// layerSpacing: 40,
|
||||
// columnSpacing: 20,
|
||||
// direction: 0,
|
||||
// setsPortSpots: false
|
||||
// initializeOption:go.LayeredDigraphLayout.InitNaive,
|
||||
// layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
|
||||
})
|
||||
})
|
||||
this.dataDiagram.groupTemplate = $$(
|
||||
go.Group,
|
||||
'Auto',
|
||||
{
|
||||
isSubGraphExpanded: false,
|
||||
wasSubGraphExpanded: false
|
||||
},
|
||||
$$(go.Shape, 'Rectangle', { fill: null, stroke: 'rgba(255,255,255,0)' }),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Table',
|
||||
$$('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
row: 1,
|
||||
columnSpan: 20,
|
||||
stroke: '#ffffff',
|
||||
font: 'bold 14px sans-serif',
|
||||
textAlign: 'center',
|
||||
margin: 5,
|
||||
desiredSize: new go.Size(100, 20),
|
||||
stretch: go.GraphObject.Horizontal
|
||||
},
|
||||
new go.Binding('text'),
|
||||
),
|
||||
$$(go.Picture, { row: 0, column: 1, desiredSize: new go.Size(60, 60), stretch: go.GraphObject.Horizontal }, new go.Binding('source')),
|
||||
$$(
|
||||
go.Placeholder,
|
||||
{ row: 2, columnSpan: 3, padding: 10, alignment: go.Spot.TopLeft },
|
||||
new go.Binding('padding', 'isSubGraphExpanded', function(exp) {
|
||||
return exp ? 10 : 0
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
this.dataDiagram.linkTemplate = $$(
|
||||
go.Link,
|
||||
{
|
||||
curve: go.Link.Bezier
|
||||
},
|
||||
$$(
|
||||
go.Shape,
|
||||
{
|
||||
strokeWidth: 2,
|
||||
name: 'PIPE',
|
||||
strokeDashArray: [5, 5]
|
||||
},
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
})
|
||||
),
|
||||
$$(
|
||||
go.Shape,
|
||||
{ toArrow: 'Standard', stroke: '#eeeeee', scale: 1 },
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
}), new go.Binding('visible', 'state', this.pictureVisible)
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
textAlign: 'center',
|
||||
font: '16pt helvetica, arial, sans-serif',
|
||||
segmentOffset: new go.Point(0, 10),
|
||||
margin: 4,
|
||||
editable: false
|
||||
},
|
||||
)
|
||||
)
|
||||
|
||||
this.dataDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
{ click: function(e, node) {
|
||||
if (node.data.detailData) {
|
||||
self.detailData = node.data.detailData
|
||||
self.detailDialogVisible = true
|
||||
}
|
||||
} },
|
||||
$$(go.Panel, 'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle',
|
||||
{
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
|
||||
}
|
||||
),
|
||||
$$(go.Panel, 'Table',
|
||||
$$(go.Picture, { row: 0, column: 0, rowSpan: 2, desiredSize: new go.Size(60, 60) }, new go.Binding('source')),
|
||||
$$(go.TextBlock, { row: 2, column: 0, rowSpan: 2, alignment: go.Spot.Top, margin: 5, font: 'bold 14px sans-serif ', stroke: '#ffffff' }, new go.Binding('text'))
|
||||
)
|
||||
),
|
||||
)
|
||||
function colorSet(param) {
|
||||
switch (param) {
|
||||
case 0:return 'white'
|
||||
case 1:return '#ffaa3d'
|
||||
default:return '#6e6e6e'
|
||||
}
|
||||
}
|
||||
this.dataDiagram.model = new go.GraphLinksModel(nodes, links)
|
||||
console.log(this.selectedSupplier)
|
||||
this.showGraph = true
|
||||
this.linkLoop()
|
||||
},
|
||||
quitGraph() {
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
this.dataList[i].checked = false
|
||||
}
|
||||
this.showGraph = false
|
||||
},
|
||||
getNodeImg(node) {
|
||||
if (node.childList) {
|
||||
return this.imgGroup
|
||||
} else {
|
||||
if (node.state === 0) {
|
||||
return this.imgSingleNormal
|
||||
} else if (node.state === 1) {
|
||||
return this.imgSingleConnect
|
||||
} else {
|
||||
return this.imgSingleConsult
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureVisible(key, e) {
|
||||
const state = e.part.data.state
|
||||
return state === 0
|
||||
},
|
||||
linkLoop() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
const oldskips = this.dataDiagram.skipsUndoManager
|
||||
this.dataDiagram.skipsUndoManager = true
|
||||
this.dataDiagram.links.each(function(link) {
|
||||
const shape = link.findObject('PIPE')
|
||||
const off = shape.strokeDashOffset - 2
|
||||
shape.strokeDashOffset = off <= 0 ? 20 : off
|
||||
// speed = parseInt(link.jb.flow);
|
||||
})
|
||||
this.dataDiagram.skipsUndoManager = oldskips
|
||||
this.linkLoop()
|
||||
}, 200)
|
||||
},
|
||||
cutString(str, len) {
|
||||
if (str.length * 2 <= len) { //length属性读出来的汉字长度为1
|
||||
return str;
|
||||
}
|
||||
var strlen = 0;
|
||||
var s = "";
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
s = s + str.charAt(i);
|
||||
if (str.charCodeAt(i) > 128) {
|
||||
strlen = strlen + 2;
|
||||
if (strlen >= len) {
|
||||
return s.substring(0, s.length - 1) + "...";
|
||||
}
|
||||
} else {
|
||||
strlen = strlen + 1;
|
||||
if (strlen >= len) {
|
||||
return s.substring(0, s.length - 2) + "...";
|
||||
}
|
||||
}
|
||||
}
|
||||
return s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713231217811" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4442" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M818.954142 380.096999v-40.320769h-46.713086v-40.566626c0-26.183914-21.266747-47.327731-47.327731-47.327731h-40.935414v-47.081873h-40.320768v47.081873h-61.095798v-47.081873H542.117647v47.081873h-61.095798v-47.081873h-40.320769v47.081873h-61.095798v-47.081873H339.284514v47.081873h-88.263145v87.894357h-46.713086v40.320769h46.713086v61.095798h-46.713086v40.320768h46.713086v61.095799h-46.713086v40.320768h46.713086v61.095798h-46.713086v40.320769h46.713086v41.181272c0 26.183914 21.266747 47.45066 47.45066 47.45066H339.284514v46.467227h40.320768v-46.467227h61.095798v46.467227h40.320769v-46.467227H542.117647v46.467227h40.320768v-46.467227h61.095799v46.467227h40.320768v-46.467227h88.263145v-88.631932h46.713085v-40.320769h-46.713085v-61.095798h46.713085v-40.320768h-46.713085v-61.095799h46.713085v-40.320768h-46.713085v-61.095798h46.836015z m-96.376471 343.095318H300.684754v-421.647059h421.769988v421.647059z" p-id="4443" fill="#ffffff"></path><path d="M355.634094 356.248739h134.97623V491.716687H355.634094V356.248739zM532.283313 356.248739h135.345018V491.716687H532.283313V356.248739zM532.283313 533.512605h135.345018v134.115726H532.283313V533.512605zM355.634094 533.512605h134.97623v134.115726H355.634094V533.512605z" p-id="4444" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712455747594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7991" width="12" height="12" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1024 240C1024 107.5 794.8 0 512 0S0 107.5 0 240v176h0.1c-0.1 1.8-0.1 3.5-0.1 5.3 0 3.6 0.2 7.1 0.5 10.7H0v170.7c0 1.8 0 3.6 0.1 5.3H0v176c0 132.5 229.2 240 512 240s512-107.5 512-240V608h-0.1c0.1-1.8 0.1-3.5 0.1-5.3V432h-0.5c0.3-3.5 0.5-7.1 0.5-10.7 0-1.8 0-3.6-0.1-5.3h0.1V240z m-64 544c0 16.1-8 33.1-23.8 50.5-19.8 21.9-50.7 43.1-89.4 61.2-42.3 19.8-92.1 35.5-148 46.6C639.8 954.1 577 960 512 960s-127.8-5.9-186.8-17.6c-55.9-11.1-105.7-26.8-148-46.6-38.7-18.2-69.6-39.3-89.4-61.2C72 817.1 64 800.1 64 784v-65.1c6.8 5.7 14.1 11.3 21.8 16.8 91.8 64.5 248.4 107 426.2 107s334.4-42.5 426.2-107c1.1-0.8 2.3-1.6 3.4-2.4 0.1-0.1 0.2-0.2 0.4-0.3 1-0.7 1.9-1.4 2.9-2.1 0.8-0.6 1.7-1.2 2.5-1.9 0.7-0.5 1.3-1 2-1.5 3.7-2.8 7.2-5.7 10.6-8.6V784z m0-181.3c0 15.4-7.3 31.6-21.8 48.3-0.6 0.7-1.3 1.5-2 2.2-12.5 13.9-29.5 27.4-50.1 40.1-11.9 7.4-25.1 14.4-39.3 21.1-42.3 19.8-92.1 35.5-148 46.6-59 11.7-121.9 17.6-186.8 17.6s-127.8-5.9-186.8-17.6c-55.9-11.1-105.7-26.8-148-46.6-14.2-6.7-27.3-13.7-39.3-21.1-20.6-12.7-37.6-26.3-50.1-40.1-0.7-0.7-1.3-1.5-2-2.2C71.3 634.3 64 618.1 64 602.7v-65.1c6.8 5.7 14.1 11.3 21.8 16.8 91.8 64.5 248.4 107 426.2 107s334.4-42.5 426.2-107c7.7-5.4 15-11 21.8-16.8v65.1z m0-181.4c0 15.4-7.3 31.6-21.8 48.3-0.6 0.7-1.3 1.5-2 2.2-12.5 13.9-29.5 27.4-50.1 40.1-11.9 7.4-25.1 14.4-39.3 21.1-42.3 19.8-92.1 35.5-148 46.6-59 11.7-121.9 17.6-186.8 17.6s-127.8-5.9-186.8-17.6c-55.9-11.1-105.7-26.8-148-46.6-14.2-6.7-27.4-13.7-39.3-21.1-20.6-12.7-37.6-26.3-50.1-40.1-0.7-0.7-1.3-1.5-2-2.2C71.3 453 64 436.7 64 421.3v-65.1c6.8 5.7 14.1 11.3 21.8 16.8 91.8 64.5 248.4 107 426.2 107s334.4-42.5 426.2-107c7.7-5.4 15-11 21.8-16.8v65.1z m-21.8-133c-0.6 0.7-1.3 1.5-2 2.2-12.5 13.9-29.5 27.4-50.1 40.1-11.9 7.4-25.1 14.4-39.3 21.1-42.3 19.8-92.1 35.5-148 46.6C639.8 410.1 577 416 512 416s-127.8-5.9-186.8-17.6c-55.9-11.1-105.7-26.8-148-46.6-14.2-6.7-27.3-13.7-39.3-21.1-20.6-12.7-37.6-26.3-50.1-40.1-0.7-0.7-1.3-1.5-2-2.2C71.3 271.6 64 255.4 64 240c0-16.1 8-33.1 23.8-50.5 19.8-21.9 50.7-43.1 89.4-61.2 42.3-19.8 92.1-35.5 148-46.6C384.2 69.9 447 64 512 64s127.8 5.9 186.8 17.6c55.9 11.1 105.7 26.8 148 46.6 38.7 18.2 69.6 39.3 89.4 61.2C952 206.9 960 223.9 960 240c0 15.4-7.3 31.6-21.8 48.3z" p-id="7992" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712455818511" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9685" width="12" height="12" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M554.688 682.624a42.688 42.688 0 0 0 0 85.376h0.448a42.688 42.688 0 1 0 0-85.376h-0.448zM767.488 682.624a42.688 42.688 0 0 0 0 85.376H768a42.688 42.688 0 1 0 0-85.376h-0.512z" fill="#ffffff" p-id="9686"></path><path d="M465.28 96h93.44c59.456 0 106.88 0 144.96 4.48 39.36 4.48 72.128 14.08 100.992 35.584 28.8 21.44 47.424 50.112 63.104 86.464 15.232 35.2 28.8 80.64 45.952 137.6l52.48 174.848c1.28 4.48 2.752 9.28 3.584 14.336v0.32l0.192 1.216c0.64 5.12 0.64 10.048 0.64 14.72v3.392c0 72.704 0 130.304-5.632 175.68-5.824 46.592-18.112 84.736-45.952 115.84-4.992 5.568-10.304 10.88-15.936 15.872-31.104 27.84-69.184 40.128-115.84 45.952-45.312 5.696-102.912 5.696-175.616 5.696H412.352c-72.704 0-130.304 0-175.68-5.696-46.592-5.824-84.672-18.112-115.84-45.888a202.944 202.944 0 0 1-15.872-16c-27.84-31.04-40.128-69.12-45.952-115.84-5.696-45.312-5.696-102.912-5.696-175.616v-3.328c0-4.672 0-9.664 0.704-14.784v-0.32l0.192-1.216c0.832-5.056 2.24-9.856 3.584-14.272l52.48-174.912c17.088-56.96 30.72-102.4 45.952-137.6 15.68-36.352 34.304-65.024 63.104-86.4 28.8-21.504 61.632-31.104 100.992-35.712C358.4 96 405.76 96 465.28 96zM327.68 164.032c-33.152 3.84-53.632 11.072-70.144 23.36-16.512 12.288-29.376 29.824-42.56 60.48-13.568 31.424-26.176 73.28-43.968 132.544l-42.688 142.272h767.36l-42.688-142.272c-17.792-59.264-30.4-101.12-43.968-132.48-13.184-30.72-26.048-48.256-42.56-60.544-16.512-12.288-36.992-19.52-70.144-23.36C662.336 160 618.624 160 556.736 160H467.328c-61.952 0-105.6 0-139.648 4.032zM122.496 736.64c5.056 40.128 14.528 63.616 30.144 81.088 3.456 3.84 7.04 7.488 10.88 10.88 17.536 15.68 40.96 25.088 81.152 30.144 40.96 5.12 94.464 5.184 169.92 5.184h194.816c75.456 0 129.024 0 169.92-5.184 40.128-5.056 63.616-14.464 81.152-30.08 3.84-3.456 7.424-7.104 10.88-10.944 15.616-17.536 25.088-40.96 30.08-81.088 4.672-37.248 5.12-84.928 5.248-150.016H117.312c0.064 65.088 0.512 112.768 5.184 150.016z" fill="#ffffff" p-id="9687"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712458318063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12045" width="12" height="12" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 758.08v-217.44l191.68-116.64v-6.848l0.16 0.064v221.568L512 758.048z m-32 0l-191.84-119.296v-208.256L480 541.152v216.896zM495.84 288l207.84 104L495.84 512 288 392 495.84 288z m-284.864 21.216V234.24l80.992-49.6v70.08l-80.96 54.528z m-32 0l-80.96-54.56V184.64l80.96 49.568v75.008zM291.968 152L195.008 208 97.952 152 194.976 96l96.992 56z m559.04 157.216V234.24l80.96-49.6v70.08l-80.96 54.528z m-32 0l-81.024-54.56V184.64l80.992 49.568v75.008z m112.96-157.216l-96.96 56-97.024-56L834.976 96l96.992 56zM211.008 917.216V842.24l80.96-49.6v70.08l-80.96 54.528z m-32 0l-81.024-54.56V792.64l80.992 49.568v75.008z m112.96-157.216l-96.96 56-97.024-56L194.976 704l96.992 56z m559.04 157.216V842.24l80.96-49.6v70.08l-80.96 54.528z m-32 0l-81.024-54.56V792.64l80.992 49.568v75.008z m112.96-157.216l-96.96 56-97.024-56L834.976 704l96.992 56z m-257.984 100.256v35.04A414.688 414.688 0 0 1 512 928a414.72 414.72 0 0 1-160-31.872v-34.944A382.592 382.592 0 0 0 512 896c57.888 0 112.768-12.8 161.984-35.744zM874.144 640A383.36 383.36 0 0 0 896 512c0-44.896-7.68-87.968-21.856-128h33.792A415.68 415.68 0 0 1 928 512c0 44.672-7.04 87.68-20.064 128h-33.792zM672 162.816A382.592 382.592 0 0 0 512 128c-57.088 0-111.296 12.48-160 34.816V127.872A414.72 414.72 0 0 1 512 96c56.704 0 110.72 11.328 160 31.872v34.944zM149.856 384A383.36 383.36 0 0 0 128 512c0 44.896 7.68 87.968 21.856 128H116.064A415.68 415.68 0 0 1 96 512c0-44.672 7.04-87.68 20.064-128h33.792z" fill="#ffffff" p-id="12046"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713231298207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5935" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M863.438 280.125h-704c-17.673 0-32 14.327-32 32v447.059c0 17.673 14.327 32 32 32h127.809c17.673 0 32-14.327 32-32V732.36h42.718v56.375h64V732.36h51.947v56.375h64V732.36h51.947v56.375h64V732.36h45.608v26.823c0 17.673 14.327 32 32 32h127.971c17.673 0 32-14.327 32-32V312.125c0-17.673-14.328-32-32-32z m-32 295.333h-33.559c-17.673 0-32 14.327-32 32s14.327 32 32 32h33.559v87.726h-63.971V700.36c0-17.673-14.327-32-32-32H287.246c-17.673 0-32 14.327-32 32v26.823h-63.809v-87.726h32.559c17.673 0 32-14.327 32-32s-14.327-32-32-32h-32.559V344.125h640v231.333z" fill="#e6e6e6" p-id="5936"></path><path d="M256.477 395.557h80.279v140h-80.279zM400.89 395.557h80.279v140H400.89zM545.302 395.557h80.279v140h-80.279zM689.715 395.557h80.279v140h-80.279z" fill="#e6e6e6" p-id="5937"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712458300009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10906" width="12" height="12" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M909.989 343.281c-21.76-51.446-52.904-97.643-92.568-137.307-39.663-39.664-85.86-70.808-137.306-92.568-53.28-22.536-109.858-33.962-168.164-33.962S397.067 90.87 343.787 113.406c-51.446 21.76-97.643 52.904-137.307 92.568-39.664 39.664-70.808 85.86-92.568 137.307-22.536 53.28-33.962 109.858-33.962 168.164s11.426 114.884 33.962 168.164c21.76 51.445 52.904 97.643 92.568 137.306 39.664 39.664 85.86 70.809 137.307 92.568 53.28 22.535 109.858 33.962 168.164 33.962s114.884-11.427 168.164-33.962c51.445-21.76 97.643-52.904 137.306-92.568 39.664-39.663 70.809-85.86 92.568-137.306 22.535-53.28 33.962-109.858 33.962-168.164s-11.427-114.884-33.962-168.164zM543.951 376.03c17.57-0.243 35.095-0.683 52.536-1.368a1990.762 1990.762 0 0 0 91.131-5.678c10.157 34.378 16.643 71.314 19.389 110.46H543.951V376.03z m0-64.069V163.41c17.617 12.176 39.372 29.845 61.074 54.197 23.42 26.28 43.109 56.138 58.784 89.019-41.937 3.147-82.117 4.783-119.858 5.335z m-64-144.763v144.705a2038.572 2038.572 0 0 1-103.41-4.309 1929.6 1929.6 0 0 1-11.183-0.786c15.195-31.915 34.175-60.991 56.676-86.711 20.284-23.185 40.722-40.49 57.917-52.899zM370.842 371.354a2124.301 2124.301 0 0 0 109.109 4.606v103.484H322.25c2.742-39.079 9.208-75.96 19.335-110.285 9.453 0.776 19.21 1.512 29.257 2.195z m-112.731 108.09H145.342c3.916-45.757 16.208-89.778 36.139-130.276 20.257 3.578 52.836 8.759 95.407 13.641-9.902 36.699-16.182 75.682-18.777 116.635z m-0.859 64c1.975 39.144 9.712 78.242 23.101 116.799-44.093 4.976-77.797 10.319-98.621 13.992-20.08-40.64-32.458-84.841-36.39-130.792h111.91z m64.098 0h158.601v104.048c-36.37 0.602-72.818 2.13-109.109 4.601-8.41 0.573-16.612 1.182-24.609 1.821-14.322-36.523-22.659-73.543-24.883-110.47z m158.601 168.103v131.712c-16.974-15.877-36.574-35.962-56.038-59.735-18.064-22.064-33.892-44.698-47.379-67.668a2038.38 2038.38 0 0 1 103.417-4.309z m64 136.665V711.487c34.387 0.503 70.782 1.903 108.68 4.527-13.467 22.915-29.263 45.496-47.286 67.509-21.547 26.32-43.262 48.119-61.394 64.689z m52.536-199.426a2063.187 2063.187 0 0 0-52.536-1.384V543.444h163.958c-2.227 36.975-10.582 74.045-24.939 110.615a1994.972 1994.972 0 0 0-86.483-5.273z m175.521-105.342H878.56c-3.928 45.898-16.283 90.051-36.322 130.652a1822.84 1822.84 0 0 0-93.476-13.439c13.478-38.691 21.264-77.929 23.246-117.213z m-0.859-64c-2.605-41.111-8.924-80.238-18.891-117.061a1821.491 1821.491 0 0 0 90.233-13.075c19.89 40.46 32.158 84.432 36.07 130.136H771.149z m1.017-228.215a373.188 373.188 0 0 1 34.046 39.155 1772.853 1772.853 0 0 1-75.117 9.98c-19.529-46.785-45.825-88.91-78.291-125.338a423.863 423.863 0 0 0-5.386-5.927c46.185 18.263 88.573 45.955 124.748 82.13zM384.81 165.923a420.788 420.788 0 0 0-8.355 9.102c-32.552 36.525-58.904 78.775-78.449 125.71-32.357-3.484-59.48-7.244-80.226-10.469a373.386 373.386 0 0 1 33.956-39.037c38.338-38.338 83.654-67.152 133.074-85.306zM251.736 771.659a373.444 373.444 0 0 1-33.584-38.548c22.526-3.498 52.529-7.614 88.626-11.328 18.229 35.542 41.31 70.356 68.867 103.808a678.068 678.068 0 0 0 35.727 39.995c-59.757-16.875-114.524-48.814-159.636-93.927z m368.249 91.745a677.032 677.032 0 0 0 33.629-37.814c27.469-33.344 50.487-68.043 68.689-103.466a1780.315 1780.315 0 0 1 83.528 10.88 373.34 373.34 0 0 1-33.665 38.654c-43.23 43.232-95.324 74.373-152.181 91.746z" fill="#ffffff" p-id="10907"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713231422238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8011" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M687 620H337c-19.3 0-35 15.7-35 35s15.7 35 35 35h350c19.3 0 35-15.7 35-35s-15.7-35-35-35zM610 402c16.6 0 30-13.4 30-30V262c0-16.6-13.4-30-30-30s-30 13.4-30 30v110c0 16.6 13.4 30 30 30z" p-id="8012" fill="#ffffff"></path><path d="M852 112H172c-33.1 0-60 26.9-60 60v680c0 33.1 26.9 60 60 60h680c33.1 0 60-26.9 60-60V172c0-33.1-26.9-60-60-60z m-520 70h360v256c0 7.7-6.3 14-14 14H346c-7.7 0-14-6.3-14-14V182z m510 630c0 16.6-13.4 30-30 30H212c-16.6 0-30-13.4-30-30V212c0-16.6 13.4-30 30-30h50v300c0 16.6 13.4 30 30 30h440c16.6 0 30-13.4 30-30V182h50c16.6 0 30 13.4 30 30v600z" p-id="8013" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 944 B |
|
|
@ -0,0 +1,94 @@
|
|||
#consultProcess {
|
||||
|
||||
.wholeDiv {
|
||||
.progress {
|
||||
}
|
||||
.clearfix {
|
||||
padding: 5px;
|
||||
margin-left: -8%;
|
||||
margin-top: -8%;
|
||||
}
|
||||
|
||||
.el-collapse-item {
|
||||
background: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: rgba(255, 255, 255, 0) !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 10pt;
|
||||
display: block;
|
||||
max-width: 150px; /* 设置最大宽度 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.body-card {
|
||||
margin: 5px;
|
||||
height: 44vh;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.custom-collapse {
|
||||
background-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
.datecenter-img {
|
||||
margin-left: 45% !important;
|
||||
}
|
||||
|
||||
.custom-collapse {
|
||||
background-color: transparent;
|
||||
height: 12.5vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
#consultProcessDetail{
|
||||
|
||||
.datecenter-img {
|
||||
margin-left: 45% !important;
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 10pt;
|
||||
display: block;
|
||||
max-width: 150px; /* 设置最大宽度 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 10px;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.el-progress-bar__outer {
|
||||
height: 20px !important;
|
||||
background-color: #d3d6de !important;
|
||||
}
|
||||
|
||||
|
||||
.el-progress-bar__innerText {
|
||||
margin-right: 45% !important;
|
||||
}
|
||||
|
||||
.wholeDiv {
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
.progress {
|
||||
margin-left: 4%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.clearfix_d {
|
||||
padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.progressChart {
|
||||
width: 99%;
|
||||
height: 100%;
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
.bottom {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: #01f8ff;
|
||||
text-align: center;
|
||||
height: 1rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
} font-size: 10pt;
|
||||
|
||||
.el-textarea__inner {
|
||||
background-color: #fff0;
|
||||
color: #FFFFFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div id='consultProcessDetail'>
|
||||
<div id='entirety' style="background-image: url('/static/background/background.png')">
|
||||
<div class='wholeDiv'>
|
||||
<el-row :gutter='10' style='min-height: 85vh'>
|
||||
<el-col :span='8'>
|
||||
<el-card class='card' style='overflow:auto'>
|
||||
<div class='clearfix_d'>
|
||||
<span class='title-name' :title='detailInfo.name'>{{ detailInfo.name }}</span>
|
||||
</div>
|
||||
<div style='padding-left:15px'>
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item v-for='item in detailInfo.consultInfo' :key='item.id'>
|
||||
<template slot='title'>
|
||||
<el-row style='width: 100%;height: 100%;'>
|
||||
<el-col :span='4'>
|
||||
<span>{{ item.platformName }}</span>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<span>实例：</span>
|
||||
<span>{{ item.instanceCount }}/{{ item.vmQuota }}</span>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<span>网络：</span>
|
||||
<span>{{ item.networkCount }}/{{ item.totalNetwork }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-descriptions :column='2' class='bgbl'>
|
||||
<el-descriptions-item label='硬盘'>{{ item.diskCount }}/{{ item.diskNumQuota }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='数据盘'>{{ item.dataDiskCount }}/{{ item.diskCapacityQuota }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='数据库'>{{ item.databaseCount }}/{{ item.rdsQuota }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='中间件'>{{ item.middlewareCount }}/{{ item.totalMiddleware }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<el-card class='card' style='overflow:auto'>
|
||||
<div class='clearfix_d'>
|
||||
<el-row>
|
||||
<el-col :span='20'>
|
||||
<span class='title-name' :title='detailInfo.jobInfo.name'>{{ detailInfo.jobInfo.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span='4'>
|
||||
<span style='color: rgb(84 112 198);' class='title-name'
|
||||
:title='detailInfo.jobInfo.duration'>{{ detailInfo.jobInfo.duration }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class='progress'>
|
||||
<div style='height:100%;width:100%;'>
|
||||
<div ref='chart' id='chart' style='height: 25vh'></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<el-card class='card' style='overflow:auto'>
|
||||
<div class='clearfix_d'>
|
||||
<span class='title-name' :title='detailInfo.name'>{{ detailInfo.name }}</span>
|
||||
</div>
|
||||
<div v-for='(item, index) in detailInfo.graphInfo' :key='item.id' style='padding-left: 10px;padding-right: 10px;'>
|
||||
<el-progress :color='getProgressColor(item)'
|
||||
:text-color='getProgressTextColor(item)' :percentage='item.value' :status="item.value === 100 ? 'success' : 'exception'"
|
||||
:text-inside="true"
|
||||
:format="formatText(item)"
|
||||
>
|
||||
</el-progress>
|
||||
<img v-if='checkEnd(index)' class="datecenter-img" src="/static/kt1/jiantou.png" width='35'/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span='24' style='padding: 5px;'>
|
||||
<el-card class='card' style='overflow:auto'>
|
||||
<el-input
|
||||
type='textarea'
|
||||
autosize
|
||||
placeholder='请输入内容'
|
||||
v-model='detailInfo.Loginfo'>
|
||||
</el-input>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/detail.js'>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import './css/detail.scss';
|
||||
.ellipsis {
|
||||
display: block; /* 或 inline-block，具体根据布局需要调整 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<div id="consultProcessDetail">
|
||||
<div
|
||||
id="entirety"
|
||||
style="background-image: url('/static/background/background.png')"
|
||||
>
|
||||
<div class="wholeDiv">
|
||||
<el-row :gutter="10" style="min-height: 85vh">
|
||||
<el-col :span="8">
|
||||
<el-card class="card" style="overflow: auto">
|
||||
<div class="clearfix_d">
|
||||
<span
|
||||
class="title-name"
|
||||
:title="detailInfo.name"
|
||||
>{{ detailInfo.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div style="padding-left: 15px">
|
||||
<el-row :span="24">
|
||||
<div
|
||||
v-for="item in detailInfo.consultInfos"
|
||||
:key="item.id"
|
||||
class="bgbl"
|
||||
>
|
||||
<el-row
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 15px;
|
||||
"
|
||||
>
|
||||
<el-col :span="4">
|
||||
<span style="color: #fff">{{
|
||||
item.name
|
||||
}}</span>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<span style="color: #fff"
|
||||
>CPU：</span
|
||||
>
|
||||
<span style="color: #fff"
|
||||
>{{ item.cpuUsed }}/{{
|
||||
item.cpuQuota
|
||||
}}</span
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<span style="color: #fff"
|
||||
>内存：</span
|
||||
>
|
||||
<span style="color: #fff"
|
||||
>{{ item.memoryUsed }}/{{
|
||||
item.memoryQuota
|
||||
}}</span
|
||||
>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<span style="color: #fff"
|
||||
>存储量：</span
|
||||
>
|
||||
<span style="color: #fff"
|
||||
>{{ item.capacityUsed }}/{{
|
||||
item.capacityQuota
|
||||
}}</span
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="card" style="overflow: auto">
|
||||
<div class="clearfix_d">
|
||||
<el-row style="display: flex">
|
||||
<span
|
||||
class="title-name"
|
||||
:title="detailInfo.name"
|
||||
>{{ detailInfo.name }}</span
|
||||
>
|
||||
<span
|
||||
class="title-name2"
|
||||
:title="detailInfo.timeInfo"
|
||||
>{{ detailInfo.timeInfo }}
|
||||
</span>
|
||||
<span
|
||||
class="title-name"
|
||||
id="detailTimer"
|
||||
></span>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div style="height: 100%; width: 100%">
|
||||
<div
|
||||
ref="chart"
|
||||
id="chart"
|
||||
style="height: 25vh"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="card" style="overflow: auto">
|
||||
<div class="clearfix_d">
|
||||
<span
|
||||
class="title-name"
|
||||
:title="detailInfo.name"
|
||||
>{{ detailInfo.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in detailInfo.graphInfos"
|
||||
:key="item.id"
|
||||
style="padding-left: 10px; padding-right: 10px"
|
||||
>
|
||||
<el-progress
|
||||
:color="getProgressColor(item)"
|
||||
:text-color="getProgressTextColor(item)"
|
||||
:percentage="item.value"
|
||||
:status="
|
||||
item.value === 100
|
||||
? 'success'
|
||||
: 'exception'
|
||||
"
|
||||
:text-inside="true"
|
||||
:format="formatText(item)"
|
||||
>
|
||||
</el-progress>
|
||||
<img
|
||||
v-if="checkEnd(index)"
|
||||
class="datecenter-img"
|
||||
src="/static/kt1/jiantou.png"
|
||||
width="35"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding: 5px">
|
||||
<el-card class="card" style="overflow: auto">
|
||||
<el-input
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
v-model="detailInfo.logInfo"
|
||||
>
|
||||
</el-input>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/detail.js'>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import './css/detail.scss';
|
||||
.ellipsis {
|
||||
display: block; /* 或 inline-block，具体根据布局需要调整 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.title-name2 {
|
||||
font-family: 'Alternate';
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
font-size: 10pt;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<div id='consultProcess'>
|
||||
<div id='entirety' style="background-image: url('/static/background/background.png')">
|
||||
<div class='wholeDiv'>
|
||||
<el-row :gutter='10' style='min-height: 88vh'>
|
||||
<el-col :span='12' v-for='(itemInfo, index) in dataList' :key='itemInfo.id'>
|
||||
<el-card class='body-card' style='overflow:auto'>
|
||||
<el-row :span='24' style='margin-top: -10px'>
|
||||
<el-col :span='23'>
|
||||
<span class='title-name' :title='itemInfo.name'>{{ itemInfo.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span='1'>
|
||||
<div @click='toDetail(itemInfo)'>
|
||||
<img src='/static/icon/details.png' style='margin-top: -13px;margin-left: 13px;'>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span='24'>
|
||||
<el-col :span='10'>
|
||||
<el-row>
|
||||
<div class='clearfix' style='overflow:auto'>
|
||||
<el-row>
|
||||
<el-col :span='6' :offset='18'>
|
||||
<span style='color: rgb(84 112 198);' class='title-name'
|
||||
:title='itemInfo.jobInfo.duration'>{{ itemInfo.jobInfo.duration }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class='progress'>
|
||||
<div style='height:100%;width:100%;'>
|
||||
<div ref='chart' :id="'chart' + index" style='height: 22vh'></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span='14' style='max-height: 22vh;overflow-x: auto;'>
|
||||
<div v-for='(item, index) in itemInfo.graphInfo' :key='item.id'
|
||||
style='padding-left: 10px;padding-right: 10px;'>
|
||||
<el-tooltip effect='light' :content="'进度：' + item.value + '%'" placement='top'>
|
||||
<el-progress :color='getProgressColor(item)'
|
||||
:text-color='getProgressTextColor(item)' :percentage='item.value'
|
||||
:status="item.value === 100 ? 'success' : 'exception'"
|
||||
:text-inside='true'
|
||||
:format='formatText(item)'
|
||||
>
|
||||
</el-progress>
|
||||
</el-tooltip>
|
||||
<img v-if='checkEnd(itemInfo,index)' class='datecenter-img' src='/static/kt1/jiantou.png'
|
||||
width='25' />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span='24' style='margin-top: 10px'>
|
||||
<el-col :span='24'>
|
||||
<div class='custom-collapse'>
|
||||
<el-collapse>
|
||||
<el-collapse-item v-for='item in itemInfo.consultInfo' :key='item.id' class='bgbl'>
|
||||
<template slot='title'>
|
||||
<el-row style='width: 100%;height: 100%;'>
|
||||
<el-col :span='4'>
|
||||
<span>{{ item.platformName }}</span>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<span>实例：</span>
|
||||
<span>{{ item.instanceCount }}/{{ item.vmQuota }}</span>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<span>网络：</span>
|
||||
<span>{{ item.networkCount }}/{{ item.totalNetwork }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-descriptions :column='2' class='bgbl'>
|
||||
<el-descriptions-item label='硬盘'>{{ item.diskCount }}/{{ item.diskNumQuota }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='数据盘'>{{ item.dataDiskCount }}/{{ item.diskCapacityQuota }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='数据库'>{{ item.databaseCount }}/{{ item.rdsQuota }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='中间件'>{{ item.middlewareCount }}/{{ item.totalMiddleware }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :span='24' style='padding: 5px;'>-->
|
||||
<!-- <el-card class='body-card' style='overflow:auto'>-->
|
||||
<!-- <el-input-->
|
||||
<!-- type='textarea'-->
|
||||
<!-- autosize-->
|
||||
<!-- placeholder='请输入内容'-->
|
||||
<!-- v-model='itemInfo.logInfo.msg'>-->
|
||||
<!-- </el-input>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
.wholeDiv {
|
||||
.progress {
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
padding: 5px;
|
||||
margin-left: -8%;
|
||||
margin-top: -8%;
|
||||
}
|
||||
|
||||
.el-collapse-item {
|
||||
background: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: rgba(255, 255, 255, 0) !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 10pt;
|
||||
display: block;
|
||||
max-width: 150px; /* 设置最大宽度 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.body-card {
|
||||
margin: 5px;
|
||||
height: 44vh;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.custom-collapse {
|
||||
background-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
.datecenter-img {
|
||||
margin-left: 45% !important;
|
||||
}
|
||||
|
||||
.custom-collapse {
|
||||
background-color: transparent;
|
||||
height: 12.5vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.el-progress-bar__outer {
|
||||
height: 20px !important;
|
||||
background-color: #d3d6de !important;
|
||||
}
|
||||
|
||||
|
||||
.el-progress-bar__innerText {
|
||||
margin-right: 45% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<div id="consultProcess">
|
||||
<div id="entirety" style="background-image: url('/static/background/background.png')">
|
||||
<div class="wholeDiv">
|
||||
<el-row :gutter="10" style="min-height: 88vh">
|
||||
<el-col v-for="(itemInfo, index) in dataList" :key="itemInfo.id" :span="12">
|
||||
<el-card class="body-card">
|
||||
<el-row :span="24" style="margin-top: -10px">
|
||||
<el-col :span="23">
|
||||
<span :title="itemInfo.name" class="title-name">{{ itemInfo.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<div @click="toDetail(itemInfo)">
|
||||
<img src="/static/icon/details.png" style="
|
||||
margin-top: -13px;
|
||||
margin-left: 13px;
|
||||
"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span="24" style="margin-top: 10px">
|
||||
<el-col :span="10">
|
||||
<el-row>
|
||||
<div style="overflow: auto">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span :title="itemInfo.timeInfo" class="title-name" style="color: rgb(84 112 198);
|
||||
">{{ itemInfo.timeInfo }}
|
||||
<span :id="'timer' + index" class="title-name"></span>
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<span class="title-name" style="color: rgb(84 112 198)">磋商任务开始时间：{{ convertTimestamp(itemInfo.startTime) }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div
|
||||
style="height: 100%; width: 100%;">
|
||||
<div :id="'chart' + index" ref="chart" style="height: 22vh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="14" style="max-height: 22vh; overflow-x: auto">
|
||||
<div v-for="(item, index) in itemInfo.graphInfos" :key="item.id" style="
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
">
|
||||
<el-tooltip :content="'进度：' + item.value + '%'" effect="light" placement="top">
|
||||
<el-progress :color="getProgressColor(item)" :format="formatText(item)" :percentage="item.value" :status="item.value === 100? 'success': 'exception'" :text-color="getProgressTextColor(item) " :text-inside="true">
|
||||
</el-progress>
|
||||
</el-tooltip>
|
||||
<img v-if="checkEnd(itemInfo, index)" class="datecenter-img" src="/static/kt1/jiantou.png" width="25"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span="24">
|
||||
<div v-for="item in itemInfo.consultInfos" :key="item.id" class="bgbl">
|
||||
<el-row style="width: 100%;height: 100%;margin-top: 15px;">
|
||||
<el-col :span="4">
|
||||
<span style="color: #fff">{{ item.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<span style="color: #fff">CPU：</span>
|
||||
<span style="color: #fff">{{ item.cpuUsed }}/{{ item.cpuQuota }}</span>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<span style="color: #fff">内存：</span>
|
||||
<span style="color: #fff">{{ item.memoryUsed }}/{{ item.memoryQuota }}</span>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<span style="color: #fff">存储量：</span>
|
||||
<span style="color: #fff">{{ item.capacityUsed }}/{{ item.capacityQuota }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-row>
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :span='24' style='padding: 5px;'>-->
|
||||
<!-- <el-card class='body-card' style='overflow:auto'>-->
|
||||
<!-- <el-input-->
|
||||
<!-- type='textarea'-->
|
||||
<!-- autosize-->
|
||||
<!-- placeholder='请输入内容'-->
|
||||
<!-- v-model='itemInfo.logInfo.msg'>-->
|
||||
<!-- </el-input>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
.wholeDiv {
|
||||
.progress {
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
padding: 5px;
|
||||
margin-left: -8%;
|
||||
margin-top: -8%;
|
||||
}
|
||||
|
||||
.el-collapse-item {
|
||||
background: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: rgba(255, 255, 255, 0) !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 25px;
|
||||
font-size: 13px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #d5d5d5;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions-item el-descriptions-item__cell {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26a2ff;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.body-card {
|
||||
margin: 5px;
|
||||
height: 44vh;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.custom-collapse {
|
||||
background-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
.datecenter-img {
|
||||
margin-left: 45% !important;
|
||||
}
|
||||
|
||||
.custom-collapse {
|
||||
background-color: transparent;
|
||||
height: 12.5vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.el-progress-bar__outer {
|
||||
height: 20px !important;
|
||||
background-color: #d3d6de !important;
|
||||
}
|
||||
|
||||
.el-progress-bar__innerText {
|
||||
margin-right: 45% !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
import * as echarts5 from 'echarts5'
|
||||
import request from '@/utils/request'
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 概览列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function consultList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detailInfo: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const chart = echarts5.init(document.getElementById('chart'))
|
||||
const gradient = ref({
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#8f97b8' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.25, color: '#708db9' // 25% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5, color: '#e2b5e0' // 75% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75, color: '#8be1d6' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: '#9fe0b4' // 75% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
})
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
color: gradient.value
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.detailInfo.jobInfo.value,
|
||||
name: this.detailInfo.jobInfo.status,
|
||||
title: {
|
||||
offsetCenter: ['0%', '0%']
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%']
|
||||
}
|
||||
}
|
||||
],
|
||||
title: {
|
||||
fontSize: 28,
|
||||
color: '#5470c6'
|
||||
},
|
||||
detail: {
|
||||
width: 50,
|
||||
height: 14,
|
||||
fontSize: 30,
|
||||
color: 'inherit',
|
||||
borderColor: 'inherit',
|
||||
borderRadius: 20,
|
||||
borderWidth: 0,
|
||||
formatter: '{value}%',
|
||||
show: (this.detailInfo.jobInfo.status === '')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
},
|
||||
beforeMount() {
|
||||
this.detailInfo = this.$route.params.item
|
||||
},
|
||||
methods: {
|
||||
formatText(item) {
|
||||
return () => {
|
||||
return `${item.name}`
|
||||
}
|
||||
},
|
||||
|
||||
getProgressColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#17a777'
|
||||
} else if (item.value === 0) {
|
||||
return '#f8f8fa'
|
||||
} else {
|
||||
return '#78b79e'
|
||||
}
|
||||
},
|
||||
getProgressTextColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#fff'
|
||||
} else {
|
||||
return '#585a5e'
|
||||
}
|
||||
},
|
||||
checkEnd(index) {
|
||||
if (this.detailInfo.graphInfo.length === index + 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
import * as echarts5 from 'echarts5'
|
||||
import request from '@/utils/request'
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 概览列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function consultList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detailInfo: {},
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.timer.stop()
|
||||
},
|
||||
mounted() {
|
||||
const chart = echarts5.init(document.getElementById('chart'))
|
||||
const gradient = ref({
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#8f97b8' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.25, color: '#708db9' // 25% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5, color: '#e2b5e0' // 75% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75, color: '#8be1d6' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: '#9fe0b4' // 75% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
})
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
color: gradient.value
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.detailInfo.percentage,
|
||||
// name: this.detailInfo.jobInfo.status,
|
||||
name: "",
|
||||
title: {
|
||||
offsetCenter: ['0%', '0%']
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%']
|
||||
}
|
||||
}
|
||||
],
|
||||
title: {
|
||||
fontSize: 28,
|
||||
color: '#5470c6'
|
||||
},
|
||||
detail: {
|
||||
width: 50,
|
||||
height: 14,
|
||||
fontSize: 30,
|
||||
color: 'inherit',
|
||||
borderColor: 'inherit',
|
||||
borderRadius: 20,
|
||||
borderWidth: 0,
|
||||
formatter: '{value}%',
|
||||
show: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
|
||||
if (this.detailInfo.endTime === null) {
|
||||
this.timer = new Timer('detailTimer', this.detailInfo.time);
|
||||
}
|
||||
else {
|
||||
document.getElementById('detailTimer').innerHTML = ""
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.detailInfo = this.$route.params.item;
|
||||
},
|
||||
methods: {
|
||||
formatText(item) {
|
||||
return () => {
|
||||
return `${item.name}`
|
||||
}
|
||||
},
|
||||
|
||||
getProgressColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#17a777'
|
||||
} else if (item.value === 0) {
|
||||
return '#f8f8fa'
|
||||
} else {
|
||||
return '#78b79e'
|
||||
}
|
||||
},
|
||||
getProgressTextColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#fff'
|
||||
} else {
|
||||
return '#585a5e'
|
||||
}
|
||||
},
|
||||
checkEnd(index) {
|
||||
if (this.detailInfo.graphInfos.length === index + 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
import * as echarts5 from 'echarts5'
|
||||
import request from '@/utils/request'
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function list() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/getConsultationProcess',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'consult',
|
||||
data() {
|
||||
return {
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
list().then((data) => {
|
||||
this.dataList = data.data
|
||||
data.data.forEach((item, index) => {
|
||||
this.renderChart(index, item.jobInfo.value, item.jobInfo.status)
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
formatText(item) {
|
||||
return () => {
|
||||
return `${item.name}`
|
||||
}
|
||||
},
|
||||
getProgressColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#17a777'
|
||||
} else if (item.value === 0) {
|
||||
return '#f8f8fa'
|
||||
} else {
|
||||
return '#78b79e'
|
||||
}
|
||||
},
|
||||
getProgressTextColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#fff'
|
||||
} else {
|
||||
return '#585a5e'
|
||||
}
|
||||
},
|
||||
checkEnd(item, index) {
|
||||
if (item.graphInfo.length === index + 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
renderChart(index, value, name) {
|
||||
const chart = echarts5.init(document.getElementById('chart' + index))
|
||||
const gradient = ref({
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#8f97b8' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.25, color: '#708db9' // 25% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5, color: '#e2b5e0' // 75% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75, color: '#8be1d6' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: '#9fe0b4' // 75% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
})
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
color: gradient.value
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
name: name,
|
||||
title: {
|
||||
offsetCenter: ['0%', '0%']
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%']
|
||||
}
|
||||
}
|
||||
],
|
||||
title: {
|
||||
fontSize: 28,
|
||||
color: '#5470c6'
|
||||
},
|
||||
detail: {
|
||||
width: 50,
|
||||
height: 14,
|
||||
fontSize: 30,
|
||||
color: 'inherit',
|
||||
borderColor: 'inherit',
|
||||
borderRadius: 20,
|
||||
borderWidth: 0,
|
||||
formatter: '{value}%',
|
||||
show: (name === '')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$router.push({
|
||||
name: 'consultProcessDetail',
|
||||
params: { previousPage: 'consultProcessDetail', isAdd: false, item: item, routeLevel: 3 }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
import * as echarts5 from 'echarts5'
|
||||
import request from '@/utils/request'
|
||||
import { ref } from 'vue'
|
||||
|
||||
(function () {
|
||||
var Timer = function (elementId, initialTimestamp) {
|
||||
this.element = document.getElementById(elementId);
|
||||
this.timestamp = initialTimestamp || 0;
|
||||
this.intervalId = null;
|
||||
this.start(elementId);
|
||||
};
|
||||
|
||||
Timer.prototype.start = function (elementId) {
|
||||
var self = this;
|
||||
this.intervalId = setInterval(function () {
|
||||
self.timestamp += 1000; // 每秒增加1000毫秒
|
||||
self.render(elementId);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
Timer.prototype.stop = function () {
|
||||
clearInterval(this.intervalId);
|
||||
};
|
||||
|
||||
Timer.prototype.render = function (id) {
|
||||
var hours = Math.floor(this.timestamp / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((this.timestamp % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((this.timestamp % (1000 * 60)) / 1000);
|
||||
|
||||
hours = (hours < 10) ? '0' + hours : hours;
|
||||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||||
|
||||
document.getElementById(id).innerHTML = hours + ':' + minutes + ':' + seconds;
|
||||
};
|
||||
|
||||
window.Timer = Timer;
|
||||
})();
|
||||
|
||||
|
||||
/**
|
||||
* 列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function list() {
|
||||
return request({
|
||||
// url: '/cloud/jcce/v1.0/kt1/getConsultationProcess',
|
||||
url: '/cloud/jcce/v1.0/kt1/consultationProcess',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'consult',
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
timerCount: "",
|
||||
intervalId: null,
|
||||
globalTimer: null,
|
||||
timerList: []
|
||||
}
|
||||
},
|
||||
beforeDestroy(){
|
||||
this.timerList.forEach(timer => {
|
||||
timer.stop();
|
||||
})
|
||||
clearInterval(this.globalTimer);
|
||||
this.globalTimer = null;
|
||||
},
|
||||
mounted() {
|
||||
let self = this
|
||||
self.fetchData()
|
||||
this.globalTimer = setInterval(()=> {
|
||||
self.fetchData()
|
||||
}, 10000)
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
function formatTime(milliseconds) {
|
||||
// 将毫秒数转换为秒数
|
||||
var seconds = Math.floor(milliseconds / 1000);
|
||||
// 计算小时、分钟和秒
|
||||
var hours = Math.floor(seconds / 3600);
|
||||
seconds %= 3600;
|
||||
var minutes = Math.floor(seconds / 60);
|
||||
seconds %= 60;
|
||||
|
||||
// 格式化时间
|
||||
var formattedTime = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
|
||||
return formattedTime;
|
||||
}
|
||||
|
||||
// 辅助函数，用于将数字转换为两位数的字符串，不足两位的在前面补0
|
||||
function pad(num) {
|
||||
return ("0" + num).slice(-2);
|
||||
}
|
||||
list().then((data) => {
|
||||
// 获取数据之后重置计时器
|
||||
this.timerList.forEach(timer => {
|
||||
timer.stop();
|
||||
})
|
||||
this.timerList = []
|
||||
this.dataList = data.data
|
||||
this.dataList.forEach((item, index) => {
|
||||
if (item.endTime !== null) {
|
||||
item.time = formatTime(item.endTime - item.startTime)
|
||||
item.timeInfo = "磋商已完成，用时：" + item.time
|
||||
}
|
||||
else {
|
||||
item.time = new Date().getTime() - item.startTime
|
||||
item.timeInfo = "磋商进行中，用时："
|
||||
let a = new Timer('timer' + index, item.time);
|
||||
this.timerList.push(a)
|
||||
}
|
||||
// this.renderChart(index, item.percentage, "")
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
formatText(item) {
|
||||
return () => {
|
||||
return `${item.name}`
|
||||
}
|
||||
},
|
||||
getProgressColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#17a777'
|
||||
} else if (item.value === 0) {
|
||||
return '#f8f8fa'
|
||||
} else {
|
||||
return '#78b79e'
|
||||
}
|
||||
},
|
||||
getProgressTextColor(item) {
|
||||
if (item.value === 100) {
|
||||
return '#fff'
|
||||
} else {
|
||||
return '#585a5e'
|
||||
}
|
||||
},
|
||||
checkEnd(item, index) {
|
||||
if (item.graphInfos.length === index + 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
renderChart(index, value, name) {
|
||||
const chart = echarts5.init(document.getElementById('chart' + index))
|
||||
const gradient = ref({
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: '#8f97b8' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.25, color: '#708db9' // 25% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5, color: '#e2b5e0' // 75% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75, color: '#8be1d6' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: '#9fe0b4' // 75% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
})
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '100%',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
color: gradient.value
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 15
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
name: name,
|
||||
title: {
|
||||
offsetCenter: ['0%', '0%']
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%']
|
||||
}
|
||||
}
|
||||
],
|
||||
title: {
|
||||
fontSize: 28,
|
||||
color: '#5470c6'
|
||||
},
|
||||
detail: {
|
||||
width: 50,
|
||||
height: 14,
|
||||
fontSize: 30,
|
||||
color: 'inherit',
|
||||
borderColor: 'inherit',
|
||||
borderRadius: 20,
|
||||
borderWidth: 0,
|
||||
formatter: '{value}%',
|
||||
show: (name === '')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$router.push({
|
||||
name: 'consultProcessDetail',
|
||||
params: { previousPage: 'consultProcessDetail', isAdd: false, item: item, routeLevel: 3 }
|
||||
})
|
||||
},
|
||||
convertTimestamp(timestamp) {
|
||||
var date = new Date(timestamp); // 创建一个新的Date对象
|
||||
var year = date.getFullYear(); // 获取年份
|
||||
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份
|
||||
var day = ('0' + date.getDate()).slice(-2); // 获取日
|
||||
var hours = ('0' + date.getHours()).slice(-2); // 获取小时
|
||||
var minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟
|
||||
var seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒
|
||||
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; // 格式化日期
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div id="dataShareCreate" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
|
||||
<div id="tableContainer" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%);" align="center">
|
||||
<loading v-if="loading"></loading>
|
||||
<div id="dataShareCreate_information">数据共享平台</div>
|
||||
<div class="line"></div>
|
||||
<el-form :model="form" ref="form" :rules="rules" label-width="100px" id="form" class="demo-ruleForm" :inline="true">
|
||||
<el-form-item label="数据资源名称：" prop="dataResourceName" class="custom-label-color" :rules="[{validator: rules.dataResourceName, trigger:'blur', required: true}]">
|
||||
<el-input size="small" class="w300" placeholder="请输入数据资源名称" v-model.trim="form.dataResourceName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据类型：" prop='dataType' class=" custom-label-color" :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]">
|
||||
<el-select v-model='form.dataType' placeholder='请选择'
|
||||
class="w300">
|
||||
<el-option v-for='item in typeList' :label='item.localName' :key='item.value' :value='item.value' ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据分类：" prop='dataCategory' class=" custom-label-color" :rules="[{ required: true, message: '请选择数据分类', trigger: 'change' }]">
|
||||
<el-select v-model='form.dataCategory' placeholder='请选择'
|
||||
class="w300">
|
||||
<el-option v-for='item in categoryList' :label='item.localName' :key='item.value' :value='item.value' ></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据文件：" prop="dataAttachments" class=" custom-label-color" >
|
||||
<el-upload
|
||||
class="upload-demo w300 " action="" :auto-upload=false accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.jpg,.png"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="dataHandlePreview"
|
||||
:on-change="dataHandlePreview"
|
||||
:file-list="dataAttachments">
|
||||
<el-button size="mini" type="primary">上传附件</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="证明文件：" prop="proofAttachments" class=" custom-label-color" >
|
||||
<el-upload
|
||||
class="upload-demo w300 " action="" :auto-upload=false accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.jpg,.png"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="proofHandlePreview"
|
||||
:on-change="proofHandlePreview"
|
||||
:file-list="proofAttachments">
|
||||
<el-button size="mini" type="primary">上传附件</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="封面图片："prop="imageAttachments" class=" custom-label-color" >
|
||||
<el-upload
|
||||
class="upload-demo w300 " action="" :auto-upload=false accept=".jpg,.jpeg,.png"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="imageHandlePreview"
|
||||
:on-change="imageHandlePreview"
|
||||
:file-list="imageAttachments">
|
||||
<el-button size="mini" type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<div style="margin-bottom: 30px;">
|
||||
<el-button style="margin-left: 10px;" size="small" type="primary" @click="updataClick">提交</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" @click="resetClick">返回</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
// import getUserInfo from '@/api/login'
|
||||
import parent from '@/public/parent.js'
|
||||
import rules from '@/public/rules.js'
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查字典
|
||||
export function search(type) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource/dict/' + type,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 创建数据资源
|
||||
export function createData(dataResourceName, userId, dataCategory, dataType, dataFiles) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource',
|
||||
method: 'post',
|
||||
params: {
|
||||
dataResourceName: dataResourceName,
|
||||
userId: userId,
|
||||
dataType: dataType,
|
||||
dataCategory: dataCategory,
|
||||
proprietorshipStatus: 'PENDING'
|
||||
},
|
||||
data: dataFiles
|
||||
})
|
||||
}
|
||||
export default {
|
||||
name: 'dataShareCreate',
|
||||
mixins: [parent, rules],
|
||||
data() {
|
||||
// 定义校验规则
|
||||
const validateFileUrl = (rule, value, callback) => {
|
||||
if (this.dataAttachments.length < 1) { // 我控制了FileList 长度代表文件个数
|
||||
callback(new Error('请上传数据文件'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validatePFileUrl = (rule, value, callback) => {
|
||||
if (this.proofAttachments.length < 1) { // 我控制了FileList 长度代表文件个数
|
||||
callback(new Error('请上传证明文件'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const validateIFileUrl = (rule, value, callback) => {
|
||||
if (this.imageAttachments.length < 1) { // 我控制了FileList 长度代表文件个数
|
||||
callback(new Error('请上传封面图片'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
rules: {
|
||||
dataResourceName: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入数据资源名称'))
|
||||
} {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
dataAttachments: [{ required: true, validator: validateFileUrl, trigger: 'change' }],
|
||||
proofAttachments: [{ required: true, validator: validatePFileUrl, trigger: 'change' }],
|
||||
imageAttachments: [{ required: true, validator: validateIFileUrl, trigger: 'change' }],
|
||||
password: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
},
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
dataAttachments: [],
|
||||
proofAttachments: [],
|
||||
imageAttachments: [],
|
||||
form: {
|
||||
dataResourceName: '',
|
||||
proprietorshipStatus: 'PENDING',
|
||||
dataType: '',
|
||||
dataCategory: '',
|
||||
description: ''
|
||||
},
|
||||
categoryList: [],
|
||||
typeList: [],
|
||||
authorityList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getBaseDatas()
|
||||
},
|
||||
computed: {
|
||||
currentUser() {
|
||||
return this.$store.getters.user
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateDataAttachments(rule, value, callback) {
|
||||
if (this.dataAttachments.length === 0) {
|
||||
callback(new Error('请上传数据文件'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
},
|
||||
imageHandlePreview(file, files) {
|
||||
if (!!file && file.size > 5 * 1024 * 1024) {
|
||||
this.$message({ showClose: true, message: this.$t('createVM.validate.file_size'), type: 'error' })
|
||||
files.pop()
|
||||
}
|
||||
this.imageAttachments = files
|
||||
},
|
||||
dataHandlePreview(file, files) {
|
||||
this.dataAttachments = files
|
||||
},
|
||||
proofHandlePreview(file, files) {
|
||||
if (!!file && file.size > 5 * 1024 * 1024) {
|
||||
this.$message({ showClose: true, message: this.$t('createVM.validate.file_size'), type: 'error' })
|
||||
files.pop()
|
||||
}
|
||||
this.proofAttachments = files
|
||||
},
|
||||
getBaseDatas() {
|
||||
// 分类
|
||||
search('category').then((data) => {
|
||||
this.categoryList = data.data
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 类型
|
||||
search('type').then((data) => {
|
||||
this.typeList = data.data
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 确权状态
|
||||
this.authorityList = [
|
||||
{ id: '0', label: '全部', value: '' },
|
||||
{ id: '1', label: '待确认', value: 'PENDING' },
|
||||
{ id: '2', label: '确权中', value: 'CONFIRMING' },
|
||||
{ id: '3', label: '已通过', value: 'APPROVED' },
|
||||
{ id: '4', label: '驳回', value: 'REJECTED' }
|
||||
]
|
||||
},
|
||||
// 保存 创建数据资源
|
||||
updataClick() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
var _self = this
|
||||
const dataFiles = new FormData()
|
||||
if (!!_self.dataAttachments && _self.dataAttachments.length > 0) {
|
||||
dataFiles.append('dataFile', _self.dataAttachments[0].raw)
|
||||
}
|
||||
|
||||
// const proofFile = new FormData()
|
||||
if (!!_self.proofAttachments && _self.proofAttachments.length > 0) {
|
||||
dataFiles.append('proofFile', _self.proofAttachments[0].raw)
|
||||
}
|
||||
|
||||
// const imageFile = new FormData()
|
||||
if (!!_self.imageAttachments && _self.imageAttachments.length > 0) {
|
||||
dataFiles.append('imageFile', _self.imageAttachments[0].raw)
|
||||
}
|
||||
|
||||
createData(
|
||||
_self.form.dataResourceName,
|
||||
_self.currentUser['id'], // userId
|
||||
_self.form.dataCategory,
|
||||
_self.form.dataType,
|
||||
dataFiles).then(res => {
|
||||
// _self.mloading.hide()
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: '创建成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push({ name: 'dataShare', params: { previousPage: 'pubCloud', routeLevel: 3 }})
|
||||
} else {
|
||||
this.$message({ showClose: true, message: error.msg, type: 'error' })
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
resetClick() {
|
||||
this.$router.push({ name: 'dataShare', params: { previousPage: 'pubCloud', routeLevel: 3 }})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataAttachments(nowval, oldval) {
|
||||
this.$refs['form'].validateField('dataAttachments');
|
||||
},
|
||||
imageAttachments(nowval, oldval) {
|
||||
this.$refs['form'].validateField('imageAttachments');
|
||||
},
|
||||
proofAttachments(nowval, oldval) {
|
||||
this.$refs['form'].validateField('proofAttachments');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './css/dataShare.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
|
||||
.custom-label-color .el-form-item__label {
|
||||
color: #FFFFFF; /* 白色 */
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
color: #FFFFFF; /* 白色 */
|
||||
}
|
||||
#dataShareCreate {
|
||||
#expireNoteContainer {
|
||||
width: 100%;
|
||||
font-size: 35px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.line {
|
||||
align: center;
|
||||
height: 1px;
|
||||
background: #CED2DB;
|
||||
overflow: hidden;
|
||||
width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tableContainer {
|
||||
width: 780px;
|
||||
border: 1px solid #B3BFD7;
|
||||
margin: 0px auto 20px;
|
||||
-moz-box-shadow: 4px 4px 2px #F1F1F3;
|
||||
}
|
||||
|
||||
#dataShareCreate_information {
|
||||
margin: 0;
|
||||
color: #8C95A6;
|
||||
text-align: center;
|
||||
padding: 18px 0 13px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#ipsLabel, #macsLabel {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
#authentic{
|
||||
.radio{
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.el-radio-button__inner {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
width: 75px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
padding: 7px 7px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.subtitle-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 11pt;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
.el-card__body{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color:white ;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height:19px
|
||||
}
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-inner {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-wrapper {
|
||||
margin-left: 38px;
|
||||
min-width: 1230px;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 85px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.detail-image {
|
||||
width: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: white;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 20px 5%;
|
||||
}
|
||||
.detail-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 0 5%;
|
||||
}
|
||||
.detail-description{
|
||||
margin: 20px 5% 0;
|
||||
}
|
||||
|
||||
.data-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-description{
|
||||
color:white;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions--medium.is-bordered .el-descriptions-item__cell {
|
||||
padding: 10px;
|
||||
color: whitesmoke;
|
||||
width: 16.66%;
|
||||
}
|
||||
.el-descriptions-item__label.is-bordered-label {
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
background: rgba(150, 150, 150, 0.26);
|
||||
}
|
||||
div.el-pagination {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
background: center center no-repeat #fff0;
|
||||
background-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-pager li {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
.el-pager li.active {
|
||||
color: #409EFF;
|
||||
cursor: default;
|
||||
}
|
||||
.el-pagination__total {
|
||||
color: #cccccc;
|
||||
}
|
||||
.el-pagination__jump {
|
||||
color: #cccccc;
|
||||
}
|
||||
.el-pagination__editor.el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
.el-pagination .el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
/* .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
|
||||
background-color: #494949;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
overflow: scroll;
|
||||
background: black;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
background: black;
|
||||
}*/
|
||||
.detail-card{
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
-webkit-box-shadow: -1px 0 0 0 #409EFF;
|
||||
box-shadow: 0 0 0 0 #409EFF;
|
||||
color: #5ea1ff;
|
||||
background-color: transparent !important;
|
||||
border-color: #b2d4ef !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,377 @@
|
|||
<!-- 数据共享 -->
|
||||
<template>
|
||||
<div id='authentic'>
|
||||
<div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div v-show='!showDataDetail&&!showSupplierDetail'>
|
||||
<!-- 上面筛选条件 -->
|
||||
<div class='filter-wrapper'>
|
||||
<div class='filter-inner' style='margin-top: 20px'>
|
||||
<span style='color:white;width: 80px'>分类：</span>
|
||||
<el-radio-group v-model='selectedCategory' size='small'>
|
||||
<el-radio-button plain v-for='item in categoryList' :key='item.id' class='radio' :label='item.value'>
|
||||
<div>{{ item.localName }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class='filter-inner'>
|
||||
<span style='color:white;width: 80px'>类型：</span>
|
||||
<el-radio-group v-model='selectedType' size='small'>
|
||||
<el-radio-button plain v-for='item in typeList' :key='item.id' class='radio' :label='item.value'>
|
||||
<div>{{ item.localName }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class='filter-inner'>
|
||||
<span style='color:white;width: 80px'>确权状态：</span>
|
||||
<el-radio-group v-model='proprietorshipStatus' size='small'>
|
||||
<el-radio-button plain v-for='item in authorityList' :key='item.id' class='radio' :label='item.value'>
|
||||
<div>{{ item.label }}</div>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button type='primary' size='mini' @click='searchForList(0)' style='width: 75px;margin-top: 5px;margin-left: 6.5%;'>筛选</el-button>
|
||||
</div>
|
||||
<el-button type='success' size='mini' @click='create()' style='width: 75px;margin-top: 5px;margin-left: 90%;display: block;'>新建</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class='list-wrapper'>
|
||||
<el-card v-for='item in dataList' :key='item.id' style='margin: 10px'>
|
||||
<div class='card-content'>
|
||||
<div>
|
||||
<el-image :src='item.imageUrl' alt='数据图片' class='card-image' />
|
||||
</div>
|
||||
<div style='margin-top: 10px;margin-left: 30px'>
|
||||
<el-row style='width: 70%'>
|
||||
<el-col :span='6'>
|
||||
<el-tooltip placement='right'>
|
||||
<!-- <div slot="content">所有权：{{item.ownRight}}<br/>-->
|
||||
<!-- 交易权：<span v-for='tradingItem in item.tradingRightList'>{{tradingItem.name}}  </span><br/>-->
|
||||
<!-- 使用权：<span v-for='usingItem in item.usingRightList'>{{usingItem.name}}  </span></div>-->
|
||||
<span class='data-name' @click='toDataDetail(item)'>{{ item.name }}</span>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span='4'>
|
||||
<el-tag :type="item.proprietorshipStatus === 'APPROVED' ?'success':'warning'"
|
||||
style='margin-left: 20px' effect='dark'>{{ item.proprietorshipStatusLocalName }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
<el-col :span='4'>
|
||||
<!-- <el-tag :type='checkStatus(item.resourceApplyStatus)' effect='dark'>
|
||||
{{ item.resourceApplyStatusLocalName }}
|
||||
</el-tag> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style='margin-top: 10px'>
|
||||
<span class='text-description'>{{ item.description }}</span>
|
||||
</div>
|
||||
<div style='display:flex;justify-content:space-between;align-items:center;margin-top:20px;'>
|
||||
<el-descriptions :column='4'>
|
||||
<el-descriptions-item label='供应商'>
|
||||
<!-- <el-tooltip placement='right'>
|
||||
<span style='cursor: pointer'>{{ item.dataSupplier }}</span>
|
||||
</el-tooltip> -->
|
||||
{{ item.dataSupplier }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label='分类'>{{ item.dataCategory }}</el-descriptions-item>
|
||||
<el-descriptions-item label='类型'>{{ item.dataType }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 下载按钮，已确权的显示下载按钮 -->
|
||||
<el-button v-if='item.proprietorshipStatus == "APPROVED"' style='margin-top: -12px;' type='success'
|
||||
size='mini' @click='download(item.id)'>下载
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div style='margin-right: 30px'>
|
||||
<el-pagination
|
||||
@size-change='handleSizeChange'
|
||||
:page-sizes='[5, 10, 15, 20]'
|
||||
layout='total, sizes, prev, pager, next, jumper'
|
||||
:total='totalItems'
|
||||
:page-size='pageSize'
|
||||
@current-change='handlePageChange'
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 明细 -->
|
||||
<div v-show='showDataDetail' style='width: 80%'>
|
||||
<el-card class='detail-card'>
|
||||
<el-button type='text' @click='showDataDetail=false'
|
||||
style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
|
||||
</el-button>
|
||||
<div class='detail-content' style='font-size: 11pt'>
|
||||
<img :src='currentDataDetail.image' alt='数据图片' class='detail-image' style='margin-top: 30px' />
|
||||
<div style='margin-top: 30px;margin-left: 30px'>
|
||||
<el-row style='width: 90%'>
|
||||
<el-col :span='9'>
|
||||
<span class='data-name' style='font-size: 14pt'>{{ currentDataDetail.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span='6'>
|
||||
<el-tag :type="currentDataDetail.isAuthorized?'success':'warning'" style='margin-left: 20px'
|
||||
effect='dark'>{{ currentDataDetail.isAuthorized ? '已确权' : '确权中' }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='text-description'>{{ currentDataDetail.description }}</span>
|
||||
</div>
|
||||
<el-descriptions :column='2' style='margin-top:20px;width: 50%;font-size: 11pt'>
|
||||
<el-descriptions-item label='数据提供者'>{{ currentDataDetail.dataSupplier }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='detail-card'>
|
||||
<div class='detail-description'>
|
||||
<div>
|
||||
<span class='title-name'>数据信息：</span>
|
||||
</div>
|
||||
<el-descriptions title=' ' :column='3' style='width:100%;font-size: 11pt' border>
|
||||
<el-descriptions-item label='数据名称'>{{ currentDataDetail.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据类型'>{{ currentDataDetail.dataType }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据分类'>{{ currentDataDetail.dataCategory }}</el-descriptions-item>
|
||||
<el-descriptions-item label='注册时间'>{{ currentDataDetail.registrationTime | formatDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据格式'>{{ currentDataDetail.dataFormat }}</el-descriptions-item>
|
||||
<el-descriptions-item label='数据大小'>{{ currentDataDetail.dataSize }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='title-name'>数据样例：</span>
|
||||
</div>
|
||||
<el-descriptions title='' :column='3' style='width:100%;font-size: 11pt;margin-top: 20px' border>
|
||||
<el-descriptions-item v-for='item in currentDataDetail.dataExample' :key='item.label'
|
||||
:label='item.label'>
|
||||
{{ item.value }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='detail-card'>
|
||||
<div class='detail-description' style='padding-bottom:0;'>
|
||||
<div>
|
||||
<span class='title-name'>权属信息：</span>
|
||||
</div>
|
||||
<div id='diagramParentDiv' style=' width:100%;height:50vh'>
|
||||
<div id='dataDiagramDiv' style=' width:100%;height:45vh' />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div v-show='showSupplierDetail' style='width: 80%'>
|
||||
<el-card class='detail-card'>
|
||||
<el-button type='text' @click='showSupplierDetail=false'
|
||||
style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
|
||||
</el-button>
|
||||
<div class='detail-description' style='padding-bottom:0;'>
|
||||
<div>
|
||||
<span class='title-name'>账户信息：</span>
|
||||
</div>
|
||||
|
||||
<div id='supplierParentDiv'>
|
||||
<div id='supplierDiagramDiv' style=' width:100%;height:20vh' />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class='detail-card'>
|
||||
<el-tabs v-model='activeName' type='card'>
|
||||
<el-tab-pane label='数据登记信息' name='1'>
|
||||
<div class='detail-description'>
|
||||
<!--<div>
|
||||
<span class="title-name">数据登记信息：</span>
|
||||
</div>-->
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>已确权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.confirmedDataList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(scope.row)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='registrationTime' label='注册时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='confirmedTime' label='确权时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>未确权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.unconfirmedDataList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='registrationTime' label='注册时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='数据交易信息' name='2'>
|
||||
<div class='detail-description'>
|
||||
<!--<div>
|
||||
<span class="title-name">数据交易信息：</span>
|
||||
</div>-->
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>交易权授权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.authorisedTradingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorisedTime' label='授权时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='被授权方'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>使用权授权：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.authorisedUsingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorisedTime' label='授权时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='被授权方'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='数据购买信息' name='3'>
|
||||
<div class='detail-description'>
|
||||
<!--<div>
|
||||
<span class="title-name">数据购买信息：</span>
|
||||
</div>-->
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>交易权购买：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.purchasedTradingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='purchasedTime' label='购买时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='授权方'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='margin-top: 20px'>
|
||||
<span class='subtitle-name'>使用权购买：</span>
|
||||
</div>
|
||||
<div style='height: 40vh' class='table_box'>
|
||||
<el-table
|
||||
:data='currentSupplierDetail.purchasedUsingList'
|
||||
height='38vh'
|
||||
:header-row-style="{height: '4vh'}"
|
||||
border
|
||||
style='width:100%'>
|
||||
<el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='purchasedTime' label='购买时间'
|
||||
:show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='authorizedSupplier' label='授权方'>
|
||||
<template slot-scope='scope'>
|
||||
<el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
|
||||
{{ scope.row.authorizedSupplier }}
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
//src: url('../../assets/iconfont/Alternate.ttf');
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import 'src/views/kt1/dataShare/css/dataShare';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,780 @@
|
|||
import go from 'gojs'
|
||||
import request from '@/utils/request'
|
||||
import Cookies from 'js-cookie'
|
||||
import axios from 'axios'
|
||||
import store from '@/store'
|
||||
import { getToken } from '@/utils/auth'
|
||||
/**
|
||||
* 列表
|
||||
* @returns {*}
|
||||
*/
|
||||
export function list(pageNo, pageSize, proprietorshipStatus, category, type) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataShareResource',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
proprietorshipStatus: proprietorshipStatus,
|
||||
category: category,
|
||||
type: type
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 申请
|
||||
* @returns {*}
|
||||
*/
|
||||
export function applyDataResource(resourceId, userId, applyNote) {
|
||||
return request({
|
||||
// url: `/cloud/jcce/v1.0/kt1/userResourceApply/${resourceId}/${userId}`,
|
||||
url: '/cloud/jcce/v1.0/kt1/userResourceApply',
|
||||
method: 'post',
|
||||
params: {
|
||||
resourceId: resourceId,
|
||||
userId: userId,
|
||||
applyNote: applyNote
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function downloadNew(id) {
|
||||
axios.get('/cloud/jcce/v1.0/kt1/download?id=' + id + '&fileType=DATA_FILE', {
|
||||
headers: {
|
||||
Authorization: getToken()
|
||||
},
|
||||
responseType: 'blob'
|
||||
}).then(res => {
|
||||
// 这里的type最好参考Response Headers里面的content-type，有可能是application/vnd.ms-excel
|
||||
const blob = new Blob([res.data])
|
||||
// 获取文件名，根据自己需要的分割
|
||||
const content = res.headers['content-disposition']
|
||||
const index = content.indexOf('filename=')
|
||||
let fileName = content.substring(index + 9) // 截取文件名
|
||||
fileName = decodeURIComponent(fileName).replace(new RegExp('"', 'g'), '')
|
||||
const a = document.createElement('a')
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.href = url
|
||||
a.download = fileName
|
||||
document.body.appendChild(a)
|
||||
a.style.display = 'none'
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
window.URL.revokeObjectURL(url)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索条件
|
||||
* @returns {*}
|
||||
*/
|
||||
export function search(type) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/dataResource/dict/' + type,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'dataShare',
|
||||
data() {
|
||||
return {
|
||||
fileServerBaseUrl: '/cloud/jcce/v1.0/kt1/download?fileType=IMAGE_FILE&id=',
|
||||
firstInfo: {
|
||||
id: 0,
|
||||
value: '',
|
||||
localName: '全部'
|
||||
},
|
||||
imageUrl: '',
|
||||
imageAlt: '',
|
||||
categoryList: [],
|
||||
typeList: [],
|
||||
authorityList: [],
|
||||
selectedCategory: '',
|
||||
selectedType: '',
|
||||
proprietorshipStatus: '',
|
||||
dataList: [], // 数据列表
|
||||
totalItems: 0, // 总数据条数
|
||||
pageSize: 10, // 每页显示条数
|
||||
currentPage: 1, // 当前页码
|
||||
showDataDetail: false,
|
||||
currentDataDetail: {},
|
||||
showSupplierDetail: false,
|
||||
currentSupplierDetail: {},
|
||||
dataDiagram: null,
|
||||
supplierDiagram: null,
|
||||
activeName: '1',
|
||||
userImg: '/static/kt1/user.svg',
|
||||
reportImg: '/static/kt1/report.svg'
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getBaseDatas()
|
||||
this.searchForList()
|
||||
},
|
||||
methods: {
|
||||
checkStatus(status) {
|
||||
var type = ''
|
||||
switch (status) {
|
||||
case 'NOT_SUBMITTED':
|
||||
break
|
||||
case 'SUBMITTED':
|
||||
type = 'info'
|
||||
break
|
||||
case 'AUDIT_APPROVE':
|
||||
type = 'warning'
|
||||
break
|
||||
case 'REJECTED':
|
||||
type = 'danger'
|
||||
break
|
||||
case 'DOWNLOADABLE':
|
||||
type = 'success'
|
||||
break
|
||||
}
|
||||
return type
|
||||
},
|
||||
buttonLabel(resourceApplyStatus) {
|
||||
var name = ''
|
||||
switch (resourceApplyStatus) {
|
||||
case 'NOT_SUBMITTED':
|
||||
name = '数据申请'
|
||||
break
|
||||
case 'SUBMITTED':
|
||||
name = '数据申请'
|
||||
break
|
||||
case 'AUDIT_APPROVE':
|
||||
name = '数据申请'
|
||||
break
|
||||
case 'REJECTED':
|
||||
name = '重新申请'
|
||||
break
|
||||
case 'DOWNLOADABLE':
|
||||
name = '下载'
|
||||
break
|
||||
}
|
||||
return name
|
||||
},
|
||||
download(id) {
|
||||
downloadNew(id)
|
||||
},
|
||||
getBaseDatas() {
|
||||
// 分类
|
||||
search('category').then((data) => {
|
||||
this.categoryList = data.data
|
||||
this.categoryList.unshift(this.firstInfo)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 类型
|
||||
search('type').then((data) => {
|
||||
this.typeList = data.data
|
||||
this.typeList.unshift(this.firstInfo)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// 确权状态
|
||||
this.authorityList = [
|
||||
{ id: '0', label: '全部', value: '' },
|
||||
{ id: '1', label: '待确认', value: 'PENDING' },
|
||||
{ id: '2', label: '确权中', value: 'CONFIRMING' },
|
||||
{ id: '3', label: '已通过', value: 'APPROVED' },
|
||||
{ id: '4', label: '驳回', value: 'REJECTED' }
|
||||
]
|
||||
},
|
||||
searchForList(vr) {
|
||||
if (vr === 0) { // 点击筛选的时候，设置为第一页
|
||||
this.currentPage = 1
|
||||
}
|
||||
// 获取用户信息
|
||||
const userInfo = JSON.parse(Cookies.get('user'))
|
||||
list(this.currentPage, this.pageSize, this.proprietorshipStatus, this.selectedCategory, this.selectedType).then((data) => {
|
||||
this.dataList = data.data.pageData
|
||||
this.totalItems = data.data.total
|
||||
this.dataList.forEach(item => {
|
||||
item.imageUrl = this.fileServerBaseUrl + item.id
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
create() {
|
||||
this.$router.push({ name: 'dataShareCreate', params: { previousPage: 'dataShare', routeLevel: 3 } })
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page
|
||||
this.searchForList()
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.searchForList()
|
||||
},
|
||||
toDataDetail(item) {
|
||||
// eslint-disable-next-line no-empty
|
||||
if (item === -1) {
|
||||
this.currentDataDetail = {
|
||||
id: 0,
|
||||
image: '/static/kt1/authenticImg.png',
|
||||
name: '电商经营分析报告',
|
||||
isAuthorized: false,
|
||||
description: '从经营、工商、司法等多维度数据分析电商客户综合实力和资信，降低金融机构的信息搜寻成本。',
|
||||
supplier: '供应商J',
|
||||
dataSupplier: '供应商J',
|
||||
dataCategory: '生产管理',
|
||||
dataType: '数据报告',
|
||||
price: '￥70',
|
||||
dataIdentification: '1',
|
||||
registrationTime: '2022-08-08',
|
||||
dataSize: '18 MB',
|
||||
dataFormat: '.docx',
|
||||
ownRight: 'XXX有限公司',
|
||||
tradingRightList: [{ id: 0, name: '用户1' }, { id: 1, name: '用户2' }, { id: 2, name: '用户3' }],
|
||||
usingRightList: [{ id: 0, name: '用户1' }, { id: 1, name: '用户2' }, { id: 2, name: '用户3' }],
|
||||
dataExample: [{ label: '用户留存率', value: '33%' }, { label: '用户数量', value: '' },
|
||||
{ label: '年度销售额', value: '100w' }, { label: '季度销售额', value: '33w' }, {
|
||||
label: '商品成本',
|
||||
value: '20w'
|
||||
},
|
||||
{ label: '运营费用', value: '20w' }, { label: '市场推广费用', value: '20w' }, {
|
||||
label: '人力资源费用',
|
||||
value: '20w'
|
||||
},
|
||||
{ label: '利润', value: '20w' }, { label: '净利率', value: '20%' }]
|
||||
}
|
||||
} else {
|
||||
this.currentDataDetail = item
|
||||
console.log(item.id)
|
||||
}
|
||||
this.showSupplierDetail = false
|
||||
this.showDataDetail = true
|
||||
this.initDataGraph()
|
||||
},
|
||||
initDataGraph() {
|
||||
var $$ = go.GraphObject.make // for conciseness in defining templates
|
||||
const nodes = []
|
||||
const links = []
|
||||
|
||||
console.log(this.currentDataDetail)
|
||||
nodes.push({
|
||||
key: '0',
|
||||
text: this.currentDataDetail.name,
|
||||
source: this.reportImg
|
||||
})
|
||||
nodes.push({
|
||||
key: '1',
|
||||
text: '所有权'
|
||||
})
|
||||
nodes.push({
|
||||
key: '1-1',
|
||||
text: this.currentDataDetail.ownRight,
|
||||
source: this.userImg
|
||||
})
|
||||
nodes.push({
|
||||
key: '2',
|
||||
text: '交易权'
|
||||
})
|
||||
nodes.push({
|
||||
key: '3',
|
||||
text: '使用权'
|
||||
})
|
||||
links.push({ from: '0', to: '1' })
|
||||
links.push({ from: '0', to: '2' })
|
||||
links.push({ from: '0', to: '3' })
|
||||
links.push({ from: '1', to: '1-1' })
|
||||
|
||||
for (let i = 0; i < this.currentDataDetail.tradingRightList.length; i++) {
|
||||
nodes.push({
|
||||
key: 2 + '-' + this.currentDataDetail.tradingRightList[i].id,
|
||||
text: this.currentDataDetail.tradingRightList[i].name,
|
||||
source: this.userImg
|
||||
})
|
||||
links.push({ from: '2', to: 2 + '-' + this.currentDataDetail.tradingRightList[i].id })
|
||||
}
|
||||
for (let i = 0; i < this.currentDataDetail.usingRightList.length; i++) {
|
||||
nodes.push({
|
||||
key: 3 + '-' + this.currentDataDetail.usingRightList[i].id,
|
||||
text: this.currentDataDetail.usingRightList[i].name,
|
||||
source: this.userImg
|
||||
})
|
||||
links.push({ from: '3', to: 3 + '-' + this.currentDataDetail.usingRightList[i].id })
|
||||
}
|
||||
|
||||
const mygoChart = document.getElementById('myDiagramDiv')
|
||||
console.log(mygoChart)
|
||||
const diagramParentDiv = document.getElementById('diagramParentDiv')
|
||||
if (mygoChart) {
|
||||
diagramParentDiv.removeChild(mygoChart)
|
||||
}
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'dataDiagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:45vh')
|
||||
diagramParentDiv.appendChild(div)
|
||||
this.dataDiagram = $$(go.Diagram, 'dataDiagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.LayeredDigraphLayout, {
|
||||
layerSpacing: 40,
|
||||
columnSpacing: 20,
|
||||
direction: 90,
|
||||
setsPortSpots: false
|
||||
// initializeOption:go.LayeredDigraphLayout.InitNaive,
|
||||
// layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
|
||||
})
|
||||
})
|
||||
this.dataDiagram.linkTemplate = $$(
|
||||
go.Link,
|
||||
{
|
||||
curve: go.Link.Bezier
|
||||
},
|
||||
$$(
|
||||
go.Shape,
|
||||
{
|
||||
strokeWidth: 1,
|
||||
name: 'PIPE',
|
||||
stroke: '#eeeeee'
|
||||
}
|
||||
),
|
||||
$$(
|
||||
go.Shape,
|
||||
{ toArrow: 'Standard', stroke: '#eeeeee', scale: 1 }
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
textAlign: 'center',
|
||||
font: '16pt helvetica, arial, sans-serif',
|
||||
segmentOffset: new go.Point(0, 10),
|
||||
margin: 4,
|
||||
editable: false
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
this.dataDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
$$(go.Panel, 'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle',
|
||||
{
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
|
||||
}
|
||||
),
|
||||
$$(go.Panel, 'Table',
|
||||
$$(go.Picture, {
|
||||
row: 0,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
desiredSize: new go.Size(20, 23)
|
||||
}, new go.Binding('source'), new go.Binding('visible', 'key', this.pictureVisible)),
|
||||
$$(go.TextBlock, {
|
||||
row: 2,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 14px sans-serif ',
|
||||
stroke: '#ffffff'
|
||||
}, new go.Binding('text'))
|
||||
)
|
||||
)
|
||||
)
|
||||
this.dataDiagram.model = new go.GraphLinksModel(nodes, links)
|
||||
},
|
||||
|
||||
toSupplierDetail(supplier) {
|
||||
this.showSupplierDetail = false // 假装刷新
|
||||
const self = this
|
||||
setTimeout(function() {
|
||||
console.log(supplier)
|
||||
// getSupplierDetail
|
||||
self.currentSupplierDetail = {
|
||||
ownRightList: [{ id: 0, name: '数据1' }, { id: 1, name: '数据2' }, { id: 2, name: '数据3' }],
|
||||
tradingRightList: [{ id: 3, name: '数据A' }, { id: 4, name: '数据B' }, { id: 5, name: '数据C' }],
|
||||
usingRightList: [{ id: 6, name: '数据1' }, { id: 7, name: '数据2' }, { id: 8, name: '数据3' }],
|
||||
confirmedDataList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '电商经营分析报告',
|
||||
category: '生产管理',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08',
|
||||
confirmedTime: '2022-08-08'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '电商经营分析报告1',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08',
|
||||
confirmedTime: '2022-08-08'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电商经营分析报告2',
|
||||
category: '生产管理',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08',
|
||||
confirmedTime: '2022-08-08'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '电商经营分析报告3',
|
||||
category: '人工智能',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08',
|
||||
confirmedTime: '2022-08-08'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '电商经营分析报告4',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08',
|
||||
confirmedTime: '2022-08-08'
|
||||
}],
|
||||
unconfirmedDataList: [
|
||||
{
|
||||
id: 5,
|
||||
name: '电商经营分析报告5',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '电商经营分析报告6',
|
||||
category: '生产管理',
|
||||
type: '数据报告',
|
||||
registrationTime: '2022-07-08'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '电商经营分析报告7',
|
||||
category: '人工智能',
|
||||
type: '数据接口',
|
||||
registrationTime: '2022-07-08'
|
||||
},
|
||||
{ id: 8, name: '电商经营分析报告8', category: '生产管理', type: '其他', registrationTime: '2022-07-08' }],
|
||||
authorisedTradingList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '电商经营分析报告',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商A'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '电商经营分析报告1',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商B'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电商经营分析报告2',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商C'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '电商经营分析报告3',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商D'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '电商经营分析报告4',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商E'
|
||||
}],
|
||||
authorisedUsingList: [
|
||||
{
|
||||
id: 5,
|
||||
name: '电商经营分析报告5',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商A'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '电商经营分析报告6',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商B'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '电商经营分析报告7',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商C'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '电商经营分析报告8',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
authorisedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商D'
|
||||
}],
|
||||
purchasedTradingList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '电商经营分析报告A',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商A'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '电商经营分析报告1',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商B'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '电商经营分析报告2',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商C'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '电商经营分析报告3',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商D'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '电商经营分析报告4',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商E'
|
||||
}],
|
||||
purchasedUsingList: [
|
||||
{
|
||||
id: 5,
|
||||
name: '电商经营分析报告5',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商A'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '电商经营分析报告6',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商B'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '电商经营分析报告7',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商C'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '电商经营分析报告8',
|
||||
category: '金融科技',
|
||||
type: '数据报告',
|
||||
purchasedTime: '2022-07-08',
|
||||
authorizedSupplier: '供应商D'
|
||||
}]
|
||||
}
|
||||
self.currentSupplierDetail.name = supplier
|
||||
self.showDataDetail = false
|
||||
self.showSupplierDetail = true
|
||||
self.initSupplierGraph()
|
||||
}, 100)
|
||||
},
|
||||
getSupplierRight(item) {
|
||||
console.log(item)
|
||||
const rightData = {
|
||||
ownRightList: [{ id: 0, name: '数据1' }, { id: 1, name: '数据2' }, { id: 2, name: '数据3' }],
|
||||
tradingRightList: [{ id: 3, name: '数据A' }, { id: 4, name: '数据B' }, { id: 5, name: '数据c' }],
|
||||
usingRightList: [{ id: 6, name: '数据1' }, { id: 7, name: '数据2' }, { id: 8, name: '数据3' }]
|
||||
}
|
||||
return rightData
|
||||
},
|
||||
pictureVisible(key, e) {
|
||||
const nodeData = e.part.data
|
||||
return !!nodeData.source
|
||||
},
|
||||
initSupplierGraph() {
|
||||
var $$ = go.GraphObject.make // for conciseness in defining templates
|
||||
const nodes = []
|
||||
const links = []
|
||||
|
||||
console.log(this.currentSupplierDetail)
|
||||
nodes.push({
|
||||
key: '0',
|
||||
text: this.currentSupplierDetail.name,
|
||||
source: this.userImg
|
||||
})
|
||||
nodes.push({
|
||||
key: '1',
|
||||
text: '所有权'
|
||||
})
|
||||
nodes.push({
|
||||
key: '2',
|
||||
text: '交易权'
|
||||
})
|
||||
nodes.push({
|
||||
key: '3',
|
||||
text: '使用权'
|
||||
})
|
||||
links.push({ from: '0', to: '1' })
|
||||
links.push({ from: '0', to: '2' })
|
||||
links.push({ from: '0', to: '3' })
|
||||
for (let i = 0; i < this.currentSupplierDetail.ownRightList.length; i++) {
|
||||
nodes.push({
|
||||
key: 1 + '-' + this.currentSupplierDetail.ownRightList[i].id,
|
||||
text: this.currentSupplierDetail.ownRightList[i].name,
|
||||
source: this.reportImg
|
||||
})
|
||||
links.push({ from: '1', to: 1 + '-' + this.currentSupplierDetail.ownRightList[i].id })
|
||||
}
|
||||
for (let i = 0; i < this.currentSupplierDetail.tradingRightList.length; i++) {
|
||||
nodes.push({
|
||||
key: 2 + '-' + this.currentSupplierDetail.tradingRightList[i].id,
|
||||
text: this.currentSupplierDetail.tradingRightList[i].name,
|
||||
source: this.reportImg
|
||||
})
|
||||
links.push({ from: '2', to: 2 + '-' + this.currentSupplierDetail.tradingRightList[i].id })
|
||||
}
|
||||
for (let i = 0; i < this.currentSupplierDetail.usingRightList.length; i++) {
|
||||
nodes.push({
|
||||
key: 3 + '-' + this.currentSupplierDetail.usingRightList[i].id,
|
||||
text: this.currentSupplierDetail.usingRightList[i].name,
|
||||
source: this.reportImg
|
||||
})
|
||||
links.push({ from: '3', to: 3 + '-' + this.currentSupplierDetail.usingRightList[i].id })
|
||||
}
|
||||
|
||||
const mygoChart = document.getElementById('supplierDiagramDiv')
|
||||
console.log(mygoChart)
|
||||
const supplierParentDiv = document.getElementById('supplierParentDiv')
|
||||
if (mygoChart) {
|
||||
supplierParentDiv.removeChild(mygoChart)
|
||||
}
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'supplierDiagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:45vh')
|
||||
supplierParentDiv.appendChild(div)
|
||||
this.supplierDiagram = $$(go.Diagram, 'supplierDiagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.LayeredDigraphLayout, {
|
||||
layerSpacing: 40,
|
||||
columnSpacing: 20,
|
||||
direction: 90,
|
||||
setsPortSpots: false
|
||||
// initializeOption:go.LayeredDigraphLayout.InitNaive,
|
||||
// layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
|
||||
})
|
||||
})
|
||||
this.supplierDiagram.linkTemplate = $$(
|
||||
go.Link,
|
||||
{
|
||||
curve: go.Link.Bezier
|
||||
},
|
||||
$$(
|
||||
go.Shape,
|
||||
{
|
||||
strokeWidth: 1,
|
||||
name: 'PIPE',
|
||||
stroke: '#eeeeee'
|
||||
}
|
||||
),
|
||||
$$(
|
||||
go.Shape,
|
||||
{ toArrow: 'Standard', stroke: '#eeeeee', scale: 1 }
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
textAlign: 'center',
|
||||
font: '16pt helvetica, arial, sans-serif',
|
||||
segmentOffset: new go.Point(0, 10),
|
||||
margin: 4,
|
||||
editable: false
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
this.supplierDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
$$(go.Panel, 'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle',
|
||||
{
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
|
||||
}
|
||||
),
|
||||
$$(go.Panel, 'Table',
|
||||
$$(go.Picture, {
|
||||
row: 0,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
desiredSize: new go.Size(20, 23)
|
||||
}, new go.Binding('source'), new go.Binding('visible', 'key', this.pictureVisible)),
|
||||
$$(go.TextBlock, {
|
||||
row: 2,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 14px sans-serif ',
|
||||
stroke: '#ffffff'
|
||||
}, new go.Binding('text'))
|
||||
))
|
||||
)
|
||||
this.supplierDiagram.model = new go.GraphLinksModel(nodes, links)
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatDate(timestamp) {
|
||||
const date = new Date(parseInt(timestamp))
|
||||
const year = date.getFullYear()
|
||||
const month = ('0' + (date.getMonth() + 1)).slice(-2)
|
||||
const day = ('0' + date.getDate()).slice(-2)
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
#access {
|
||||
.radio {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.el-radio-button__inner {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
width: 75px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-radio-button .el-radio-button__inner {
|
||||
padding: 7px 7px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.subtitle-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 11pt;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height: 19px
|
||||
}
|
||||
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-inner {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
margin-left: 38px;
|
||||
min-width: 1230px;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 85px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 20px 5%;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
margin: 20px 5% 0;
|
||||
}
|
||||
|
||||
.data-name {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 2px #26A2FF;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-description {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-descriptions--medium.is-bordered .el-descriptions-item__cell {
|
||||
padding: 10px;
|
||||
color: whitesmoke;
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
.el-descriptions-item__label.is-bordered-label {
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
background: rgba(150, 150, 150, 0.26);
|
||||
}
|
||||
|
||||
div.el-pagination {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
background: center center no-repeat #fff0;
|
||||
background-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-pager li.active {
|
||||
color: #409EFF;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.el-pagination__total {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.el-pagination__jump {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.el-pagination__editor.el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-pagination .el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
-webkit-box-shadow: -1px 0 0 0 #409EFF;
|
||||
box-shadow: 0 0 0 0 #409EFF;
|
||||
color: #5ea1ff;
|
||||
background-color: transparent !important;
|
||||
border-color: #b2d4ef !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734401806521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22258" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M925.248 356.928l-258.176-258.176a64 64 0 0 0-45.248-18.752H144a64 64 0 0 0-64 64v736a64 64 0 0 0 64 64h736a64 64 0 0 0 64-64V402.176a64 64 0 0 0-18.752-45.248zM288 144h192V256H288V144z m448 736H288V736h448v144z m144 0H800V704a32 32 0 0 0-32-32H256a32 32 0 0 0-32 32v176H144v-736H224V288a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V144h77.824l258.176 258.176V880z" p-id="22259" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 736 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399293969" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M867.584 160.192c-149.632-16.928-262.208-57.408-334.592-120.352l-19.04-16.544-20.544 14.656C379.968 118.944 267.776 160 160 160H128v448c0 137.344 121.088 261.92 370.208 380.864l13.088 6.24 13.344-5.728C771.072 883.52 896 755.232 896 608V163.424l-28.416-3.232zM832 608c0 116.8-107.392 223.36-319.328 316.8C299.872 821.024 192 714.464 192 608V222.976c104.672-6.784 211.584-46.688 318.496-118.944C587.232 162.528 695.168 201.536 832 220.256V608z" p-id="9111" fill="#515151"></path><path d="M359.776 468.672a32 32 0 1 0-47.968 42.4l121.792 137.824c12.608 14.24 30.176 21.568 47.904 21.568a64.384 64.384 0 0 0 49.696-23.52l197.6-242.72a32 32 0 0 0-49.632-40.416l-197.6 242.688-121.792-137.824z" p-id="9112" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734402075637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27888" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M186.24 840.96A669.44 669.44 0 0 0 512 919.68a777.6 777.6 0 0 0 136.96-12.16 16 16 0 0 0-5.76-31.36 684.16 684.16 0 0 1-442.24-64 212.48 212.48 0 0 1-128-168.32A176 176 0 0 1 145.28 512v119.68a76.16 76.16 0 0 0 36.48 64l208.64 119.68a50.56 50.56 0 0 0 25.6 7.04 42.24 42.24 0 0 0 21.12-5.76 45.44 45.44 0 0 0 21.76-40.32v-352a67.84 67.84 0 0 0-5.12-23.68 758.4 758.4 0 0 1 88.32 0v85.12a76.16 76.16 0 0 0 36.48 64l209.28 120.96a50.56 50.56 0 0 0 25.6 7.04 42.88 42.88 0 0 0 21.12-5.76 46.08 46.08 0 0 0 21.76-40.32v-134.4a192 192 0 0 1 88.96 146.56A204.16 204.16 0 0 1 832 808.96v-74.88a16 16 0 0 0-32 0v113.28a16 16 0 0 0 16 16h112a16 16 0 0 0 0-32h-72.32a229.76 229.76 0 0 0 122.88-187.52 230.4 230.4 0 0 0-120.96-186.24v-179.2a76.8 76.8 0 0 0-36.48-64L613.12 94.72a45.44 45.44 0 0 0-46.08 0 46.08 46.08 0 0 0-22.4 40.96v232.32a806.4 806.4 0 0 0-108.16 0 64 64 0 0 0-11.52-9.6L214.4 240.64a45.44 45.44 0 0 0-46.08 0 46.08 46.08 0 0 0-21.76 40.96v192a217.6 217.6 0 0 0-101.12 172.16 242.56 242.56 0 0 0 140.8 195.2z m422.4-675.2l181.76 104.96a16.64 16.64 0 0 1 4.48 7.68v320L611.84 493.44a14.72 14.72 0 0 1-4.48-7.04zM209.92 311.68l181.76 104.96a16 16 0 0 1 4.48 7.68v320L213.12 640a14.72 14.72 0 0 1-4.48-7.04z" fill="#515151" p-id="27889"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734401635817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M499.2 1021.44c-104.96 0-207.872-32.256-293.888-93.184-9.216-6.656-14.336-16.384-15.36-27.136-0.512-10.24 3.072-20.48 10.752-28.16 12.288-12.288 32.256-13.824 46.592-3.584 27.136 19.456 56.832 35.328 87.552 48.128 52.224 21.504 107.52 32.256 164.352 32.256 56.32 0 111.616-10.752 164.352-32.256 53.248-21.504 101.888-53.76 144.384-95.744 41.472-40.96 73.728-89.6 95.744-143.872 21.504-52.224 32.256-107.52 32.256-164.352 0-56.32-10.752-111.616-32.256-164.352-21.504-53.248-53.76-101.888-95.744-144.384-41.984-41.984-90.112-74.24-143.872-95.744-52.224-21.504-107.52-32.256-164.352-32.256-55.808-1.024-111.104 9.216-164.352 30.72-32.256 13.312-61.44 29.184-87.552 48.128-14.848 10.24-34.304 8.704-46.592-3.584-7.68-7.68-11.264-17.92-10.24-28.672 1.024-10.752 6.144-19.968 14.848-26.112C304.128 28.16 424.96-4.096 545.792 6.656c122.88 11.264 237.056 66.56 322.048 156.16 89.6 94.208 139.264 218.624 139.264 350.208 0 131.584-49.664 255.488-139.264 350.208a507.02336 507.02336 0 0 1-322.048 156.16c-15.36 1.024-31.232 2.048-46.592 2.048z" p-id="20111" fill="#515151"></path><path d="M485.376 695.808c-9.728 0-18.944-3.584-25.6-10.752-6.656-6.656-10.752-15.872-10.752-25.6s3.584-18.944 10.752-25.6l84.48-84.48H54.272c-19.968 0-36.352-16.384-36.352-36.352 0-19.968 16.384-36.352 36.352-36.352h489.984L459.776 392.192c-6.656-6.656-10.752-15.872-10.752-25.6s3.584-18.944 10.752-25.6c14.336-14.336 37.376-14.336 51.2 0l146.432 146.432c6.656 6.656 10.752 15.872 10.752 25.6s-3.584 18.944-10.752 25.6l-146.432 146.432c-7.168 6.656-15.872 10.752-25.6 10.752z" p-id="20112" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734402016250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25699" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M576 832H160v-64h96v-128h64v128h96v-224h64v224h96v-160h64v160h96v-256h64v256h96v64H576z m256-640v249.184h-60.448v-142.72L536.96 512l-131.104-134.592L233.696 544l-44.96-47.84 217.088-207.2 134.976 134.944 188.544-169.856H588.48V192H832z" fill="#515151" p-id="25700"></path></svg>
|
||||
|
After Width: | Height: | Size: 612 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734401676217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M288 373.333333c-82.432 0-149.333333 66.922667-149.333333 149.333334a149.333333 149.333333 0 0 0 149.333333 149.333333c82.496 0 149.333333-66.816 149.333333-149.333333 0-82.410667-66.88-149.333333-149.333333-149.333334z m0 64c47.104 0 85.333333 38.250667 85.333333 85.333334 0 47.146667-38.186667 85.333333-85.333333 85.333333a85.333333 85.333333 0 1 1 0-170.666667zM757.333333 672a128.021333 128.021333 0 1 0 128 128c0-70.656-57.344-128-128-128z m0 64a64.021333 64.021333 0 1 1-64 64c0-35.328 28.672-64 64-64zM757.333333 117.333333a128.021333 128.021333 0 1 0 128 128c0-70.656-57.344-128-128-128z m0 64a64.021333 64.021333 0 1 1-64 64c0-35.328 28.672-64 64-64z" fill="#515151" p-id="21183"></path><path d="M356.565333 580.864a32 32 0 0 1 43.904-10.965333l266.666667 160a32 32 0 0 1-32.938667 54.869333l-266.666666-160a32 32 0 0 1-10.965334-43.904zM643.050667 264.789333a32 32 0 0 1 36.565333 52.522667l-256 178.282667a32 32 0 0 1-36.565333-52.522667l256-178.282667z" fill="#515151" p-id="21184"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734402630655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30919" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z" p-id="30920" fill="#515151"></path><path d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z" p-id="30921" fill="#515151"></path><path d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z" p-id="30922" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 975 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734402047632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26743" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M808.562 336.1l85.618-85.561a28.444 28.444 0 0 0 3.242-36.295l-3.242-3.983-80.498-80.44a28.444 28.444 0 0 0-36.295-3.243l-3.926 3.242-85.39 85.448 117.76 117.76a43.236 43.236 0 0 1 2.73 3.072z m-60.018 60.017a43.236 43.236 0 0 1-3.072-2.787l-117.76-117.76L129.82 773.46a28.444 28.444 0 0 0-3.242 36.295l3.242 3.983 80.498 80.44a28.444 28.444 0 0 0 36.295 3.243l3.926-3.242 498.005-498.063zM954.482 149.96a113.778 113.778 0 0 1 0 160.882L310.84 954.48a113.778 113.778 0 0 1-160.882 0l-80.44-80.44a113.778 113.778 0 0 1 0-160.882l643.64-643.64a113.778 113.778 0 0 1 160.882 0l80.44 80.44z m-670.038 20.708l-73.557-40.22 73.557-40.221 40.22-73.558 40.221 73.558 73.558 40.22-73.558 40.22-40.22 73.558-40.22-73.557zM133.916 378.084L97.11 358.002l36.807-20.139 20.082-36.75 20.139 36.75 36.75 20.139-36.75 20.082-20.139 36.807-20.082-36.807z m602.17 478.72l-110.308-60.36 110.364-60.302 60.302-110.364 60.303 110.364 110.364 60.302-110.364 60.303-60.303 110.364-60.302-110.364z" fill="#515151" p-id="26744"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399754351" class="icon" viewBox="0 0 1071 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15591" xmlns:xlink="http://www.w3.org/1999/xlink" width="209.1796875" height="200"><path d="M940.194373 0h-811.867007C57.616368 0 0 57.616368 0 128.327366v576.163683c0 70.710997 57.616368 128.327366 128.327366 128.327365h811.867007c70.710997 0 128.327366-57.616368 128.327366-128.327365v-576.163683c2.618926-70.710997-54.997442-128.327366-128.327366-128.327366z m57.616369 704.491049c0 31.42711-26.189258 54.997442-54.997443 54.997442H130.946292c-31.42711 0-54.997442-26.189258-54.997443-54.997442v-576.163683c0-31.42711 26.189258-54.997442 54.997443-54.997443h811.867007c31.42711 0 54.997442 26.189258 54.997443 54.997443v576.163683zM906.148338 948.051151h-204.276215v-20.951407c0-18.332481-13.094629-31.42711-31.42711-31.42711H377.12532c-18.332481 0-31.42711 13.094629-31.42711 31.42711v20.951407H144.040921c-20.951407 0-36.664962 15.713555-36.664962 36.664962S123.089514 1021.381074 144.040921 1021.381074h762.107417c20.951407 0 36.664962-15.713555 36.664961-36.664961s-15.713555-36.664962-36.664961-36.664962z" fill="#515151" p-id="15592"></path><path d="M531.641944 319.508951c-102.138107 0-188.56266 49.759591-230.465473 78.567775-13.094629 7.856777-13.094629 28.808184 0 36.664962 41.902813 28.808184 128.327366 78.567775 230.465473 78.567775 102.138107 0 188.56266-49.759591 230.465473-78.567775 13.094629-7.856777 13.094629-28.808184 0-36.664962-39.283887-26.189258-128.327366-78.567775-230.465473-78.567775z m0 180.705883c-47.140665 0-83.805627-36.664962-83.805627-83.805627 0-47.140665 36.664962-83.805627 83.805627-83.805626 47.140665 0 83.805627 36.664962 83.805626 83.805626 0 47.140665-36.664962 83.805627-83.805626 83.805627z" fill="#515151" p-id="15593"></path><path d="M531.641944 416.409207m-41.902814 0a41.902813 41.902813 0 1 0 83.805627 0 41.902813 41.902813 0 1 0-83.805627 0Z" fill="#515151" p-id="15594"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734402579691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29852" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M832 64 192 64C121.6 64 64 121.6 64 192l0 512c0 70.4 57.6 128 128 128l128 0 132.096 120.448C459.072 957.632 466.88 960 474.432 960 493.824 960 512 944.704 512 922.496L512 832l320 0c70.4 0 128-57.6 128-128L960 192C960 121.6 902.4 64 832 64zM896 704c0 35.328-28.672 64-64 64L512 768c-16.96 0-33.28 6.72-45.248 18.752S448 815.04 448 832l0 30.08-84.864-77.376C351.296 773.952 335.936 768 320 768L192 768c-35.328 0-64-28.672-64-64L128 192c0-35.328 28.672-64 64-64l640 0c35.328 0 64 28.672 64 64L896 704zM736 320l-448 0C270.336 320 256 334.336 256 352S270.336 384 288 384l448 0C753.664 384 768 369.664 768 352S753.664 320 736 320zM736 512l-448 0C270.336 512 256 526.336 256 544S270.336 576 288 576l448 0C753.664 576 768 561.664 768 544S753.664 512 736 512z" p-id="29853" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399836591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17721" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M680.448 369.664L576.512 269.312 266.24 579.584l-81.408 182.784v0.512l183.296-81.408 312.32-311.808z m17.408-221.696l-77.824 77.824 107.008 102.4 75.264-75.264c39.424-39.424 52.736-83.456 19.968-116.224-39.424-39.936-84.992-28.16-124.416 11.264zM158.208 837.12h712.704v68.608H158.208V837.12z" p-id="17722" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 668 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734503427516" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3032" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M620.8 1004.8c-38.4 12.8-76.8 19.2-115.2 19.2-70.4 0-134.4-19.2-198.4-64-57.6-38.4-115.2-96-160-166.4C57.6 652.8 6.4 460.8 6.4 262.4 6.4 179.2 19.2 96 38.4 19.2L44.8 0l940.8 6.4 6.4 19.2c19.2 76.8 25.6 160 25.6 243.2 0 198.4-51.2 384-147.2 524.8-44.8 70.4-102.4 121.6-160 160-32 32-64 44.8-89.6 51.2zM345.6 480c19.2-6.4 38.4-19.2 57.6-32 12.8-6.4 32-19.2 44.8-38.4l19.2-19.2-25.6-19.2s-57.6-57.6-134.4-64c-76.8-6.4-140.8 32-147.2 38.4l-19.2 12.8 12.8 25.6s12.8 25.6 38.4 44.8c32 32 64 51.2 102.4 57.6 12.8 0 32 0 51.2-6.4z m409.6 0c25.6-6.4 51.2-25.6 76.8-51.2 19.2-19.2 38.4-44.8 38.4-44.8l12.8-25.6-19.2-12.8s-70.4-44.8-147.2-38.4c-76.8 6.4-134.4 64-134.4 64l-25.6 19.2 19.2 19.2s19.2 19.2 44.8 38.4c38.4 25.6 76.8 38.4 108.8 38.4 12.8 0 19.2 0 25.6-6.4z" p-id="3033" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734401843698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23456" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M920.576 65.536H94.208c-47.104 0-84.992 37.888-84.992 84.992v736.768c0 47.104 37.888 84.992 84.992 84.992h470.016v-64H94.208c-11.264 0-20.992-9.728-20.992-20.992v-512h868.352v196.096h64V150.528c0-47.104-37.888-84.992-84.992-84.992zM73.216 310.784V150.528c0-11.264 9.728-20.992 20.992-20.992h826.368c11.264 0 20.992 9.728 20.992 20.992v160.768H73.216z" fill="#515151" p-id="23457"></path><path d="M140.8 191.488h66.048v64H140.8zM267.264 191.488h66.048v64H267.264zM392.704 191.488h66.048v64H392.704zM805.376 687.104l57.856 57.856h-264.704V808.96h264.704l-57.856 57.856 45.056 45.056 135.168-135.168-135.168-135.168z" fill="#515151" p-id="23458"></path></svg>
|
||||
|
After Width: | Height: | Size: 990 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734342112013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5530" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.893333 496.234667c40.234667 0 78.506667 8.234667 113.258667 23.104V170.368C937.152 76.288 865.429333 0 776.96 0H242.666667C154.218667 0 82.496 76.309333 82.496 170.368v652.096c0 94.101333 71.722667 170.368 160.170667 170.368h381.866666a287.573333 287.573333 0 0 1-89.024-208.277333c0-159.210667 129.109333-288.32 288.384-288.32z m-485.824-307.2h343.552c42.88 0 77.653333 31.936 77.653334 71.381333 0 39.381333-34.794667 71.338667-77.653334 71.338667H338.069333c-42.88 0-77.653333-31.936-77.653333-71.338667 0-39.424 34.773333-71.381333 77.653333-71.381333z m73.856 406.122666h-73.856c-42.88 0-77.653333-31.957333-77.653333-71.381333 0-39.381333 34.794667-71.36 77.653333-71.36h73.856c42.901333 0 77.653333 31.936 77.653334 71.36s-34.752 71.381333-77.653334 71.381333z" fill="#515151" p-id="5531"></path><path d="M823.893333 584.490667a200.106667 200.106667 0 0 0 0 400.192 200.085333 200.085333 0 0 0 200.106667-200.106667 200.106667 200.106667 0 0 0-200.106667-200.085333zM900.928 821.333333c12.842667 0 23.104 12.864 23.104 25.685334 0 12.864-12.842667 25.685333-25.664 25.685333h-51.370667v41.109333c0 12.842667-10.24 23.104-23.104 23.104h-2.56a23.018667 23.018667 0 0 1-23.125333-23.104v-41.109333h-51.349333c-15.402667 0-25.685333-12.842667-25.685334-25.685333s10.282667-25.685333 25.685334-25.685334h51.349333v-12.842666h-51.349333c-15.402667 0-25.685333-12.842667-25.685334-25.685334s10.282667-25.664 25.685334-25.664h23.104l-38.506667-38.528a24.832 24.832 0 0 1 0-35.968c10.24-10.24 25.664-10.24 35.946667 0l56.469333 53.930667L877.824 682.666667c10.24-10.24 25.664-10.24 35.946667 0a24.853333 24.853333 0 0 1 0 35.968l-38.528 38.528h25.685333c12.842667 0 25.685333 12.842667 25.685333 25.664 0 12.864-12.864 25.685333-25.685333 25.685333h-51.349333v12.821333h51.349333z" fill="#515151" p-id="5532"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734341930983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M736.653061 929.959184H287.346939c-45.97551 0-83.591837-37.616327-83.591837-83.591837V355.265306h616.489796v491.102041c0 45.97551-37.616327 83.591837-83.591837 83.591837zM245.55102 397.061224v449.306123c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795919-41.795918V397.061224H245.55102z" fill="#515151" p-id="3949"></path><path d="M407.510204 794.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V512c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959zM616.489796 794.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V512c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959z" fill="#515151" p-id="3950"></path><path d="M846.367347 397.061224H177.632653c-45.97551 0-83.591837-37.616327-83.591837-83.591836v-31.346939c0-45.97551 37.616327-83.591837 83.591837-83.591837h668.734694c45.97551 0 83.591837 37.616327 83.591837 83.591837v31.346939c0 45.97551-37.616327 83.591837-83.591837 83.591836zM177.632653 240.326531c-22.987755 0-41.795918 18.808163-41.795918 41.795918v31.346939c0 22.987755 18.808163 41.795918 41.795918 41.795918h668.734694c22.987755 0 41.795918-18.808163 41.795918-41.795918v-31.346939c0-22.987755-18.808163-41.795918-41.795918-41.795918H177.632653z" fill="#515151" p-id="3951"></path><path d="M650.44898 240.326531h-276.89796c-28.734694 0-52.244898-23.510204-52.244898-52.244898v-41.795919c0-28.734694 23.510204-52.244898 52.244898-52.244898h276.89796c28.734694 0 52.244898 23.510204 52.244898 52.244898v41.795919c0 28.734694-23.510204 52.244898-52.244898 52.244898z m-276.89796-104.489796c-5.746939 0-10.44898 4.702041-10.448979 10.448979v41.795919c0 5.746939 4.702041 10.44898 10.448979 10.448979h276.89796c5.746939 0 10.44898-4.702041 10.448979-10.448979v-41.795919c0-5.746939-4.702041-10.44898-10.448979-10.448979h-276.89796z" fill="#515151" p-id="3952"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734403845319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32187" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M85.333333 42.666667a42.666667 42.666667 0 0 1 42.666667 42.666666v810.666667H938.666667a42.666667 42.666667 0 0 1 0 85.333333H113.777778c-39.253333 0-71.111111-31.857778-71.111111-71.111111V85.333333A42.666667 42.666667 0 0 1 85.333333 42.666667z" p-id="32188" fill="#515151"></path><path d="M170.666667 512a42.666667 42.666667 0 0 1 42.666666-42.666667h30.208a42.666667 42.666667 0 0 1 0 85.333334H213.333333A42.666667 42.666667 0 0 1 170.666667 512z m211.569777 0a42.666667 42.666667 0 0 1 42.666667-42.666667H485.262222a42.666667 42.666667 0 0 1 0 85.333334H424.96a42.666667 42.666667 0 0 1-42.666667-42.666667z m241.777778 0a42.666667 42.666667 0 0 1 42.666667-42.666667h60.416a42.666667 42.666667 0 1 1 0 85.333334H666.737778a42.666667 42.666667 0 0 1-42.666667-42.666667z m241.777778 0a42.666667 42.666667 0 0 1 42.666667-42.666667h30.208a42.666667 42.666667 0 0 1 0 85.333334h-30.208a42.666667 42.666667 0 0 1-42.666667-42.666667z" p-id="32189" fill="#515151"></path><path d="M171.235556 804.067556l42.097777 6.599111 42.154667 6.599111v-0.113778l0.056889-0.341333 0.227555-1.422223a1041.464889 1041.464889 0 0 1 4.892445-28.273777c3.527111-19.512889 8.817778-47.388444 15.985778-80.896 14.336-67.128889 35.953778-156.16 65.080889-244.906667 29.297778-89.315556 65.365333-175.616 107.804444-238.876444 43.690667-64.967111 86.357333-94.435556 126.464-94.435556 40.106667 0 82.773333 29.468444 126.464 94.435556 42.439111 63.260444 78.506667 149.617778 107.804444 238.876444 29.127111 88.746667 50.744889 177.834667 65.080889 244.906667a2639.758222 2639.758222 0 0 1 19.911111 103.367111l0.967112 5.802666 0.227555 1.422223 0.056889 0.455111a42.666667 42.666667 0 0 0 84.309333-13.198222l-42.154666 6.599111c42.154667-6.599111 42.097778-6.656 42.097777-6.656v-0.568889l-0.284444-1.706667-1.080889-6.257778a2721.905778 2721.905778 0 0 0-20.650667-107.064889 2786.247111 2786.247111 0 0 0-31.914666-133.745777h-18.375111a42.666667 42.666667 0 0 1-5.973334-84.935111c-3.584-11.605333-7.281778-23.324444-11.093333-35.043556-30.208-92.046222-69.233778-187.050667-118.101333-259.811556C725.504 103.822222 660.593778 42.666667 576 42.666667c-84.593778 0-149.560889 61.155556-197.290667 132.209777-48.924444 72.817778-87.893333 167.765333-118.101333 259.811556a1985.991111 1985.991111 0 0 0-11.093333 35.043556 42.666667 42.666667 0 0 1-5.973334 84.935111h-18.375111a2783.573333 2783.573333 0 0 0-53.646222 247.125333l-0.227556 1.649778-0.113777 0.568889z" p-id="32190" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399704783" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14502" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><path d="M487.86343 635.729992a272.638998 272.638998 0 1 1 272.638998-272.638997 272.638998 272.638998 0 0 1-272.638998 272.638997z m0-481.127643a208.488645 208.488645 0 1 0 208.488645 208.488646 208.488645 208.488645 0 0 0-208.488645-208.488646z" p-id="14503" fill="#515151"></path><path d="M199.186844 924.406578h-64.150352A352.826938 352.826938 0 0 1 737.729052 674.861707l-45.386374 45.386374a288.676586 288.676586 0 0 0-493.155834 204.158497z" p-id="14504" fill="#515151"></path><path d="M659.305247 933.548003l-157.970243-159.413626 45.54675-45.225998 112.90462 113.866876 250.667502-248.261864 45.065623 45.54675-296.214252 293.487862z" p-id="14505" fill="#515151"></path></svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734401585378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18943" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M737.5872 851.2l3.2768-0.1536A32 32 0 0 0 769.5872 819.2l0.0256-349.8752h63.104c29.44 0 43.264-36.4544 21.1968-55.9872L533.1968 129.6384a32 32 0 0 0-42.3936 0L170.0864 413.3376l-2.2272 2.1504c-18.8416 19.9168-4.992 53.8112 23.424 53.8112l63.1552 0.0256L254.4128 819.2c0 17.664 14.336 32 32 32h451.1744z m-419.1744-64V437.3248l-0.1536-3.2768a32 32 0 0 0-31.8208-28.7232l-10.7008 0.0256L512 196.352l236.288 208.9984-10.6752-0.0256-3.2768 0.1536a32 32 0 0 0-28.7232 31.8464V787.2H318.4128z" fill="#515151" p-id="18944"></path><path d="M396.3904 478.6688m32 0l167.2192 0q32 0 32 32l0 0q0 32-32 32l-167.2192 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#515151" p-id="18945"></path><path d="M396.3904 568.8832m32 0l167.2192 0q32 0 32 32l0 0q0 32-32 32l-167.2192 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#515151" p-id="18946"></path><path d="M544 485.2736m0 32l0 167.2192q0 32-32 32l0 0q-32 0-32-32l0-167.2192q0-32 32-32l0 0q32 0 32 32Z" fill="#515151" p-id="18947"></path><path d="M436.700541 360.597707m22.627417 22.627417l72.226715 72.226715q22.627417 22.627417 0 45.254834l0 0q-22.627417 22.627417-45.254834 0l-72.226715-72.226715q-22.627417-22.627417 0-45.254834l0 0q22.627417-22.627417 45.254834 0Z" fill="#515151" p-id="18948"></path><path d="M629.617792 405.486642m-22.627417 22.627417l-72.226716 72.226716q-22.627417 22.627417-45.254834 0l0 0q-22.627417-22.627417 0-45.254834l72.226716-72.226716q22.627417-22.627417 45.254834 0l0 0q22.627417 22.627417 0 45.254834Z" fill="#515151" p-id="18949"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399667459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M795.077 144.008C806.597 127.1 826.003 116 848 116c35.346 0 64 28.662 64 64.018s-28.654 64.018-64 64.018c-21.997 0-41.403-11.1-52.923-28.008H347c-63.513 0-115 51.502-115 115.033 0 63.53 51.487 115.032 115 115.032h330c103.277 0 187 83.747 187 187.053s-83.723 187.053-187 187.053H326a8 8 0 0 1-8-8v-56.02a8 8 0 0 1 8-8h351c63.513 0 115-51.502 115-115.033 0-63.53-51.487-115.033-115-115.033H347c-103.277 0-187-83.746-187-187.052 0-103.307 83.723-187.053 187-187.053h448.077zM275.734 790.534L124.87 906.344A8 8 0 0 1 112 900V668.378a8 8 0 0 1 12.871-6.346l150.863 115.81a8 8 0 0 1 0 12.692z" fill="#515151" p-id="13397"></path></svg>
|
||||
|
After Width: | Height: | Size: 963 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734486278238" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1494" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M592.011636 974.615273a34.816 34.816 0 0 1-23.552-9.122909l-208.337454-190.417455-4.840727 0.139636H220.672A174.266182 174.266182 0 0 1 46.545455 601.134545V424.773818a174.359273 174.359273 0 0 1 174.126545-174.173091h134.609455c1.629091 0 3.258182 0.046545 4.840727 0.139637l208.337454-190.417455a34.955636 34.955636 0 0 1 58.461091 25.786182v853.597091a35.095273 35.095273 0 0 1-34.909091 34.909091zM368.733091 704.232727c9.448727 0 20.48 2.885818 26.810182 8.657455l161.559272 147.688727V165.329455L395.543273 313.018182a35.095273 35.095273 0 0 1-27.787637 8.890182c-7.214545-0.977455-9.821091-1.442909-12.474181-1.442909H220.672A104.448 104.448 0 0 0 116.363636 424.773818v176.360727a104.401455 104.401455 0 0 0 104.308364 104.261819h134.609455c2.699636 0 5.259636-0.465455 7.866181-0.837819a53.061818 53.061818 0 0 1 5.585455-0.325818z m345.367273-20.805818a181.76 181.76 0 0 0 119.528727-170.496 181.806545 181.806545 0 0 0-119.482182-170.449454 34.955636 34.955636 0 0 0-23.831273 65.62909 111.802182 111.802182 0 0 1 73.495273 104.820364 111.802182 111.802182 0 0 1-73.448727 104.820364 34.862545 34.862545 0 0 0 11.869091 67.723636 34.071273 34.071273 0 0 0 11.869091-2.048z m120.226909 99.048727a325.213091 325.213091 0 0 0-0.186182-539.136 34.909091 34.909091 0 0 0-39.098182 57.902546 255.301818 255.301818 0 0 1 0.093091 423.377454 34.909091 34.909091 0 1 0 39.191273 57.856z" fill="#515151" p-id="1495"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399608510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12341" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zM128 512A384.853333 384.853333 0 0 1 512 128v768A384.853333 384.853333 0 0 1 128 512z" fill="#515151" p-id="12342"></path></svg>
|
||||
|
After Width: | Height: | Size: 510 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734399567703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1013.76 180.224c-1.024-20.992-19.968-37.888-40.448-36.864-180.224 9.728-436.224-123.904-438.784-125.44-1.024-0.512-1.536-1.024-2.56-1.536-14.848-7.168-32.256-3.584-43.52 7.168-49.664 24.576-267.776 128.512-428.544 120.32-20.48-1.024-37.888 13.824-39.936 34.304-58.368 504.832 202.24 783.36 487.424 836.608 3.072 0.512 6.144 1.024 9.216 1.024h6.656c205.824-37.376 373.76-185.344 449.536-396.288 7.168-19.968-3.072-41.984-23.04-49.664-19.968-7.168-41.984 3.072-49.664 23.04-65.536 182.272-208.896 310.784-384 345.088C291.84 893.952 52.736 680.96 93.184 221.696c168.448-5.12 365.568-96.768 424.448-125.952 62.976 30.72 268.288 125.44 438.272 125.44 7.168 0 14.336 0 21.504-0.512 20.992-1.024 37.376-18.944 36.352-40.448z" fill="#515151" p-id="11267"></path><path d="M291.328 739.328V267.776h158.72V317.44l-38.912 136.192c28.672 38.4 42.496 79.872 40.96 123.392 1.536 54.784-18.432 83.968-59.904 86.528-8.192 1.536-19.456 2.048-32.768 2.048-1.536-2.56-2.56-6.656-4.096-12.288-4.096-17.92-8.192-31.744-12.288-40.96h30.72c20.48 1.536 30.72-13.824 30.72-45.568 1.536-32.768-12.288-67.072-40.96-102.912L402.432 317.44H340.48v422.4h-49.152z m453.12-10.24c-94.72-39.936-153.6-108.544-177.152-205.824h-36.864v148.48c4.096-1.536 11.776-4.096 22.528-8.192 9.728-5.632 28.672-13.824 57.856-24.576 0 6.656 0.512 17.408 2.048 30.72v18.432c-12.288 4.096-31.744 11.776-57.856 22.528-12.288 4.096-21.504 7.68-26.624 10.24-1.536 0-2.56 0.512-4.096 2.048-13.824 5.632-24.576 10.752-32.768 16.384l-26.624-43.008c12.288-10.752 17.92-24.576 16.384-40.96V269.824h249.344v253.44H619.52c8.192 26.112 17.92 48.64 28.672 68.096 31.744-19.456 59.904-38.4 84.48-57.856l30.72 38.912c-6.656 4.096-17.408 10.24-30.72 18.432-24.576 15.36-43.008 26.624-55.808 34.816 22.016 22.016 54.272 40.448 96.768 55.808-11.264 16.896-20.992 32.768-29.184 47.616zM529.92 317.44v57.856h150.528V317.44h-150.528z m0 158.208h150.528V418.304h-150.528v57.344z" fill="#515151" p-id="11268"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734341889819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2836" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M684.202667 117.248c15.893333-15.872 42.154667-15.36 58.922666 1.408l90.517334 90.517333c16.661333 16.661333 17.344 42.986667 1.429333 58.922667l-445.653333 445.653333c-7.936 7.914667-23.104 16.746667-34.218667 19.776l-143.701333 39.253334c-21.909333 5.994667-35.114667-7.104-29.568-28.949334l37.248-146.773333c2.773333-10.944 11.562667-26.346667 19.392-34.176l445.653333-445.653333zM268.736 593.066667c-2.901333 2.901333-8.106667 12.074667-9.130667 16.021333l-29.12 114.773333 111.957334-30.570666c4.437333-1.216 13.632-6.549333 16.810666-9.728l445.653334-445.653334-90.517334-90.496-445.653333 445.653334zM682.794667 178.986667l90.517333 90.517333-30.186667 30.186667-90.496-90.517334 30.165334-30.165333z m-362.026667 362.048l90.496 90.517333-30.165333 30.165333-90.517334-90.496 30.165334-30.186666zM170.666667 874.666667c0-11.776 9.429333-21.333333 21.461333-21.333334h661.077333a21.333333 21.333333 0 1 1 0 42.666667H192.128A21.333333 21.333333 0 0 1 170.666667 874.666667z" fill="#515151" p-id="2837"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734342177804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7828" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M515.050667 53.333333c112.128 0 202.602667 94.08 205.632 210.496l0.085333 6.037334-0.021333 60.8H864v597.333333h-704v-597.333333h149.312l0.021333-60.8c0-119.168 91.648-216.533333 205.717334-216.533334z m284.949333 341.333334h-576v469.333333h576v-469.333333z m-170.666667 106.666666v234.666667h-234.666666v-234.666667h234.666666z m-64 64h-106.666666v106.666667h106.666666v-106.666667z m-50.282666-448c-76.202667 0-139.050667 65.066667-141.653334 147.264l-0.064 5.269334-0.021333 60.8h283.434667v-60.8c0-84.650667-63.872-152.533333-141.696-152.533334z" fill="#515151" p-id="7829"></path></svg>
|
||||
|
After Width: | Height: | Size: 924 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734401873220" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24546" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M510.207 286.36c61.62 0 111.574-49.953 111.574-111.574 0-61.62-49.953-111.573-111.574-111.573-61.62 0-111.573 49.953-111.573 111.573 0 61.62 49.954 111.574 111.573 111.574z m0-167.219c30.683 0 55.646 24.963 55.646 55.646s-24.962 55.647-55.646 55.647c-30.683 0-55.645-24.963-55.645-55.647s24.962-55.646 55.645-55.646z m-335.51 463.422c-61.62 0-111.573 49.953-111.573 111.574 0 61.62 49.953 111.574 111.573 111.574s111.574-49.954 111.574-111.574-49.953-111.574-111.574-111.574z m0 167.219c-30.682 0-55.646-24.962-55.646-55.646 0-30.683 24.963-55.646 55.646-55.646s55.646 24.962 55.646 55.646-24.963 55.646-55.646 55.646zM845.95 582.563c-61.62 0-111.573 49.953-111.573 111.574 0 61.62 49.953 111.574 111.573 111.574s111.574-49.954 111.574-111.574-49.953-111.574-111.574-111.574z m0 167.219c-30.683 0-55.646-24.962-55.646-55.646 0-30.683 24.963-55.646 55.646-55.646s55.647 24.962 55.647 55.646-24.964 55.646-55.647 55.646zM509.425 879.616c-79.714 0-157.406-27.896-218.755-78.526l-35.611 43.12c71.358 58.904 161.694 91.333 254.365 91.333 93.463 0 184.4-32.934 256.044-92.726l-35.829-42.928c-61.62 51.408-139.819 79.727-220.214 79.727z m343.95-343.95h55.928c0-154.827-90.705-297.158-231.098-362.603l-23.622 50.685c120.758 56.31 198.793 178.734 198.793 311.917zM364.268 223.747l-23.622-50.685C200.265 238.508 109.56 380.84 109.56 535.665h55.928c0-133.183 78.034-255.621 198.779-311.917z" fill="#515151" p-id="24547"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1734072397279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5869" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M941.348571 296.228571L660.48 11.702857C653.165714 4.388571 643.657143 0 633.417143 0H174.811429c-27.062857 0.731429-53.394286 11.702857-71.68 31.451429-19.017143 19.748571-29.988571 46.08-29.988572 73.142857v814.811428c0.731429 56.32 45.348571 103.131429 102.4 104.594286h672.914286c27.062857-0.731429 52.662857-11.702857 71.68-30.72 19.017143-19.748571 29.988571-46.08 29.988571-73.142857V324.022857c0-10.24-3.657143-20.48-10.971428-27.794286h2.194285zM643.657143 65.097143l256 254.537143H683.885714c-22.674286 0-40.228571-18.285714-40.228571-40.96V65.097143zM318.902857 365.714286c-8.777143-0.731429-17.554286-4.388571-24.137143-10.971429L215.771429 268.434286c-6.582857-7.314286-10.24-16.822857-10.24-26.331429 0-9.508571 3.657143-19.017143 10.24-26.331428 13.897143-14.628571 35.84-14.628571 49.737142 0l54.857143 63.634285L438.857143 157.257143c13.897143-14.628571 35.84-14.628571 49.737143 0 6.582857 7.314286 10.24 16.822857 10.24 26.331428 0 9.508571-3.657143 19.017143-10.24 26.331429l-146.285715 145.554286c-5.851429 6.582857-14.628571 10.24-23.405714 10.24z m423.497143 147.017143H291.84c-17.554286 0-30.72-13.897143-30.72-31.451429s13.897143-32.182857 30.72-32.182857h451.291429c17.554286 0.731429 30.72 14.628571 30.72 32.182857 0 16.822857-13.897143 31.451429-31.451429 31.451429z m0 146.285714H291.84c-17.554286-0.731429-30.72-14.628571-30.72-32.182857 0-17.554286 13.897143-31.451429 30.72-31.451429h451.291429c16.822857 0 30.72 13.897143 30.72 31.451429s-13.897143 31.451429-31.451429 32.182857z m0 146.285714H291.84c-17.554286 0-30.72-13.897143-30.72-31.451428s13.897143-32.182857 30.72-32.182858h451.291429c17.554286 0.731429 30.72 14.628571 30.72 32.182858 0 17.554286-13.897143 31.451429-31.451429 31.451428z m0 0" fill="#515151" p-id="5870"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div id="access" style="background-image: url('/static/background/background.png'); min-height: 89vh; position: relative;">
|
||||
<div id="tableContainer" style="position: absolute; top: 20px; left: 50px; right: 50px; display: flex;">
|
||||
<div class="left-container">
|
||||
<div class="center-text">数据权系图谱</div>
|
||||
<div class="inner-container">
|
||||
<div class="title">数据所有权</div>
|
||||
<div class="inner-inner-container">
|
||||
<div class="title">数据资源持有权</div>
|
||||
<div class="icons-container">
|
||||
<div class="icon" @click="selectIcon('知情同意权', require('./css/zhiqingtongyi.svg'), '主体在采集或处理数据前均须先告知数据主体并征得数据主体同意，告知和同意的内容包括采集数据的目的、用途、数据处理方式、程度等及其后续的变化')">
|
||||
<img :src="require('./css/zhiqingtongyi.svg')" alt="图标1">
|
||||
<div class="icon-text">知情同意权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('被遗忘权', require('./css/shixiao.svg'), '数据主体有权要求数据控制者或管理者及时删除其数据，并通知相关第三方停止利用和传播')">
|
||||
<img :src="require('./css/shixiao.svg')" alt="图标2">
|
||||
<div class="icon-text">被遗忘权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('修改权', require('./css/xiugai.svg'), '数据主体享有或授权他人修改其数据的权利。换言之，数据主体有权禁止他人未经其授权而擅自修改其数据')">
|
||||
<img :src="require('./css/xiugai.svg')" alt="图标3">
|
||||
<div class="icon-text">修改权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('删除权', require('./css/shanchu.svg'), '有权请求删除不再需要或不准确的数据')">
|
||||
<img :src="require('./css/shanchu.svg')" alt="图标4">
|
||||
<div class="icon-text">删除权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('求偿权', require('./css/qiuchang.svg'), '当权利、资源等遭受侵害、损失的时候，具有要求赔偿的权利')">
|
||||
<img :src="require('./css/qiuchang.svg')" alt="图标5">
|
||||
<div class="icon-text">求偿权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('出售权', require('./css/chushou.svg'), '有权将数据作为商品出售')">
|
||||
<img :src="require('./css/chushou.svg')" alt="图标6">
|
||||
<div class="icon-text">出售权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('隐私权', require('./css/yinsi.svg'), '有权决定个人数据的公开程度和保护方式')">
|
||||
<img :src="require('./css/yinsi.svg')" alt="图标7">
|
||||
<div class="icon-text">隐私权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('保护权', require('./css/baohu.svg'), '有权对数据进行加密和其他安全保护措施')">
|
||||
<img :src="require('./css/baohu.svg')" alt="图标8">
|
||||
<div class="icon-text">保护权</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons-container">
|
||||
<div class="icon" @click="selectIcon('匿名化权', require('./css/niming.svg'), '有权将个人身份信息从数据中移除或匿名化')">
|
||||
<img :src="require('./css/niming.svg')" alt="图标9">
|
||||
<div class="icon-text">匿名化权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('使用限制权', require('./css/xianzhi.svg'), '有权限制他人对数据的使用方式和范围')">
|
||||
<img :src="require('./css/xianzhi.svg')" alt="图标10">
|
||||
<div class="icon-text">使用限制权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('透明度权', require('./css/toumingdu.svg'), '有权了解数据如何被收集、存储和使用')">
|
||||
<img :src="require('./css/toumingdu.svg')" alt="图标11">
|
||||
<div class="icon-text">透明度权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('溯源权', require('./css/suyuan.svg'), '有权追踪数据的来源和变动历史')">
|
||||
<img :src="require('./css/suyuan.svg')" alt="图标12">
|
||||
<div class="icon-text">溯源权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('授权管理权', require('./css/shouquan.svg'), '有权管理谁可以访问和使用数据')">
|
||||
<img :src="require('./css/shouquan.svg')" alt="图标13">
|
||||
<div class="icon-text">授权管理权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('监管治理权', require('./css/jianguan.svg'), '有权对数据使用进行监管和治理')">
|
||||
<img :src="require('./css/jianguan.svg')" alt="图标14">
|
||||
<div class="icon-text">监管治理权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('使用通知权', require('./css/tongzhi.svg'), '有权在数据被使用时接收通知')">
|
||||
<img :src="require('./css/tongzhi.svg')" alt="图标15">
|
||||
<div class="icon-text">使用通知权</div>
|
||||
</div>
|
||||
<div class="icon" @click="selectIcon('纠正权', require('./css/jiuzheng.svg'), '有权更正错误或不准确的数据')">
|
||||
<img :src="require('./css/jiuzheng.svg')" alt="图标16">
|
||||
<div class="icon-text">纠正权</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-container">
|
||||
<div class="title">数据产品经营权</div>
|
||||
<div class="icons-container-product">
|
||||
<div class="icon" style="width: 31%;" @click="selectIcon('收益权', require('./css/shouyi.svg'), '通过其数据产品获取经济利益的权利')">
|
||||
<img :src="require('./css/shouyi.svg')" alt="图标">
|
||||
<div class="icon-text">收益权</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-container" style="width: 83%;">
|
||||
<div class="title">数据加工使用权</div>
|
||||
<div class="icons-container" style="margin-top: 40px;height: 36%">
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('访问权', require('./css/fangwen.svg'), '有权访问和查看数据')">
|
||||
<img :src="require('./css/fangwen.svg')" alt="图标">
|
||||
<div class="icon-text">访问权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('分享权', require('./css/fenxiang.svg'), '有权将数据分享给第三方或公众')">
|
||||
<img :src="require('./css/fenxiang.svg')" alt="图标">
|
||||
<div class="icon-text">分享权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('保存权', require('./css/baocun.svg'), '有权保留数据一段时间以备后续使用')">
|
||||
<img :src="require('./css/baocun.svg')" alt="图标">
|
||||
<div class="icon-text">保存权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('迁移权', require('./css/qianyi.svg'), '有权将数据从一个平台迁移到另一个平台')">
|
||||
<img :src="require('./css/qianyi.svg')" alt="图标">
|
||||
<div class="icon-text">迁移权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('整合权', require('./css/zhenghe.svg'), '有权将不同来源的数据整合起来使用')">
|
||||
<img :src="require('./css/zhenghe.svg')" alt="图标">
|
||||
<div class="icon-text">整合权</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons-container" style="margin-top: 15px; height: 38%">
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('分析权', require('./css/fenxi.svg'), '有权对数据进行分析和推理')">
|
||||
<img :src="require('./css/fenxi.svg')" alt="图标">
|
||||
<div class="icon-text">分析权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('格式化权', require('./css/geshihua.svg'), '有权选择和改变数据的存储和呈现格式')">
|
||||
<img :src="require('./css/geshihua.svg')" alt="图标">
|
||||
<div class="icon-text">格式化权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('备份权', require('./css/beifen.svg'), '有权对数据进行定期备份以防丢失')">
|
||||
<img :src="require('./css/beifen.svg')" alt="图标">
|
||||
<div class="icon-text">备份权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('加注权', require('./css/jiazhu.svg'), '有权对数据进行注释或添加元数据')">
|
||||
<img :src="require('./css/jiazhu.svg')" alt="图标">
|
||||
<div class="icon-text">加注权</div>
|
||||
</div>
|
||||
<div class="icon" style="width: 8%;" @click="selectIcon('复制权', require('./css/fuzhi.svg'), '有权复制数据以用于备份、分析或其他用途')">
|
||||
<img :src="require('./css/fuzhi.svg')" alt="图标">
|
||||
<div class="icon-text">复制权</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-container" style="height: auto;padding-bottom: 6%;">
|
||||
<div class="center-text">权利解释</div>
|
||||
<!-- 右边的内容 -->
|
||||
<div class="icon-details" v-show="selectedIcon.src!==''">
|
||||
<img :src="selectedIcon.src" alt="图标">
|
||||
<div class="icon-name">{{ selectedIcon.name }}</div>
|
||||
<div class="icon-description">{{ selectedIcon.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedIcon: {
|
||||
name: '',
|
||||
src: '',
|
||||
description: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectIcon(name, src, description) {
|
||||
this.selectedIcon = { name, src, description };
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#access {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.left-container {
|
||||
width: 66.66%;
|
||||
background-color: #bdd8d9;
|
||||
border: 1px solid black;
|
||||
border-radius: 30px; /* 增大圆角 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-text {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inner-container {
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
background-color: #dae2f3;
|
||||
border: 1px solid black;
|
||||
border-radius: 30px; /* 增大圆角 */
|
||||
position: relative;
|
||||
color: black;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
.inner-inner-container {
|
||||
width: 100%;
|
||||
background-color: #fbe5d5;
|
||||
border: 1px solid black;
|
||||
border-radius: 30px; /* 增大圆角 */
|
||||
position: relative;
|
||||
color: black;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
width: 100%;
|
||||
background-color: #fff2cc;
|
||||
border: 1px solid black;
|
||||
border-radius: 30px; /* 增大圆角 */
|
||||
position: relative;
|
||||
color: black;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
margin-top: 55px;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
width: 33.33%;
|
||||
background-color: lightgray;
|
||||
border: 1px solid black;
|
||||
border-radius: 30px; /* 增大圆角 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icons-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 60%;
|
||||
margin-top: 8%; /* 调整间距 */
|
||||
}
|
||||
|
||||
.icons-container-product {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60%;
|
||||
margin-top: 6%; /* 调整间距 */
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 6%; /* 缩小图标 */
|
||||
text-align: center;
|
||||
white-space: nowrap; /* 防<><E998B2>文字换行 */
|
||||
cursor: pointer; /* 鼠标悬浮时显示小手指针 */
|
||||
transition: transform 0.3s; /* 添加过渡效果 */
|
||||
|
||||
&:hover img {
|
||||
transform: scale(1.2); /* 鼠标悬浮时图片放大 */
|
||||
}
|
||||
|
||||
&:hover .icon-text {
|
||||
transform: scale(1.2); /* 鼠标悬浮时文字放大 */
|
||||
}
|
||||
}
|
||||
|
||||
.icon img {
|
||||
width: 100%; /* 确保图标图片适应容器 */
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
font-size: 16px;
|
||||
color: #c00000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon-details {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.icon-details img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.icon-description {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
height: 55%; /* 指定高度 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 15px;
|
||||
transition: transform 0.3s; /* 添加过渡效果 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import parent from '@/public/parent.js'
|
||||
import rules from '@/public/rules.js'
|
||||
|
||||
export default {
|
||||
name: 'access',
|
||||
mixins: [parent, rules],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
cloudPlatformValue: '',
|
||||
resourceTypeValue: [],
|
||||
authorityTypeValue: '',
|
||||
},
|
||||
resourceType: [{
|
||||
label: '虚拟机',
|
||||
value: '虚拟机'
|
||||
}, {
|
||||
label: '内存',
|
||||
value: '内存'
|
||||
}, {
|
||||
label: '网络',
|
||||
value: '网络'
|
||||
}, {
|
||||
label: '存储',
|
||||
value: '存储'
|
||||
}],
|
||||
authorityType: [{
|
||||
label: '复制权',
|
||||
value: '复制权'
|
||||
}, {
|
||||
label: '使用权',
|
||||
value: '使用权'
|
||||
}, {
|
||||
label: '交易权',
|
||||
value: '交易权'
|
||||
}],
|
||||
cloudPlatform: [{
|
||||
label: '阿里云-华东',
|
||||
value: '阿里云-华东'
|
||||
}, {
|
||||
label: '阿里云-华中',
|
||||
value: '阿里云-华中'
|
||||
}, {
|
||||
label: '腾讯云-上海',
|
||||
value: '腾讯云-上海'
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
cloudPlatformValue: '阿里云-华东',
|
||||
resourceTypeValue: ['内存', '网络'],
|
||||
authorityTypeValue: '使用权'
|
||||
},
|
||||
{
|
||||
cloudPlatformValue: '华为云-华中',
|
||||
resourceTypeValue: ['CPU', '网络'],
|
||||
authorityTypeValue: '交易权'
|
||||
},
|
||||
{
|
||||
cloudPlatformValue: '腾讯云-华中',
|
||||
resourceTypeValue: ['内存', '网络'],
|
||||
authorityTypeValue: '使用权'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
addButton() {
|
||||
let f = JSON.parse(JSON.stringify(this.form));
|
||||
this.tableData.push(f)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,523 @@
|
|||
<template>
|
||||
<div id="access" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
|
||||
<el-row>
|
||||
<el-col :span="12" class="class1">
|
||||
<div id='map_chart' style="height: 42vh"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="class1">
|
||||
<div class='table_box' style="margin-right: 20px;">
|
||||
<div style="color: #FFFFFF; font-size: 18px; margin-left: 8px;">云商地域概览</div>
|
||||
<el-table
|
||||
:header-cell-style="{ background: 'transparent', color: '#606266' }"
|
||||
:data="tableData1" height='40vh' border
|
||||
v-loading="loading1"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
|
||||
<el-table-column prop="prop1" label="大区"/>
|
||||
<el-table-column prop="prop2" label="CPU数量"/>
|
||||
<el-table-column prop="prop3" label="内存数量"/>
|
||||
<el-table-column prop="prop4" label="存储数量"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="class1">
|
||||
<div id='pie_chart' style="height: 42vh"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="class1">
|
||||
<div class='table_box' style="margin-right: 20px;">
|
||||
<div style="color: #FFFFFF; font-size: 18px; margin-left: 8px;">云商信息概览</div>
|
||||
<el-table
|
||||
:header-cell-style="{ background: 'transparent', color: '#606266' }"
|
||||
v-loading="loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
:data="tableData" height='40vh' border
|
||||
style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
|
||||
<el-table-column prop="prop1" label="云商-资源"/>
|
||||
<el-table-column prop="prop2" label="使用量"/>
|
||||
<el-table-column prop="prop3" label="剩余量"/>
|
||||
<el-table-column prop="prop4" label="总量"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript" src="js/china.js"></script>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import full100000 from './js/100000_full.json'
|
||||
|
||||
export default {
|
||||
name: 'panel',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loading1: false,
|
||||
dataset: {
|
||||
resource: {
|
||||
name: '资源接入量',
|
||||
data: [
|
||||
{"name": "新疆维吾尔自治区", "value": 3000},
|
||||
{"name": "上海市", "value": 9500},
|
||||
{"name": "广东省", "value": 8500},
|
||||
{"name": "江苏省", "value": 8200},
|
||||
{"name": "北京市", "value": 7000},
|
||||
{"name": "天津市", "value": 7000},
|
||||
{"name": "浙江省", "value": 6800},
|
||||
{"name": "湖北省", "value": 6800},
|
||||
{"name": "山东省", "value": 5600},
|
||||
{"name": "福建省", "value": 5600},
|
||||
{"name": "湖南省", "value": 4400},
|
||||
{"name": "河南省", "value": 4200},
|
||||
{"name": "重庆市", "value": 4200},
|
||||
{"name": "四川省", "value": 3000},
|
||||
{"name": "陕西省", "value": 3100},
|
||||
{"name": "安徽省", "value": 3000},
|
||||
{"name": "河北省", "value": 2900},
|
||||
{"name": "辽宁省", "value": 2800},
|
||||
{"name": "山西省", "value": 1800},
|
||||
{"name": "吉林省", "value": 1700},
|
||||
{"name": "黑龙江省", "value": 600},
|
||||
]
|
||||
}
|
||||
},
|
||||
tableData: [{
|
||||
prop1: '阿里云-CPU',
|
||||
prop2: '100',
|
||||
prop3: '200',
|
||||
prop4: '300'
|
||||
},{
|
||||
prop1: '腾讯云-CPU',
|
||||
prop2: '120',
|
||||
prop3: '250',
|
||||
prop4: '370'
|
||||
},{
|
||||
prop1: '火山云-CPU',
|
||||
prop2: '220',
|
||||
prop3: '350',
|
||||
prop4: '570'
|
||||
},{
|
||||
prop1: '联通云-CPU',
|
||||
prop2: '250',
|
||||
prop3: '380',
|
||||
prop4: '630'
|
||||
},{
|
||||
prop1: '华为云-CPU',
|
||||
prop2: '250',
|
||||
prop3: '380',
|
||||
prop4: '630'
|
||||
}],
|
||||
tableData1: [{
|
||||
prop1: '阿里云-华东大区',
|
||||
prop2: '100 核心',
|
||||
prop3: '100 GB',
|
||||
prop4: '2000 GB'
|
||||
},{
|
||||
prop1: '腾讯云-华东大区',
|
||||
prop2: '150 核心',
|
||||
prop3: '200 GB',
|
||||
prop4: '2500 GB'
|
||||
},{
|
||||
prop1: '华为云-华东大区',
|
||||
prop2: '150 核心',
|
||||
prop3: '200 GB',
|
||||
prop4: '2500 GB'
|
||||
},{
|
||||
prop1: '联通云-华东大区',
|
||||
prop2: '200 核心',
|
||||
prop3: '220 GB',
|
||||
prop4: '2200 GB'
|
||||
},{
|
||||
prop1: '火山云-华东大区',
|
||||
prop2: '120 核心',
|
||||
prop3: '200 GB',
|
||||
prop4: '2000 GB'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMapChart() {
|
||||
let _self = this
|
||||
// 画布初始化
|
||||
var chartDom = document.getElementById('map_chart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
// 隐藏数据刷新动画
|
||||
// myChart.hideLoading();
|
||||
// 注册可用的地图
|
||||
echarts.registerMap('CN', full100000);
|
||||
let option = {
|
||||
title: {
|
||||
text: '接入区域分布',
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18
|
||||
},
|
||||
},
|
||||
// 提示框组件
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
//触发类型：数据项图形触发
|
||||
padding: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: '#409eff',
|
||||
backgroundColor: 'rgba(255,255,255,0.4)',
|
||||
textStyle: {
|
||||
color: '#000000',
|
||||
fontSize: 12
|
||||
},
|
||||
formatter: (e) => {
|
||||
let a = e.data != null ? e.data.value : 0
|
||||
let context = `
|
||||
<div>
|
||||
<p><span>资源接入量: </span><span>${a}</span></p>
|
||||
</div>
|
||||
`;
|
||||
return context;
|
||||
},
|
||||
},
|
||||
// 地理坐标系组件
|
||||
geo: {
|
||||
map: "CN",
|
||||
zoom: 1.2,
|
||||
show: true,
|
||||
roam: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
layoutSize: "100%",
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, 1)",
|
||||
borderWidth: 2,
|
||||
shadowColor: "rgb(90,160,234)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
// 视觉映射组件（将数据映射到颜色等视觉元素）
|
||||
visualMap: {
|
||||
type: 'piecewise', // 分段型
|
||||
min: 0, // 最小值
|
||||
max: 10000, // 最大值
|
||||
text: ['高', '低'], // 两端的文本
|
||||
splitNumber: 5, // 分段数量
|
||||
maxOpen: true, // 显示 >max 部分
|
||||
align: 'left', // 图形在左，文字在右
|
||||
showLabel: true, // 显示标注文字
|
||||
// orient: 'horizontal', // 水平摆放
|
||||
orient: 'vertical',
|
||||
inRange: {
|
||||
color: ["#8db1f1", "#026aa9"],
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
fontWeight: 400
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
map: "CN",
|
||||
aspectScale: 0.75,
|
||||
zoom: 1.2,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, 1)",
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.9,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(17,217,245,0.5)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(10,209,231,0.2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
borderWidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
color: "#ffffff",
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: "#026aa9",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
data: this.dataset.resource.data,
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option);
|
||||
|
||||
// 点击右侧加载省份
|
||||
myChart.on('click', function (params) {
|
||||
_self.loading1 = true
|
||||
// 华北大区
|
||||
let _data = [
|
||||
{
|
||||
regionName: '华北大区',
|
||||
list: ['北京', '天津', '山西', '河北', '山东', '内蒙古']
|
||||
}, {
|
||||
regionName: '东北大区',
|
||||
list: ['黑龙江', '吉林', '辽宁']
|
||||
}, {
|
||||
regionName: '华东大区',
|
||||
list: ['江苏', '浙江', '上海', '安徽']
|
||||
}, {
|
||||
regionName: '华南大区',
|
||||
list: ['广东', '广西', '海南', '福建']
|
||||
}, {
|
||||
regionName: '华中大区',
|
||||
list: ['河南', '湖北', '湖南', '江西']
|
||||
}, {
|
||||
regionName: '西北大区',
|
||||
list: ['陕西', '甘肃', '青海', '宁夏', '新疆']
|
||||
}, {
|
||||
regionName: '西南大区',
|
||||
list: ['云南', '贵州', '四川', '西藏', '重庆']
|
||||
}, {
|
||||
regionName: '中国港澳台',
|
||||
list: ['台湾', '香港', '澳门']
|
||||
}
|
||||
]
|
||||
console.log(params.name)
|
||||
// params.name 为省份名称 下面通过data数组 输入省份返回区域名称
|
||||
var regionName = _data.find(region => region.list.some(province => params.name.includes(province))).regionName;
|
||||
console.log(regionName);
|
||||
|
||||
setTimeout(function () {
|
||||
_self.tableData1[0].prop1 = "阿里云-" + regionName
|
||||
_self.tableData1[1].prop1 = "腾讯云-" + regionName
|
||||
_self.tableData1[2].prop1 = "华为云-" + regionName
|
||||
_self.tableData1[3].prop1 = "联通云-" + regionName
|
||||
_self.tableData1[4].prop1 = "火山云-" + regionName
|
||||
_self.loading1 = false
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
initPieChart() {
|
||||
let _self = this
|
||||
var chartDom = document.getElementById('pie_chart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
let option = {
|
||||
title: {
|
||||
text: '资源类型统计',
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 'bottom',
|
||||
data: [
|
||||
'阿里云',
|
||||
'华为云',
|
||||
'腾讯云',
|
||||
'联通云',
|
||||
'火山云'
|
||||
],
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'CPU',
|
||||
type: 'pie',
|
||||
radius: [20, 90],
|
||||
center: ['15%', '50%'],
|
||||
roseType: 'radius',
|
||||
itemStyle: {
|
||||
borderRadius: 5
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: 40, name: '阿里云'},
|
||||
{value: 33, name: '华为云'},
|
||||
{value: 28, name: '腾讯云'},
|
||||
{value: 23, name: '联通云'},
|
||||
{value: 18, name: '火山云'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '内存',
|
||||
type: 'pie',
|
||||
radius: [20, 90],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 5
|
||||
},
|
||||
data: [
|
||||
{value: 10, name: '阿里云'},
|
||||
{value: 20, name: '华为云'},
|
||||
{value: 30, name: '腾讯云'},
|
||||
{value: 23, name: '联通云'},
|
||||
{value: 18, name: '火山云'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '硬盘',
|
||||
type: 'pie',
|
||||
radius: [20, 90],
|
||||
center: ['85%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 5
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: 10, name: '阿里云'},
|
||||
{value: 20, name: '华为云'},
|
||||
{value: 30, name: '腾讯云'},
|
||||
{value: 23, name: '联通云'},
|
||||
{value: 18, name: '火山云'}
|
||||
]
|
||||
}
|
||||
],
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '13%',
|
||||
top: '90%',
|
||||
style: {
|
||||
text: 'CPU',
|
||||
fill: '#FFFFFF',
|
||||
font: 'bold 14px Microsoft YaHei'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: '48%',
|
||||
top: '90%',
|
||||
style: {
|
||||
text: '内存',
|
||||
fill: '#FFFFFF',
|
||||
font: 'bold 14px Microsoft YaHei'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: '83%',
|
||||
top: '90%',
|
||||
style: {
|
||||
text: '硬盘',
|
||||
fill: '#FFFFFF',
|
||||
font: 'bold 14px Microsoft YaHei'
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 为饼状图的每个扇区添加点击事件
|
||||
myChart.on('click', function (params) {
|
||||
if (!params.data) {
|
||||
// 新增点击标签弹出dialog
|
||||
_self.$router.push({name: 'panel2', params: {previousPage: 'pubCloud', routeLevel: 3}})
|
||||
} else {
|
||||
_self.loading = true
|
||||
setTimeout(function () {
|
||||
for (let _i = 0; _i < _self.tableData.length; _i++) {
|
||||
_self.tableData[_i].prop1 = params.data.name + "-" + params.seriesName
|
||||
}
|
||||
_self.loading = false
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMapChart();
|
||||
this.initPieChart();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.class1 {
|
||||
height: 46vh;
|
||||
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
// border-width: 2px; /* 设置边框粗细 */
|
||||
// border-style: solid; /* 设置边框样式 */
|
||||
// border-color: red;
|
||||
|
||||
color: red;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: rgba(150, 150, 150, 0.26) !important;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-table th .cell {
|
||||
color: #ffffff;
|
||||
font-size: 11pt;
|
||||
height: 19px
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,168 @@
|
|||
#reconfiguration{
|
||||
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.hr {
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hr_tag {
|
||||
margin-top: 17px;
|
||||
border-bottom: 2px solid;
|
||||
color: #FFFFFF;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.hr_left {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
.el-card__body{
|
||||
padding: 5px;
|
||||
height: 20vh;
|
||||
}
|
||||
.chart_card{
|
||||
height:36vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -1vh;
|
||||
}
|
||||
|
||||
.cardDiv{
|
||||
margin: 10px 50px 20px 50px;
|
||||
}
|
||||
|
||||
.table_box {
|
||||
//表格间距
|
||||
margin: 20px 50px 20px 50px;
|
||||
.el-table--mini .el-table__cell {
|
||||
}
|
||||
|
||||
//整个表格背景颜色及边框弧度
|
||||
.el-table {
|
||||
background-color: rgba(38, 38, 38, 0);
|
||||
border-radius: 3px;
|
||||
border-color:white ;
|
||||
}
|
||||
|
||||
//字体颜色
|
||||
.el-table tr {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
//标题背景颜色
|
||||
.el-table th {
|
||||
background-color: transparent !important;
|
||||
color: #a8a7a7;
|
||||
}
|
||||
|
||||
//标题字体颜色
|
||||
.el-table th .cell {
|
||||
color: #a8a7a7;
|
||||
}
|
||||
//去除行下划线
|
||||
.el-table td {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
//修改鼠标滑过背景颜色
|
||||
.el-table--enable-row-hover .el-table__body tr:hover td {
|
||||
background-color: rgba(38, 38, 38, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-dialog > .el-dialog__body {
|
||||
padding: 0px 20px;
|
||||
border-left: 2px solid #FFFFFF;
|
||||
border-right: 2px solid #FFFFFF;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
border-top: 2px solid #FFFFFF;
|
||||
border-left: 2px solid #FFFFFF;
|
||||
border-right: 2px solid #FFFFFF;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
border-bottom: 2px solid #FFFFFF;
|
||||
border-left: 2px solid #FFFFFF;
|
||||
border-right: 2px solid #FFFFFF;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
el-descriptions-item el-descriptions-item__cell {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<template>
|
||||
<div id="reconfiguration" >
|
||||
<!--右上角按钮-->
|
||||
<!-- <div style='position:absolute;right:2%;top:10%;z-index: 99'>
|
||||
<div class='top_button_box'>
|
||||
<i style="margin-left:5px;color: white;font-size: 30px;opacity: 0.5;z-index: 98" @click="fullScreen" class="el-icon-full-screen"></i>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
|
||||
<div id="entirety" style="background-image: url('/static/background/background.png');height:120vh">
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 1vh;font-size: 13pt'>资源变动日志</div>
|
||||
</div>
|
||||
<div class='table_box'>
|
||||
<el-table
|
||||
:data="resourceChangeList"
|
||||
height="30vh"
|
||||
:row-style="{height: '5vh'}"
|
||||
:cell-style="{padding: '0'}"
|
||||
:header-row-style="{height: '5vh'}"
|
||||
:header-cell-style="{padding: '0'}"
|
||||
border
|
||||
style="width:100%">
|
||||
<el-table-column prop="id" label="任务id" sortable :show-overflow-tooltip="true" >
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor: pointer;" @click='getGraphDatasShow(scope.row.id)'>{{scope.row.id}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="jobName" label="任务名称" sortable :show-overflow-tooltip="true" >
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor: pointer;" @click='getGraphDatasShow(scope.row.jobName)'>{{scope.row.jobName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="virtualMachineId" label="虚拟机编号" sortable :show-overflow-tooltip="true" >
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor: pointer;" @click='getHostDetail(scope.row.virtualMachineId)'>{{scope.row.virtualMachineId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="virtualMachineName" label="虚拟机名称" sortable :show-overflow-tooltip="true" >
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor: pointer;" @click='getHostDetail(scope.row.virtualMachineName)'>{{scope.row.virtualMachineName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="platformResourceName" label="云商所属" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="workDir" label="工作目录" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column label="状态情况" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{getStateText(scope.row.status)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div style='display: flex;display: -webkit-flex;justify-content: center'>
|
||||
<div class="title_class" style='margin-top: 0.5vh;font-size: 13pt'>{{ title }}</div>
|
||||
</div>
|
||||
<el-button v-show='showTaskGraph' type="text" size="medium" @click="quitTaskGraph" style='float: right;margin-top: -30px;margin-right: 50px'>返回</el-button>
|
||||
|
||||
<div v-show="showGoChartFlag" class='cardDiv' id="diagramParentDiv">
|
||||
<div id="myDiagramDiv" style=" width:100%;height:70vh" />
|
||||
</div>
|
||||
|
||||
<div v-show='!showGoChartFlag' >
|
||||
<div class='table_box'>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="quitDetail"
|
||||
>退出详情</el-button>
|
||||
<el-table
|
||||
:data="detailDataInGraphShow.nodeList"
|
||||
height="30vh"
|
||||
:row-style="{height: '5vh'}"
|
||||
:cell-style="{padding: '0'}"
|
||||
:header-row-style="{height: '5vh'}"
|
||||
:header-cell-style="{padding: '0'}"
|
||||
border
|
||||
style="width:100%;height:50vh">
|
||||
<el-table-column prop="hostId" label="虚拟机编号" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="taskId" label="任务id" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="manufacturer" label="云商所属" :show-overflow-tooltip="true" >{{detailDataInGraphShow.label}}</el-table-column>
|
||||
<el-table-column label="配置信息" :show-overflow-tooltip="true" >
|
||||
<el-table-column
|
||||
prop="configInfo.cpu"
|
||||
label="CPU"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="configInfo.gpuMemory"
|
||||
label="GPU内存"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="configInfo.stype"
|
||||
label="样式"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="configInfo.storage"
|
||||
label="存储"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="configInfo.bandwidth"
|
||||
label="带宽"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态情况" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{getStateText(scope.row.state)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
title="详情"
|
||||
:visible.sync="logDialogVisible"
|
||||
width="50%"
|
||||
>
|
||||
<span>虚拟机编号：{{virtualMachineIdInDialog}}</span>
|
||||
<el-descriptions title="" style='margin-top: 10px'>
|
||||
<el-descriptions-item label="CPU利用率">{{ hostDetailInfo.cpu.useRatio }}</el-descriptions-item>
|
||||
<el-descriptions-item label="CPU速度">{{ hostDetailInfo.cpu.speed }}</el-descriptions-item>
|
||||
<el-descriptions-item label="进程数">{{ hostDetailInfo.cpu.process }}</el-descriptions-item>
|
||||
<el-descriptions-item label="线程数">{{ hostDetailInfo.cpu.thread }}</el-descriptions-item>
|
||||
<el-descriptions-item label="使用中内存">{{ hostDetailInfo.memory.using }}</el-descriptions-item>
|
||||
<el-descriptions-item label="可用内存">{{ hostDetailInfo.memory.usable }}</el-descriptions-item>
|
||||
<el-descriptions-item label="磁盘容量">{{ hostDetailInfo.disk.capacity }}</el-descriptions-item>
|
||||
<el-descriptions-item label="磁盘活动时间">{{ hostDetailInfo.disk.activeTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="磁盘平均响应时间">{{ hostDetailInfo.disk.argResponseTime }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<span>上游虚拟机</span>
|
||||
<div class='table_box' style='margin: 10px 0 10px 0px; '>
|
||||
<el-table
|
||||
:data="upHostLists"
|
||||
border
|
||||
height="200"
|
||||
:row-style="{height: '5vh'}"
|
||||
:cell-style="{padding: '0'}"
|
||||
:header-row-style="{height: '5vh'}"
|
||||
:header-cell-style="{padding: '0'}"
|
||||
style="width:100%;height:25vh">
|
||||
<el-table-column prop="virtualMachineId" label="虚拟机编号" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="id" label="任务id" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="manufacturer" label="云商所属" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="configInfo" label="配置信息" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column label="状态情况" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{getStateText(scope.row.state)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<span>下游虚拟机</span>
|
||||
<div class='table_box' style='margin: 10px 0 10px 0px; '>
|
||||
<el-table
|
||||
:data="downHostLists"
|
||||
border
|
||||
height="200"
|
||||
:row-style="{height: '5vh'}"
|
||||
:cell-style="{padding: '0'}"
|
||||
:header-row-style="{height: '5vh'}"
|
||||
:header-cell-style="{padding: '0'}"
|
||||
style="width:100%;height:25vh">
|
||||
<el-table-column prop="virtualMachineId" label="虚拟机编号" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="id" label="任务id" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="manufacturer" label="云商所属" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="configInfo" label="配置信息" :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column label="状态情况" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{getStateText(scope.row.state)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<span>日志信息</span>
|
||||
<div class='table_box' style='margin: 10px 0 10px 0px; '>
|
||||
<el-table
|
||||
:data="logDetailInfo"
|
||||
border
|
||||
height="200"
|
||||
:row-style="{height: '5vh'}"
|
||||
:cell-style="{padding: '0'}"
|
||||
:header-row-style="{height: '5vh'}"
|
||||
:header-cell-style="{padding: '0'}"
|
||||
style="width:100%;height:25vh">
|
||||
<el-table-column prop="time" label="时间" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column prop="id" label="任务id" sortable :show-overflow-tooltip="true" ></el-table-column>
|
||||
<el-table-column label="操作" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{getStateText(scope.row.state)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer"></span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
//src: url('../../assets/iconfont/Alternate.ttf');
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import './css/reconfiguration.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,903 @@
|
|||
import go from 'gojs'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function resourceChangeLogList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/job/list',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10000
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'reconfiguration',
|
||||
data() {
|
||||
return {
|
||||
resourceChangeList: [],
|
||||
reconfigurationNodes: [],
|
||||
// reconfigurationNodesByGroup: [],
|
||||
reconfigurationLinks: [],
|
||||
detailDataInGraphShow: [],
|
||||
title: '云平台重构展示',
|
||||
showTaskGraph: false,
|
||||
showGoChartFlag: true,
|
||||
myDiagram: null,
|
||||
hostNormalImg: '/static/kt1/hostNormalImg.png',
|
||||
hostInsertImg: '/static/kt1/hostInsertImg.png',
|
||||
hostDeleteImg: '/static/kt1/hostDeleteImg.png',
|
||||
hostUnusedImg: '/static/kt1/hostUnusedImg.png',
|
||||
hostIdInDialog: '',
|
||||
logDialogVisible: false,
|
||||
upHostLists: [],
|
||||
downHostLists: [],
|
||||
hostDetailInfo: {
|
||||
manufacturer: '', cpu: { useRatio: '', speed: '', process: '', thread: '' },
|
||||
memory: { using: '', usable: '' },
|
||||
disk: { activeTime: '', argResponseTime: '', capacity: '' }
|
||||
},
|
||||
logDetailInfo: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getResourceChangeList()
|
||||
this.getReconfigurationGraphDatas()
|
||||
},
|
||||
methods: {
|
||||
getResourceChangeList() {
|
||||
resourceChangeLogList().then((data) => {
|
||||
this.resourceChangeList = data.data.pageData
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
// this.resourceChangeList = [
|
||||
// {
|
||||
// taskId: '60001',
|
||||
// hostId: '5736',
|
||||
// manufacturer: '阿里云',
|
||||
// state: 3,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// },
|
||||
// {
|
||||
// taskId: '60002',
|
||||
// hostId: '6392',
|
||||
// manufacturer: '华为云',
|
||||
// state: 1,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// },
|
||||
// {
|
||||
// taskId: '60001',
|
||||
// hostId: '5501',
|
||||
// manufacturer: '火山云',
|
||||
// state: 0,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// },
|
||||
// {
|
||||
// taskId: '60001',
|
||||
// hostId: '5746',
|
||||
// manufacturer: '阿里云',
|
||||
// state: 3,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// },
|
||||
// {
|
||||
// taskId: '60003',
|
||||
// hostId: '6100',
|
||||
// manufacturer: '联通云',
|
||||
// state: 0,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// },
|
||||
// {
|
||||
// taskId: '60001',
|
||||
// hostId: '5738',
|
||||
// manufacturer: '阿里云',
|
||||
// state: 1,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// },
|
||||
// {
|
||||
// taskId: '60002',
|
||||
// hostId: '5555',
|
||||
// manufacturer: '火山云',
|
||||
// state: 2,
|
||||
// configInfo: 'xxVCPU-xxG-Ostype'
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
getReconfigurationGraphDatas() {
|
||||
this.reconfigurationNodes = [
|
||||
{
|
||||
id: '0', label: '阿里云',
|
||||
nodeList: [
|
||||
{
|
||||
hostId: '6391', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{
|
||||
hostId: '6392', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{
|
||||
hostId: '6396', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{
|
||||
hostId: '6393', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002'
|
||||
},
|
||||
{
|
||||
hostId: '6397', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003'
|
||||
},
|
||||
{
|
||||
hostId: '6394', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002'
|
||||
},
|
||||
{
|
||||
hostId: '6398', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003'
|
||||
},
|
||||
{
|
||||
hostId: '6395', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{
|
||||
hostId: '6399', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003'
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: '1', label: '华为云',
|
||||
nodeList: [
|
||||
{
|
||||
hostId: '5319', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{
|
||||
hostId: '5320', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003'
|
||||
},
|
||||
{
|
||||
hostId: '5324', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002'
|
||||
},
|
||||
{
|
||||
hostId: '5321', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{
|
||||
hostId: '5325', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003'
|
||||
},
|
||||
{
|
||||
hostId: '5323', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003'
|
||||
},
|
||||
{
|
||||
hostId: '5322', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
id: '2', label: '联通云',
|
||||
nodeList: [
|
||||
{
|
||||
hostId: '2001', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001'
|
||||
},
|
||||
{ hostId: '3002', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '3003', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '3004', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '3005', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '3006', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '3007', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '3008', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '3009', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '3010', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '3011', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '3012', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '3010', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '3014', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '3015', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '3016', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '3017', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '3', label: '火山云',
|
||||
nodeList: [
|
||||
{ hostId: '7111', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '7112', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '7113', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '7114', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '7115', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' }]
|
||||
},
|
||||
{
|
||||
id: '4', label: '腾讯云',
|
||||
nodeList: [
|
||||
{ hostId: '9111', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '9116', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '9112', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '9113', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '9114', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '9115', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '9117', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' },
|
||||
{ hostId: '9118', state: 0,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60003' },
|
||||
{ hostId: '9119', state: 2,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60001' },
|
||||
{ hostId: '9120', state: 1,
|
||||
configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
|
||||
taskId: '60002' }]
|
||||
}
|
||||
]
|
||||
this.reconfigurationLinks = [
|
||||
{ id: '0', from: '6398', to: '5319', state: 0, taskId: '60001' }, {
|
||||
id: '1',
|
||||
from: '6398',
|
||||
to: '3014',
|
||||
state: 0,
|
||||
taskId: '60001'
|
||||
},
|
||||
{ id: '2', from: '6391', to: '5320', state: 0, taskId: '60001' }, {
|
||||
id: '3',
|
||||
from: '6391',
|
||||
to: '5319',
|
||||
state: 0,
|
||||
taskId: '60001'
|
||||
},
|
||||
{ id: '5', from: '6398', to: '3017', state: 0, taskId: '60001' }, {
|
||||
id: '7',
|
||||
from: '7112',
|
||||
to: '5321',
|
||||
state: 2,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '8', from: '3010', to: '6399', state: 1, taskId: '60003' }, {
|
||||
id: '10',
|
||||
from: '7112',
|
||||
to: '7113',
|
||||
state: 0,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '11', from: '3015', to: '3006', state: 0, taskId: '60001' }, {
|
||||
id: '13',
|
||||
from: '3006',
|
||||
to: '5321',
|
||||
state: 1,
|
||||
taskId: '60003'
|
||||
},
|
||||
{ id: '15', from: '5321', to: '5325', state: 0, taskId: '60001' }, {
|
||||
id: '16',
|
||||
from: '5325',
|
||||
to: '3006',
|
||||
state: 0,
|
||||
taskId: '60003'
|
||||
},
|
||||
{ id: '18', from: '3010', to: '5325', state: 2, taskId: '60002' }, {
|
||||
id: '19',
|
||||
from: '5324',
|
||||
to: '5321',
|
||||
state: 2,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '22', from: '3016', to: '5321', state: 0, taskId: '60001' }, {
|
||||
id: '35',
|
||||
from: '9112',
|
||||
to: '3017',
|
||||
state: 2,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '28', from: '9112', to: '3008', state: 0, taskId: '60002' }, {
|
||||
id: '29',
|
||||
from: '7111',
|
||||
to: '9116',
|
||||
state: 0,
|
||||
taskId: '60002'
|
||||
}]
|
||||
|
||||
for (let i = 0; i < this.reconfigurationNodes.length; i++) {
|
||||
for (let j = 0; j < this.reconfigurationNodes[i].nodeList.length; j++) {
|
||||
this.reconfigurationNodes[i].nodeList[j].type = 1
|
||||
}
|
||||
}
|
||||
|
||||
this.init()
|
||||
},
|
||||
getGraphDatasShow(taskId) {
|
||||
console.log(taskId)
|
||||
this.title = taskId
|
||||
for (let i = 0; i < this.reconfigurationNodes.length; i++) {
|
||||
for (let j = 0; j < this.reconfigurationNodes[i].nodeList.length; j++) {
|
||||
if (this.reconfigurationNodes[i].nodeList[j].taskId === taskId) {
|
||||
this.reconfigurationNodes[i].nodeList[j].type = 1
|
||||
} else {
|
||||
this.reconfigurationNodes[i].nodeList[j].type = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
this.reconfigurationLinks = [
|
||||
{ id: '0', from: '6398', to: '5319', state: 0, taskId: '60001' }, {
|
||||
id: '1',
|
||||
from: '6398',
|
||||
to: '3014',
|
||||
state: 0,
|
||||
taskId: '60001'
|
||||
},
|
||||
{ id: '2', from: '6391', to: '5320', state: 0, taskId: '60001' }, {
|
||||
id: '3',
|
||||
from: '6391',
|
||||
to: '5319',
|
||||
state: 0,
|
||||
taskId: '60001'
|
||||
},
|
||||
{ id: '5', from: '6398', to: '3017', state: 0, taskId: '60001' }, {
|
||||
id: '7',
|
||||
from: '7112',
|
||||
to: '5321',
|
||||
state: 2,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '8', from: '3010', to: '6399', state: 1, taskId: '60003' }, {
|
||||
id: '10',
|
||||
from: '7112',
|
||||
to: '7113',
|
||||
state: 0,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '11', from: '3015', to: '3006', state: 0, taskId: '60001' }, {
|
||||
id: '13',
|
||||
from: '3006',
|
||||
to: '5321',
|
||||
state: 1,
|
||||
taskId: '60003'
|
||||
},
|
||||
{ id: '15', from: '5321', to: '5325', state: 0, taskId: '60001' }, {
|
||||
id: '16',
|
||||
from: '5325',
|
||||
to: '3006',
|
||||
state: 0,
|
||||
taskId: '60003'
|
||||
},
|
||||
{ id: '18', from: '3010', to: '5325', state: 2, taskId: '60002' }, {
|
||||
id: '19',
|
||||
from: '5324',
|
||||
to: '5321',
|
||||
state: 2,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '22', from: '3016', to: '5321', state: 0, taskId: '60001' }, {
|
||||
id: '35',
|
||||
from: '9112',
|
||||
to: '3017',
|
||||
state: 2,
|
||||
taskId: '60002'
|
||||
},
|
||||
{ id: '28', from: '9112', to: '3008', state: 0, taskId: '60002' }, {
|
||||
id: '29',
|
||||
from: '7111',
|
||||
to: '9116',
|
||||
state: 0,
|
||||
taskId: '60002'
|
||||
}]
|
||||
for (let i = 0; i < this.reconfigurationLinks.length; i++) {
|
||||
if (this.reconfigurationLinks[i].taskId !== taskId) {
|
||||
this.reconfigurationLinks[i].state = -1
|
||||
}
|
||||
}
|
||||
|
||||
this.showTaskGraph = true
|
||||
this.init()
|
||||
},
|
||||
quitTaskGraph() {
|
||||
this.showTaskGraph = false
|
||||
this.getReconfigurationGraphDatas()
|
||||
this.title = '云平台重构展示'
|
||||
},
|
||||
fullScreen() {
|
||||
const element = document.getElementById('entirety')
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen()
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen()
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen()
|
||||
}
|
||||
},
|
||||
getStateText(type) {
|
||||
switch (type) {
|
||||
case 'RUNNING':
|
||||
return '正常运行'
|
||||
case 'CREATING':
|
||||
return '创建中'
|
||||
case 2:
|
||||
return '移除'
|
||||
|
||||
case 3:
|
||||
return '闲置'
|
||||
}
|
||||
},
|
||||
pictureVisible(key, e) {
|
||||
const nodeData = e.part.data
|
||||
return !!nodeData.source
|
||||
},
|
||||
init() {
|
||||
const self = this
|
||||
var $$ = go.GraphObject.make // for conciseness in defining templates
|
||||
const nodes = []
|
||||
let links = []
|
||||
|
||||
console.log(this.reconfigurationNodes)
|
||||
for (let i = 0; i < this.reconfigurationNodes.length; i++) {
|
||||
nodes.push({
|
||||
key: (i + 1) + '',
|
||||
text: this.reconfigurationNodes[i].label,
|
||||
isGroup: true,
|
||||
detailData: this.reconfigurationNodes[i]
|
||||
})
|
||||
nodes.push({
|
||||
key: (i + 1) + '-' + 1,
|
||||
group: (i + 1) + '',
|
||||
source: this.hostNormalImg,
|
||||
isGroup: true
|
||||
})
|
||||
nodes.push({
|
||||
key: (i + 1) + '-' + 2,
|
||||
group: (i + 1) + '',
|
||||
source: this.hostInsertImg,
|
||||
isGroup: true
|
||||
})
|
||||
nodes.push({
|
||||
key: (i + 1) + '-' + 3,
|
||||
group: (i + 1) + '',
|
||||
source: this.hostDeleteImg,
|
||||
isGroup: true
|
||||
})
|
||||
for (let j = 0; j < this.reconfigurationNodes[i].nodeList.length; j++) {
|
||||
if (this.reconfigurationNodes[i].nodeList[j].state === 0) {
|
||||
nodes.push({
|
||||
key: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
text: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
group: (i + 1) + '-' + 1,
|
||||
source: this.reconfigurationNodes[i].nodeList[j].type ? this.hostNormalImg : this.hostUnusedImg,
|
||||
configInfo: this.reconfigurationNodes[i].nodeList[j].configInfo,
|
||||
hostId: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
state: this.reconfigurationNodes[i].nodeList[j].state,
|
||||
taskId: this.reconfigurationNodes[i].nodeList[j].taskId
|
||||
})
|
||||
} else if (this.reconfigurationNodes[i].nodeList[j].state === 1) {
|
||||
nodes.push({
|
||||
key: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
text: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
group: (i + 1) + '-' + 2,
|
||||
source: this.reconfigurationNodes[i].nodeList[j].type ? this.hostInsertImg : this.hostUnusedImg,
|
||||
configInfo: this.reconfigurationNodes[i].nodeList[j].configInfo,
|
||||
hostId: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
state: this.reconfigurationNodes[i].nodeList[j].state,
|
||||
taskId: this.reconfigurationNodes[i].nodeList[j].taskId
|
||||
})
|
||||
} else {
|
||||
nodes.push({
|
||||
key: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
text: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
group: (i + 1) + '-' + 3,
|
||||
source: this.reconfigurationNodes[i].nodeList[j].type ? this.hostDeleteImg : this.hostUnusedImg,
|
||||
configInfo: this.reconfigurationNodes[i].nodeList[j].configInfo,
|
||||
hostId: this.reconfigurationNodes[i].nodeList[j].hostId,
|
||||
state: this.reconfigurationNodes[i].nodeList[j].state,
|
||||
taskId: this.reconfigurationNodes[i].nodeList[j].taskId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// links.push({ from: '1', to: (i + 2) + '' })
|
||||
links = this.reconfigurationLinks
|
||||
|
||||
const mygoChart = document.getElementById('myDiagramDiv')
|
||||
console.log(mygoChart)
|
||||
const diagramParentDiv = document.getElementById('diagramParentDiv')
|
||||
if (mygoChart) {
|
||||
diagramParentDiv.removeChild(mygoChart)
|
||||
}
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'myDiagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:70vh')
|
||||
diagramParentDiv.appendChild(div)
|
||||
self.myDiagram = $$(go.Diagram, 'myDiagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.LayeredDigraphLayout, {
|
||||
layerSpacing: 40,
|
||||
columnSpacing: 20,
|
||||
direction: 0,
|
||||
setsPortSpots: false
|
||||
// initializeOption:go.LayeredDigraphLayout.InitNaive,
|
||||
// layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
|
||||
})
|
||||
})
|
||||
this.myDiagram.groupTemplate = $$(
|
||||
go.Group,
|
||||
'Auto',
|
||||
{
|
||||
click: function(e, node) {
|
||||
if (node.data.detailData) {
|
||||
self.detailDataInGraphShow = node.data.detailData
|
||||
self.showGoChartFlag = false
|
||||
console.log(node.data)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
isSubGraphExpanded: true,
|
||||
wasSubGraphExpanded: false
|
||||
},
|
||||
$$(go.Shape, 'Rectangle', { fill: null, stroke: '#ffffff' }),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Table',
|
||||
$$('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
row: 0,
|
||||
column: 1,
|
||||
stroke: '#ffffff',
|
||||
font: 'bold 16px sans-serif',
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
stretch: go.GraphObject.Horizontal
|
||||
},
|
||||
new go.Binding('text')
|
||||
),
|
||||
$$(go.Picture, {
|
||||
row: 0,
|
||||
column: 1,
|
||||
desiredSize: new go.Size(30, 30),
|
||||
stretch: go.GraphObject.Horizontal
|
||||
}, new go.Binding('source'), new go.Binding('visible', 'key', this.pictureVisible)),
|
||||
$$(
|
||||
go.Placeholder,
|
||||
{ row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
|
||||
new go.Binding('padding', 'isSubGraphExpanded', function(exp) {
|
||||
return exp ? 10 : 0
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
self.myDiagram.linkTemplate = $$(
|
||||
go.Link,
|
||||
{
|
||||
curve: go.Link.Bezier
|
||||
},
|
||||
$$(
|
||||
go.Shape,
|
||||
{
|
||||
strokeWidth: 2,
|
||||
name: 'PIPE',
|
||||
strokeDashArray: [10, 10]
|
||||
},
|
||||
new go.Binding('stroke', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
})
|
||||
),
|
||||
$$(
|
||||
go.Shape,
|
||||
{ toArrow: 'Standard', stroke: null, scale: 2 },
|
||||
new go.Binding('fill', 'state', (f) => {
|
||||
return colorSet(f)
|
||||
})
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
textAlign: 'center',
|
||||
font: '16pt helvetica, arial, sans-serif',
|
||||
segmentOffset: new go.Point(0, 10),
|
||||
margin: 4,
|
||||
editable: false
|
||||
},
|
||||
new go.Binding('text', 'flow', this.linkTextConverter).makeTwoWay(),
|
||||
new go.Binding('stroke', 'flow').makeTwoWay()
|
||||
)
|
||||
)
|
||||
|
||||
function colorSet(param) {
|
||||
switch (param) {
|
||||
case 0:
|
||||
return 'white'
|
||||
case 1:
|
||||
return '#ffaa3d'
|
||||
case 2:
|
||||
return '#9fffa6'
|
||||
default:
|
||||
return '#6e6e6e'
|
||||
}
|
||||
}
|
||||
|
||||
self.myDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
$$(go.Panel, 'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle',
|
||||
{
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
|
||||
}
|
||||
),
|
||||
$$(go.Panel, 'Table', { desiredSize: new go.Size(28, 42) },
|
||||
$$(go.Picture, {
|
||||
row: 0,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
desiredSize: new go.Size(25, 25)
|
||||
}, new go.Binding('source')),
|
||||
$$(go.TextBlock, {
|
||||
row: 2,
|
||||
column: 0,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#ffffff'
|
||||
}, new go.Binding('text'))
|
||||
)
|
||||
),
|
||||
{
|
||||
click: function(e, node) {
|
||||
// self.detailAlertData = node.data.detailData
|
||||
// self.showGoChartFlag = false
|
||||
console.log(node.data)
|
||||
}
|
||||
},
|
||||
{
|
||||
toolTip:
|
||||
$$('ToolTip',
|
||||
$$(go.Panel, 'Table',
|
||||
$$(go.TextBlock, {
|
||||
row: 0,
|
||||
column: 0,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'taskId', () => {
|
||||
return '任务id：'
|
||||
})),
|
||||
$$(go.TextBlock, {
|
||||
row: 0,
|
||||
column: 1,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'taskId')),
|
||||
$$(go.TextBlock, {
|
||||
row: 1,
|
||||
column: 0,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'hostId', () => {
|
||||
return '虚拟机编号：'
|
||||
})),
|
||||
$$(go.TextBlock, {
|
||||
row: 1,
|
||||
column: 1,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'hostId')),
|
||||
$$(go.TextBlock, {
|
||||
row: 2,
|
||||
column: 0,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'configInfo', () => {
|
||||
return '配置信息：'
|
||||
})),
|
||||
$$(go.TextBlock, {
|
||||
row: 2,
|
||||
column: 1,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'configInfo')),
|
||||
$$(go.TextBlock, {
|
||||
row: 3,
|
||||
column: 0,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'state', () => {
|
||||
return '状态情况：'
|
||||
})),
|
||||
$$(go.TextBlock, {
|
||||
row: 3,
|
||||
column: 1,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 12px sans-serif ',
|
||||
stroke: '#000000'
|
||||
}, new go.Binding('text', 'state', (f) => {
|
||||
return this.getStateText(f)
|
||||
}))
|
||||
)
|
||||
)
|
||||
}
|
||||
)
|
||||
self.myDiagram.model = new go.GraphLinksModel(nodes, links)
|
||||
this.linkLoop()
|
||||
},
|
||||
linkLoop() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
const oldskips = this.myDiagram.skipsUndoManager
|
||||
this.myDiagram.skipsUndoManager = true
|
||||
this.myDiagram.links.each(function(link) {
|
||||
const shape = link.findObject('PIPE')
|
||||
const off = shape.strokeDashOffset - 2
|
||||
shape.strokeDashOffset = off <= 0 ? 20 : off
|
||||
// speed = parseInt(link.jb.flow);
|
||||
})
|
||||
this.myDiagram.skipsUndoManager = oldskips
|
||||
this.linkLoop()
|
||||
}, 500)
|
||||
},
|
||||
quitDetail() {
|
||||
this.init()
|
||||
this.showGoChartFlag = true
|
||||
},
|
||||
getHostDetail(hostId) {
|
||||
console.log(hostId)
|
||||
this.hostIdInDialog = hostId
|
||||
this.upHostLists = []
|
||||
this.downHostLists = []
|
||||
this.hostDetailInfo = {}
|
||||
this.logDetailInfo = []
|
||||
// getByhostId
|
||||
this.upHostLists = [
|
||||
{
|
||||
taskId: '60001',
|
||||
hostId: '6392',
|
||||
manufacturer: '阿里云',
|
||||
state: 1,
|
||||
configInfo: 'xxVCPU-xxG-Ostype'
|
||||
},
|
||||
{ taskId: '60002', hostId: '5321', manufacturer: '华为云', state: 0, configInfo: 'xxVCPU-xxG-Ostype' },
|
||||
{ taskId: '60001', hostId: '3016', manufacturer: '联通云', state: 0, configInfo: 'xxVCPU-xxG-Ostype' },
|
||||
{ taskId: '60003', hostId: '3007', manufacturer: '联通云', state: 1, configInfo: 'xxVCPU-xxG-Ostype' },
|
||||
{ taskId: '60002', hostId: '7111', manufacturer: '火山云', state: 2, configInfo: 'xxVCPU-xxG-Ostype' }]
|
||||
this.downHostLists = [
|
||||
{
|
||||
taskId: '60001',
|
||||
hostId: '6391',
|
||||
manufacturer: '阿里云',
|
||||
state: 0,
|
||||
configInfo: 'xxVCPU-xxG-Ostype'
|
||||
},
|
||||
{ taskId: '60002', hostId: '5324', manufacturer: '华为云', state: 0, configInfo: 'xxVCPU-xxG-Ostype' },
|
||||
{ taskId: '60001', hostId: '3018', manufacturer: '联通云', state: 1, configInfo: 'xxVCPU-xxG-Ostype' },
|
||||
{ taskId: '60003', hostId: '3008', manufacturer: '联通云', state: 2, configInfo: 'xxVCPU-xxG-Ostype' },
|
||||
{ taskId: '60002', hostId: '7112', manufacturer: '火山云', state: 1, configInfo: 'xxVCPU-xxG-Ostype' }]
|
||||
this.hostDetailInfo = {
|
||||
manufacturer: '阿里云', cpu: { useRatio: '70%', speed: '3.89GHZ', process: '210', thread: '3008' },
|
||||
memory: { using: '10.2GB', usable: '5.2GB' },
|
||||
disk: { activeTime: '13%', argResponseTime: '1.4ms', capacity: '932GB' }
|
||||
}
|
||||
this.logDetailInfo = [
|
||||
{ id: 0, taskId: '60001', time: '2023-08-02 13:44:44', state: 1 }, {
|
||||
id: 0,
|
||||
taskId: '60001',
|
||||
time: '2023-08-02 13:45:12',
|
||||
state: 0
|
||||
},
|
||||
{ id: 0, taskId: '60001', time: '2023-08-03 11:22:22', state: 2 }, {
|
||||
id: 0,
|
||||
taskId: '60002',
|
||||
time: '2023-08-03 13:44:44',
|
||||
state: 1
|
||||
},
|
||||
{ id: 0, taskId: '60002', time: '2023-08-03 13:44:44', state: 0 }, {
|
||||
id: 0,
|
||||
taskId: '60002',
|
||||
time: '2023-08-03 13:44:44',
|
||||
state: 2
|
||||
}]
|
||||
this.logDialogVisible = true
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
#taskAllocation {
|
||||
.top_row_button{
|
||||
margin-top:1.8vh;
|
||||
}
|
||||
#top-row-button-box {
|
||||
.el-button--primary {
|
||||
background-color: #1890ff1f
|
||||
}
|
||||
}
|
||||
|
||||
.top_row_text{
|
||||
color: #FFFFFF;
|
||||
margin-top:1.8vh;
|
||||
}
|
||||
|
||||
.title_row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.title_box_text {
|
||||
font-family: 'Alternate';
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title_box_hr {
|
||||
border-bottom: 2px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
width: 120%;
|
||||
margin-top: 2%;
|
||||
margin-left: -10%;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
.el-card__body{
|
||||
padding: 5px;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.card1{
|
||||
height:30vh;
|
||||
margin: 20px 20px 20px 20px;
|
||||
padding: 10px 20px 0 20px;
|
||||
}
|
||||
.card2{
|
||||
height:30vh;
|
||||
margin: 20px 20px 20px 20px;
|
||||
padding: 10px 20px 0 20px;
|
||||
}
|
||||
.card3{
|
||||
height:26vh;
|
||||
margin: 20px 20px 20px 20px;
|
||||
padding: 10px 20px 0 20px;
|
||||
}
|
||||
.card3-box{
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
height:25vh;
|
||||
}
|
||||
.chart_box {
|
||||
width: 90%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
overflow: hidden
|
||||
}
|
||||
.tableInner {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card1-inner{
|
||||
height:24vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.card1_inner_row{
|
||||
height:5vh;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card1_inner_num {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.card1_inner_img {
|
||||
margin-top:-2px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
.card2-inner{
|
||||
height:25vh;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -1vh;
|
||||
}
|
||||
.card-chart-box{
|
||||
width: 103%;
|
||||
margin-top: -5vh;
|
||||
margin-left: 2%;
|
||||
}
|
||||
.card3-inner-box{
|
||||
height:100%;
|
||||
padding-bottom:80px;
|
||||
color: #FFFFFF;
|
||||
width: 23.8%;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1.8%;
|
||||
}
|
||||
.card3-inner{
|
||||
height:19vh;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
}
|
||||
.card3_inner_img {
|
||||
margin-top:-2px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.card3_detail_box{
|
||||
margin-left: 20px;
|
||||
overflow: auto;
|
||||
height:13vh
|
||||
}
|
||||
|
||||
|
||||
.el-dialog {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-dialog > .el-dialog__body {
|
||||
padding: 0px;
|
||||
border-left: 2px solid #FFFFFF;
|
||||
border-right: 2px solid #FFFFFF;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
border-top: 2px solid #FFFFFF;
|
||||
border-left: 2px solid #FFFFFF;
|
||||
border-right: 2px solid #FFFFFF;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
border-bottom: 2px solid #FFFFFF;
|
||||
border-left: 2px solid #FFFFFF;
|
||||
border-right: 2px solid #FFFFFF;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top_button_box {
|
||||
margin-top: 1%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.title_class {
|
||||
font-family: 'Alternate';
|
||||
font-weight: bold;
|
||||
font-size: 11pt;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-descriptions__title {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
el-descriptions-item el-descriptions-item__cell {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div id="vmMonitor" class="div-vm-monitor">
|
||||
<!-- <el-tooltip class="item" effect="dark" placement="left" style="float:right;margin-right:2%">-->
|
||||
<!-- <div v-html="tip" slot="content" style="font-size: 16px"></div>-->
|
||||
<!-- <i style="color:grey" class="el-icon-info help-info">提示</i>-->
|
||||
<!-- </el-tooltip>-->
|
||||
<iframe id="monitor-iframe-id" :src="monitorSrcUrl" width="100%" style="border-width: 0px; overflow-y: hidden; scrolling: no;min-height: 97vh " ></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import local from './local'
|
||||
import $ from 'jQuery'
|
||||
export default {
|
||||
name: 'VmMonitor',
|
||||
props: ['vmId', 'platformResourceId'],
|
||||
i18n: {
|
||||
messages: local
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageHeight: 500,
|
||||
monitorSrcUrl: '',
|
||||
ocAdress: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.pageHeight = window.innerHeight - 150
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
this.pageHeight = window.innerHeight - 150
|
||||
})()
|
||||
}
|
||||
this.getOcAdress()
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
getOcAdress() {
|
||||
|
||||
var iframe = document.getElementById('monitor-iframe-id')
|
||||
iframe.src = 'http://175.27.166.32:5005'
|
||||
|
||||
// fetchList('/cloud/v1.0/vms/-1/snmpInfo', {}).then(({ data }) => {
|
||||
// this.ocAdress = data.ocAdress
|
||||
// this.getMonitorURL()
|
||||
// }).catch((error) => {
|
||||
// this.$message({ type: 'error', message: error.msg, duration: 5000 })
|
||||
// })
|
||||
},
|
||||
// getMonitorURL() {
|
||||
// // 此处所有所需参数，待与OC打通后，从OC获取
|
||||
// const TOKEN = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyTmFtZSI6ImFkbWluIn0.SAx8sRejROTvxSydMhbuB2SUOzLLXCDPGAVOL-aGuLY'
|
||||
// // let OC_URL = 'http://10.4.79.34:8080/aclome';
|
||||
// const OC_URL = this.ocAdress
|
||||
// const MONITOR_URL = '/acl_physical_host_view/pages/newAbstract/index.jsp'
|
||||
// // let resourceId = '8a84cfa271ecc8780171ed29b1722d0a.6f3430aab56802dca168c8fab96f6c30';
|
||||
// // let resTypeId = 'HOST_LINUX';
|
||||
// // var _start = resTypeId.indexOf("_")+1;
|
||||
// // var _end = resTypeId.length;
|
||||
// // let resourceType = resTypeId.substr(_start, _end);
|
||||
// // let driverName = 'HOST';
|
||||
// // let workspaceId = resTypeId + "MonitorWorkspace";
|
||||
// // let _url = OC_URL + MONITOR_URL + '?resourceId='+resourceId+ '&resourceTypeId='+resTypeId
|
||||
// // +'&resourceType='+resourceType+'&driverName='+driverName+'&workspaceId='+workspaceId + '&token=' + TOKEN;
|
||||
// const _url = OC_URL + MONITOR_URL + '?inventoryId=' + this.platformResourceId + '&token=' + TOKEN
|
||||
// this.monitorSrcUrl = _url
|
||||
// // document.cookie = 'SameSite=None; Secure=true'
|
||||
// var iframe = document.getElementById('monitor-iframe-id')
|
||||
// iframe.src = _url
|
||||
// // iframe.contentWindow.onerror = function() {
|
||||
// // alert('errr')
|
||||
// // console.log('errrr')
|
||||
// // }
|
||||
// // iframe.addEventListener('load', function() {
|
||||
// // // 代码能执行到这里说明已经载入成功完毕了
|
||||
// // alert('ok')
|
||||
// // this.removeEventListener('load', arguments.call, false)
|
||||
// // // 这里是回调函数
|
||||
// // }, false)
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
tip() {
|
||||
return '如果使用chrome浏览器发生跨域问题，请按以下方式进行配置：<br/>\
|
||||
chrome浏览器中搜索下面地址：<br/>\
|
||||
chrome://flags/#same-site-by-default-cookies <br/>\
|
||||
chrome://flags/#cookies-without-same-site-must-be-secure <br/>\
|
||||
这两项设置为Disabled，并重启浏览器'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.div-vm-monitor{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export default {
|
||||
zh: {
|
||||
vmMonitor: {
|
||||
}
|
||||
},
|
||||
en: {
|
||||
vmMonitor: {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class='containers'>
|
||||
<div class='canvas' ref='canvas'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/bpmn.js'>
|
||||
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containers {
|
||||
position: absolute;
|
||||
width: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
// 引入相关的依赖
|
||||
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler'
|
||||
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
|
||||
import customTranslate from './customTranslate' // 汉化包引入
|
||||
import { videoBusiness } from './videoBusiness'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
returnId: '',
|
||||
bpmnModeler: null,
|
||||
canvas: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.setZoomLevel(1.0) // 设置缩放级别为1.0
|
||||
this.autoFit() // 自适应显示流程图
|
||||
},
|
||||
|
||||
methods: {
|
||||
setZoomLevel(level) {
|
||||
const canvas = this.bpmnModeler.get('canvas')
|
||||
canvas.zoom(level)
|
||||
},
|
||||
autoFit() {
|
||||
const canvas = this.bpmnModeler.get('canvas')
|
||||
canvas.zoom('fit-viewport')
|
||||
},
|
||||
init() {
|
||||
// 将汉化包包装成一个模块
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const customTranslateMolude = {
|
||||
translate: ['value', customTranslate]
|
||||
}
|
||||
this.bpmnModeler = new BpmnModeler({
|
||||
// 建模
|
||||
container: this.$refs.canvas,
|
||||
// propertiesPanel: {
|
||||
// // 添加控制板
|
||||
// parent: '#properties-panel'
|
||||
// },
|
||||
// additionalModules: [
|
||||
// // 右边的属性栏
|
||||
// propertiesProviderModule,
|
||||
// propertiesPanelModule,
|
||||
// customTranslateMolude // 汉化模块
|
||||
// ],
|
||||
moddleExtensions: {
|
||||
camunda: camundaModdleDescriptor
|
||||
}
|
||||
})
|
||||
},
|
||||
import() {
|
||||
this.bpmnModeler.importXML(videoBusiness, (err) => {
|
||||
console.log(111, err)
|
||||
if (!err) {
|
||||
this.success()
|
||||
this.hidePalette() // 调用隐藏左侧栏的方法
|
||||
} else {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
hidePalette() {
|
||||
const paletteContainer = this.$el.querySelector('.djs-palette')
|
||||
paletteContainer.style.display = 'none'
|
||||
},
|
||||
success() {
|
||||
console.log('创建成功!')
|
||||
this.bpmnModeler.on('commandStack.changed', () => {
|
||||
this.getXML().then((xml) => {
|
||||
})
|
||||
})
|
||||
this.addModelerListener()
|
||||
this.addEventBusListener()
|
||||
},
|
||||
getXML() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
|
||||
err ? reject(err) : resolve(xml)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 添加绑定事件
|
||||
addBpmnListener() {
|
||||
const that = this
|
||||
// 获取a标签dom节点
|
||||
const downloadLink = this.$refs.saveDiagram
|
||||
const downloadSvgLink = this.$refs.saveSvg
|
||||
// 给图绑定事件，当图有发生改变就会触发这个事件
|
||||
this.bpmnModeler.on('commandStack.changed', function() {
|
||||
that.saveSVG(function(err, svg) {
|
||||
that.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
|
||||
})
|
||||
that.saveDiagram(function(err, xml) {
|
||||
that.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
|
||||
})
|
||||
})
|
||||
},
|
||||
addModelerListener() {
|
||||
// 监听 modeler
|
||||
const bpmnjs = this.bpmnModeler
|
||||
const that = this
|
||||
// 'shape.removed', 'connect.end', 'connect.move'
|
||||
const events = ['shape.added', 'shape.move.end', 'shape.removed']
|
||||
events.forEach(function(event) {
|
||||
that.bpmnModeler.on(event, e => {
|
||||
var elementRegistry = bpmnjs.get('elementRegistry')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
|
||||
if (event === 'shape.added') {
|
||||
console.log('新增了shape')
|
||||
} else if (event === 'shape.move.end') {
|
||||
console.log('移动了shape')
|
||||
} else if (event === 'shape.removed') {
|
||||
console.log('删除了shape')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
addEventBusListener() {
|
||||
// 监听 element
|
||||
const that = this
|
||||
const eventBus = this.bpmnModeler.get('eventBus')
|
||||
const eventTypes = ['element.click', 'element.changed']
|
||||
eventTypes.forEach(function(eventType) {
|
||||
eventBus.on(eventType, function(e) {
|
||||
if (!e || e.element.type === 'bpmn:Process') return
|
||||
if (eventType === 'element.changed') {
|
||||
that.elementChanged(eventType, e)
|
||||
} else if (eventType === 'element.click') {
|
||||
that.$emit('call-parent-method', e.element.businessObject.name)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
elementChanged(eventType, e) {
|
||||
var shape = this.getShape(e.element.id)
|
||||
if (!shape) {
|
||||
// 若是shape为null则表示删除, 无论是shape还是connect删除都调用此处
|
||||
console.log('无效的shape')
|
||||
// 由于上面已经用 shape.removed 检测了shape的删除, 因此这里只判断是否是线
|
||||
if (this.isSequenceFlow(shape.type)) {
|
||||
console.log('删除了线')
|
||||
}
|
||||
}
|
||||
if (!this.isInvalid(shape.type)) {
|
||||
if (this.isSequenceFlow(shape.type)) {
|
||||
console.log('改变了线')
|
||||
}
|
||||
}
|
||||
},
|
||||
getShape(id) {
|
||||
var elementRegistry = this.bpmnModeler.get('elementRegistry')
|
||||
return elementRegistry.get(id)
|
||||
},
|
||||
isInvalid(param) { // 判断是否是无效的值
|
||||
return param === null || param === undefined || param === ''
|
||||
},
|
||||
isSequenceFlow(type) { // 判断是否是线
|
||||
return type === 'bpmn:SequenceFlow'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import translations from './translationsGerman'
|
||||
|
||||
export default function customTranslate(template, replacements) {
|
||||
replacements = replacements || {}
|
||||
|
||||
// Translate
|
||||
template = translations[template] || template
|
||||
|
||||
// Replace
|
||||
return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
var str = replacements[key]
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (translations[replacements[key]] != null && translations[replacements[key]] != 'undefined') {
|
||||
str = translations[replacements[key]]
|
||||
}
|
||||
return str || '{' + key + '}'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
export default {
|
||||
|
||||
// Labels
|
||||
'Activate the global connect tool': '激活全局连接工具',
|
||||
'Append {type}': '添加 {type}',
|
||||
'Add Lane above': '在上面添加道',
|
||||
'Divide into two Lanes': '分割成两个道',
|
||||
'Divide into three Lanes': '分割成三个道',
|
||||
'Add Lane below': '在下面添加道',
|
||||
'Append compensation activity': '追加补偿活动',
|
||||
'Change type': '修改类型',
|
||||
'Connect using Association': '使用关联连接',
|
||||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
|
||||
'Connect using DataInputAssociation': '使用数据输入关联连接',
|
||||
'Remove': '移除',
|
||||
'Activate the hand tool': '激活抓手工具',
|
||||
'Activate the lasso tool': '激活套索工具',
|
||||
'Activate the create/remove space tool': '激活创建/删除空间工具',
|
||||
'Create expanded SubProcess': '创建扩展子过程',
|
||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
|
||||
'Create Pool/Participant': '创建池/参与者',
|
||||
'Parallel Multi Instance': '并行多重事件',
|
||||
'Sequential Multi Instance': '时序多重事件',
|
||||
'DataObjectReference': '数据对象参考',
|
||||
'DataStoreReference': '数据存储参考',
|
||||
'Loop': '循环',
|
||||
'Ad-hoc': '即席',
|
||||
'Create {type}': '创建 {type}',
|
||||
'Task': '任务',
|
||||
'Send Task': '发送任务',
|
||||
'Receive Task': '接收任务',
|
||||
'User Task': '用户任务',
|
||||
'Manual Task': '手工任务',
|
||||
'Business Rule Task': '业务规则任务',
|
||||
'Service Task': '服务任务',
|
||||
'Script Task': '脚本任务',
|
||||
'Call Activity': '调用活动',
|
||||
'Sub Process (collapsed)': '子流程（折叠的）',
|
||||
'Sub Process (expanded)': '子流程（展开的）',
|
||||
'Start Event': '开始事件',
|
||||
'StartEvent': '开始事件',
|
||||
'Intermediate Throw Event': '中间事件',
|
||||
'End Event': '结束事件',
|
||||
'EndEvent': '结束事件',
|
||||
'Create Gateway': '创建网关',
|
||||
'Create Intermediate/Boundary Event': '创建中间/边界事件',
|
||||
'Message Start Event': '消息开始事件',
|
||||
'Timer Start Event': '定时开始事件',
|
||||
'Conditional Start Event': '条件开始事件',
|
||||
'Signal Start Event': '信号开始事件',
|
||||
'Error Start Event': '错误开始事件',
|
||||
'Escalation Start Event': '升级开始事件',
|
||||
'Compensation Start Event': '补偿开始事件',
|
||||
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
|
||||
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
|
||||
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
|
||||
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
|
||||
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
|
||||
'Message Intermediate Catch Event': '消息中间捕获事件',
|
||||
'Message Intermediate Throw Event': '消息中间抛出事件',
|
||||
'Timer Intermediate Catch Event': '定时中间捕获事件',
|
||||
'Escalation Intermediate Throw Event': '升级中间抛出事件',
|
||||
'Conditional Intermediate Catch Event': '条件中间捕获事件',
|
||||
'Link Intermediate Catch Event': '链接中间捕获事件',
|
||||
'Link Intermediate Throw Event': '链接中间抛出事件',
|
||||
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
|
||||
'Signal Intermediate Catch Event': '信号中间捕获事件',
|
||||
'Signal Intermediate Throw Event': '信号中间抛出事件',
|
||||
'Message End Event': '消息结束事件',
|
||||
'Escalation End Event': '定时结束事件',
|
||||
'Error End Event': '错误结束事件',
|
||||
'Cancel End Event': '取消结束事件',
|
||||
'Compensation End Event': '补偿结束事件',
|
||||
'Signal End Event': '信号结束事件',
|
||||
'Terminate End Event': '终止结束事件',
|
||||
'Message Boundary Event': '消息边界事件',
|
||||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
|
||||
'Timer Boundary Event': '定时边界事件',
|
||||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
|
||||
'Escalation Boundary Event': '升级边界事件',
|
||||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
|
||||
'Conditional Boundary Event': '条件边界事件',
|
||||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
|
||||
'Error Boundary Event': '错误边界事件',
|
||||
'Cancel Boundary Event': '取消边界事件',
|
||||
'Signal Boundary Event': '信号边界事件',
|
||||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
|
||||
'Compensation Boundary Event': '补偿边界事件',
|
||||
'Exclusive Gateway': '互斥网关',
|
||||
'Parallel Gateway': '并行网关',
|
||||
'Inclusive Gateway': '相容网关',
|
||||
'Complex Gateway': '复杂网关',
|
||||
'Event based Gateway': '事件网关',
|
||||
'Transaction': '转运',
|
||||
'Sub Process': '子流程',
|
||||
'Event Sub Process': '事件子流程',
|
||||
'Collapsed Pool': '折叠池',
|
||||
'Expanded Pool': '展开池',
|
||||
|
||||
// Errors
|
||||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
|
||||
'no shape type specified': '没有指定的形状类型',
|
||||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
|
||||
'out of bounds release': 'out of bounds release',
|
||||
'more than {count} child lanes': '子道大于{count} ',
|
||||
'element required': '元素不能为空',
|
||||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
|
||||
'no diagram to display': '没有可展示的流程图',
|
||||
'no process or collaboration to display': '没有可展示的流程/协作',
|
||||
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
|
||||
'already rendered {element}': '{element} 已被渲染',
|
||||
'failed to import {element}': '导入{element}失败',
|
||||
// 属性面板的参数
|
||||
'Id': '编号',
|
||||
'Name': '名称',
|
||||
'General': '常规',
|
||||
'Details': '详情',
|
||||
'Message Name': '消息名称',
|
||||
'Message': '消息',
|
||||
'Initiator': '创建者',
|
||||
'Asynchronous Continuations': '持续异步',
|
||||
'Asynchronous Before': '异步前',
|
||||
'Asynchronous After': '异步后',
|
||||
'Job Configuration': '工作配置',
|
||||
'Exclusive': '排除',
|
||||
'Job Priority': '工作优先级',
|
||||
'Retry Time Cycle': '重试时间周期',
|
||||
'Documentation': '文档',
|
||||
'Element Documentation': '元素文档',
|
||||
'History Configuration': '历史配置',
|
||||
'History Time To Live': '历史的生存时间',
|
||||
'Forms': '表单',
|
||||
'Form Key': '表单key',
|
||||
'Form Fields': '表单字段',
|
||||
'Business Key': '业务key',
|
||||
'Form Field': '表单字段',
|
||||
'ID': '编号',
|
||||
'Type': '类型',
|
||||
'Label': '名称',
|
||||
'Default Value': '默认值',
|
||||
'Validation': '校验',
|
||||
'Add Constraint': '添加约束',
|
||||
'Config': '配置',
|
||||
'Properties': '属性',
|
||||
'Add Property': '添加属性',
|
||||
'Value': '值',
|
||||
'Listeners': '监听器',
|
||||
'Execution Listener': '执行监听',
|
||||
'Event Type': '事件类型',
|
||||
'Listener Type': '监听器类型',
|
||||
'Java Class': 'Java类',
|
||||
'Expression': '表达式',
|
||||
'Must provide a value': '必须提供一个值',
|
||||
'Delegate Expression': '代理表达式',
|
||||
'Script': '脚本',
|
||||
'Script Format': '脚本格式',
|
||||
'Script Type': '脚本类型',
|
||||
'Inline Script': '内联脚本',
|
||||
'External Script': '外部脚本',
|
||||
'Resource': '资源',
|
||||
'Field Injection': '字段注入',
|
||||
'Extensions': '扩展',
|
||||
'Input/Output': '输入/输出',
|
||||
'Input Parameters': '输入参数',
|
||||
'Output Parameters': '输出参数',
|
||||
'Parameters': '参数',
|
||||
'Output Parameter': '输出参数',
|
||||
'Timer Definition Type': '定时器定义类型',
|
||||
'Timer Definition': '定时器定义',
|
||||
'Date': '日期',
|
||||
'Duration': '持续',
|
||||
'Cycle': '循环',
|
||||
'Signal': '信号',
|
||||
'Signal Name': '信号名称',
|
||||
'Escalation': '升级',
|
||||
'Error': '错误',
|
||||
'Link Name': '链接名称',
|
||||
'Condition': '条件名称',
|
||||
'Variable Name': '变量名称',
|
||||
'Variable Event': '变量事件',
|
||||
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
|
||||
'Wait for Completion': '等待完成',
|
||||
'Activity Ref': '活动参考',
|
||||
'Version Tag': '版本标签',
|
||||
'Executable': '可执行文件',
|
||||
'External Task Configuration': '扩展任务配置',
|
||||
'Task Priority': '任务优先级',
|
||||
'External': '外部',
|
||||
'Connector': '连接器',
|
||||
'Must configure Connector': '必须配置连接器',
|
||||
'Connector Id': '连接器编号',
|
||||
'Implementation': '实现方式',
|
||||
'Field Injections': '字段注入',
|
||||
'Fields': '字段',
|
||||
'Result Variable': '结果变量',
|
||||
'Topic': '主题',
|
||||
'Configure Connector': '配置连接器',
|
||||
'Input Parameter': '输入参数',
|
||||
'Assignee': '代理人',
|
||||
'Candidate Users': '候选用户',
|
||||
'Candidate Groups': '候选组',
|
||||
'Due Date': '到期时间',
|
||||
'Follow Up Date': '跟踪日期',
|
||||
'Priority': '优先级',
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'Variables': '变量'
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
export const videoBusiness = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn2:definitions
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
||||
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
|
||||
xmlns:flowable="http://flowable.org/bpmn" id="diagram_Process_1715047983399" targetNamespace="http://flowable.org/bpmn">
|
||||
<bpmn2:process id="Process_1715047983399" name="业务流程_1715047983399" isExecutable="true" flowable:versionTag="">
|
||||
<bpmn2:sequenceFlow id="Flow_1cnk1f7" name=" " sourceRef="Activity_0dyum3f" targetRef="Activity_0wunygp" />
|
||||
<bpmn2:sequenceFlow id="Flow_1opy1zb" name=" " sourceRef="Activity_0dyum3f" targetRef="Activity_1ah6nxs" />
|
||||
<bpmn2:sequenceFlow id="Flow_1c2s1wm" name=" " sourceRef="Activity_0dyum3f" targetRef="Activity_0lfb0vh" />
|
||||
<bpmn2:task id="Activity_0dyum3f" name="LoadVideo">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:outgoing>Flow_1cnk1f7</bpmn2:outgoing>
|
||||
<bpmn2:outgoing>Flow_1opy1zb</bpmn2:outgoing>
|
||||
<bpmn2:outgoing>Flow_1c2s1wm</bpmn2:outgoing>
|
||||
<bpmn2:outgoing>Flow_1974da4</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_0wunygp" name="Prompt words">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1cnk1f7</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0cnmmx1</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_1ah6nxs" name="Negative Prompt word">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1opy1zb</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0r6d3t1</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_0lfb0vh" name="Batch Prompt Schedule">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1c2s1wm</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_087ek5m</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_1i78hq0" name="Examine & Verify">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1974da4</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0eo9o4t</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_08mi4ks" name="Image Resize">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_0eo9o4t</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_1oleuq6</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_0vyso03" name="Empty Latent Image">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1oleuq6</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0gwmutf</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_08vtzni" name="VAE Decode">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_0gwmutf</bpmn2:incoming>
|
||||
<bpmn2:incoming>Flow_01ke3nc</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_1jbdt54</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_0kkeprj" name="Load Model">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_0cnmmx1</bpmn2:incoming>
|
||||
<bpmn2:incoming>Flow_0r6d3t1</bpmn2:incoming>
|
||||
<bpmn2:incoming>Flow_087ek5m</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0eqfiir</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_1m1bnjv" name="Transcoding">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_0eqfiir</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_18y364p</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_1ttr0u1" name="Apply Controlnet">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_18y364p</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_01ke3nc</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:sequenceFlow id="Flow_1974da4" name=" " sourceRef="Activity_0dyum3f" targetRef="Activity_1i78hq0" />
|
||||
<bpmn2:sequenceFlow id="Flow_0eo9o4t" name=" " sourceRef="Activity_1i78hq0" targetRef="Activity_08mi4ks" />
|
||||
<bpmn2:sequenceFlow id="Flow_1oleuq6" name=" " sourceRef="Activity_08mi4ks" targetRef="Activity_0vyso03" />
|
||||
<bpmn2:sequenceFlow id="Flow_0gwmutf" name=" " sourceRef="Activity_0vyso03" targetRef="Activity_08vtzni" />
|
||||
<bpmn2:sequenceFlow id="Flow_0cnmmx1" name=" " sourceRef="Activity_0wunygp" targetRef="Activity_0kkeprj" />
|
||||
<bpmn2:sequenceFlow id="Flow_0r6d3t1" name=" " sourceRef="Activity_1ah6nxs" targetRef="Activity_0kkeprj" />
|
||||
<bpmn2:sequenceFlow id="Flow_087ek5m" name=" " sourceRef="Activity_0lfb0vh" targetRef="Activity_0kkeprj" />
|
||||
<bpmn2:sequenceFlow id="Flow_0eqfiir" name=" " sourceRef="Activity_0kkeprj" targetRef="Activity_1m1bnjv" />
|
||||
<bpmn2:sequenceFlow id="Flow_18y364p" name=" " sourceRef="Activity_1m1bnjv" targetRef="Activity_1ttr0u1" />
|
||||
<bpmn2:sequenceFlow id="Flow_01ke3nc" name=" " sourceRef="Activity_1ttr0u1" targetRef="Activity_08vtzni" />
|
||||
<bpmn2:task id="Activity_0nu1joc" name="Save Image">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1jbdt54</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_1xiaghi</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:task id="Activity_0i5y01g" name="Video Combine">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1xiaghi</bpmn2:incoming>
|
||||
</bpmn2:task>
|
||||
<bpmn2:sequenceFlow id="Flow_1jbdt54" name=" " sourceRef="Activity_08vtzni" targetRef="Activity_0nu1joc" />
|
||||
<bpmn2:sequenceFlow id="Flow_1xiaghi" name=" " sourceRef="Activity_0nu1joc" targetRef="Activity_0i5y01g" />
|
||||
<bpmn2:group id="Group_1nx28wd" categoryValueRef="CategoryValue_0y4ovkp" name="inputs" />
|
||||
<bpmn2:group id="Group_07eosei" categoryValueRef="CategoryValue_1oqtz3m" name="prompt" />
|
||||
<bpmn2:group id="Group_0v3ueje" categoryValueRef="CategoryValue_1d5yhcl" name="work area" />
|
||||
<bpmn2:group id="Group_14ujsyq" categoryValueRef="CategoryValue_1qwoppc" name="outputs" />
|
||||
</bpmn2:process>
|
||||
<bpmn2:category id="Category_1i49cse">
|
||||
<bpmn2:categoryValue id="CategoryValue_0y4ovkp" value="inputs" />
|
||||
</bpmn2:category>
|
||||
<bpmn2:category id="Category_0rd6qr0">
|
||||
<bpmn2:categoryValue id="CategoryValue_1oqtz3m" value="prompt" />
|
||||
</bpmn2:category>
|
||||
<bpmn2:category id="Category_1nsqge3">
|
||||
<bpmn2:categoryValue id="CategoryValue_1d5yhcl" value="work area" />
|
||||
</bpmn2:category>
|
||||
<bpmn2:category id="Category_18vawsf">
|
||||
<bpmn2:categoryValue id="CategoryValue_1qwoppc" value="outputs" />
|
||||
</bpmn2:category>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1715047983399">
|
||||
<bpmndi:BPMNEdge id="Flow_1cnk1f7_di" bpmnElement="Flow_1cnk1f7">
|
||||
<di:waypoint x="230" y="210" />
|
||||
<di:waypoint x="275" y="210" />
|
||||
<di:waypoint x="275" y="170" />
|
||||
<di:waypoint x="320" y="170" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="277" y="187" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1opy1zb_di" bpmnElement="Flow_1opy1zb">
|
||||
<di:waypoint x="230" y="210" />
|
||||
<di:waypoint x="275" y="210" />
|
||||
<di:waypoint x="275" y="250" />
|
||||
<di:waypoint x="320" y="250" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="277" y="227" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1c2s1wm_di" bpmnElement="Flow_1c2s1wm">
|
||||
<di:waypoint x="230" y="210" />
|
||||
<di:waypoint x="275" y="210" />
|
||||
<di:waypoint x="275" y="350" />
|
||||
<di:waypoint x="320" y="350" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="277" y="333" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1974da4_di" bpmnElement="Flow_1974da4">
|
||||
<di:waypoint x="180" y="170" />
|
||||
<di:waypoint x="180" y="50" />
|
||||
<di:waypoint x="560" y="50" />
|
||||
<di:waypoint x="560" y="90" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="357" y="32" width="27" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0eo9o4t_di" bpmnElement="Flow_0eo9o4t">
|
||||
<di:waypoint x="610" y="130" />
|
||||
<di:waypoint x="650" y="130" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="618" y="112" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1oleuq6_di" bpmnElement="Flow_1oleuq6">
|
||||
<di:waypoint x="750" y="130" />
|
||||
<di:waypoint x="800" y="130" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="762" y="112" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0gwmutf_di" bpmnElement="Flow_0gwmutf">
|
||||
<di:waypoint x="900" y="130" />
|
||||
<di:waypoint x="935" y="130" />
|
||||
<di:waypoint x="935" y="240" />
|
||||
<di:waypoint x="970" y="240" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="947" y="182" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0cnmmx1_di" bpmnElement="Flow_0cnmmx1">
|
||||
<di:waypoint x="420" y="150" />
|
||||
<di:waypoint x="465" y="150" />
|
||||
<di:waypoint x="465" y="330" />
|
||||
<di:waypoint x="510" y="330" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="427" y="163" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0r6d3t1_di" bpmnElement="Flow_0r6d3t1">
|
||||
<di:waypoint x="420" y="250" />
|
||||
<di:waypoint x="465" y="250" />
|
||||
<di:waypoint x="465" y="330" />
|
||||
<di:waypoint x="510" y="330" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="427" y="233" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_087ek5m_di" bpmnElement="Flow_087ek5m">
|
||||
<di:waypoint x="420" y="350" />
|
||||
<di:waypoint x="465" y="350" />
|
||||
<di:waypoint x="465" y="330" />
|
||||
<di:waypoint x="510" y="330" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="427" y="333" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0eqfiir_di" bpmnElement="Flow_0eqfiir">
|
||||
<di:waypoint x="610" y="340" />
|
||||
<di:waypoint x="650" y="340" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="617" y="322" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_18y364p_di" bpmnElement="Flow_18y364p">
|
||||
<di:waypoint x="750" y="340" />
|
||||
<di:waypoint x="800" y="340" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="762" y="322" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_01ke3nc_di" bpmnElement="Flow_01ke3nc">
|
||||
<di:waypoint x="900" y="340" />
|
||||
<di:waypoint x="935" y="340" />
|
||||
<di:waypoint x="935" y="240" />
|
||||
<di:waypoint x="970" y="240" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="947" y="303" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1jbdt54_di" bpmnElement="Flow_1jbdt54">
|
||||
<di:waypoint x="1020" y="280" />
|
||||
<di:waypoint x="1020" y="470" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="1022" y="372" width="27" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1xiaghi_di" bpmnElement="Flow_1xiaghi">
|
||||
<di:waypoint x="1020" y="550" />
|
||||
<di:waypoint x="1020" y="610" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="1022" y="577" width="26" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="Activity_0ngk43w_di" bpmnElement="Activity_0dyum3f">
|
||||
<dc:Bounds x="130" y="170" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_052fbt4_di" bpmnElement="Activity_0wunygp">
|
||||
<dc:Bounds x="320" y="110" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0e6uyu9_di" bpmnElement="Activity_1ah6nxs">
|
||||
<dc:Bounds x="320" y="210" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1lgz1se_di" bpmnElement="Activity_0lfb0vh">
|
||||
<dc:Bounds x="320" y="310" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1i78hq0_di" bpmnElement="Activity_1i78hq0">
|
||||
<dc:Bounds x="510" y="90" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_08mi4ks_di" bpmnElement="Activity_08mi4ks">
|
||||
<dc:Bounds x="650" y="90" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0vyso03_di" bpmnElement="Activity_0vyso03">
|
||||
<dc:Bounds x="800" y="90" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_08vtzni_di" bpmnElement="Activity_08vtzni">
|
||||
<dc:Bounds x="970" y="200" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0kkeprj_di" bpmnElement="Activity_0kkeprj">
|
||||
<dc:Bounds x="510" y="300" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1m1bnjv_di" bpmnElement="Activity_1m1bnjv">
|
||||
<dc:Bounds x="650" y="300" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1ttr0u1_di" bpmnElement="Activity_1ttr0u1">
|
||||
<dc:Bounds x="800" y="300" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0nu1joc_di" bpmnElement="Activity_0nu1joc">
|
||||
<dc:Bounds x="970" y="470" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0i5y01g_di" bpmnElement="Activity_0i5y01g">
|
||||
<dc:Bounds x="970" y="610" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_1nx28wd_di" bpmnElement="Group_1nx28wd">
|
||||
<dc:Bounds x="105" y="100" width="155" height="190" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="126" y="133" width="30" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_07eosei_di" bpmnElement="Group_07eosei">
|
||||
<dc:Bounds x="290" y="70" width="160" height="340" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="352" y="77" width="36" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_0v3ueje_di" bpmnElement="Group_0v3ueje">
|
||||
<dc:Bounds x="480" y="70" width="640" height="340" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="1006" y="93" width="48" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_14ujsyq_di" bpmnElement="Group_14ujsyq">
|
||||
<dc:Bounds x="900" y="450" width="240" height="260" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="911" y="473" width="37" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn2:definitions>`
|
||||
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: '80%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '25vh',
|
||||
},
|
||||
chartTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.setOptions()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el)
|
||||
},
|
||||
setOptions(data) {
|
||||
let _self = this
|
||||
this.chart = echarts.init(this.$el)
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: _self.chartTitle,
|
||||
textStyle: {
|
||||
color: '#DDD', // 标题文字颜色设置为 #AAA
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
// 设置提示框组件
|
||||
trigger: 'axis', // 鼠标悬停时触发提示框
|
||||
axisPointer: {
|
||||
// 坐标轴指示器配置项
|
||||
type: 'shadow', // 阴影指示器，显示柱状图的阴影区域
|
||||
},
|
||||
formatter: function (params) {
|
||||
// 使用 formatter 自定义提示框内容
|
||||
var value = params[0].value
|
||||
return _self.chartTitle + '：' + value
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
type: 'category',
|
||||
data: ['磋商前', '磋商后'],
|
||||
axisLabel: {
|
||||
color: '#DDD', // x轴文本颜色设置为灰色
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#DDD', // x轴文本颜色设置为灰色
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: 'bar',
|
||||
barWidth: '40%', // 设置柱状图的宽度为原来的 40%
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#337dff', // 设置柱状图颜色为#337dff
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
componentResize() {
|
||||
setTimeout(() => {
|
||||
this.chart.resize()
|
||||
}, 800)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,471 @@
|
|||
<template>
|
||||
<el-row style="background-image: url('/static/background/background.png')">
|
||||
<el-row>
|
||||
<el-radio-group v-model='activeName' @change='handleRadioChange'>
|
||||
<el-radio-button label='1'>长期磋商</el-radio-button>
|
||||
<el-radio-button label='2'>短期磋商</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='16'>
|
||||
<div id='diagramParentDiv'>
|
||||
<div id='diagramDiv' style='width: 100%; height: 90vh' />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span='8' style='margin-top: 6%'>
|
||||
<bar-chart chartTitle='资源数量' :chartData='chartData' style='padding: 10px'></bar-chart>
|
||||
<bar-chart chartTitle='CPU配额' :chartData='chartDataCpu' style='padding: 10px'></bar-chart>
|
||||
<bar-chart chartTitle='内存配额' :chartData='chartDataMem' style='padding: 10px'></bar-chart>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import BarChart from './components/chart.vue'
|
||||
import bpmnModal from './bpmn/bpmnModal.vue'
|
||||
|
||||
export function getPrivateCloud() {
|
||||
return request({
|
||||
url: '/cloud/v1.0/datacenter/list?withDetail=false',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getConsulList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/consult/list?pageNumber=1&pageSize=1000',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getPublicCloud() {
|
||||
return request({
|
||||
url: '/cloud/pub/v1.0/cloud_platform?pageNo=1&pageSize=10000',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getResourceCount(cloudType, id) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/consult/cloudType/' + cloudType + '/id/' + id,
|
||||
// url: '/admin/api/sysRole/roleMenuTree' + '/' + role,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
import go from 'gojs'
|
||||
|
||||
export async function createConsult(cloudPlatformIds, privateIds) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/cloud/jcce/v1.0/consult/createConsult',
|
||||
method: 'post',
|
||||
params: {
|
||||
cloudPlatformIds: cloudPlatformIds,
|
||||
privatePlatformIds: privateIds
|
||||
}
|
||||
}).then((data) => {
|
||||
resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
BarChart,
|
||||
bpmnModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: [100, 100],
|
||||
chartDataCpu: [100, 100],
|
||||
chartDataMem: [100, 100],
|
||||
consulResult: [],
|
||||
publicCloudList: [],
|
||||
privateCloudList: [],
|
||||
activeName: '1'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
function getImage(node, map, type) {
|
||||
if (map[type + '_' + node.id] === undefined) {
|
||||
return require('@/static/OWFS_CLOSE.png')
|
||||
} else {
|
||||
if (type === 'public') {
|
||||
return require('@/static/OWFS.png')
|
||||
} else {
|
||||
return require('@/static/OWFS_DOWN.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const apis = [
|
||||
this.getPublicRes(),
|
||||
this.getPrivateRes(),
|
||||
this.getConsulResult()
|
||||
]
|
||||
Promise.all(apis).then((res) => {
|
||||
this.nodes = []
|
||||
let keyMap = {}
|
||||
this.consulResult.forEach((item) => {
|
||||
// { key: 2, text: 'Main 2', isGroup: true, category: 'OfGroups' },
|
||||
const groupNode = {
|
||||
key: item.id,
|
||||
text: item.name.replace('+', '_'),
|
||||
isGroup: true,
|
||||
category: 'OfGroups'
|
||||
}
|
||||
this.nodes.push(groupNode)
|
||||
if (item.privatePlatformIds === null) {
|
||||
item.cloudPlatformIds.split(',').forEach((v) => {
|
||||
keyMap['public' + '_' + v] = item.id
|
||||
})
|
||||
}
|
||||
if (item.cloudPlatformIds === null) {
|
||||
item.privatePlatformIds.split(',').forEach((v) => {
|
||||
keyMap['private' + '_' + v] = item.id
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.publicCloudList.forEach((pNode) => {
|
||||
// { text: 'first D', group: 6, key: -14 },
|
||||
let publicNode = {
|
||||
text: pNode.platformName,
|
||||
key: 'public' + '_' + pNode.id,
|
||||
source: getImage(pNode, keyMap, 'public')
|
||||
}
|
||||
if (keyMap['public' + '_' + pNode.id] !== undefined) {
|
||||
publicNode.group = keyMap['public' + '_' + pNode.id]
|
||||
}
|
||||
this.nodes.push(publicNode)
|
||||
})
|
||||
|
||||
this.privateCloudList.forEach((pNode) => {
|
||||
let privateNode = {
|
||||
text: pNode.name,
|
||||
key: 'private' + '_' + pNode.id,
|
||||
source: getImage(pNode, keyMap, 'private')
|
||||
}
|
||||
if (keyMap['private' + '_' + pNode.id] !== undefined) {
|
||||
privateNode.group = keyMap['private' + '_' + pNode.id]
|
||||
}
|
||||
this.nodes.push(privateNode)
|
||||
})
|
||||
|
||||
this.initGraph()
|
||||
console.log(keyMap)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleRadioChange(value) {
|
||||
if ("2" === value) {
|
||||
this.$router.push({ name: 'negotiate_bpmn', params: null })
|
||||
}
|
||||
},
|
||||
getConsulResult() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getConsulList()
|
||||
.then((res) => {
|
||||
this.consulResult = res.data.pageData
|
||||
resolve()
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
getPublicRes() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getPublicCloud()
|
||||
.then((res) => {
|
||||
this.publicCloudList = res.data.pageData
|
||||
resolve()
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
getPrivateRes() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getPrivateCloud()
|
||||
.then((res) => {
|
||||
this.privateCloudList = res.data
|
||||
resolve()
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
async getGraphData() {
|
||||
let ids = this.selectedSupplier.map((s) => s.id).join(',')
|
||||
let privateIds = this.selectedPrivateSupplier
|
||||
.map((s) => s.id)
|
||||
.join(',')
|
||||
|
||||
console.log('ids:' + ids)
|
||||
console.log('privateIds:' + privateIds)
|
||||
|
||||
// 创建磋商任务
|
||||
let res = await createConsult(ids, privateIds)
|
||||
this.graphLinkData = res.data.graphLinkDataList
|
||||
this.graphData = res.data.graphDataList
|
||||
},
|
||||
async initGraph() {
|
||||
const self = this
|
||||
// await this.getGraphData()
|
||||
|
||||
var $$ = go.GraphObject.make
|
||||
|
||||
const links = []
|
||||
|
||||
const mygoChart = document.getElementById('diagramDiv')
|
||||
console.log(mygoChart)
|
||||
const diagramParentDiv = document.getElementById('diagramParentDiv')
|
||||
diagramParentDiv.removeChild(mygoChart)
|
||||
const div = document.createElement('div')
|
||||
div.setAttribute('id', 'diagramDiv')
|
||||
div.setAttribute('style', 'width:100%; height:90vh')
|
||||
diagramParentDiv.appendChild(div)
|
||||
this.dataDiagram = $$(go.Diagram, 'diagramDiv', {
|
||||
// layout: $$(go.GridLayout)
|
||||
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
// start everything in the middle of the viewport
|
||||
initialContentAlignment: go.Spot.Center,
|
||||
// disable user copying of parts
|
||||
allowCopy: false,
|
||||
layout: $$(go.CircularLayout, {})
|
||||
})
|
||||
|
||||
this.dataDiagram.groupTemplateMap.add(
|
||||
'OfGroups',
|
||||
$$(
|
||||
go.Group,
|
||||
'Auto',
|
||||
{
|
||||
background: 'transparent',
|
||||
// highlight when dragging into the Group
|
||||
computesBoundsAfterDrag: true,
|
||||
// when the selection is dropped into a Group, add the selected Parts into that Group;
|
||||
// if it fails, cancel the tool, rolling back any changes
|
||||
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
|
||||
// Groups containing Groups lay out their members horizontally
|
||||
layout: $$(go.GridLayout, {
|
||||
wrappingWidth: Infinity,
|
||||
alignment: go.GridLayout.Position,
|
||||
cellSize: new go.Size(1, 1),
|
||||
spacing: new go.Size(4, 4)
|
||||
})
|
||||
},
|
||||
new go.Binding('background', 'isHighlighted', function(h) {
|
||||
return h ? 'rgba(255,0,0,0.2)' : 'transparent'
|
||||
}).ofObject(),
|
||||
$$(go.Shape, 'Rectangle', {
|
||||
fill: null,
|
||||
stroke: '#8dedf4',
|
||||
strokeWidth: 2
|
||||
}),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Vertical', // title above Placeholder
|
||||
$$(
|
||||
go.Panel,
|
||||
'Horizontal', // button next to TextBlock
|
||||
{
|
||||
stretch: go.GraphObject.Horizontal,
|
||||
background: '#8dedf4'
|
||||
},
|
||||
$$('SubGraphExpanderButton', {
|
||||
alignment: go.Spot.Right,
|
||||
margin: 5
|
||||
}),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
alignment: go.Spot.Left,
|
||||
editable: true,
|
||||
margin: 5,
|
||||
font: 'bold 18px sans-serif',
|
||||
opacity: 0.75,
|
||||
stroke: '#404040'
|
||||
},
|
||||
new go.Binding('text', 'text').makeTwoWay()
|
||||
)
|
||||
), // end Horizontal Panel
|
||||
$$(go.Placeholder, {
|
||||
padding: 5,
|
||||
alignment: go.Spot.TopLeft
|
||||
})
|
||||
) // end Vertical Panel
|
||||
)
|
||||
) // end Group and call to add to template Map
|
||||
|
||||
this.dataDiagram.groupTemplateMap.add(
|
||||
'OfNodes',
|
||||
$$(
|
||||
go.Group,
|
||||
'Auto',
|
||||
{
|
||||
background: 'transparent',
|
||||
ungroupable: true,
|
||||
// highlight when dragging into the Group
|
||||
computesBoundsAfterDrag: true,
|
||||
// when the selection is dropped into a Group, add the selected Parts into that Group;
|
||||
// if it fails, cancel the tool, rolling back any changes
|
||||
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
|
||||
// Groups containing Nodes lay out their members vertically
|
||||
layout: $$(go.GridLayout, {
|
||||
wrappingColumn: 1,
|
||||
alignment: go.GridLayout.Position,
|
||||
cellSize: new go.Size(1, 1),
|
||||
spacing: new go.Size(4, 4)
|
||||
})
|
||||
},
|
||||
new go.Binding('background', 'isHighlighted', function(h) {
|
||||
return h ? 'rgba(255,0,0,0.2)' : 'transparent'
|
||||
}).ofObject(),
|
||||
$$(go.Shape, 'Rectangle', {
|
||||
fill: null,
|
||||
stroke: '#33D3E5',
|
||||
strokeWidth: 2
|
||||
}),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Vertical', // title above Placeholder
|
||||
$$(
|
||||
go.Panel,
|
||||
'Horizontal', // button next to TextBlock
|
||||
{
|
||||
stretch: go.GraphObject.Horizontal,
|
||||
background: '#33D3E5'
|
||||
},
|
||||
$$('SubGraphExpanderButton', {
|
||||
alignment: go.Spot.Right,
|
||||
margin: 5
|
||||
}),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
alignment: go.Spot.Left,
|
||||
editable: true,
|
||||
margin: 5,
|
||||
font: 'bold 16px sans-serif',
|
||||
opacity: 0.75,
|
||||
stroke: '#404040'
|
||||
},
|
||||
new go.Binding('text', 'text').makeTwoWay()
|
||||
)
|
||||
), // end Horizontal Panel
|
||||
$$(go.Placeholder, {
|
||||
padding: 5,
|
||||
alignment: go.Spot.TopLeft
|
||||
})
|
||||
) // end Vertical Panel
|
||||
)
|
||||
) // end Group and call to add to template Map
|
||||
|
||||
this.dataDiagram.nodeTemplate = $$(
|
||||
go.Node,
|
||||
'Vertical',
|
||||
{
|
||||
click: function(e, node) {
|
||||
let split = node.data.key.split('_')
|
||||
let cloudType = split[0]
|
||||
let cloudId = split[1]
|
||||
getResourceCount(cloudType, cloudId).then((res) => {
|
||||
self.chartData = [res.data[0], res.data[1]]
|
||||
self.chartDataCpu = [res.data[2], res.data[3]]
|
||||
self.chartDataMem = [res.data[4], res.data[5]]
|
||||
// resolve()
|
||||
}).catch((e) => {
|
||||
// reject(e)
|
||||
})
|
||||
}
|
||||
},
|
||||
$$(
|
||||
go.Panel,
|
||||
'Auto',
|
||||
$$(go.Shape, 'RoundedRectangle', {
|
||||
fill: null, // 设置内部填充的颜色
|
||||
stroke: 'rgba(255,255,255,0)' // 设置边框的颜色
|
||||
}),
|
||||
$$(
|
||||
go.Panel,
|
||||
'Table',
|
||||
$$(
|
||||
go.Picture,
|
||||
{
|
||||
row: 0,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
desiredSize: new go.Size(60, 60)
|
||||
},
|
||||
new go.Binding('source')
|
||||
),
|
||||
$$(
|
||||
go.TextBlock,
|
||||
{
|
||||
row: 2,
|
||||
column: 0,
|
||||
rowSpan: 2,
|
||||
alignment: go.Spot.Top,
|
||||
margin: 5,
|
||||
font: 'bold 14px sans-serif ',
|
||||
stroke: '#ffffff'
|
||||
},
|
||||
new go.Binding('text')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
this.dataDiagram.model = new go.GraphLinksModel(this.nodes, links)
|
||||
console.log(this.nodes)
|
||||
this.linkLoop()
|
||||
},
|
||||
|
||||
linkLoop() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
const oldskips = this.dataDiagram.skipsUndoManager
|
||||
this.dataDiagram.skipsUndoManager = true
|
||||
this.dataDiagram.links.each(function(link) {
|
||||
const shape = link.findObject('PIPE')
|
||||
const off = shape.strokeDashOffset - 2
|
||||
shape.strokeDashOffset = off <= 0 ? 20 : off
|
||||
// speed = parseInt(link.jb.flow);
|
||||
})
|
||||
this.dataDiagram.skipsUndoManager = oldskips
|
||||
this.linkLoop()
|
||||
}, 200)
|
||||
},
|
||||
// 概览列表
|
||||
consultList() {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt1/overview2',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.el-tabs__header {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 0 0 0px;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
<template>
|
||||
<div id='flow' style='height: 88vh'>
|
||||
<!-- <el-row style="margin-left:20px; margin-top:10px;">
|
||||
<h3>当前套餐：{{ dqtc }}</h3>
|
||||
</el-row> -->
|
||||
<el-row :span='24' style='margin-left:20px;margin-top:10px;'>
|
||||
<el-col :span='12'>
|
||||
<el-radio-group v-model='escalationData.target' @change='handleRadioChange'>
|
||||
<el-radio-button label='1'>长期磋商</el-radio-button>
|
||||
<el-radio-button label='2'>短期磋商</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span='24' style='padding: 10px'>
|
||||
<el-col :span='15' style='padding: 10px;'>
|
||||
<el-card style='height: 75vh'>
|
||||
<bpmn-modal ref='modal' @call-parent-method='highlightSelectedProvinces'></bpmn-modal>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span='9' style='padding: 10px;'>
|
||||
<el-card>
|
||||
<div id='map_chart' style='height: 69.5vh'></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmnModal from './bpmn/bpmnModal.vue'
|
||||
import echarts from 'echarts'
|
||||
import full100000 from '../panel/js/100000_full.json'
|
||||
|
||||
export default {
|
||||
name: 'bpmn',
|
||||
components: {
|
||||
bpmnModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
returnId: '',
|
||||
dqtc: '短期套餐',
|
||||
tableData: [],
|
||||
escalationData: {
|
||||
processId: '',
|
||||
target: '2'
|
||||
},
|
||||
dataset: {
|
||||
resource: {
|
||||
name: '资源接入量',
|
||||
data: [
|
||||
{ 'name': '新疆维吾尔自治区', 'value': 0 },
|
||||
{ 'name': '上海市', 'value': 0 },
|
||||
{ 'name': '广东省', 'value': 0 },
|
||||
{ 'name': '江苏省', 'value': 0 },
|
||||
{ 'name': '北京市', 'value': 0 },
|
||||
{ 'name': '天津市', 'value': 0 },
|
||||
{ 'name': '浙江省', 'value': 0 },
|
||||
{ 'name': '湖北省', 'value': 0 },
|
||||
{ 'name': '山东省', 'value': 0 },
|
||||
{ 'name': '福建省', 'value': 0 },
|
||||
{ 'name': '湖南省', 'value': 0 },
|
||||
{ 'name': '河南省', 'value': 0 },
|
||||
{ 'name': '重庆市', 'value': 0 },
|
||||
{ 'name': '四川省', 'value': 0 },
|
||||
{ 'name': '陕西省', 'value': 0 },
|
||||
{ 'name': '安徽省', 'value': 0 },
|
||||
{ 'name': '河北省', 'value': 0 },
|
||||
{ 'name': '辽宁省', 'value': 0 },
|
||||
{ 'name': '山西省', 'value': 0 },
|
||||
{ 'name': '吉林省', 'value': 0 },
|
||||
{ 'name': '黑龙江省', 'value': 0 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initXml()
|
||||
this.initMapChart()
|
||||
},
|
||||
methods: {
|
||||
initXml() {
|
||||
this.$refs.modal.import()
|
||||
},
|
||||
handleRadioChange(value) {
|
||||
debugger
|
||||
if ('1' === value) {
|
||||
this.$router.push({ name: 'negotiate_topo', params: null })
|
||||
}
|
||||
},
|
||||
initMapChart() {
|
||||
let _self = this
|
||||
// 画布初始化
|
||||
var chartDom = document.getElementById('map_chart')
|
||||
var myChart = echarts.init(chartDom)
|
||||
// 隐藏数据刷新动画
|
||||
// myChart.hideLoading();
|
||||
// 注册可用的地图
|
||||
echarts.registerMap('CN', full100000)
|
||||
let option = {
|
||||
title: {
|
||||
text: '接入区域分布',
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18
|
||||
}
|
||||
},
|
||||
// 提示框组件
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: false,
|
||||
// 触发类型：数据项图形触发
|
||||
padding: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: '#409eff',
|
||||
backgroundColor: 'rgba(184,178,178,0.4)',
|
||||
textStyle: {
|
||||
color: '#000000',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
// 地理坐标系组件
|
||||
geo: {
|
||||
map: 'CN',
|
||||
zoom: 1.2,
|
||||
show: true,
|
||||
roam: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
layoutSize: '100%',
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 2,
|
||||
shadowColor: 'rgb(90,160,234)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
// 视觉映射组件（将数据映射到颜色等视觉元素）
|
||||
// visualMap: {
|
||||
// type: 'piecewise', // 分段型
|
||||
// min: 0, // 最小值
|
||||
// max: 10000, // 最大值
|
||||
// text: ['高', '低'], // 两端的文本
|
||||
// splitNumber: 5, // 分段数量
|
||||
// maxOpen: true, // 显示 >max 部分
|
||||
// align: 'left', // 图形在左，文字在右
|
||||
// showLabel: true, // 显示标注文字
|
||||
// // orient: 'horizontal', // 水平摆放
|
||||
// orient: 'vertical',
|
||||
// inRange: {
|
||||
// color: ['#8db1f1', '#026aa9']
|
||||
// },
|
||||
// textStyle: {
|
||||
// color: '#0c0c0c',
|
||||
// fontSize: 12,
|
||||
// fontWeight: 400
|
||||
// }
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'CN',
|
||||
aspectScale: 0.75,
|
||||
zoom: 1.2,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#535353'
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.9,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(17,217,245,0.5)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(10,209,231,0.2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
color: '#ffffff'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#026aa9',
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
data: this.dataset.resource.data
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
|
||||
// 高亮多个省份
|
||||
// this.highlightProvinces(myChart, ['北京市', '辽宁省'])
|
||||
|
||||
// 点击右侧加载省份
|
||||
myChart.on('click', function(params) {
|
||||
_self.loading1 = true
|
||||
// 华北大区
|
||||
let _data = [
|
||||
{
|
||||
regionName: '华北大区',
|
||||
list: ['北京市', '天津', '山西', '河北', '山东', '内蒙古']
|
||||
}, {
|
||||
regionName: '东北大区',
|
||||
list: ['黑龙江', '吉林', '辽宁省']
|
||||
}, {
|
||||
regionName: '华东大区',
|
||||
list: ['江苏', '浙江', '上海', '安徽']
|
||||
}, {
|
||||
regionName: '华南大区',
|
||||
list: ['广东', '广西', '海南', '福建']
|
||||
}, {
|
||||
regionName: '华中大区',
|
||||
list: ['河南', '湖北', '湖南', '江西']
|
||||
}, {
|
||||
regionName: '西北大区',
|
||||
list: ['陕西', '甘肃', '青海', '宁夏', '新疆']
|
||||
}, {
|
||||
regionName: '西南大区',
|
||||
list: ['云南', '贵州', '四川', '西藏', '重庆']
|
||||
}, {
|
||||
regionName: '中国港澳台',
|
||||
list: ['台湾', '香港', '澳门']
|
||||
}
|
||||
]
|
||||
console.log(params.name)
|
||||
// params.name 为省份名称 下面通过data数组 输入省份返回区域名称
|
||||
var regionName = _data.find(region => region.list.some(province => params.name.includes(province))).regionName
|
||||
console.log(regionName)
|
||||
|
||||
setTimeout(function() {
|
||||
_self.tableData1[0].prop1 = '阿里云-' + regionName
|
||||
_self.tableData1[1].prop1 = '腾讯云-' + regionName
|
||||
_self.tableData1[2].prop1 = '华为云-' + regionName
|
||||
_self.tableData1[3].prop1 = '联通云-' + regionName
|
||||
_self.tableData1[4].prop1 = '火山云-' + regionName
|
||||
_self.loading1 = false
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
highlightProvinces(chart, provinces) {
|
||||
provinces.forEach(province => {
|
||||
chart.dispatchAction({
|
||||
type: 'highlight',
|
||||
name: province
|
||||
})
|
||||
})
|
||||
},
|
||||
clearHighlight(chart) {
|
||||
chart.dispatchAction({
|
||||
type: 'downplay',
|
||||
// 使用 name: 'all' 可能无法清除所有高亮状态，改为遍历所有省份进行清除
|
||||
name: 'all'
|
||||
})
|
||||
// 遍历所有省份进行清除
|
||||
const allProvinces = [
|
||||
'北京市', '天津市', '山西省', '河北省', '山东省', '内蒙古自治区',
|
||||
'黑龙江省', '吉林省', '辽宁省',
|
||||
'江苏省', '浙江省', '上海市', '安徽省',
|
||||
'广东省', '广西省', '海南省', '福建省',
|
||||
'河南省', '湖北省', '湖南省', '江西省',
|
||||
'陕西省', '甘肃省', '青海省', '宁夏省', '新疆维吾尔自治区',
|
||||
'云南省', '贵州省', '四川省', '西藏自治区', '重庆市',
|
||||
'台湾省', '香港', '澳门'
|
||||
]
|
||||
allProvinces.forEach(province => {
|
||||
chart.dispatchAction({
|
||||
type: 'downplay',
|
||||
name: province
|
||||
})
|
||||
})
|
||||
},
|
||||
highlightSelectedProvinces(node) {
|
||||
let dq = [
|
||||
{
|
||||
nodeName: 'LoadVideo',
|
||||
regionName: '华北大区',
|
||||
list: ['北京市', '天津市', '山西省', '河北省', '山东省', '内蒙古自治区']
|
||||
}, {
|
||||
nodeName: 'Prompt words',
|
||||
regionName: '东北大区',
|
||||
list: ['黑龙江省', '吉林省', '辽宁省']
|
||||
}, {
|
||||
nodeName: 'Negative Prompt word',
|
||||
regionName: '华东大区',
|
||||
list: ['江苏省', '浙江省', '上海市', '安徽省']
|
||||
}, {
|
||||
nodeName: 'Batch Prompt Schedule',
|
||||
regionName: '华南大区',
|
||||
list: ['广东省', '广西省', '海南省', '福建省']
|
||||
}, {
|
||||
nodeName: 'Examine & Verify',
|
||||
regionName: '华中大区',
|
||||
list: ['河南省', '湖北省', '湖南省', '江西省']
|
||||
}, {
|
||||
nodeName: 'Load Model',
|
||||
regionName: '西北大区',
|
||||
list: ['陕西省', '甘肃省', '青海省', '宁夏省', '新疆维吾尔自治区']
|
||||
}, {
|
||||
nodeName: 'Image Resize',
|
||||
regionName: '西南大区',
|
||||
list: ['云南省', '贵州省', '四川省', '西藏自治区', '重庆市']
|
||||
}, {
|
||||
nodeName: 'Transcoding',
|
||||
regionName: '中国港澳台',
|
||||
list: ['台湾省', '香港', '澳门']
|
||||
},
|
||||
{
|
||||
nodeName: 'Empty Latent Image',
|
||||
regionName: '西南大区',
|
||||
list: ['云南省', '贵州省', '四川省', '西藏自治区', '重庆市']
|
||||
},
|
||||
{
|
||||
nodeName: 'Apply Controlnet',
|
||||
regionName: '华东大区',
|
||||
list: ['江苏省', '浙江省', '上海市', '安徽省']
|
||||
},
|
||||
{
|
||||
nodeName: 'VAE Decode',
|
||||
regionName: '东北大区',
|
||||
list: ['黑龙江省', '吉林省', '辽宁省']
|
||||
},
|
||||
{
|
||||
nodeName: 'Save Image',
|
||||
regionName: '东北大区',
|
||||
list: ['黑龙江省', '吉林省', '辽宁省']
|
||||
},
|
||||
{
|
||||
nodeName: 'Video Combine',
|
||||
regionName: '华北大区',
|
||||
list: ['北京市', '天津市', '山西省', '河北省', '山东省', '内蒙古自治区']
|
||||
}
|
||||
]
|
||||
// 根据传入的 node 参数匹配 dq 数组中的 nodeName
|
||||
const matchedNode = dq.find(item => item.nodeName === node)
|
||||
|
||||
// 如果找到匹配的 nodeName，则使用对应的 list 作为 provincesToHighlight 的值
|
||||
const provincesToHighlight = matchedNode ? matchedNode.list : []
|
||||
const chart = echarts.getInstanceByDom(document.getElementById('map_chart'))
|
||||
this.clearHighlight(chart)
|
||||
this.highlightProvinces(chart, provincesToHighlight)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class='containers'>
|
||||
<div class='canvas' ref='canvas'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/bpmn.js'>
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containers {
|
||||
position: absolute;
|
||||
width: 100vh;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 105vh;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
#properties-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div id='flow' style='height: 88vh'>
|
||||
<!-- <el-row style="margin-left:20px; margin-top:10px;">
|
||||
<h3>当前套餐：{{ dqtc }}</h3>
|
||||
</el-row> -->
|
||||
<el-row :span='24' style="margin-left:20px;margin-top:10px;">
|
||||
<el-col :span='2'>
|
||||
<h3>分配目标</h3>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-radio-group v-model="escalationData.target" @change="handleRadioChange">
|
||||
<el-radio-button label="1">最小化延迟</el-radio-button>
|
||||
<el-radio-button label="2">最小化支付价格</el-radio-button>
|
||||
<el-radio-button label="3">负载均衡</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span='24' style='padding: 10px'>
|
||||
<el-col :span='15' style='padding: 10px;'>
|
||||
<el-card style='height: 75vh'>
|
||||
<bpmn-modal ref='modal'></bpmn-modal>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span='9' style='padding: 10px;'>
|
||||
<el-card style='max-height:75vh; overflow-y:scroll;'>
|
||||
<h3 style='margin-left:31%'>工作流任务分配列表</h3>
|
||||
<el-table v-loading='isLoading' :data="tableData" stripe style="width: 100%;min-height: 65vh">
|
||||
<el-table-column prop="taskName" label="任务名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cloudCommerce" label="云商"></el-table-column>
|
||||
<el-table-column prop="virtualMachineType" label="实例类型">
|
||||
</el-table-column>
|
||||
<el-table-column prop="virtualMachineInstance" label="实例规格">
|
||||
<template slot-scope='scope'>
|
||||
<span>{{scope.row.cpuCoreCount}}核 {{scope.row.memorySize}}G</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 引入相关的依赖
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler'
|
||||
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
|
||||
import customTranslate from './customTranslate' // 汉化包引入
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
returnId: '',
|
||||
bpmnModeler: null,
|
||||
canvas: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.setZoomLevel(1.0) // 设置缩放级别为1.0
|
||||
this.autoFit() // 自适应显示流程图
|
||||
},
|
||||
|
||||
methods: {
|
||||
setZoomLevel(level) {
|
||||
const canvas = this.bpmnModeler.get('canvas')
|
||||
canvas.zoom(level)
|
||||
},
|
||||
autoFit() {
|
||||
const canvas = this.bpmnModeler.get('canvas')
|
||||
canvas.zoom('fit-viewport')
|
||||
},
|
||||
init() {
|
||||
// 将汉化包包装成一个模块
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const customTranslateMolude = {
|
||||
translate: ['value', customTranslate]
|
||||
}
|
||||
this.bpmnModeler = new BpmnModeler({
|
||||
// 建模
|
||||
container: this.$refs.canvas,
|
||||
propertiesPanel: {
|
||||
// 添加控制板
|
||||
parent: '#properties-panel'
|
||||
},
|
||||
// additionalModules: [
|
||||
// // 右边的属性栏
|
||||
// propertiesProviderModule,
|
||||
// propertiesPanelModule,
|
||||
// customTranslateMolude // 汉化模块
|
||||
// ],
|
||||
moddleExtensions: {
|
||||
camunda: camundaModdleDescriptor
|
||||
}
|
||||
})
|
||||
},
|
||||
import(xmlStrWithValues) {
|
||||
this.bpmnModeler.importXML(xmlStrWithValues, (err) => {
|
||||
console.log(111, err)
|
||||
if (!err) {
|
||||
this.success()
|
||||
this.hidePalette() // 调用隐藏左侧栏的方法
|
||||
} else {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
hidePalette() {
|
||||
const paletteContainer = this.$el.querySelector('.djs-palette')
|
||||
paletteContainer.style.display = 'none'
|
||||
},
|
||||
success() {
|
||||
console.log('创建成功!')
|
||||
this.bpmnModeler.on('commandStack.changed', () => {
|
||||
this.getXML().then((xml) => {
|
||||
})
|
||||
})
|
||||
this.addModelerListener()
|
||||
this.addEventBusListener()
|
||||
},
|
||||
getXML() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
|
||||
err ? reject(err) : resolve(xml)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 添加绑定事件
|
||||
addBpmnListener() {
|
||||
const that = this
|
||||
// 获取a标签dom节点
|
||||
const downloadLink = this.$refs.saveDiagram
|
||||
const downloadSvgLink = this.$refs.saveSvg
|
||||
// 给图绑定事件，当图有发生改变就会触发这个事件
|
||||
this.bpmnModeler.on('commandStack.changed', function() {
|
||||
that.saveSVG(function(err, svg) {
|
||||
that.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
|
||||
})
|
||||
that.saveDiagram(function(err, xml) {
|
||||
that.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
|
||||
})
|
||||
})
|
||||
},
|
||||
addModelerListener() {
|
||||
// 监听 modeler
|
||||
const bpmnjs = this.bpmnModeler
|
||||
const that = this
|
||||
// 'shape.removed', 'connect.end', 'connect.move'
|
||||
const events = ['shape.added', 'shape.move.end', 'shape.removed']
|
||||
events.forEach(function(event) {
|
||||
that.bpmnModeler.on(event, e => {
|
||||
var elementRegistry = bpmnjs.get('elementRegistry')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
|
||||
if (event === 'shape.added') {
|
||||
console.log('新增了shape')
|
||||
} else if (event === 'shape.move.end') {
|
||||
console.log('移动了shape')
|
||||
} else if (event === 'shape.removed') {
|
||||
console.log('删除了shape')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
addEventBusListener() {
|
||||
// 监听 element
|
||||
const that = this
|
||||
const eventBus = this.bpmnModeler.get('eventBus')
|
||||
const eventTypes = ['element.click', 'element.changed']
|
||||
eventTypes.forEach(function(eventType) {
|
||||
eventBus.on(eventType, function(e) {
|
||||
if (!e || e.element.type === 'bpmn:Process') return
|
||||
if (eventType === 'element.changed') {
|
||||
that.elementChanged(eventType, e)
|
||||
} else if (eventType === 'element.click') {
|
||||
console.log('点击了element')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
elementChanged(eventType, e) {
|
||||
var shape = this.getShape(e.element.id)
|
||||
if (!shape) {
|
||||
// 若是shape为null则表示删除, 无论是shape还是connect删除都调用此处
|
||||
console.log('无效的shape')
|
||||
// 由于上面已经用 shape.removed 检测了shape的删除, 因此这里只判断是否是线
|
||||
if (this.isSequenceFlow(shape.type)) {
|
||||
console.log('删除了线')
|
||||
}
|
||||
}
|
||||
if (!this.isInvalid(shape.type)) {
|
||||
if (this.isSequenceFlow(shape.type)) {
|
||||
console.log('改变了线')
|
||||
}
|
||||
}
|
||||
},
|
||||
getShape(id) {
|
||||
var elementRegistry = this.bpmnModeler.get('elementRegistry')
|
||||
return elementRegistry.get(id)
|
||||
},
|
||||
isInvalid(param) { // 判断是否是无效的值
|
||||
return param === null || param === undefined || param === ''
|
||||
},
|
||||
isSequenceFlow(type) { // 判断是否是线
|
||||
return type === 'bpmn:SequenceFlow'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import translations from './translationsGerman'
|
||||
|
||||
export default function customTranslate(template, replacements) {
|
||||
replacements = replacements || {}
|
||||
|
||||
// Translate
|
||||
template = translations[template] || template
|
||||
|
||||
// Replace
|
||||
return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||
var str = replacements[key]
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (translations[replacements[key]] != null && translations[replacements[key]] != 'undefined') {
|
||||
str = translations[replacements[key]]
|
||||
}
|
||||
return str || '{' + key + '}'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取流程信息
|
||||
* @param returnId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getAllocation(returnId) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt2/getAllocation',
|
||||
method: 'get',
|
||||
params: {
|
||||
returnId: returnId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取流程配置信息
|
||||
* @param returnId
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getConfiguration(processId, target) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt2/getConfiguration',
|
||||
method: 'get',
|
||||
params: {
|
||||
processId: processId,
|
||||
target: target
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
import bpmnModal from '../bpmnModal.vue'
|
||||
|
||||
export default {
|
||||
name: 'bpmn',
|
||||
components: {
|
||||
bpmnModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
returnId: '',
|
||||
dqtc: '短期套餐',
|
||||
tableData: [],
|
||||
escalationData: {
|
||||
processId: '',
|
||||
target: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initXml()
|
||||
},
|
||||
methods: {
|
||||
initXml() {
|
||||
getAllocation(this.returnId).then((data) => {
|
||||
this.escalationData.processId = data.data.id
|
||||
this.$refs.modal.import(data.data.processData)
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
getConfiguration(this.escalationData.processId, this.escalationData.target).then((data) => {
|
||||
this.tableData = data.data
|
||||
this.isLoading = false
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
handleRadioChange(value) {
|
||||
this.isLoading = true
|
||||
this.escalationData.target = value
|
||||
this.getData(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
export default {
|
||||
|
||||
// Labels
|
||||
'Activate the global connect tool': '激活全局连接工具',
|
||||
'Append {type}': '添加 {type}',
|
||||
'Add Lane above': '在上面添加道',
|
||||
'Divide into two Lanes': '分割成两个道',
|
||||
'Divide into three Lanes': '分割成三个道',
|
||||
'Add Lane below': '在下面添加道',
|
||||
'Append compensation activity': '追加补偿活动',
|
||||
'Change type': '修改类型',
|
||||
'Connect using Association': '使用关联连接',
|
||||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
|
||||
'Connect using DataInputAssociation': '使用数据输入关联连接',
|
||||
'Remove': '移除',
|
||||
'Activate the hand tool': '激活抓手工具',
|
||||
'Activate the lasso tool': '激活套索工具',
|
||||
'Activate the create/remove space tool': '激活创建/删除空间工具',
|
||||
'Create expanded SubProcess': '创建扩展子过程',
|
||||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
|
||||
'Create Pool/Participant': '创建池/参与者',
|
||||
'Parallel Multi Instance': '并行多重事件',
|
||||
'Sequential Multi Instance': '时序多重事件',
|
||||
'DataObjectReference': '数据对象参考',
|
||||
'DataStoreReference': '数据存储参考',
|
||||
'Loop': '循环',
|
||||
'Ad-hoc': '即席',
|
||||
'Create {type}': '创建 {type}',
|
||||
'Task': '任务',
|
||||
'Send Task': '发送任务',
|
||||
'Receive Task': '接收任务',
|
||||
'User Task': '用户任务',
|
||||
'Manual Task': '手工任务',
|
||||
'Business Rule Task': '业务规则任务',
|
||||
'Service Task': '服务任务',
|
||||
'Script Task': '脚本任务',
|
||||
'Call Activity': '调用活动',
|
||||
'Sub Process (collapsed)': '子流程（折叠的）',
|
||||
'Sub Process (expanded)': '子流程（展开的）',
|
||||
'Start Event': '开始事件',
|
||||
'StartEvent': '开始事件',
|
||||
'Intermediate Throw Event': '中间事件',
|
||||
'End Event': '结束事件',
|
||||
'EndEvent': '结束事件',
|
||||
'Create Gateway': '创建网关',
|
||||
'Create Intermediate/Boundary Event': '创建中间/边界事件',
|
||||
'Message Start Event': '消息开始事件',
|
||||
'Timer Start Event': '定时开始事件',
|
||||
'Conditional Start Event': '条件开始事件',
|
||||
'Signal Start Event': '信号开始事件',
|
||||
'Error Start Event': '错误开始事件',
|
||||
'Escalation Start Event': '升级开始事件',
|
||||
'Compensation Start Event': '补偿开始事件',
|
||||
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
|
||||
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
|
||||
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
|
||||
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
|
||||
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
|
||||
'Message Intermediate Catch Event': '消息中间捕获事件',
|
||||
'Message Intermediate Throw Event': '消息中间抛出事件',
|
||||
'Timer Intermediate Catch Event': '定时中间捕获事件',
|
||||
'Escalation Intermediate Throw Event': '升级中间抛出事件',
|
||||
'Conditional Intermediate Catch Event': '条件中间捕获事件',
|
||||
'Link Intermediate Catch Event': '链接中间捕获事件',
|
||||
'Link Intermediate Throw Event': '链接中间抛出事件',
|
||||
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
|
||||
'Signal Intermediate Catch Event': '信号中间捕获事件',
|
||||
'Signal Intermediate Throw Event': '信号中间抛出事件',
|
||||
'Message End Event': '消息结束事件',
|
||||
'Escalation End Event': '定时结束事件',
|
||||
'Error End Event': '错误结束事件',
|
||||
'Cancel End Event': '取消结束事件',
|
||||
'Compensation End Event': '补偿结束事件',
|
||||
'Signal End Event': '信号结束事件',
|
||||
'Terminate End Event': '终止结束事件',
|
||||
'Message Boundary Event': '消息边界事件',
|
||||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
|
||||
'Timer Boundary Event': '定时边界事件',
|
||||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
|
||||
'Escalation Boundary Event': '升级边界事件',
|
||||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
|
||||
'Conditional Boundary Event': '条件边界事件',
|
||||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
|
||||
'Error Boundary Event': '错误边界事件',
|
||||
'Cancel Boundary Event': '取消边界事件',
|
||||
'Signal Boundary Event': '信号边界事件',
|
||||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
|
||||
'Compensation Boundary Event': '补偿边界事件',
|
||||
'Exclusive Gateway': '互斥网关',
|
||||
'Parallel Gateway': '并行网关',
|
||||
'Inclusive Gateway': '相容网关',
|
||||
'Complex Gateway': '复杂网关',
|
||||
'Event based Gateway': '事件网关',
|
||||
'Transaction': '转运',
|
||||
'Sub Process': '子流程',
|
||||
'Event Sub Process': '事件子流程',
|
||||
'Collapsed Pool': '折叠池',
|
||||
'Expanded Pool': '展开池',
|
||||
|
||||
// Errors
|
||||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
|
||||
'no shape type specified': '没有指定的形状类型',
|
||||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
|
||||
'out of bounds release': 'out of bounds release',
|
||||
'more than {count} child lanes': '子道大于{count} ',
|
||||
'element required': '元素不能为空',
|
||||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
|
||||
'no diagram to display': '没有可展示的流程图',
|
||||
'no process or collaboration to display': '没有可展示的流程/协作',
|
||||
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
|
||||
'already rendered {element}': '{element} 已被渲染',
|
||||
'failed to import {element}': '导入{element}失败',
|
||||
// 属性面板的参数
|
||||
'Id': '编号',
|
||||
'Name': '名称',
|
||||
'General': '常规',
|
||||
'Details': '详情',
|
||||
'Message Name': '消息名称',
|
||||
'Message': '消息',
|
||||
'Initiator': '创建者',
|
||||
'Asynchronous Continuations': '持续异步',
|
||||
'Asynchronous Before': '异步前',
|
||||
'Asynchronous After': '异步后',
|
||||
'Job Configuration': '工作配置',
|
||||
'Exclusive': '排除',
|
||||
'Job Priority': '工作优先级',
|
||||
'Retry Time Cycle': '重试时间周期',
|
||||
'Documentation': '文档',
|
||||
'Element Documentation': '元素文档',
|
||||
'History Configuration': '历史配置',
|
||||
'History Time To Live': '历史的生存时间',
|
||||
'Forms': '表单',
|
||||
'Form Key': '表单key',
|
||||
'Form Fields': '表单字段',
|
||||
'Business Key': '业务key',
|
||||
'Form Field': '表单字段',
|
||||
'ID': '编号',
|
||||
'Type': '类型',
|
||||
'Label': '名称',
|
||||
'Default Value': '默认值',
|
||||
'Validation': '校验',
|
||||
'Add Constraint': '添加约束',
|
||||
'Config': '配置',
|
||||
'Properties': '属性',
|
||||
'Add Property': '添加属性',
|
||||
'Value': '值',
|
||||
'Listeners': '监听器',
|
||||
'Execution Listener': '执行监听',
|
||||
'Event Type': '事件类型',
|
||||
'Listener Type': '监听器类型',
|
||||
'Java Class': 'Java类',
|
||||
'Expression': '表达式',
|
||||
'Must provide a value': '必须提供一个值',
|
||||
'Delegate Expression': '代理表达式',
|
||||
'Script': '脚本',
|
||||
'Script Format': '脚本格式',
|
||||
'Script Type': '脚本类型',
|
||||
'Inline Script': '内联脚本',
|
||||
'External Script': '外部脚本',
|
||||
'Resource': '资源',
|
||||
'Field Injection': '字段注入',
|
||||
'Extensions': '扩展',
|
||||
'Input/Output': '输入/输出',
|
||||
'Input Parameters': '输入参数',
|
||||
'Output Parameters': '输出参数',
|
||||
'Parameters': '参数',
|
||||
'Output Parameter': '输出参数',
|
||||
'Timer Definition Type': '定时器定义类型',
|
||||
'Timer Definition': '定时器定义',
|
||||
'Date': '日期',
|
||||
'Duration': '持续',
|
||||
'Cycle': '循环',
|
||||
'Signal': '信号',
|
||||
'Signal Name': '信号名称',
|
||||
'Escalation': '升级',
|
||||
'Error': '错误',
|
||||
'Link Name': '链接名称',
|
||||
'Condition': '条件名称',
|
||||
'Variable Name': '变量名称',
|
||||
'Variable Event': '变量事件',
|
||||
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
|
||||
'Wait for Completion': '等待完成',
|
||||
'Activity Ref': '活动参考',
|
||||
'Version Tag': '版本标签',
|
||||
'Executable': '可执行文件',
|
||||
'External Task Configuration': '扩展任务配置',
|
||||
'Task Priority': '任务优先级',
|
||||
'External': '外部',
|
||||
'Connector': '连接器',
|
||||
'Must configure Connector': '必须配置连接器',
|
||||
'Connector Id': '连接器编号',
|
||||
'Implementation': '实现方式',
|
||||
'Field Injections': '字段注入',
|
||||
'Fields': '字段',
|
||||
'Result Variable': '结果变量',
|
||||
'Topic': '主题',
|
||||
'Configure Connector': '配置连接器',
|
||||
'Input Parameter': '输入参数',
|
||||
'Assignee': '代理人',
|
||||
'Candidate Users': '候选用户',
|
||||
'Candidate Groups': '候选组',
|
||||
'Due Date': '到期时间',
|
||||
'Follow Up Date': '跟踪日期',
|
||||
'Priority': '优先级',
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
// eslint-disable-next-line no-template-curly-in-string
|
||||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
|
||||
'Variables': '变量'
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
export const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:flowable="http://flowable.org/bpmn" id="diagram_Process_1706862333788" targetNamespace="http://flowable.org/bpmn">
|
||||
<bpmn2:process id="Process_1706862333788" name="业务流程_1706862333788" isExecutable="true">
|
||||
<bpmn2:task id="Activity_0qdmn2d" name="ImageCapture">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:outgoing>Flow_1rrhptc</bpmn2:outgoing>
|
||||
</bpmn2:task>
|
||||
<bpmn2:serviceTask id="Activity_0oee875" name="Thresholding Component">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1rrhptc</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_1bp2vwb</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:serviceTask id="Activity_16jlnlb" name="QR-Code Positioning Component">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1bp2vwb</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_09btpnd</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:serviceTask id="Activity_1sxf5ut" name="ImageRotating &Correcting Component">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_09btpnd</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_13d63op</bpmn2:outgoing>
|
||||
<bpmn2:outgoing>Flow_1bvcwdz</bpmn2:outgoing>
|
||||
<bpmn2:outgoing>Flow_0xwgvvk</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:serviceTask id="Activity_1jrjnqx" name="ActivityData Componoent">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1bvcwdz</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_1xj1ly8</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:serviceTask id="Activity_1oh15ep" name="CharacterSet Component">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_13d63op</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0xwv8qv</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:serviceTask id="Activity_1pdpisf" name="DecodeFormat Component">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_0xwgvvk</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_0am20vc</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:serviceTask id="Activity_0hif9fc" name="DecodeThread Component">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1xj1ly8</bpmn2:incoming>
|
||||
<bpmn2:incoming>Flow_0xwv8qv</bpmn2:incoming>
|
||||
<bpmn2:incoming>Flow_0am20vc</bpmn2:incoming>
|
||||
<bpmn2:outgoing>Flow_1g51gyl</bpmn2:outgoing>
|
||||
</bpmn2:serviceTask>
|
||||
<bpmn2:task id="Activity_1tinpfy" name="ShowResult">
|
||||
<bpmn2:extensionElements>
|
||||
<flowable:formData />
|
||||
</bpmn2:extensionElements>
|
||||
<bpmn2:incoming>Flow_1g51gyl</bpmn2:incoming>
|
||||
</bpmn2:task>
|
||||
<bpmn2:sequenceFlow id="Flow_1rrhptc" name="$bz_0$" sourceRef="Activity_0qdmn2d" targetRef="Activity_0oee875" />
|
||||
<bpmn2:sequenceFlow id="Flow_1bp2vwb" name="$bz_1$" sourceRef="Activity_0oee875" targetRef="Activity_16jlnlb" />
|
||||
<bpmn2:sequenceFlow id="Flow_09btpnd" name="$bz_2$" sourceRef="Activity_16jlnlb" targetRef="Activity_1sxf5ut" />
|
||||
<bpmn2:sequenceFlow id="Flow_13d63op" name="$bz_3$" sourceRef="Activity_1sxf5ut" targetRef="Activity_1oh15ep" />
|
||||
<bpmn2:sequenceFlow id="Flow_1bvcwdz" name="$bz_4$" sourceRef="Activity_1sxf5ut" targetRef="Activity_1jrjnqx" />
|
||||
<bpmn2:sequenceFlow id="Flow_0xwgvvk" name="$bz_5$" sourceRef="Activity_1sxf5ut" targetRef="Activity_1pdpisf" />
|
||||
<bpmn2:sequenceFlow id="Flow_1xj1ly8" name="$bz_6$" sourceRef="Activity_1jrjnqx" targetRef="Activity_0hif9fc" />
|
||||
<bpmn2:sequenceFlow id="Flow_0xwv8qv" name="$bz_7$" sourceRef="Activity_1oh15ep" targetRef="Activity_0hif9fc" />
|
||||
<bpmn2:sequenceFlow id="Flow_0am20vc" name="$bz_8$" sourceRef="Activity_1pdpisf" targetRef="Activity_0hif9fc" />
|
||||
<bpmn2:sequenceFlow id="Flow_1g51gyl" name="$bz_9$" sourceRef="Activity_0hif9fc" targetRef="Activity_1tinpfy" />
|
||||
</bpmn2:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1706862333788">
|
||||
<bpmndi:BPMNEdge id="Flow_1rrhptc_di" bpmnElement="Flow_1rrhptc">
|
||||
<di:waypoint x="230" y="160" />
|
||||
<di:waypoint x="280" y="160" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="243" y="142" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1bp2vwb_di" bpmnElement="Flow_1bp2vwb">
|
||||
<di:waypoint x="330" y="200" />
|
||||
<di:waypoint x="330" y="230" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="333" y="212" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_09btpnd_di" bpmnElement="Flow_09btpnd">
|
||||
<di:waypoint x="330" y="310" />
|
||||
<di:waypoint x="330" y="350" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="333" y="327" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_13d63op_di" bpmnElement="Flow_13d63op">
|
||||
<di:waypoint x="380" y="390" />
|
||||
<di:waypoint x="430" y="390" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="393" y="372" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1bvcwdz_di" bpmnElement="Flow_1bvcwdz">
|
||||
<di:waypoint x="380" y="370" />
|
||||
<di:waypoint x="405" y="370" />
|
||||
<di:waypoint x="405" y="270" />
|
||||
<di:waypoint x="430" y="270" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="408" y="317" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0xwgvvk_di" bpmnElement="Flow_0xwgvvk">
|
||||
<di:waypoint x="380" y="410" />
|
||||
<di:waypoint x="405" y="410" />
|
||||
<di:waypoint x="405" y="510" />
|
||||
<di:waypoint x="430" y="510" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="408" y="457" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1xj1ly8_di" bpmnElement="Flow_1xj1ly8">
|
||||
<di:waypoint x="530" y="270" />
|
||||
<di:waypoint x="550" y="270" />
|
||||
<di:waypoint x="550" y="370" />
|
||||
<di:waypoint x="570" y="370" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="553" y="317" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0xwv8qv_di" bpmnElement="Flow_0xwv8qv">
|
||||
<di:waypoint x="530" y="390" />
|
||||
<di:waypoint x="570" y="390" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="538" y="372" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0am20vc_di" bpmnElement="Flow_0am20vc">
|
||||
<di:waypoint x="530" y="510" />
|
||||
<di:waypoint x="550" y="510" />
|
||||
<di:waypoint x="550" y="420" />
|
||||
<di:waypoint x="570" y="420" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="553" y="462" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_1g51gyl_di" bpmnElement="Flow_1g51gyl">
|
||||
<di:waypoint x="670" y="390" />
|
||||
<di:waypoint x="700" y="390" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="673" y="372" width="25" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="Activity_122p3pv_di" bpmnElement="Activity_0qdmn2d">
|
||||
<dc:Bounds x="130" y="120" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0czozq8_di" bpmnElement="Activity_0oee875">
|
||||
<dc:Bounds x="280" y="120" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_16jlnlb_di" bpmnElement="Activity_16jlnlb">
|
||||
<dc:Bounds x="280" y="230" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1sxf5ut_di" bpmnElement="Activity_1sxf5ut">
|
||||
<dc:Bounds x="280" y="350" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1jrjnqx_di" bpmnElement="Activity_1jrjnqx">
|
||||
<dc:Bounds x="430" y="230" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1oh15ep_di" bpmnElement="Activity_1oh15ep">
|
||||
<dc:Bounds x="430" y="350" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_1pdpisf_di" bpmnElement="Activity_1pdpisf">
|
||||
<dc:Bounds x="430" y="470" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0hif9fc_di" bpmnElement="Activity_0hif9fc">
|
||||
<dc:Bounds x="570" y="350" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_02ud1dz_di" bpmnElement="Activity_1tinpfy">
|
||||
<dc:Bounds x="700" y="350" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn2:definitions>`
|
||||
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
#consult {
|
||||
|
||||
.title_row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.title_box_text {
|
||||
font-family: 'Alternate';
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title_box_hr {
|
||||
border-bottom: 2px solid;
|
||||
opacity: 0.5;
|
||||
color: #70c9eb;
|
||||
width: 120%;
|
||||
margin-top: 2%;
|
||||
margin-left: -10%;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border-color: rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.el-card__body, .el-main {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 1px 10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card2{
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
|
||||
.card2-inner{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.card1_inner_num {
|
||||
font-family: 'Alternate';
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 6px #26A2FF;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
text-align: center; /* 让子元素水平居中显示 */
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.taocanCard {
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border-color: #9093998c;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tanbleTitle {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.taocan {
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.taocanbutton {
|
||||
background-color: #1890ff7a;
|
||||
}
|
||||
|
||||
.cloudTable {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell:hover {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table tr {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-table tr:hover{
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.el-table--border .el-table__cell {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell>.cell {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-table tbody tr:hover > td {
|
||||
background-color: transparent !important
|
||||
}
|
||||
|
||||
.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
|
||||
background-color:unset !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div id='consult'>
|
||||
<div id='entirety'
|
||||
style="background-image: url('/static/background/background.png');padding: 10px;min-height: 89vh">
|
||||
<div class='title_row'>
|
||||
<div class='title_box'>
|
||||
<div class='title_box_text'>
|
||||
资源推荐
|
||||
</div>
|
||||
<div class='title_box_hr'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='card2'>
|
||||
<el-row :span='24'>
|
||||
<el-col :span='7'>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class='clearfix'>
|
||||
<span>资源需求预测</span>
|
||||
</div>
|
||||
<el-card class='card2-inner'>
|
||||
<div class='card-chart-box' style='margin-top: -50px;'>
|
||||
<div id='medium_term_chart' style='height: 23vh'></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class='clearfix'>
|
||||
<span>实时价格监测</span>
|
||||
</div>
|
||||
<el-card class='card2-inner'>
|
||||
<div style='text-align: center;'>
|
||||
<span class='card1_inner_num'>总费用</span>
|
||||
<span class='card1_inner_num'>${{ totalPrice }}</span>
|
||||
</div>
|
||||
<div class='card-chart-box' style='margin-top: -50px;'>
|
||||
<div id='short_term_chart' style='height: 23vh'></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span='2' style='display: flex; justify-content: center; align-items: center;'>
|
||||
<img src='/static/kt2/jiantou.png' style='max-width: 100%; max-height: 100%;margin-top: 22vh;'>
|
||||
</el-col>
|
||||
<el-col :span='6'>
|
||||
<div class='clearfix'>
|
||||
<span>资源推荐算法模型</span>
|
||||
<el-card>
|
||||
<img src='/static/kt2/suanfa.png' style='max-width: 100%; height: auto;margin-top: 5vh;'>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span='2' style='display: flex; justify-content: center; align-items: center;'>
|
||||
<img src='/static/kt2/jiantou.png' style='max-width: 100%; max-height: 100%;margin-top: 22vh;'>
|
||||
</el-col>
|
||||
<el-col :span='6'>
|
||||
<el-card class='taocanCard'>
|
||||
<div class='clearfix'>
|
||||
<img src='/static/kt2/duihao.png'>
|
||||
<span>已为您生成最优购买套餐</span>
|
||||
<el-row class='taocan'>
|
||||
<el-radio v-model="dqtc" label="price" border @input='getCloudInfo'>低延迟</el-radio>
|
||||
</el-row>
|
||||
<el-row class='taocan'>
|
||||
<el-radio v-model="dqtc" label="ptoc" border @input='getCloudInfo'>高算力</el-radio>
|
||||
</el-row>
|
||||
<el-row class='taocan'>
|
||||
<el-radio v-model="dqtc" label="capacity" border @input='getCloudInfo'>低能耗</el-radio>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :span='24'>
|
||||
<el-col :span='7'>
|
||||
<div class='clearfix'>
|
||||
<span>时延趋势</span>
|
||||
</div>
|
||||
<el-card class='card2-inner'>
|
||||
<div class='card-chart-box' style='margin-top: -50px;'>
|
||||
<div id='medium_term_chart1' style='height: 23vh'></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span='7' :offset="1">
|
||||
<div class='clearfix'>
|
||||
<span>成本趋势</span>
|
||||
</div>
|
||||
<el-card class='card2-inner'>
|
||||
<div class='card-chart-box' style='margin-top: -50px;'>
|
||||
<div id='medium_term_chart2' style='height: 23vh'></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span='7' :offset="1">
|
||||
<div class='clearfix'>
|
||||
<span>能耗趋势</span>
|
||||
</div>
|
||||
<el-card class='card2-inner'>
|
||||
<div class='card-chart-box' style='margin-top: -50px;'>
|
||||
<div id='medium_term_chart3' style='height: 23vh'></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :span='24' style='max-height:25vh; overflow-y:scroll;margin-top: 10px' v-loading='isLoading'
|
||||
element-loading-text="加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.3)">
|
||||
<el-col :span='24' v-for='(cloudInfo, index) in cloudData' :key='index'>
|
||||
<el-card class='taocanCard'>
|
||||
<el-row :span='24' class='tanbleTitle'>
|
||||
<el-col :span='2'><span style='font-size: 20px'>{{cloudInfo.name}}</span></el-col>
|
||||
<el-col :span='4' style='margin-top: 8px;'><span>推荐购买费用共计： ￥{{cloudInfo.totalPrice}}</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
</el-row>
|
||||
<el-table :data='cloudInfo.items' :row-style="{height: '30px'}" :cell-style="{padding: '0'}" highlight-current-row='false'
|
||||
:header-row-style="{height: '40px'}" :header-cell-style="{padding: '0'}" border class='cloudTable'>
|
||||
<el-table-column prop='instanceTypeFamily' label='规格族' :show-overflow-tooltip='true' fixed width='120'>
|
||||
</el-table-column>
|
||||
<el-table-column prop='instanceTypeName' label='实例规格' fixed></el-table-column>
|
||||
<el-table-column prop='cpuCoreCount' label='vCPU（核）' width='100' :show-overflow-tooltip='true'>
|
||||
</el-table-column>
|
||||
<el-table-column prop='memorySize' label='内存（GB）' width='100' :show-overflow-tooltip='true'>
|
||||
</el-table-column>
|
||||
<el-table-column prop='arch' label='架构' width='60' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='processorModel' label='处理器' :show-overflow-tooltip='true'></el-table-column>
|
||||
<el-table-column prop='gpuSpec' label='GPU型号' :show-overflow-tooltip='true'>
|
||||
</el-table-column>
|
||||
<el-table-column prop='gpuMemorySize' label='GPU显存（GB）' width='120' :show-overflow-tooltip='true'>
|
||||
</el-table-column>
|
||||
<el-table-column prop='gpuAmount' label='GPU数量' width='80' :show-overflow-tooltip='true'>
|
||||
</el-table-column>
|
||||
<el-table-column prop='postpaidHourPrice' label='参考价格（/小时）' :show-overflow-tooltip='true' width='130' fixed='right'>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src='./js/index.js'>
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: 'Alternate';
|
||||
//src: url('../../assets/iconfont/Alternate.ttf');
|
||||
font-style: normal;
|
||||
font-width: normal;
|
||||
}
|
||||
|
||||
@import './css/consult.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
import request from '@/utils/request'
|
||||
import echarts from 'echarts'
|
||||
|
||||
/**
|
||||
* 获取数据
|
||||
* @param type
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getConsultData(type) {
|
||||
return request({
|
||||
url: '/cloud/jcce/v1.0/kt2/getConsultData',
|
||||
method: 'get',
|
||||
params: {
|
||||
mode: type
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'businessScreen',
|
||||
data() {
|
||||
return {
|
||||
totalPrice: '172.29',
|
||||
shortTermExpense: [],
|
||||
recentExpense: [],
|
||||
cloudData: [],
|
||||
isLoading: false,
|
||||
dqtc: 'price'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
async mounted() {
|
||||
await this.getCharts()
|
||||
await this.getmedium()
|
||||
// this.totalPrice = (Math.abs(Math.random() * 100) + 100).toFixed(2)
|
||||
this.totalPrice = 75
|
||||
this.getCloudInfo()
|
||||
},
|
||||
methods: {
|
||||
getCloudInfo() {
|
||||
this.isLoading = true
|
||||
// 调课题4->课题2雍欣接口
|
||||
getConsultData(this.dqtc).then((data) => {
|
||||
this.cloudData = data.data
|
||||
this.isLoading = false
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
this.isLoading = false
|
||||
})
|
||||
|
||||
// 切换推荐方案
|
||||
// 获取当前时间
|
||||
const now = new Date()
|
||||
// 创建一个数组来存储每个整点的时间
|
||||
const timeList = []
|
||||
// 循环获取当前时间之后的24个整点时间
|
||||
for (let i = 1; i <= 24; i++) {
|
||||
const nextHour = new Date(now.getTime() + i * 60 * 60 * 1000)
|
||||
// 获取整点时间的小时数并转换为字符串
|
||||
const hourString = nextHour.getHours().toString()
|
||||
|
||||
// 将小时字符串添加到数组中
|
||||
timeList.push(hourString)
|
||||
// 将整点时间添加到数组中
|
||||
}
|
||||
|
||||
const medium_term_chart1 = echarts.init(document.getElementById('medium_term_chart1'), 'dark')
|
||||
const medium_term_chart2 = echarts.init(document.getElementById('medium_term_chart2'), 'dark')
|
||||
const medium_term_chart3 = echarts.init(document.getElementById('medium_term_chart3'), 'dark')
|
||||
|
||||
let o1 = this.getChart1(timeList);
|
||||
let o2 = this.getChart2(timeList);
|
||||
let o3 = this.getChart3(timeList);
|
||||
|
||||
// 三套数据
|
||||
// price ptoc capacity
|
||||
if (this.dqtc == 'price') {
|
||||
o1.series[0].data = [72, 72, 71, 71, 70, 69, 68, 67, 67, 68, 67, 66, 66, 66, 67, 67, 68, 68, 67, 67, 66, 66, 65, 64]
|
||||
o2.series[0].data = [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920]
|
||||
o3.series[0].data = [72, 72, 71, 71, 70, 69, 68, 67, 67, 68, 67, 66, 66, 66, 67, 67, 68, 68, 67, 67, 66, 66, 65, 64]
|
||||
}
|
||||
if (this.dqtc == 'ptoc') {
|
||||
o1.series[0].data = [123, 234, 456, 234, 567, 678, 345, 456, 890, 567, 890, 789, 901, 567, 890, 678, 789, 890, 234, 123, 234, 567, 901, 890]
|
||||
o2.series[0].data = [58, 57, 55, 55, 55, 60, 65, 66, 68, 70, 72, 72]
|
||||
o3.series[0].data = [10, 20, 30, 40, 50, 45, 40, 45, 50, 55, 60, 58, 58, 57, 55, 55, 55, 60, 65, 66, 68, 70, 72, 72]
|
||||
}
|
||||
if (this.dqtc == 'capacity') {
|
||||
o1.series[0].data = [10, 20, 30, 40, 50, 45, 40, 45, 50, 55, 60, 58, 58, 57, 55, 55, 55, 60, 65, 66, 68, 70, 72, 72]
|
||||
o2.series[0].data = [72, 55, 70, 55, 66, 55, 60, 65, 58, 57, 68, 72]
|
||||
o3.series[0].data = [72, 71, 68, 66, 64, 63, 60, 57, 55, 55, 56, 58, 58, 57, 55, 50, 45, 43, 45, 45, 40, 33, 20, 13]
|
||||
}
|
||||
|
||||
medium_term_chart1.setOption(o1)
|
||||
medium_term_chart2.setOption(o2)
|
||||
medium_term_chart3.setOption(o3)
|
||||
},
|
||||
getCharts() {
|
||||
this.recentExpense = this.makeData()
|
||||
this.shortTermExpense = this.makeData()
|
||||
const short_term_chart = echarts.init(document.getElementById('short_term_chart'), 'dark')
|
||||
this.chartShortOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
text: ''
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%']
|
||||
},
|
||||
// dataZoom: [{ type: 'inside', start: 46, end: 54 }, { type: 'inside', start: 46, end: 54 }],
|
||||
series: [
|
||||
{
|
||||
name: '当前费用(元)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
// data: this.recentExpense,
|
||||
data: this.getDateAndData([10, 13, 14, 10, 13, 15, 12]),
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}, {
|
||||
name: '短期套餐费用(元)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
// data: this.shortTermExpense,
|
||||
data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
|
||||
itemStyle: {
|
||||
color: '#f5b000'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
short_term_chart.setOption(this.chartShortOption)
|
||||
},
|
||||
getmedium() {
|
||||
// 获取当前时间
|
||||
const now = new Date()
|
||||
// 创建一个数组来存储每个整点的时间
|
||||
const timeList = []
|
||||
// 循环获取当前时间之后的24个整点时间
|
||||
for (let i = 1; i <= 24; i++) {
|
||||
const nextHour = new Date(now.getTime() + i * 60 * 60 * 1000)
|
||||
// 获取整点时间的小时数并转换为字符串
|
||||
const hourString = nextHour.getHours().toString()
|
||||
|
||||
// 将小时字符串添加到数组中
|
||||
timeList.push(hourString)
|
||||
// 将整点时间添加到数组中
|
||||
}
|
||||
const medium_term_chart = echarts.init(document.getElementById('medium_term_chart'), 'dark')
|
||||
|
||||
// 后增加
|
||||
const medium_term_chart1 = echarts.init(document.getElementById('medium_term_chart1'), 'dark')
|
||||
const medium_term_chart2 = echarts.init(document.getElementById('medium_term_chart2'), 'dark')
|
||||
const medium_term_chart3 = echarts.init(document.getElementById('medium_term_chart3'), 'dark')
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['内存', 'gpu', 'cpu']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: timeList
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '内存',
|
||||
type: 'line',
|
||||
data: [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920, 952, 665, 686, 858, 760, 860, 1100, 604, 582, 878, 662, 811]
|
||||
},
|
||||
{
|
||||
name: 'gpu',
|
||||
type: 'line',
|
||||
data: [80, 80, 105, 125, 136, 86, 79, 67, 83, 126, 120, 101, 65, 87, 95, 95, 110, 107, 78, 104, 107, 69, 108, 72]
|
||||
},
|
||||
{
|
||||
name: 'cpu',
|
||||
type: 'line',
|
||||
data: [19, 22, 28, 37, 16, 23, 36, 36, 22, 33, 13, 26, 27, 37, 13, 14, 23, 25, 27, 16, 21, 14, 18, 34]
|
||||
}
|
||||
]
|
||||
}
|
||||
medium_term_chart.setOption(option)
|
||||
|
||||
medium_term_chart1.setOption(this.getChart1(timeList))
|
||||
medium_term_chart2.setOption(this.getChart2(timeList))
|
||||
medium_term_chart3.setOption(this.getChart3(timeList))
|
||||
},
|
||||
getChart1(timeList) {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a}：{c}ms'
|
||||
}, legend: {
|
||||
data: ['延迟']
|
||||
}, grid: {
|
||||
left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
|
||||
}, toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
},
|
||||
}, backgroundColor: 'transparent',
|
||||
xAxis: {
|
||||
name: '时间(时)',
|
||||
type: 'category', boundaryGap: false, data: timeList
|
||||
}, yAxis: {
|
||||
name: '时延(ms)',
|
||||
type: 'value'
|
||||
}, series: [{
|
||||
name: '延迟',
|
||||
type: 'line',
|
||||
data: [123, 456, 789, 234, 567, 890, 345, 678, 901, 234, 567, 890, 123, 456, 789, 234, 567, 890, 345, 678, 901, 234, 567, 890],
|
||||
itemStyle: {
|
||||
color: '#FF0000' // 设置颜色为红色
|
||||
}
|
||||
}]
|
||||
}
|
||||
return option;
|
||||
},
|
||||
getChart2(timeList) {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['成本']
|
||||
}, grid: {
|
||||
left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
|
||||
}, toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
}, backgroundColor: 'transparent', xAxis: {
|
||||
boundaryGap: true, // 设置为 true
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
}, yAxis: {
|
||||
name: '成本(元/万元)', type: 'value'
|
||||
}, series: [{
|
||||
name: '成本', type: 'bar', data: [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920],
|
||||
itemStyle: {
|
||||
color: '#6495ED'
|
||||
}
|
||||
}, {
|
||||
name: '短期套餐费用(元)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
// data: this.shortTermExpense,
|
||||
data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
|
||||
itemStyle: {
|
||||
color: '#f5b000'
|
||||
}
|
||||
}]
|
||||
};
|
||||
},
|
||||
getChart3(timeList) {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a}：{c}ms'
|
||||
}, legend: {
|
||||
data: ['能耗']
|
||||
}, grid: {
|
||||
left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
|
||||
}, toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
},
|
||||
}, backgroundColor: 'transparent',
|
||||
xAxis: {
|
||||
name: '时间(时)',
|
||||
type: 'category', boundaryGap: false, data: timeList
|
||||
}, yAxis: {
|
||||
name: '能耗(w)',
|
||||
type: 'value'
|
||||
}, series: [{
|
||||
name: '能耗',
|
||||
type: 'line',
|
||||
data: [523, 847, 192, 678, 345, 910, 234, 789, 456, 123, 567, 890, 432, 876, 321, 654, 987, 210, 543, 876, 345, 678, 901, 234],
|
||||
itemStyle: {
|
||||
color: '#f5b000'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
makeData() {
|
||||
const base = +new Date()
|
||||
const oneDay = 24 * 3600 * 1000
|
||||
// const data = [[base, Math.random() * 300]]
|
||||
const data = []
|
||||
for (let i = -49; i < 50; i++) {
|
||||
const now = new Date((base + i * oneDay))
|
||||
data.push([+now, Math.abs(Math.random() * 300).toFixed(2)])
|
||||
}
|
||||
return data
|
||||
},
|
||||
getDateAndData(arr) {
|
||||
let begin = Date.parse(new Date())
|
||||
let result = []
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
result.push([(begin + i * 1000 * 3600 * 24), arr[i]])
|
||||
}
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,439 @@
|
|||
<template>
|
||||
|
||||
<div class='containers'>
|
||||
<!-- <el-button size='small' type='primary' @click='showUploadDialog'>上传</el-button>-->
|
||||
<div class='canvas' ref='canvas'></div>
|
||||
|
||||
<!-- <el-dialog title="上传文件" :visible.sync="uploadDialogVisible">-->
|
||||
<!-- <el-upload-->
|
||||
<!-- action="#"-->
|
||||
<!-- :before-upload="handleFileUpload"-->
|
||||
<!-- :show-file-list="false">-->
|
||||
<!-- <el-button type="primary">选择文件</el-button>-->
|
||||
<!-- </el-upload>-->
|
||||
<!-- <span slot="footer" class="dialog-footer">-->
|
||||
<!-- <el-button @click="uploadDialogVisible = false">取消</el-button>-->
|
||||
<!-- </span>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入相关的依赖
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler'
|
||||
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
|
||||
import customTranslate from './js/customTranslate' // 汉化包引入
|
||||
import { videoBusiness } from './js/videoBusiness' // 流程图初始配置，编辑的话只需要相同格式的文件替换即可
|
||||
import { publicSafety } from './js/publicSafety' // 流程图初始配置，编辑的话只需要相同格式的文件替换即可
|
||||
import { scientificComputing } from './js/scientificComputing'
|
||||
import {reportingProcess} from "./js";
|
||||
import xml2js from "xml2js"; // 流程图初始配置，编辑的话只需要相同格式的文件替换即可
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkSuccess:true,
|
||||
uploadDialogVisible: false,
|
||||
bpmnModeler: null,
|
||||
canvas: null
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init()
|
||||
this.setZoomLevel(1.0) // 设置缩放级别为1.0
|
||||
this.autoFit() // 自适应显示流程图
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
showUploadDialog() {
|
||||
this.uploadDialogVisible = true;
|
||||
},
|
||||
handleFileUpload(file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const xmlStrWithValues = e.target.result;
|
||||
this.$refs.modal.import(xmlStrWithValues);
|
||||
this.uploadDialogVisible = false;
|
||||
};
|
||||
reader.readAsText(file);
|
||||
return false; // Prevent default upload behavior
|
||||
},
|
||||
setZoomLevel(level) {
|
||||
const canvas = this.bpmnModeler.get('canvas')
|
||||
canvas.zoom(level)
|
||||
},
|
||||
autoFit() {
|
||||
const canvas = this.bpmnModeler.get('canvas')
|
||||
canvas.zoom('fit-viewport')
|
||||
},
|
||||
init() {
|
||||
// 将汉化包包装成一个模块
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const customTranslateMolude = {
|
||||
translate: ['value', customTranslate]
|
||||
}
|
||||
this.bpmnModeler = new BpmnModeler({
|
||||
// 建模
|
||||
container: this.$refs.canvas,
|
||||
propertiesPanel: {
|
||||
// 添加控制板
|
||||
parent: '#properties-panel'
|
||||
},
|
||||
// additionalModules: [
|
||||
// // 右边的属性栏
|
||||
// propertiesProviderModule,
|
||||
// propertiesPanelModule,
|
||||
// customTranslateMolude // 汉化模块
|
||||
// ],
|
||||
moddleExtensions: {
|
||||
camunda: camundaModdleDescriptor
|
||||
}
|
||||
})
|
||||
// this.createNewDiagram('', '', '', '', '', '', '', '', '', '')
|
||||
},
|
||||
createNewDiagram(vi_1, vi_2, vi_3, vi_4, vi_5, vi_6, vi_7, vi_8, vi_9, vi_10, vi_11, vi_12, vi_13, vi_14, vi_15) {
|
||||
// 将字符串转换成图显示出来
|
||||
const xmlStrWithValues = videoBusiness.replace('$vi_01$', vi_1)
|
||||
.replace('$vi_02$', vi_2).replace('$vi_03$', vi_3).replace('$vi_04$', vi_4)
|
||||
.replace('$vi_05$', vi_5).replace('$vi_06$', vi_6).replace('$vi_07$', vi_7)
|
||||
.replace('$vi_08$', vi_8).replace('$vi_09$', vi_9).replace('$vi_10$', vi_10)
|
||||
.replace('$vi_11$', vi_11).replace('$vi_12$', vi_12).replace('$vi_13$', vi_13)
|
||||
.replace('$vi_14$', vi_14).replace('$vi_15$', vi_15)
|
||||
this.import(xmlStrWithValues)
|
||||
return xmlStrWithValues
|
||||
},
|
||||
createNewDiagram2(fat_0, fat_1, fat_2, fat_3, fat_4, fat_5, fat_6, fat_7, fat_8, fat_9
|
||||
, fat_10, fat_11, fat_12, fat_13, fat_14, fat_15, fat_16, fat_17) {
|
||||
// 将字符串转换成图显示出来
|
||||
const xmlStrWithValues = publicSafety.replace('$fat_0$', fat_0).replace('$fat_1$', fat_1)
|
||||
.replace('$fat_2$', fat_2).replace('$fat_3$', fat_3).replace('$fat_4$', fat_4)
|
||||
.replace('$fat_5$', fat_5).replace('$fat_6$', fat_6).replace('$fat_7$', fat_7)
|
||||
.replace('$fat_8$', fat_8).replace('$fat_9$', fat_9).replace('$fat_10$', fat_10)
|
||||
.replace('$fat_11$', fat_11).replace('$fat_12$', fat_12).replace('$fat_13$', fat_13)
|
||||
.replace('$fat_14$', fat_14).replace('$fat_15$', fat_15).replace('$fat_16$', fat_16)
|
||||
.replace('$fat_17$', fat_17)
|
||||
this.import(xmlStrWithValues)
|
||||
return xmlStrWithValues
|
||||
},
|
||||
createNewDiagram3(sc_1, sc_2, sc_3, sc_4, sc_5, sc_6, sc_7, sc_8, sc_9, sc_10, sc_11, sc_12, sc_13, sc_14, sc_15, sc_16, sc_17, sc_18, sc_19, sc_20, sc_21, sc_22, sc_23, sc_24, sc_25, sc_26, sc_27, sc_28, sc_29, sc_30, sc_31, sc_32, sc_33, sc_34) {
|
||||
// 将字符串转换成图显示出来
|
||||
const xmlStrWithValues = scientificComputing.replace('$sc_01$', sc_1)
|
||||
.replace('$sc_02$', sc_2).replace('$sc_03$', sc_3).replace('$sc_04$', sc_4)
|
||||
.replace('$sc_05$', sc_5).replace('$sc_06$', sc_6).replace('$sc_07$', sc_7)
|
||||
.replace('$sc_08$', sc_8).replace('$sc_09$', sc_9).replace('$sc_10$', sc_10)
|
||||
.replace('$sc_11$', sc_11).replace('$sc_12$', sc_12).replace('$sc_13$', sc_13)
|
||||
.replace('$sc_14$', sc_14).replace('$sc_15$', sc_15).replace('$sc_16$', sc_16)
|
||||
.replace('$sc_17$', sc_17).replace('$sc_18$', sc_18).replace('$sc_19$', sc_19)
|
||||
.replace('$sc_20$', sc_20).replace('$sc_21$', sc_21).replace('$sc_22$', sc_22)
|
||||
.replace('$sc_23$', sc_23).replace('$sc_24$', sc_24).replace('$sc_25$', sc_25)
|
||||
.replace('$sc_26$', sc_26).replace('$sc_27$', sc_27).replace('$sc_28$', sc_28)
|
||||
.replace('$sc_29$', sc_29).replace('$sc_30$', sc_30).replace('$sc_31$', sc_31)
|
||||
.replace('$sc_32$', sc_32).replace('$sc_33$', sc_33).replace('$sc_34$', sc_34)
|
||||
this.import(xmlStrWithValues)
|
||||
return xmlStrWithValues
|
||||
},
|
||||
// 自定义流程图
|
||||
createNewDiagram4(xmlStrWithCustom,sc_1, sc_2, sc_3, sc_4, sc_5, sc_6, sc_7, sc_8, sc_9, sc_10, sc_11, sc_12, sc_13, sc_14, sc_15, sc_16, sc_17, sc_18, sc_19, sc_20, sc_21, sc_22, sc_23, sc_24, sc_25, sc_26, sc_27, sc_28, sc_29, sc_30, sc_31, sc_32, sc_33, sc_34) {
|
||||
// 将字符串转换成图显示出来
|
||||
|
||||
console.log(xmlStrWithCustom)
|
||||
this.parseBpmnXml(xmlStrWithCustom)
|
||||
this.importNew(xmlStrWithCustom)
|
||||
|
||||
return xmlStrWithCustom
|
||||
},
|
||||
async import(xmlStrWithValues) {
|
||||
this.bpmnModeler.importXML(xmlStrWithValues, (err) => {
|
||||
console.log(111, err)
|
||||
if (!err) {
|
||||
this.success()
|
||||
this.hidePalette() // 调用隐藏左侧栏的方法
|
||||
} else {
|
||||
this.$message.error('导入XML文件时发生错误,请上传符合BPMN规范的XML文件')
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
async importNew(xmlStrWithValues) {
|
||||
this.bpmnModeler.importXML(xmlStrWithValues, (err) => {
|
||||
console.log(111, err)
|
||||
if (!err) {
|
||||
this.success()
|
||||
this.hidePalette() // 调用隐藏左侧栏的方法
|
||||
// reportingProcess(this.params).then((data) => {
|
||||
// this.flag = true
|
||||
// this.$message({ type: 'success', message: '操作成功' })
|
||||
// this.isLoading = false
|
||||
// }).catch((error) => {
|
||||
// console.log(error)
|
||||
// this.isLoading = false
|
||||
// })
|
||||
} else {
|
||||
this.$message.error('导入XML文件时发生错误,请上传符合BPMN规范的XML文件')
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
getCustomCpuValue(xmlStr){
|
||||
const doc = new DOMParser().parseFromString(xmlStr, 'application/xml');
|
||||
const definitions = doc.getElementsByTagName('definitions')[0];
|
||||
const customAttribute = definitions.getAttribute('custom:cpu')
|
||||
return customAttribute;
|
||||
},
|
||||
parseBpmnXml(xmlStr){
|
||||
this.bpmnModeler.importXML(xmlStr, (err) => {
|
||||
if (err) {
|
||||
console.error('导入XML文件时发生错误:', err);
|
||||
return;
|
||||
}
|
||||
|
||||
const elementRegistry = this.bpmnModeler.get('elementRegistry');
|
||||
const taskElements = elementRegistry.filter(element => element.type === 'bpmn:Task');
|
||||
|
||||
const taskAttributes = taskElements.map(task => {
|
||||
const businessObject = task.businessObject;
|
||||
return {
|
||||
name: businessObject.name,
|
||||
customAttribute: businessObject.$attrs.number,
|
||||
customAttribute2: businessObject.$attrs.customCpu
|
||||
};
|
||||
});
|
||||
|
||||
const cpuData = []
|
||||
const le = []
|
||||
// cpuData.push(le)
|
||||
const cp = []
|
||||
|
||||
const oo ={};
|
||||
taskAttributes.forEach(task => {
|
||||
le.push(parseInt(task.customAttribute))// 第几个
|
||||
cp.push(parseInt(task.customAttribute2)) // 具体的值
|
||||
oo[task.customAttribute] = task.name;
|
||||
console.log(`任务节点名称: ${task.name}, Custom Attribute: ${task.customAttribute} , Custom Attribute2: ${task.customAttribute2}`);
|
||||
});
|
||||
const paramsRe = {};
|
||||
paramsRe.processMap = oo;
|
||||
paramsRe.processInfo = xmlStr;
|
||||
cpuData.push(le)
|
||||
cpuData.push(cp)
|
||||
paramsRe.cpuJson = cpuData
|
||||
const sequenceFlowElements = elementRegistry.filter(element => element.type === 'bpmn:SequenceFlow');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// const taskNames = taskElements.map(task => task.businessObject.name);
|
||||
// const sequenceFlowNames = sequenceFlowElements.map(flow => flow.businessObject.name);
|
||||
const sequenceFlowAttributes = sequenceFlowElements.map(flow => {
|
||||
const businessObject = flow.businessObject;
|
||||
return {
|
||||
name: businessObject.name,
|
||||
customAttribute: businessObject.$attrs.customAttribute
|
||||
};
|
||||
});
|
||||
const pplinkData = []
|
||||
// const info0 = [0, 1, parseInt(this.process.process_one.task.vi_1)]
|
||||
|
||||
for (const x of sequenceFlowAttributes) {
|
||||
if(!x.customAttribute){
|
||||
this.$message.error('导入XML文件时发生错误,连线缺少customAttribute')
|
||||
return;;
|
||||
}
|
||||
let split = x.customAttribute.split("_");
|
||||
if(!split[0] || !split[1]){
|
||||
this.$message.error('导入XML文件时发生错误,customAttribute 没有按照_分割')
|
||||
return;;
|
||||
}
|
||||
const info0 = [parseInt(split[0]), parseInt(split[1]),parseInt(x.name)]
|
||||
pplinkData.push(info0)
|
||||
}
|
||||
paramsRe.reportJson = pplinkData
|
||||
console.log("线和线的值",sequenceFlowAttributes);
|
||||
|
||||
// console.log('任务节点名称:', taskNames);
|
||||
// console.log('线的名称:', sequenceFlowNames);
|
||||
//
|
||||
|
||||
const parser = new xml2js.Parser();
|
||||
|
||||
// cpu 内存
|
||||
parser.parseString(xmlStr, (err, result) => {
|
||||
if (err) {
|
||||
console.error('Error parsing BPMN XML:', err);
|
||||
return;
|
||||
}
|
||||
|
||||
const definitions = result['bpmn2:definitions'];
|
||||
const customAttributes = definitions['$'];
|
||||
const cpuValue = customAttributes['custom:cpu'];
|
||||
const memValue = customAttributes['custom:mem'];
|
||||
const storageValue = customAttributes['custom:storage'];
|
||||
|
||||
if (cpuValue) {
|
||||
paramsRe.cpu = cpuValue;
|
||||
console.log('CPU Value:', cpuValue);
|
||||
} else {
|
||||
this.$message.error('导入XML文件时发生错误,CPU为空')
|
||||
return;
|
||||
}
|
||||
// 同理
|
||||
if (memValue) {
|
||||
paramsRe.mem = memValue;
|
||||
console.log('mem Value:', memValue);
|
||||
} else {
|
||||
this.$message.error('导入XML文件时发生错误,MEM为空')
|
||||
return;
|
||||
}
|
||||
if (storageValue) {
|
||||
paramsRe.storage = storageValue;
|
||||
console.log('storage Value:', storageValue);
|
||||
} else {
|
||||
this.$message.error('导入XML文件时发生错误,STORAGE为空')
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
reportingProcess(paramsRe).then((data) => {
|
||||
this.flag = true
|
||||
this.$message({ type: 'success', message: '操作成功' })
|
||||
this.isLoading = false
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
this.isLoading = false
|
||||
})
|
||||
// const cpuValue = this.getCustomCpuValue(xmlStr);
|
||||
|
||||
// console.log('CPU Value:', cpuValue);
|
||||
});
|
||||
|
||||
//
|
||||
|
||||
//
|
||||
|
||||
},
|
||||
hidePalette() {
|
||||
const paletteContainer = this.$el.querySelector('.djs-palette')
|
||||
paletteContainer.style.display = 'none'
|
||||
},
|
||||
success() {
|
||||
console.log('创建成功!')
|
||||
this.bpmnModeler.on('commandStack.changed', () => {
|
||||
this.getXML().then((xml) => {
|
||||
})
|
||||
})
|
||||
this.addModelerListener()
|
||||
this.addEventBusListener()
|
||||
},
|
||||
getXML() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
|
||||
err ? reject(err) : resolve(xml)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 添加绑定事件
|
||||
addBpmnListener() {
|
||||
const that = this
|
||||
// 获取a标签dom节点
|
||||
const downloadLink = this.$refs.saveDiagram
|
||||
const downloadSvgLink = this.$refs.saveSvg
|
||||
// 给图绑定事件，当图有发生改变就会触发这个事件
|
||||
this.bpmnModeler.on('commandStack.changed', function() {
|
||||
that.saveSVG(function(err, svg) {
|
||||
that.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
|
||||
})
|
||||
that.saveDiagram(function(err, xml) {
|
||||
that.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
|
||||
})
|
||||
})
|
||||
},
|
||||
addModelerListener() {
|
||||
// 监听 modeler
|
||||
const bpmnjs = this.bpmnModeler
|
||||
const that = this
|
||||
// 'shape.removed', 'connect.end', 'connect.move'
|
||||
const events = ['shape.added', 'shape.move.end', 'shape.removed']
|
||||
events.forEach(function(event) {
|
||||
that.bpmnModeler.on(event, e => {
|
||||
var elementRegistry = bpmnjs.get('elementRegistry')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
|
||||
if (event === 'shape.added') {
|
||||
console.log('新增了shape')
|
||||
} else if (event === 'shape.move.end') {
|
||||
console.log('移动了shape')
|
||||
} else if (event === 'shape.removed') {
|
||||
console.log('删除了shape')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
addEventBusListener() {
|
||||
// 监听 element
|
||||
const that = this
|
||||
const eventBus = this.bpmnModeler.get('eventBus')
|
||||
const eventTypes = ['element.click', 'element.changed']
|
||||
eventTypes.forEach(function(eventType) {
|
||||
eventBus.on(eventType, function(e) {
|
||||
if (!e || e.element.type === 'bpmn:Process') return
|
||||
if (eventType === 'element.changed') {
|
||||
that.elementChanged(eventType, e)
|
||||
} else if (eventType === 'element.click') {
|
||||
console.log('点击了element')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
elementChanged(eventType, e) {
|
||||
var shape = this.getShape(e.element.id)
|
||||
if (!shape) {
|
||||
// 若是shape为null则表示删除, 无论是shape还是connect删除都调用此处
|
||||
console.log('无效的shape')
|
||||
// 由于上面已经用 shape.removed 检测了shape的删除, 因此这里只判断是否是线
|
||||
if (this.isSequenceFlow(shape.type)) {
|
||||
console.log('删除了线')
|
||||
}
|
||||
}
|
||||
if (!this.isInvalid(shape.type)) {
|
||||
if (this.isSequenceFlow(shape.type)) {
|
||||
console.log('改变了线')
|
||||
}
|
||||
}
|
||||
},
|
||||
getShape(id) {
|
||||
var elementRegistry = this.bpmnModeler.get('elementRegistry')
|
||||
return elementRegistry.get(id)
|
||||
},
|
||||
isInvalid(param) { // 判断是否是无效的值
|
||||
return param === null || param === undefined || param === ''
|
||||
},
|
||||
isSequenceFlow(type) { // 判断是否是线
|
||||
return type === 'bpmn:SequenceFlow'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containers {
|
||||
position: absolute;
|
||||
width: 105vh;
|
||||
height: 81vh;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 105vh;
|
||||
height: 81vh;
|
||||
}
|
||||
|
||||
#properties-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
#flow {
|
||||
.top_row_button{
|
||||
margin-top:1.8vh;
|
||||
}
|
||||
#top-row-button-box {
|
||||
.el-button--primary {
|
||||
background-color: #1890ff1f
|
||||
}
|
||||
}
|
||||
|
||||
.top_row_text{
|
||||
color: #FFFFFF;
|
||||
margin-top:1.8vh;
|
||||
}
|
||||
|
||||
.title_row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.title_box_text {
|
||||
font-family: 'Alternate';
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title_box_hr {
|
||||
border-bottom: 2px solid;
|
||||
opacity: 0.2;
|
||||
color: white;
|
||||
width: 120%;
|
||||
margin-top: 2%;
|
||||
margin-left: -10%;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
padding: 10px 10px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue