forked from JointCloud/JCC-RIP
20201120
This commit is contained in:
annzee
parent
0a0e2292c7
commit
4588895004
21
README.md
21
README.md
|
|
@ -1,24 +1,21 @@
|
|||
# jointcloud
|
||||
# jointcloud 云际计算
|
||||
|
||||
## 电脑需要安装 node 环境
|
||||
|
||||
## 安装依赖命令
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
### 编译及热加载命令
|
||||
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
### 生产环境打包命令
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 430 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 389 KiB After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 572 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-col class="main " :span="18">
|
||||
<div>
|
||||
<h1 class="page-title">第一次全面评测报告</h1>
|
||||
<div id="header-1">
|
||||
<h3 class="page-header"></h3>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div>评测结果数据：
|
||||
<a href="datas/bench_results.xlsx" download="datas/bench_results.xlsx">bench_results.xlsx</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<router-view class="documents"></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'document',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.documents{
|
||||
display: block;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
margin: 30px auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-col class="main " :span="18">
|
||||
<div>
|
||||
<h1 class="page-title">评分预测推广</h1>
|
||||
<div id="header-1">
|
||||
<h3 class="page-header"></h3>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<h3 class="page-header">启动时间</h3>
|
||||
<p>启动时间与规格不存在明显的关系，所以不进行预测。总的来说，在四家厂商中，启动时间整体上由慢到快的顺序为UCloud > 腾讯云 > 华为云 > 阿里云。</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-col class="main " :span="18">
|
||||
<h1 class="page-title">性能评测及评分规则</h1>
|
||||
<div id="header-1">
|
||||
<h3 class="page-header"></h3>
|
||||
<p>我们对阿里云、华为云、腾讯云、UCloud按量付费的实例进行评测，得到评分结果，以此为依据进行推荐。</p>
|
||||
<p>由于实例类型种类繁多，我们主要选取了有代表性的3种类型，12种实例，同时也选取了各云服务厂商最新的几种实例进行持续的评测，并进行评分。</p>
|
||||
<p>评测每周进行一次，每次评测选择不同的地域，在四个不同地域中进行评测。如下图：</p>
|
||||
<img style="width: 90%;" src="@/assets/modules/serviceRecommendation/regions.png">
|
||||
<p>评测结果见云服务评分页面。</p>
|
||||
</div>
|
||||
<div id="header-2">
|
||||
<h3 class="page-header">评测实例选取</h3>
|
||||
<p>对于阿里云、华为云和腾讯云，我们在常用的通用型/标准型，计算优化型和内存优化型三种类型种各选择一种；
|
||||
对于UCloud，由于没有区分类型选择相同vCPU和内存的实例。主要的评测实例选取如下：</p>
|
||||
<img style="width: 90%;" src="@/assets/modules/serviceRecommendation/instances.png">
|
||||
<p>通用型/标准型的vCPU内存比为1:4，计算优化型为1:2，内存优化型为1:8。另外，也选取了各厂商最新的实例进行评测，
|
||||
如：阿里云的g6e.large, c6e.xlarge, r6e.large，腾讯云的SN5.MEDIUM8等等。这些评测实例的选取并不是一定的。</p>
|
||||
</div>
|
||||
<div id="header-3">
|
||||
<h3 class="page-header">评测指标和评分计算</h3>
|
||||
<p>目前，我们选择了五个维度的评测指标来衡量一个实例的性能，并分别进行评分。分别是CPU性能、内存性能、磁盘性能、网络性能。
|
||||
对于每一个指标，设定一个基准性能参数，评测实例的分数就是该实例的评测结果与设定的基准性能参数的比值。基准性能参数的设置使得分数在100分左右。
|
||||
</p>
|
||||
<p>总评分即是各个指标评分的加和。</p>
|
||||
</div>
|
||||
<div id="header-4">
|
||||
<h3 class="page-header">评测程序</h3>
|
||||
<p>我们使用Sysbench评测程序分别对CPU、内存和IO进行评测并打分。
|
||||
对三个指标的评测都分为单线程的评测和多线程的评测，多线程评测的线程数量等于实例的CPU数量。
|
||||
对内存的评测又分为读和写，对IO的评测分为顺序读、顺序写、随机读、随机写和随机读写。</p>
|
||||
<p>我们使用Netperf对内网性能进行评测，评测分为TCP和UDP两部分。</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<h1 class="page-title">性能评测及评分规则</h1>
|
||||
<div id="header-1">
|
||||
<h3 class="page-header"></h3>
|
||||
<p>我们对阿里云、华为云、腾讯云、UCloud按量付费的实例进行评测，得到评分结果，以此为依据进行推荐。</p>
|
||||
<p>由于实例类型种类繁多，我们主要选取了有代表性的3种类型，12种实例，同时也选取了各云服务厂商最新的几种实例进行持续的评测，并进行评分。</p>
|
||||
<p>评测每周进行一次，每次评测选择不同的地域，在四个不同地域中进行评测。如下图：</p>
|
||||
<img style="width: 90%;" src="@/assets/modules/serviceRecommendation/regions.png">
|
||||
<p>评测结果见云服务评分页面。</p>
|
||||
</div>
|
||||
<div id="header-2">
|
||||
<h3 class="page-header">评测实例选取</h3>
|
||||
<p>对于阿里云、华为云和腾讯云，我们在常用的通用型/标准型，计算优化型和内存优化型三种类型种各选择一种；
|
||||
对于UCloud，由于没有区分类型选择相同vCPU和内存的实例。主要的评测实例选取如下：</p>
|
||||
<img style="width: 90%;" src="@/assets/modules/serviceRecommendation/instances.png">
|
||||
<p>通用型/标准型的vCPU内存比为1:4，计算优化型为1:2，内存优化型为1:8。另外，也选取了各厂商最新的实例进行评测，
|
||||
如：阿里云的g6e.large, c6e.xlarge, r6e.large，腾讯云的SN5.MEDIUM8等等。这些评测实例的选取并不是一定的。</p>
|
||||
</div>
|
||||
<div id="header-3">
|
||||
<h3 class="page-header">评测指标和评分计算</h3>
|
||||
<p>目前，我们选择了五个维度的评测指标来衡量一个实例的性能，并分别进行评分。分别是CPU性能、内存性能、磁盘性能、网络性能。
|
||||
对于每一个指标，设定一个基准性能参数，评测实例的分数就是该实例的评测结果与设定的基准性能参数的比值。基准性能参数的设置使得分数在100分左右。
|
||||
</p>
|
||||
<p>总评分即是各个指标评分的加和。</p>
|
||||
</div>
|
||||
<div id="header-4">
|
||||
<h3 class="page-header">评测程序</h3>
|
||||
<p>我们使用Sysbench评测程序分别对CPU、内存和IO进行评测并打分。
|
||||
对三个指标的评测都分为单线程的评测和多线程的评测，多线程评测的线程数量等于实例的CPU数量。
|
||||
对内存的评测又分为读和写，对IO的评测分为顺序读、顺序写、随机读、随机写和随机读写。</p>
|
||||
<p>我们使用Netperf对内网性能进行评测，评测分为TCP和UDP两部分。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="footer">
|
||||
<div :class="fixed?'fixedFooter':'footer'">
|
||||
<div class="footer-links">
|
||||
<el-row v-if="type !== 'mini'">
|
||||
<el-col>
|
||||
|
|
@ -49,6 +49,16 @@ export default {
|
|||
props: {
|
||||
type: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixed: this.$route.path === '/serviceRecommendation/documents',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(val) {
|
||||
this.fixed = val.path === '/serviceRecommendation/documents';
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -59,6 +69,15 @@ export default {
|
|||
padding: 30px;
|
||||
overflow: auto;
|
||||
}
|
||||
.fixedFooter{
|
||||
background-color: black;
|
||||
color: #dddddd;
|
||||
padding: 30px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.footer-links{
|
||||
width: 86%;
|
||||
max-width: 1200px;
|
||||
|
|
|
|||
|
|
@ -33,10 +33,9 @@
|
|||
@select="handleSelect">
|
||||
<el-menu-item index="1">首页</el-menu-item>
|
||||
<el-menu-item index="2">需求发布</el-menu-item>
|
||||
<el-menu-item index="3">厂商信息</el-menu-item>
|
||||
<el-menu-item index="4">企业应用中心</el-menu-item>
|
||||
<el-menu-item index="5">解决方案</el-menu-item>
|
||||
<el-menu-item index="6">技术成果</el-menu-item>
|
||||
<el-menu-item index="3">服务发布</el-menu-item>
|
||||
<el-menu-item index="4">解决方案</el-menu-item>
|
||||
<el-menu-item index="5">技术成果</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
|
||||
|
|
@ -55,9 +54,8 @@ export default {
|
|||
1: '/',
|
||||
2: '/requirementRelease',
|
||||
3: '/servicePublication',
|
||||
4: '/404',
|
||||
5: '/solution',
|
||||
6: '/404',
|
||||
4: '/solution',
|
||||
5: '/404',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -134,11 +134,11 @@ export default {
|
|||
},
|
||||
],
|
||||
functionList: [
|
||||
// {
|
||||
// name: '云际磋商', icon: 'yj_1', info: '根据需求侧特定信息整合供给侧资源, 形成满足特定领域用户需求的云服务资源提供商候选对象列表, 协助用户选择最优化的云服务资源组合。', url: '/serviceRecommendation',
|
||||
// },
|
||||
{
|
||||
name: '云际磋商', icon: 'yj_1', info: '根据需求侧特定信息整合供给侧资源, 形成满足特定领域用户需求的云服务资源提供商候选对象列表, 协助用户选择最优化的云服务资源组合。', url: '/serviceRecommendation',
|
||||
},
|
||||
{
|
||||
name: '云际互联', icon: 'yj_2', info: '实现对云际资源与服务之间的互联互通，构建云服务描述与发现标准体系；实现云际服务的快速发现、标准化索引和计量，构建云际服务的可信平台以及价值交换平台。', url: '/404',
|
||||
name: '虚拟专云', icon: 'yj_5', info: '基于虚拟专用云平台管理系统，建立 “工作空间即服务” 的一种新型云际应用服务模式，对传统应用平滑上云，与对云际资源的动态自适应形成有效支撑。', url: '/serviceRecommendation',
|
||||
},
|
||||
{
|
||||
name: '云际存储', icon: 'yj_3', info: '量化评估任务执行时间异常造成的影响，利用工作集负载感知的高效虚拟机迁移技术，实现虚拟机实时迁移，多维度云际存储优化，为云际应用开发运维提供支撑。', url: '/cloudStorage',
|
||||
|
|
@ -147,17 +147,18 @@ export default {
|
|||
name: '跨云计算', icon: 'yj_4', info: '构建面向计算与存储的资源抽象模型，运用应用与平台的解耦方法，实现计算资源的统一管理与聚合，通过对效能的动态评价寻找最满足功能约束的资源分配计算方案。', url: '/cloudComputation',
|
||||
},
|
||||
{
|
||||
name: '虚拟专云', icon: 'yj_5', info: '基于虚拟专用云平台管理系统，建立“工作空间即服务”的一种新型云际应用服务模式，对传统应用平滑上云与对云际资源的动态自适应形成有效支撑。', url: '/404',
|
||||
name: '云际互联', icon: 'yj_2', info: '实现对云际资源与服务之间的互联互通，构建云服务描述与发现标准体系；实现云际服务的快速发现、标准化索引和计量，构建云际服务的可信平台以及价值交换平台。', url: '/404',
|
||||
},
|
||||
{
|
||||
name: '云际容灾', icon: 'yj_6', info: '利用“纠删码”与“多副本”容灾技术，实现数据分散存放，形成有效数据备份；结合数据安全、存储利用率、读写效率等特性，实现低成本/高效率的云际容灾管理。', url: '/404',
|
||||
},
|
||||
{
|
||||
name: '云际学习', icon: 'yj_7', info: '结合AI数据集与应用场景，通过云际大数据融合过程实现数据智能学习，实现对问题解决的聚焦、分类、推荐、解决、预测。', url: '/404',
|
||||
},
|
||||
{
|
||||
name: '云际记账', icon: 'yj_8', info: '提供分布记账、智能合约等相关支撑机制, 基于区块链技术构建云际分布记账账本，交易完成后向参与方提供包含资源集成、代理服务和资源交易支付等完整记录。', url: '/404',
|
||||
},
|
||||
{
|
||||
name: '云际学习', icon: 'yj_7', info: '结合AI数据集与应用场景，通过云际大数据融合过程实现数据智能学习，实现对问题解决的聚焦、分类、推荐、解决、预测。', url: '/404',
|
||||
},
|
||||
|
||||
],
|
||||
solutionList: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -13,8 +13,31 @@
|
|||
<h2>跨云计算</h2>
|
||||
<div class="manufacturer cloudComputation">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="函数面板" name="0">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="6" v-for="(item,index) in functionList" :key="index">
|
||||
<el-card class="functionCard">
|
||||
<p class="title">{{item.name}} <el-button type="text" class="insideFloatRight" @click="activeName='1'">details</el-button></p>
|
||||
<el-divider></el-divider>
|
||||
<p>env:{{item.env}}</p>
|
||||
<p>memory:{{item.memory}}</p>
|
||||
<p>timeout:{{item.timeout}}</p>
|
||||
<el-popconfirm
|
||||
confirm-button-text='好的'
|
||||
cancel-button-text='不用了'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="确认删除此函数么？"
|
||||
>
|
||||
<el-button slot="reference" type="danger" size="small">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="创建函数" name="1">
|
||||
<div class="bg-gray">
|
||||
<div class="bg-gray" v-if="activeName==='1'">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form v-model="form" ref="form" label-width="150px">
|
||||
|
|
@ -90,25 +113,43 @@
|
|||
<td>EnviromentVariable:</td>
|
||||
<td :colspan="2">{{form.envVar}}</td>
|
||||
<td :colspan="3">
|
||||
Enable Native Serverless:
|
||||
<!-- Enable Native Serverless:
|
||||
<el-switch
|
||||
v-model="form.enableNS"
|
||||
size="small">
|
||||
</el-switch>
|
||||
</el-switch> -->
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<el-row style="margin-bottom:30px" :gutter="30">
|
||||
<el-col :span="9">
|
||||
<p>Args：</p>
|
||||
<el-input
|
||||
type="textarea"
|
||||
rows="6"
|
||||
v-model="args"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="2" :offset="1">
|
||||
<el-button class="invokeBtn" @click="invoke">invoke</el-button>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="9">
|
||||
<p>函数返回值：</p>
|
||||
<el-input rows="6" type="textarea" readonly v-model="result"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button @click="activeName='1'">上一步</el-button>
|
||||
<el-button @click="getResult">下一步</el-button>
|
||||
<el-button @click="getResult">查看过程</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="过程监管并获取结果" name="3">
|
||||
<div class="bg-gray">
|
||||
<el-tab-pane label="过程监管" name="3">
|
||||
<iframe id="iframe" src="http://117.50.133.184:3000/d/MtxJZLoMk/hcloud-backend?orgId=1&refresh=5s" frameborder="0"></iframe>
|
||||
<!-- <div class="bg-gray">
|
||||
<el-progress class="progress" :text-inside="true"
|
||||
:stroke-width="26" :percentage="percentage"></el-progress>
|
||||
<div id="myEchart" style="width:1000px; height:600px" ref="myEchart">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
|
@ -140,8 +181,12 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
interval: '',
|
||||
activeName: '1',
|
||||
form: {},
|
||||
activeName: '0',
|
||||
form: {
|
||||
env: 'python',
|
||||
},
|
||||
args: '{}',
|
||||
result: '',
|
||||
percentage: 0,
|
||||
second: 0,
|
||||
cmOption: {
|
||||
|
|
@ -154,7 +199,36 @@ export default {
|
|||
theme: 'base16-light',
|
||||
// keyMap: "emacs"
|
||||
},
|
||||
code: dedent`# Code here`,
|
||||
code: dedent`# Code here
|
||||
def handler(event):
|
||||
return "hello world"
|
||||
`,
|
||||
functionList:[
|
||||
{
|
||||
name: 'MLtest',
|
||||
env: 'python3',
|
||||
memory: '128MB',
|
||||
timeout: '3s',
|
||||
},
|
||||
{
|
||||
name: 'MLtest1',
|
||||
env: 'python3',
|
||||
memory: '128MB',
|
||||
timeout: '3s',
|
||||
},
|
||||
{
|
||||
name: 'hello',
|
||||
env: 'python3',
|
||||
memory: '128MB',
|
||||
timeout: '3s',
|
||||
},
|
||||
{
|
||||
name: 'img_resize',
|
||||
env: 'python3',
|
||||
memory: '128MB',
|
||||
timeout: '3s',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -164,9 +238,12 @@ export default {
|
|||
createFunc() {
|
||||
this.activeName = '2';
|
||||
},
|
||||
invoke() {
|
||||
this.result = 'hello world';
|
||||
},
|
||||
getResult() {
|
||||
this.activeName = '3';
|
||||
this.dynamicData();
|
||||
// this.dynamicData();
|
||||
},
|
||||
randomData() {
|
||||
this.second += 1;
|
||||
|
|
@ -287,6 +364,40 @@ export default {
|
|||
width: 300px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.invokeBtn{
|
||||
margin: 40px auto;
|
||||
}
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.functionCard{
|
||||
|
||||
margin: 30px auto;
|
||||
.el-card__body{
|
||||
padding:0;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.title{
|
||||
margin:20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p{
|
||||
margin: 10px 20px;
|
||||
// margin-bottom: 10px;
|
||||
}
|
||||
.el-button{
|
||||
margin:10px;
|
||||
}
|
||||
.insideFloatRight {
|
||||
margin: 0;
|
||||
padding:0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
</div>
|
||||
<h2>跨云计算</h2>
|
||||
<div class="manufacturer">
|
||||
<div class="processImg processImg-3">
|
||||
<div class="processImg">
|
||||
<img src="@/assets/modules/cloudComputation/process3.png" alt="">
|
||||
</div>
|
||||
<el-row class="overviewInfo" :gutter="30">
|
||||
<el-col :span="12">
|
||||
|
|
|
|||
|
|
@ -14,36 +14,27 @@
|
|||
<h2>HCloud 技术亮点</h2>
|
||||
<el-divider></el-divider>
|
||||
<div class="text">
|
||||
<p>HCloud是一套跨云Serverless计算框架，提供了基本的Serverless计算服务，同时能够让Serverless任务在不同的云平台（如AWS和阿里云），
|
||||
以及不同云服务（平台原生Serverless服务以及虚拟机）之间 进行快速动态迁移，从而</p>
|
||||
<p>HCloud是一套跨云Serverless计算框架，提供了基本的Serverless计算服务，同时能够让Serverless任务在不同的云平台（如AWS和阿里云），以及不同云服务（平台原生Serverless服务以及虚拟机）之间进行快速动态迁移，在保证用户业务逻辑稳定的前提条件下，降低用户成本，简化用户运维工作。</p>
|
||||
<h3>
|
||||
一·提供Serverless计算服务
|
||||
</h3>
|
||||
<p>Serverless计算，又称Function-as-a-Service（FaaS）、函数计算、无服务计算等，是一种新型的 编程模型。
|
||||
用户以函数的形式将自定义的业务逻辑代码上传给Serverless平台，并通过事件驱动的 方式对业务逻辑进行调用。Serverless具有如下优势：
|
||||
<p>Serverless计算，又称Function-as-a-Service（FaaS）、函数计算、无服务计算等，是一种新型的编程模型。用户以函数的形式将自定义的业务逻辑代码上传到Serverless平台，并通过事件驱动，HTTP调用等触发器对业务逻辑进行调用。Serverless具有如下优势：
|
||||
</p>
|
||||
<h4>1. 降低启动成本</h4>
|
||||
<p>对于新创企业而言，使用Serverless服务可以免去自己搭建版本管理服务器、数据库服务器等基础设施，仅需要编写业务逻辑代码即可。
|
||||
部署、运维等其他服务均由Serverless服务商提供
|
||||
<p>Serverless服务使用可以免去自己搭建版本管理服务器、数据库服务器等基础设施，仅需要编写业务逻辑代码即可，对初创企业更加友好。部署、运维等其他服务均由Serverless服务商提供
|
||||
</p>
|
||||
<h4>2. 细粒度计费机制</h4>
|
||||
<p>Serverless按照函数调用的具体次数和每个函数执行的具体时间（精确到100ms）进行计费，真正做到按使用计费。
|
||||
对比在虚拟机上运行服务，由于虚拟机的粗粒度长期购买机制，即使没 有请求到来，虚拟机仍将持续计费。</p>
|
||||
<p>Serverless按照函数调用的具体次数和每个函数执行的具体时间（精确到100ms）进行细粒度计费。对比在虚拟机上运行服务，由于虚拟机的粗粒度长期购买机制，即使没有请求处理和计算资源的使用，虚拟机仍将持续计费</p>
|
||||
<h4>3. 自动扩容</h4>
|
||||
<p>Serverless得益于其细粒度部署的特点，易于实现自动扩容，当请求吞吐量激增时能够快速创建出大量的实例进行计算，保证每个实例的计算效率。
|
||||
自动扩容的实现由Serverless平台完成，对用户透明无感知</p>
|
||||
<p>Serverless得益于其细粒度部署的特点，易于实现自动扩容，当请求吞吐量激增时，能够快速创建出大量的实例进行计算，保证每个实例的计算效率以及整体业务的稳定性。自动扩容的实现由Serverless平台完成，对用户透明无感知</p>
|
||||
<h3>二· 提供跨平台的Serverless服务</h3>
|
||||
<p>HCloud提供了统一的接口，能够将同一份代码运行在不同的平台上。当用户具有服务迁移的需求时，能够将服务动态地从一个云迁移到另一个云上。</p>
|
||||
<p>云平台通常提供原生的Serverless服务，这些服务往往具有不同的接口，不同的写法要求和运行方式。因此，当云用户希望将自己的函数代码部署在多云从而灵活利用各平台优势时，不得不针对每个平台进行代码的适配和分别部署。</p>
|
||||
<p>HCloud向用户提供统一的接口，能够将用户的同一份代码运行在不同的云平台。当用户具有Serverless任务迁移的需求时，能够将任务动态地从一个云迁移到另一个云上，整个过程对服务调用方透明。</p>
|
||||
<h3>三· 提供跨服务的Serverless架构</h3>
|
||||
<p>Serverless按量计费的特点，使得在请求吞吐量小时，比起虚拟机而言，能够避免资源空转带来的成本浪费。
|
||||
然而，当请求吞吐量非常大，以至于能够撑满虚拟机的计算资源时，Serverless的服务成本比起虚拟机会贵很多。</p>
|
||||
<p>因此，当请求吞吐量低时，HCloud能够将Serverless任务运行在原生的Serverless平台（如AWS Lambda），
|
||||
利用Serverless按量付费的优势；当请求吞吐量高时，HCloud可以将任务迁移到虚拟机上运行，从而降低成本。</p>
|
||||
<p>通常情况下，单个Serverless用户（或者说单个函数）的请求量较少，常常不足以撑满虚拟机资源。
|
||||
HCloud可以将多个用户（或者说多个函数）的请求一起运行在虚拟机中，使得这些函 数的运行成本都能够下降（类似拼单的原理）</p>
|
||||
<p>云服务厂商通常提供Spot Instance，即可以临时使用的虚拟机，这样的虚拟机通常价格非常便宜，但是可能随时被云服务商回收。
|
||||
HCloud提供的Serverless模型天然利于在Spot Instance上运行，当某台虚拟机被回收时，仅需将任务迁移到其他虚拟机上即可，
|
||||
该过程对用户无感知。（注：目前功能完善中）</p>
|
||||
<p>Serverless按量计费的特点，使得在请求吞吐量小时，比起虚拟机而言，能够避免资源空转带来的成本浪费。然而，当请求吞吐量非常大时，Serverless的服务成本较高，而此时使用相同性能的虚拟机处理请求，成本相对使用Serverless更加低廉。</p>
|
||||
<p>因此，当请求吞吐量低时，HCloud能够将Serverless任务运行在原生的Serverless平台（如AWS Lambda），利用Serverless按量付费的优势；当请求吞吐量高时，HCloud可以将任务迁移到虚拟机上运行，从而降低成本p>
|
||||
<p>通常情况下，单个Function的调用请求量较少，往往不需要占用所有的虚拟机资源。 HCloud可以将多个Function的实例一同运行在虚拟机中，从而提升虚拟机整体的资源利用率，最终达到降低每个用户价格的目标。该原理类似于日常生活中的“拼单”。</p>
|
||||
<p>云服务厂商通常提供Spot Instance，即可以临时使用的虚拟机，这样的虚拟机通常价格非常便宜，但随时可能被云服务商回收。HCloud提供的Serverless计算模型天然利于在Spot Instance上运行，当某台虚拟机被回收时，仅需将任务迁移到其他虚拟机上即可，该过程对用户无感知。（注：目前功能完善中）</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export default {
|
|||
},
|
||||
back() {
|
||||
this.$emit('back');
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@
|
|||
<span>迁移源概况</span>
|
||||
<el-row class="numMark" :gutter="20">
|
||||
<el-col :span="4" v-for="(item,index) in originBrief" :key="index">
|
||||
<div :class="index===0?'blue':item.type==='error'&&item.num>0?'red':'green'"><i class="bigNum">{{item.num}}</i>{{item.info}}</div>
|
||||
<div :class="index===0?'blue':item.type==='error'&&item.num>0?'red':'green'">
|
||||
<i class="bigNum">{{item.num}}</i>{{item.info}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span>迁移任务概况</span>
|
||||
<div>
|
||||
<el-row class="numMark" :gutter="20">
|
||||
<el-col :span="4" v-for="(item,index) in taskBrief" :key="index">
|
||||
<div :class="index===0?'blue':item.type==='error'&&item.num>0?'red':'green'"><i class="bigNum">{{item.num}}</i>{{item.info}}</div>
|
||||
<div :class="index===0?'blue':item.type==='error'&&item.num>0?'red':'green'">
|
||||
<i class="bigNum">{{item.num}}</i>{{item.info}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -29,15 +31,25 @@
|
|||
label="任务名称"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="origin"
|
||||
width="150"
|
||||
label="迁移源">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="target"
|
||||
width="150"
|
||||
label="迁移目标">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="开始时间"
|
||||
width="120">
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="progress"
|
||||
label="当前完成进度"
|
||||
width="120">
|
||||
width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-progress :percentage="scope.row.progress"></el-progress>
|
||||
</template>
|
||||
|
|
@ -75,15 +87,25 @@
|
|||
label="任务名称"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="origin"
|
||||
width="150"
|
||||
label="迁移源">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="target"
|
||||
width="150"
|
||||
label="迁移目标">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="开始时间"
|
||||
width="120">
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
label="结束时间"
|
||||
width="120">
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
|
|
@ -108,39 +130,53 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
name: '北京服务器: e-a13ha86weg153we ',
|
||||
startTime: '2020/11/18 07:22:21',
|
||||
endTime: '2020/11/19 19:11:02',
|
||||
progress: 60,
|
||||
},{
|
||||
name: '东京服务器: e-haurawwroi3rg6ar4ge ',
|
||||
startTime: '2020/10/18 08:20:51',
|
||||
endTime: '2020/11/20 14:33:07',
|
||||
progress: 60,
|
||||
},{
|
||||
name: '多伦多服务器: o-itfxci562y3rge ',
|
||||
startTime: '2020/10/23 08:27:20',
|
||||
endTime: '2020/10/23 09:10:07',
|
||||
progress: 60,
|
||||
},{
|
||||
name: '巴黎服务器: b-irtui12e3ra9i3wrt ',
|
||||
startTime: '2020/11/14 09:23:45',
|
||||
endTime: '2020/11/29 22:41:22',
|
||||
progress: 60,
|
||||
},{
|
||||
name: '挪威服务器: N-sje8ecd4rg7tt5eas ',
|
||||
startTime: '2020/11/18 17:17:35',
|
||||
endTime: '2020/11/19 18:51:07',
|
||||
progress: 60,
|
||||
},{
|
||||
name: '伦敦服务器: L-eus8ef2eqq4dojhv ',
|
||||
startTime: '2020/10/18 09:21:31',
|
||||
endTime: '2020/10/22 17:01:58',
|
||||
progress: 60,
|
||||
}],
|
||||
name: '北京服务器: e-a13ha86weg153we ',
|
||||
origin: '阿里云-北京',
|
||||
target: '百度云-上海',
|
||||
startTime: '2020/11/18 07:22:21',
|
||||
endTime: '2020/11/19 19:11:02',
|
||||
progress: 60,
|
||||
}, {
|
||||
name: '东京服务器: e-haurawwroi3rg6ar4ge ',
|
||||
origin: '阿里云-北京',
|
||||
target: '百度云-上海',
|
||||
startTime: '2020/10/18 08:20:51',
|
||||
endTime: '2020/11/20 14:33:07',
|
||||
progress: 60,
|
||||
},
|
||||
// {
|
||||
// name: '多伦多服务器: o-itfxci562y3rge ',
|
||||
// origin: '阿里云-多伦多',
|
||||
// target: '百度云-上海',
|
||||
// startTime: '2020/10/23 08:27:20',
|
||||
// endTime: '2020/10/23 09:10:07',
|
||||
// progress: 60,
|
||||
// }, {
|
||||
// name: '巴黎服务器: b-irtui12e3ra9i3wrt ',
|
||||
// origin: '阿里云-巴黎',
|
||||
// target: '百度云-上海',
|
||||
// startTime: '2020/11/14 09:23:45',
|
||||
// endTime: '2020/11/29 22:41:22',
|
||||
// progress: 60,
|
||||
// }, {
|
||||
// name: '挪威服务器: N-sje8ecd4rg7tt5eas ',
|
||||
// origin: '阿里云-挪威',
|
||||
// target: '百度云-上海',
|
||||
// startTime: '2020/11/18 17:17:35',
|
||||
// endTime: '2020/11/19 18:51:07',
|
||||
// progress: 60,
|
||||
// }, {
|
||||
// name: '伦敦服务器: L-eus8ef2eqq4dojhv ',
|
||||
// origin: '阿里云-伦敦',
|
||||
// target: '百度云-上海',
|
||||
// startTime: '2020/10/18 09:21:31',
|
||||
// endTime: '2020/10/22 17:01:58',
|
||||
// progress: 60,
|
||||
// }
|
||||
],
|
||||
originBrief: [
|
||||
{
|
||||
num: 5,
|
||||
num: 4,
|
||||
info: '个总数',
|
||||
},
|
||||
{
|
||||
|
|
@ -157,17 +193,17 @@ export default {
|
|||
type: 'error',
|
||||
},
|
||||
{
|
||||
num: 3,
|
||||
num: 2,
|
||||
info: '个迁移中',
|
||||
},
|
||||
{
|
||||
num: 1,
|
||||
num: 0,
|
||||
info: '个已完成',
|
||||
},
|
||||
],
|
||||
taskBrief: [
|
||||
{
|
||||
num: 3,
|
||||
num: 2,
|
||||
info: '个总数',
|
||||
},
|
||||
{
|
||||
|
|
@ -179,28 +215,28 @@ export default {
|
|||
info: '个未开始',
|
||||
},
|
||||
{
|
||||
num: 1,
|
||||
num: 0,
|
||||
info: '个出错',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
num: 1,
|
||||
num: 2,
|
||||
info: '个迁移中',
|
||||
},
|
||||
{
|
||||
num: 1,
|
||||
num: 0,
|
||||
info: '个已完成',
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
deleteRow(index, rows) {
|
||||
rows.splice(index, 1);
|
||||
},
|
||||
suspend(index,rows){
|
||||
suspend() {
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -233,7 +269,7 @@ export default {
|
|||
margin: 0 5px 0 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4>用户服务实时监控</h4>
|
||||
<!-- <h4>用户服务实时监控</h4> -->
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="8">
|
||||
<StatusLineChart/>
|
||||
|
|
@ -10,21 +10,38 @@
|
|||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card class="requirementForm">
|
||||
<p>可迁移服务器选择</p>
|
||||
<div class="radioGroup">
|
||||
<p>云厂商服务状态</p>
|
||||
<!-- <div class="radioGroup">
|
||||
<el-radio v-model="radio" label="1" border>
|
||||
东京服务器: d-auiufqiwuqwehquihiuqgefiquwd</el-radio>
|
||||
<el-radio v-model="radio" label="2" border>
|
||||
东京服务器: d-auiufqiwuqwehquihiuqgefiquwd</el-radio>
|
||||
<el-radio v-model="radio" label="3" border>
|
||||
东京服务器: d-auiufqiwuqwehquihiuqgefiquwd</el-radio>
|
||||
<el-radio v-model="radio" label="4" border>
|
||||
东京服务器: d-auiufqiwuqwehquihiuqgefiquwd</el-radio>
|
||||
<el-radio v-model="radio" label="5" border>
|
||||
东京服务器: d-auiufqiwuqwehquihiuqgefiquwd</el-radio>
|
||||
|
||||
</div>
|
||||
<el-button class="submitBtn" type="primary" @click="onSubmit">确认提交</el-button>
|
||||
</div> -->
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
highlight-current-row
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="服务器名称"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="delayTime"
|
||||
label="延时"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-button class="submitBtn" type="primary" @click="onSubmit">确认提交</el-button> -->
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -40,6 +57,23 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
radio: '',
|
||||
tableData: [
|
||||
{
|
||||
name: '阿里云-北京',
|
||||
delayTime: '11ms',
|
||||
status: 'online',
|
||||
},
|
||||
{
|
||||
name: '百度云-上海',
|
||||
delayTime: '26ms',
|
||||
status: 'online',
|
||||
},
|
||||
{
|
||||
name: '金山云-广州',
|
||||
delayTime: '43ms',
|
||||
status: 'online',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -56,5 +90,4 @@ export default {
|
|||
</script>
|
||||
<style lang="scss" >
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,32 +4,24 @@
|
|||
<div id="myEchart" ref="myEchart">
|
||||
</div>
|
||||
<el-form ref="form" :model="form" label-width="100px">
|
||||
<el-form-item label="国内地区">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-form-item label="数据中心">
|
||||
<el-checkbox-group v-model="form.city">
|
||||
<el-checkbox v-for="city in cities" :label="city.name" :key="city.key">{{city.name}}
|
||||
<el-radio-group v-model="form.server[city.key]">
|
||||
<el-radio-button label="阿里云"></el-radio-button>
|
||||
<el-radio-button label="百度云"></el-radio-button>
|
||||
<el-radio-button label="UCloud"></el-radio-button>
|
||||
<el-radio-button label="金山云"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="国外地区">
|
||||
<el-form-item label="存储模式">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio-button label="新加坡"></el-radio-button>
|
||||
<el-radio-button label="孟买"></el-radio-button>
|
||||
<el-radio-button label="硅谷"></el-radio-button>
|
||||
<el-radio-button label="首尔"></el-radio-button>
|
||||
<el-radio-button label="多副本存储"></el-radio-button>
|
||||
<el-radio-button label="纠删码存储"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="可用区">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio-button label="随机可用区"></el-radio-button>
|
||||
<el-radio-button label="南京一区"></el-radio-button>
|
||||
<el-radio-button label="南京二区"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="存储数量">
|
||||
<el-input-number v-model="form.num" :min="1" :max="100"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" class="submitBtn" @click="onSubmit">确认提交</el-button>
|
||||
</el-card>
|
||||
|
|
@ -47,7 +39,26 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
form: {
|
||||
city: [],
|
||||
server:[],
|
||||
},
|
||||
cities: [{
|
||||
name:'北京',
|
||||
key: 1,
|
||||
},{
|
||||
name:'上海',
|
||||
key: 2,
|
||||
},{
|
||||
name:'广州',
|
||||
key: 3,
|
||||
},{
|
||||
name:'成都',
|
||||
key: 4,
|
||||
},{
|
||||
name:'青岛',
|
||||
key: 5,
|
||||
}]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -192,3 +203,8 @@ export default {
|
|||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.el-checkbox .el-radio-group{
|
||||
margin-left: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<el-card class="chartCard">
|
||||
<p>数据资源计算总量<i class="bigNum">450GB</i></p>
|
||||
<p>数据存储总量<i class="bigNum">45.9GB</i></p>
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="8" class="center">
|
||||
<el-progress type="circle" :percentage="80"></el-progress>
|
||||
<p>服务器1</p>
|
||||
<p>阿里云-北京</p>
|
||||
</el-col>
|
||||
<el-col :span="8" class="center">
|
||||
<el-progress type="circle" color="#30c0b7" :percentage="80"></el-progress>
|
||||
<p>服务器2</p>
|
||||
<p>百度云-上海</p>
|
||||
</el-col>
|
||||
<el-col :span="8" class="center">
|
||||
<el-progress type="circle" color="#feb23a" :percentage="75"></el-progress>
|
||||
<p>服务器3</p>
|
||||
<p>金山云-广州</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-card class="chartCard">
|
||||
<p>设备运营状态</p>
|
||||
<p>服务运行状态</p>
|
||||
<div id="lineChart" ref="lineChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -28,23 +28,23 @@ export default {
|
|||
return {
|
||||
form: {},
|
||||
monitorDisplay: false,
|
||||
dialogFormVisible : false,
|
||||
dialogFormVisible: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
SelectServer,
|
||||
DynamicMonitor
|
||||
DynamicMonitor,
|
||||
},
|
||||
methods: {
|
||||
onSubmit(){
|
||||
onSubmit() {
|
||||
// this.dialogFormVisible = true;
|
||||
// setTimeout(() => {
|
||||
// this.dialogFormVisible = false;
|
||||
this.monitorDisplay = true;
|
||||
// this.dialogFormVisible = false;
|
||||
this.monitorDisplay = true;
|
||||
// }, 4000);
|
||||
},
|
||||
DynamicMonitoronSubmit() {
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,18 +8,46 @@
|
|||
</div>
|
||||
<div class="manufacturer">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="迁移源选择" name="1">
|
||||
<el-tab-pane label="服务状态监控" name="1">
|
||||
<SelectPoint v-if="activeName==='1'" @selectedPointSumbit="onSelectedOrigin"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="迁移目标选择" name="2">
|
||||
<!-- <el-tab-pane label="迁移目标选择" name="2">
|
||||
<SelectServer v-if="activeName==='2'" title="资源需求分布图"
|
||||
@selectedServerSumbit="onSelectServer"/>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="存储迁移" name="2">
|
||||
<div v-if="activeName==='2'">
|
||||
<el-card class="requirementForm">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<p>迁移源</p>
|
||||
<div class="radioGroup">
|
||||
<el-radio v-model="radio" label="1" border>
|
||||
阿里云-北京</el-radio>
|
||||
<el-radio v-model="radio" label="2" border>
|
||||
百度云-上海</el-radio>
|
||||
<el-radio v-model="radio" label="3" border>
|
||||
金山云-广州</el-radio>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p>迁移目标</p>
|
||||
<div class="radioGroup">
|
||||
<el-radio v-model="target" label="1" border>
|
||||
阿里云-北京</el-radio>
|
||||
<el-radio v-model="target" label="2" border>
|
||||
百度云-上海</el-radio>
|
||||
<el-radio v-model="target" label="3" border>
|
||||
金山云-广州</el-radio>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button type="primary" class="submitBtn" @click="onSubmit">开始迁移</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="迁移任务选择" name="3">
|
||||
<SelectPoint v-if="activeName==='3'" @selectedPointSumbit="onSelectedTarget"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="迁移结果查看" name="4">
|
||||
<ResultDisplay v-if="activeName==='4'"/>
|
||||
<el-tab-pane label="迁移结果" name="3">
|
||||
<ResultDisplay v-if="activeName==='3'"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
|
@ -29,12 +57,12 @@
|
|||
<script>
|
||||
import ResultDisplay from './components/resultDisplay.vue';
|
||||
import SelectPoint from './components/selectPoint.vue';
|
||||
import SelectServer from './components/selectServer.vue';
|
||||
// import SelectServer from './components/selectServer.vue';
|
||||
|
||||
export default {
|
||||
name: 'storageMove',
|
||||
components: {
|
||||
SelectServer,
|
||||
// SelectServer,
|
||||
SelectPoint,
|
||||
ResultDisplay,
|
||||
},
|
||||
|
|
@ -42,7 +70,8 @@ export default {
|
|||
return {
|
||||
activeName: '1',
|
||||
form: {},
|
||||
radio1: '',
|
||||
radio: '',
|
||||
target: '',
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -52,7 +81,7 @@ export default {
|
|||
},
|
||||
onSubmit() {
|
||||
// loading
|
||||
// this.activeName = '2';
|
||||
this.activeName = '3';
|
||||
},
|
||||
onSelectServer(form) {
|
||||
console.log(form);
|
||||
|
|
@ -72,7 +101,7 @@ export default {
|
|||
.storageMove{
|
||||
.el-card{
|
||||
margin-bottom: 30px;
|
||||
|
||||
|
||||
}
|
||||
.requirementForm{
|
||||
p{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
</div>
|
||||
<h2>云服务测评</h2>
|
||||
<div class="manufacturer">
|
||||
<div class="processImg processImg-1">
|
||||
<div class="processImg">
|
||||
<img src="@/assets/modules/serviceRecommendation/process1.png" alt="">
|
||||
<!-- <el-row>
|
||||
<el-col :span="8">
|
||||
<p>VMs</p>
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
使用Netperf对内网性能进行评测，评测分为TCP和UDP两部分。
|
||||
</p>
|
||||
|
||||
<el-row :gutter="30">
|
||||
<el-row :gutter="30" style="margin-top:40px">
|
||||
<el-col :span="3">
|
||||
<span style="line-height:40px">评测时间</span>
|
||||
</el-col>
|
||||
|
|
@ -197,7 +198,7 @@ export default {
|
|||
});
|
||||
} else {
|
||||
// console.log('compare');
|
||||
this.$router.push('serviceRecommendation/compare');
|
||||
this.$router.push('compare');
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
</div>
|
||||
<h2>云服务推荐</h2>
|
||||
<div class="manufacturer">
|
||||
<div class="processImg processImg-2">
|
||||
<div class="processImg">
|
||||
<img src="@/assets/modules/serviceRecommendation/process2.png" alt="">
|
||||
<!-- <el-row>
|
||||
<el-col :span="6">
|
||||
<p>Make Scores</p>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,21 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'studyRecom',
|
||||
data() {
|
||||
return {
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePreview() {
|
||||
|
||||
},
|
||||
handleRemove(){
|
||||
|
||||
},
|
||||
beforeRemove(){},
|
||||
handleExceed(){}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,15 @@
|
|||
<div class="">
|
||||
<div class="manufacturer">
|
||||
<p class="indexTitle">行业解决方案</p>
|
||||
<el-radio-group v-model="tabPosition">
|
||||
<el-tabs v-model="tabPosition" type="card">
|
||||
<el-tab-pane v-for="(item, index) in solutionCase" :key="'solution'+index" :label="item.label" :name="index">
|
||||
<el-card shadow="always" class="solutionCase">
|
||||
<p class="title">{{item.p}}</p>
|
||||
<p>{{item.span}}</p>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <el-radio-group v-model="tabPosition">
|
||||
<el-radio-button label="1">新零售</el-radio-button>
|
||||
<el-radio-button label="2">金融</el-radio-button>
|
||||
<el-radio-button label="3">数字政府</el-radio-button>
|
||||
|
|
@ -16,25 +24,16 @@
|
|||
<el-radio-button label="7">医疗</el-radio-button>
|
||||
<el-radio-button label="8">文旅</el-radio-button>
|
||||
<el-radio-button label="9">地产</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12"
|
||||
v-for="(item, index) in industrySolution" :key="index">
|
||||
<el-card shadow="always" class="solutionList">
|
||||
<p class="title">{{item.name}}</p>
|
||||
<p>{{item.description}}</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-radio-group> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray">
|
||||
<div class="manufacturer">
|
||||
<p class="indexTitle" >通用解决方案</p>
|
||||
<p class="indexTitle" >先进技术案例</p>
|
||||
<el-radio-group v-model="tabPosition2">
|
||||
<el-radio-button label="1">云网络</el-radio-button>
|
||||
<el-radio-button label="2">中间件</el-radio-button>
|
||||
<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-row :gutter="30">
|
||||
|
|
@ -57,26 +56,26 @@ export default {
|
|||
name: 'SolutionCase',
|
||||
data() {
|
||||
return {
|
||||
tabPosition: 1,
|
||||
tabPosition: 0,
|
||||
tabPosition2: 1,
|
||||
industrySolution: [
|
||||
{
|
||||
name: '应收账款流转',
|
||||
description: '将核心企业应付账款债权进行多级流转、拆分；为大量无法融资的中小企业、商业机构提供更多的融资机会，降低了中小企业的资金成本，解决企业三角债困局。',
|
||||
},
|
||||
{
|
||||
name: '动产质押',
|
||||
description: '运用“人工智能+区块链+物联网”三者结合技术，为用户提供区块链资产管理服务，以满足基于动产质押的供应链金融及大宗商品电子仓单交易等场景。',
|
||||
},
|
||||
{
|
||||
name: '数字身份',
|
||||
description: '基于联盟链的实体身份标识DID技术解决方案，提供分布式实体身份标识与管理、交换可信数据，促进跨地域、跨部门的身份认证和数据合作。',
|
||||
},
|
||||
{
|
||||
name: '可信数据共享',
|
||||
description: '采用区块链技术连接数据建模服务方、监管方、使用方和提供方等，实现身份数据目录与授权、数据、密文数据共享和交换等链上操作。',
|
||||
},
|
||||
],
|
||||
// industrySolution: [
|
||||
// {
|
||||
// name: '应收账款流转',
|
||||
// description: '将核心企业应付账款债权进行多级流转、拆分；为大量无法融资的中小企业、商业机构提供更多的融资机会，降低了中小企业的资金成本，解决企业三角债困局。',
|
||||
// },
|
||||
// {
|
||||
// name: '动产质押',
|
||||
// description: '运用“人工智能+区块链+物联网”三者结合技术，为用户提供区块链资产管理服务，以满足基于动产质押的供应链金融及大宗商品电子仓单交易等场景。',
|
||||
// },
|
||||
// {
|
||||
// name: '数字身份',
|
||||
// description: '基于联盟链的实体身份标识DID技术解决方案，提供分布式实体身份标识与管理、交换可信数据，促进跨地域、跨部门的身份认证和数据合作。',
|
||||
// },
|
||||
// {
|
||||
// name: '可信数据共享',
|
||||
// description: '采用区块链技术连接数据建模服务方、监管方、使用方和提供方等，实现身份数据目录与授权、数据、密文数据共享和交换等链上操作。',
|
||||
// },
|
||||
// ],
|
||||
commonSolution: [
|
||||
{
|
||||
name: '全球网络互联',
|
||||
|
|
@ -103,7 +102,144 @@ export default {
|
|||
description: '面向全球网络互联和企业全面上云需求，打造全球互联网络、企业级云上网络、云原生应用网络和应用加速网络四大核心解决方案及丰富的产品和功能，助力企业数字化转型。',
|
||||
},
|
||||
],
|
||||
|
||||
solutionCase:[{
|
||||
label:'智能制造',
|
||||
p: ` 智能制造是一个柔性系统，能够自主学习适应新环境，自动运行整个生产流程，强化制造企业的数据洞察能力，实现智能化控制和管理，是现代工业制造信息化发展的新阶段。
|
||||
智能制造指基于泛在感知技术，实现面向产品生产全生命周期的信息化和智能化的生产制造，是在传感技术、通信技术、自动控制、人工智能等创新技术基础上，通过智能化的感知、交互、决策和执行技术，实现设计、制造以及服务的智能化，是通信技术、信息技术与制造技术的深度融合和创新集成。
|
||||
`,
|
||||
span:`
|
||||
1、智能监控：
|
||||
结合感知传感器、定位摄像等技术，降低有线部署和人工值守的成本，实现降低成本、高可靠的智能化监控。
|
||||
2、自动化生产：
|
||||
通过搭建智能工厂神经中枢，结合DCS智能化控制系统，建立生产调度中心。
|
||||
3、智能检测：
|
||||
在质量检测过程中，通过工业相机实时采集产品图像信息，提升质量检测的准确率、检测效率和监测范围。`
|
||||
},
|
||||
{
|
||||
label: '智慧农业',
|
||||
p: ` 智慧农业是农业信息化发展到智能化的高级阶段，是以信息和知识为核心要素，通过将互联网、物联网、大数据、云计算、人工智能等现代信息技术与农业深度融合，实现农业信息感知、定量决策、智能控制、精准投入、个性化服务的全新的农业生产方式。
|
||||
智慧农业的生态场景围绕生产、服务和生活展开，涉及从投入到产出全产业链的各个领域、各个环节。智慧农业利用先进的数字化、信息化手段，达到科学化、精准化、精细化、生态化、灵活化的效果和目标，囊括了通过智能智慧技术实现高附加值农产品价值创造、价值实现和价值服务的全过程。`,
|
||||
span: `1、大田智慧农业：
|
||||
应对生产环境的不可控因素，借助智慧技术、科技装备进行农业生产的趋利避害。
|
||||
2、设施智慧农业：
|
||||
设施智慧农业是生产条件和生产环境可控的智慧农业形态，由于作业环境可控性好、可塑性强，设施智慧农业可具有更高的智能水平。
|
||||
3、智慧养殖业：
|
||||
智慧养殖业包含智慧畜牧养殖和智慧水产养殖。借助智能科技实时监控动植物健康环境，事项综合养殖效益最大化。
|
||||
4、智慧农技服务业：
|
||||
智慧智能科技在农业的集中信息化应用，是促进智慧农业发展的关键路径。
|
||||
5、智慧农业监管服务：
|
||||
智慧农业监管服务是农业监管服务的一体化、耦合化、智能化整合升级，是农业支持保护体系的系统化、立体化、智慧化实现。`
|
||||
},
|
||||
{
|
||||
label: '智慧城市',
|
||||
p: `智慧城市是新一代信息通信技术与城市经济社会发展深度融合，促进城市规划、建设、管理和服务智慧化的新理念和新模式，也是物理世界与数字世界相互映射、协同交互的城市新形态。
|
||||
智慧城市由物理设施（建筑、市政工程、公用设施等）、数字空间（通信、算力、数据、算法等）和社会人文生态组成，运用通信、连接、数据、智能等技术手段，实现对城市实时动态的感知、分析、协调，并能对城市治理和公共服务等作出智能响应，实现城市健康运行和可持续发展。
|
||||
`,
|
||||
span: `1、单领域融合：
|
||||
打破城市的物理空间界限，延伸城市服务边界。打造万物互联，数据流通，全栈智能加速城市要素的数字化和城市业务的智能化。
|
||||
2、虚拟现实结合：
|
||||
物理城市和虚拟数字城市的互相映射和协同交互，形成真正意义上的“数字孪生体”。
|
||||
3、多领域融合：
|
||||
智慧城市建设通过业务融合、技术融合和数据融合，支撑城市从单领域智能到城市智群的升级。实现跨层级、跨系统、跨地区、跨业务的协同管理和服务。`
|
||||
},
|
||||
{
|
||||
label: '智能交通',
|
||||
p: `智能交通涉及汽车、电子、信息通信、交通运输和交通管理等多个行业，借助于“人一车一路一云”交通参与要素之间的有效连接和信息交互，不仅可以促进信息通信技术在跨行业领域的应用推广，还有助于加强汽车、交通等传统产业的智能化网联化转型，并逐步培育出新的产业生态。
|
||||
`,
|
||||
span: `1、车路协同应用架构
|
||||
感知、连接和计算是车路协同的基本要素。车路协同应用架构由“端一管一边一云”组成。端即网络层、管即网络层、云即平台管理和应用层、边即多接入边缘计算。
|
||||
2、智能交通关键技术
|
||||
智能交通关键技术基于上述车路协同应用架构，智能 RSU、多接入边缘计算及分级架构、5G网络切片、人工智能及大数据、高精度定位以及高精地图等关键技术有效协同，支持智能交通系统持续发展和演进。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '智能电网',
|
||||
p: `智能电网是在传统电力系统基础上，通过集成先进信息技术、控制技术、储能技术等，以坚强网络架构为基础、以信息通信平台为支撑、以智能控制为手段，包括电力系统的发电、输电、变电、配电、用电和调度各个环节，覆盖所有电压等级，实现电力流、信息流、业务流高度一体化融合，具有坚强可靠、经济高效、清洁环保、透明开放、友好互动的特征。
|
||||
智能电网是一个完全自动化的供电网络，其中的每一个用户和节点都得到实时监控，并保证从发电厂到用户端之间整个输配电过程中所有节点之间的电流和信息双向流动。智能电网通过广泛应用的分布式智能和宽带通信，以及自动控制系统、智能化决策系统的集成，提高供电可靠水平，实现“源一网一荷－储”一体化，支撑能源清洁化转型和电力市场化改革。
|
||||
`,
|
||||
span: `1智慧输变电场景生态：
|
||||
基于云计算和边缘计算平台搭建总部一换流站/变电站两级的输变电设备状态集中监测中心，实现输电线路状态和全寿命周期管理。
|
||||
2智能配电网场景生态：
|
||||
通过物联网技术应用，实现分布式能源、储能、充电设备的接入和双向交互，提升供电可靠性与用电效率以及为节能减排提供技术保证。
|
||||
3智慧电力服务场景生态：
|
||||
通过人工智能、地理位置服务和移动应用技术，实现办电用户身份验证、面对面办电指导、安全缴费、线上智能客服等功能，提高办电效率和安全性，进一步提升用户体验。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '智慧金融',
|
||||
p: `金融是现代经济的核心，金融服务行业一直是创新的积极实践者和受益者，我国金融服务行业在全面信息化建设浪潮中处于前列，在5G网络、数据中心、云计算、人工智能等新型基础设施日趋成熟、高度融合之下，“智慧金融”成为金融服务演进的方向，以更加高效、安全、定制化的服务，体现在金融全链条运行当中。与此同时，“智慧金融”与智慧城市、智慧农业、智慧交通等业态日益交融，形成智慧金融生态圈，为金融行业自身提供转型驱动力，进一步实现“以智促惠”， 更加精准、灵活、广泛地实现资源配置，让资金融通这一基础性功能更“聪明”地作用于传统产业转型升级，服务于实体经济高质量发展，普惠于社会民生各领域。
|
||||
`,
|
||||
span: `1智能支付快速发展
|
||||
移动支付是支付体系的重要蜕变，使用户能够随时随地获取所需服务并完成支付过程。
|
||||
2银行服务的数字化转型
|
||||
“开放式银行”以开放API为基础，以数据共享为本质，以平台合作为模式，以数字化信息新型基础设施建设为基础支撑，实现更高效、更低成本、更优体验的客户需求。
|
||||
3保险行业智能应用
|
||||
保险行业在新型基础设施的助力下形成无边界、高融合的开放生态新业态和新生态，充分发挥其风险保障属性，为经济社会的发展提供更多的风险保障和服务作用。
|
||||
4资本市场智能化发展
|
||||
伴随着新型基础设施领域不断建设和战略投入，未来云计算领域会形成更加完备、垂直、精细化的运营服务格局。
|
||||
5智能风控
|
||||
智能风控是在数据驱动下提升风控与运营水平，金融科技的普及为智能风控提供了扎实的技术支撑，广泛应用于支付清算、信贷融资、保险理赔等各个场景中。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '智慧物流',
|
||||
p: `物流作为当代社会重要组成部分，在国民经济和社会发展中发挥着重要作用。智慧物流深嵌产业的制造与销售流程，有助于提升各产业的经济与社会效益，实现物流驱动产业升级，形成物流与产业互动的新局面，对优化资源配置、促进经济发展具有积极推动作用。
|
||||
智慧物流包含物联网、云计算、大数据等新型信息技术和智能设备设施等科技要素，通过高效的执行、运营与决策等领域智能化能力，实现物流作业自动化、物流管理与流程的可视化、物流规划与决策的智能化，最终达到提升物流运营效率、提高服务质量和降低用工成本的目的。
|
||||
`,
|
||||
span: `1、智能规划
|
||||
智能规划通过数据智能技术的引进，能够在规划层满足物流业务战略的同时，系统性降低物流网络的成本，物流网络规划是面向中长期的战略性规划。
|
||||
2、数字化管理
|
||||
智慧物流在运营层面体现为数字化管理方式，其核心承载是物流管理系统。通过该系统，保障整个物流体系的有效运营。
|
||||
3、自动化作业
|
||||
在物流执行层面应用物流自动化及智能化技术和相关智能设备实现作业的强体验、高效率、低成本，是行业持续探索的方向。在智慧物流体系中，互联互通、自主控制的智能设施设备是自动化、智能化作业的关键。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '智慧教育',
|
||||
p: `迈入数字时代，教育领域信息化的脚步不断加快，以智慧教育为核心的各类应用场景不断以新的模式出现，带来了教育形式和学习方式的重大改变。
|
||||
智慧教育是运用5G、物联网、人工智能、大数据、云计算、区块链等新技术新手段，形成智慧学习环境支撑，通过信息技术与教育主流业务的深度融合（智慧教学、智慧学习、智慧管理、智慧评价、智慧科研和智慧服务）， 让教师能够施展高成效的教学方法，让学习者能够进行泛在学习、个性化学习，获得美好个人发展体验的一种应用场景。
|
||||
`,
|
||||
span: `1、智慧教学
|
||||
智慧教学是教师在智慧教学环境下，利用各种先进信息化技术和丰富的教学资源开展的教学活动。通过智慧备课、智慧课堂、智慧阅卷／作业等形式改变传统的教学模式。
|
||||
2、智慧学习
|
||||
智慧学习的核心目标是促进学习者个性化的发展，为学习者提供虚拟的智慧学习环境。通过建立以连接课堂与社区、家庭及校园为重要载体的网络学习空间来支持互帮互助、协作交流的学习共同体建设，形成不同学习场景的无缝衔接。
|
||||
3、智慧管理
|
||||
智慧管理辅助各级教育管理部门和管理人员提升教育管理的智能水平。促进校园管理和区域教育治理的精细管理、科学化决策、可视化管控和可信性评价。
|
||||
4、智慧评价
|
||||
智慧评价基于新一代信息技术，实现针对教学、教师、学生的全方位、全过程、动态化、客观真实评价。通过大数据技术建立多元、多维、多指标的评价模型，对教育评价数据进行深度挖掘分析形成评价数据报告，将信息技术和智能技术深度融入教育教学评估全过程。
|
||||
5、智慧教育教研
|
||||
网络协同教研。建立基于5G 网络和大数据教学资源管理和教师在线协同教研平台，使教学研究活动从传统线下研讨向在线化互动方向转型，提升教学教研质量，促进教师专业发展；通过组建教研网络共同体，促进教学教研成果的快速流通、转换和分享。
|
||||
6、智慧教育服务
|
||||
智慧服务构建以服务客体为中心的服务平台，使用大数据、虚拟化、物联网、人工智能等新技术为用户个性化场景落地提供支撑。
|
||||
7智慧教育环境
|
||||
智慧环境是智慧教育的物理基础，由智慧教育云、教育承载网和智慧校园三部分组成。`
|
||||
},
|
||||
{
|
||||
label: '智慧医疗',
|
||||
p: `智慧医疗是以“人民群众医疗健康”为核心导向，结合5G、物联网、云计算、大数据、人工智能等新型基础设施建设核心技术，通过构建全场景、全周期、智能化的数字生态，加速优化医疗资源配置并提升医疗效率，推动医疗健康服务模式创新与运营体制创新，构建智慧医疗服务、智能健康管理、智慧公共卫生等领域应用，覆盖个体全生命周期，涵盖预防、治疗、康复、养老等线上线下一体化医疗健康服务新模式。
|
||||
`,
|
||||
span: `1智慧医疗服务
|
||||
随着5G的大规模商用，国内一大批医疗机构基于5G网络开展院间医疗合作、院内医疗设备互联互通和院外应急救治等应用，先后在5G智慧救援、远程会诊、远程手术、移动医护、VR隔离探视和医院物资管理等方面，展开智慧医疗的应用创新。
|
||||
2智慧健康管理
|
||||
基于个体健康风险因素，提供智能化健康干预管理。具体应用如：运动管理、风险预测、居家护理、远程监测、健康管理及健康养老等。
|
||||
3智慧公共卫生
|
||||
整合区域医疗卫生信息资源，预测疾病流行趋势，加强对传染病等疾病的智能监测，提高重大疾病防控和突发公共卫生事件应对能力。具体应用如：传染病智能预警、医疗质量智能监管、环境卫生智慧监测及灾害防病智能预警等。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '智慧文旅',
|
||||
p: `智慧文旅是指以特色文化为内在驱动，以现代科技为主要手段，通过5G、大数据、物联网、人工智能等新一代信息技术实现“文化+旅游+科技”融合，围绕旅游管理、旅游服务、旅游营销、旅游信息传播、旅游体验等智慧化应用所形成的数字化文化旅游新产业。
|
||||
智慧文旅的建设与发展体现在一是面向消费者的创新文旅体验和消费服务的智慧化。二是面向企业的文旅服务和产品的智慧化。三是面向政务和行业管理的智慧化。
|
||||
`,
|
||||
span: `1智慧文旅体验
|
||||
面向消费者的创新文旅体验和消费服务的智慧化，即TOC业务，推动文化旅游资源与多样化、个性化市场需求的高效对接，实现精准的线上线下无缝服务和深度文化体验等实时、互动、个性化服务，大大提升了用户体验，推动传统的旅游观光消费方式向现代文化旅游体验消费方式转变。
|
||||
2智慧文旅服务
|
||||
面向企业的文旅服务和产品的智慧化，即TO B业务，包括智慧移动出行、智慧住宿、智慧导游、智慧景区、智慧游乐、智慧文娱、智慧文博、虚拟旅游，OTA (在线旅游）个性化在线定制、大数据精准营销等全方位的服务。
|
||||
3智慧文旅管理
|
||||
面向政府和行业管理的智慧化，即TOG业务。包括景区动态监测、信息监管、大数据统计分析、景区人流引导、安全预警等内容，全面了解行业和谢各需求、旅游目的地动态、投诉建等内容，推动传统旅游管理方式向现代管理方式转变，实现政府的科学决策和管理。
|
||||
`
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -112,5 +248,12 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.solutionCase{
|
||||
p{
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
.title{
|
||||
text-indent: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -99,8 +99,8 @@ const router = [
|
|||
},
|
||||
{
|
||||
path: '/documents',
|
||||
name: 'documents',
|
||||
component: () => import(/* webpackChunkName: "documents" */ '../components/documents/benchreport1.vue'),
|
||||
// name: 'documents',
|
||||
component: () => import(/* webpackChunkName: "documents" */ '../components/documents/index.vue'),
|
||||
children: [
|
||||
{ path: 'benchReport', component: () => import(/* webpackChunkName: "benchReport" */ '../components/documents/benchreport1.vue') },
|
||||
{ path: 'scorePredict', component: () => import(/* webpackChunkName: "scorePredict" */ '../components/documents/scorepredict.vue') },
|
||||
|
|
|
|||
|
|
@ -42,16 +42,16 @@ $class-prefix: "imgIcon";
|
|||
}
|
||||
&-banner-2{
|
||||
// background-image: url(../assets/banner-1.png);
|
||||
background-color: #f6f7f9;
|
||||
background-image: url(../assets/banner-2.png), url(../assets/banner-bg2.png);
|
||||
background-color: #f9fafc;
|
||||
background-image: url(../assets/banner-2.png), url(../assets/banner-bg3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 75%, 100% auto;
|
||||
background-position: center;
|
||||
}
|
||||
&-banner-3{
|
||||
// background-image: url(../assets/banner-1.png);
|
||||
background-color: #f6f7f9;
|
||||
background-image: url(../assets/banner-3.png), url(../assets/banner-bg2.png);
|
||||
background-color: #f9fafc;
|
||||
background-image: url(../assets/banner-3.png), url(../assets/banner-bg4.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 65%, 100% auto;
|
||||
background-position: center;
|
||||
|
|
@ -193,16 +193,20 @@ $class-prefix: "imgIcon";
|
|||
|
||||
|
||||
.processImg{
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80% auto;
|
||||
padding:0 5%;
|
||||
box-sizing: border-box;
|
||||
p{
|
||||
text-align: center;
|
||||
margin-top: 120px;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
// height: 180px;
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% auto;
|
||||
// padding:0 5%;
|
||||
// box-sizing: border-box;
|
||||
// p{
|
||||
// text-align: center;
|
||||
// margin-top: 120px;
|
||||
// }
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,18 +47,14 @@
|
|||
:key="passwordType"
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
:type="passwordType"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
tabindex="2"
|
||||
autocomplete="on"
|
||||
show-password
|
||||
@keyup.native="checkCapslock"
|
||||
@blur="capsTooltip = false"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<!-- <span class="show-pwd" @click="showPwd">
|
||||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||||
</span> -->
|
||||
@keyup.enter.native="handleLogin"/>
|
||||
</el-form-item>
|
||||
</el-tooltip>
|
||||
<el-checkbox class="margin-20" v-model="rememberMe">记住我</el-checkbox>
|
||||
|
|
@ -114,14 +110,13 @@ export default {
|
|||
const { query } = route;
|
||||
if (query) {
|
||||
this.redirect = query.redirect;
|
||||
this.otherQuery = this.getOtherQuery(query);
|
||||
// this.otherQuery = this.getOtherQuery(query);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// window.addEventListener('storage', this.afterQRScan)
|
||||
},
|
||||
mounted() {
|
||||
if (this.loginForm.username === '') {
|
||||
|
|
@ -131,7 +126,6 @@ export default {
|
|||
}
|
||||
},
|
||||
destroyed() {
|
||||
// window.removeEventListener('storage', this.afterQRScan)
|
||||
},
|
||||
methods: {
|
||||
checkCapslock(e) {
|
||||
|
|
@ -152,45 +146,21 @@ export default {
|
|||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.$store.dispatch('user/login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
setTimeout(()=>this.$router.push('/'), 1500);
|
||||
// this.loading = false;
|
||||
// this.$store.dispatch('user/login', this.loginForm)
|
||||
// .then(() => {
|
||||
// this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
|
||||
// this.loading = false;
|
||||
// })
|
||||
// .catch(() => {
|
||||
// this.loading = false;
|
||||
// });
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
},
|
||||
getOtherQuery(query) {
|
||||
return Object.keys(query).reduce((acc, cur) => {
|
||||
if (cur !== 'redirect') {
|
||||
acc[cur] = query[cur];
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
// afterQRScan() {
|
||||
// if (e.key === 'x-admin-oauth-code') {
|
||||
// const code = getQueryObject(e.newValue)
|
||||
// const codeMap = {
|
||||
// wechat: 'code',
|
||||
// tencent: 'code'
|
||||
// }
|
||||
// const type = codeMap[this.auth_type]
|
||||
// const codeName = code[type]
|
||||
// if (codeName) {
|
||||
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
|
||||
// this.$router.push({ path: this.redirect || '/' })
|
||||
// })
|
||||
// } else {
|
||||
// alert('第三方登录失败')
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@ export default {
|
|||
name: '技术亮点',
|
||||
url: 'technicalSpot',
|
||||
},
|
||||
{
|
||||
name: '文档资料',
|
||||
url: 'documents',
|
||||
},
|
||||
// {
|
||||
// name: '文档资料',
|
||||
// url: 'documents',
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@ export default {
|
|||
name: '技术亮点',
|
||||
url: 'technicalSpot',
|
||||
},
|
||||
{
|
||||
name: '文档资料',
|
||||
url: 'documents',
|
||||
},
|
||||
// {
|
||||
// name: '文档资料',
|
||||
// url: 'documents',
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -129,8 +129,13 @@ export default {
|
|||
// password: '111111',
|
||||
},
|
||||
loginRules: {
|
||||
// username: [{ required: true, trigger: 'blur' }],
|
||||
// password: [{ required: true, trigger: 'blur' }],
|
||||
// name: [
|
||||
// { required: true, message: '请输入活动名称', trigger: 'blur' },
|
||||
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
// ],
|
||||
// region: [
|
||||
// { required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
// ],
|
||||
},
|
||||
rememberMe: false,
|
||||
passwordType: 'password',
|
||||
|
|
@ -147,7 +152,7 @@ export default {
|
|||
const { query } = route;
|
||||
if (query) {
|
||||
this.redirect = query.redirect;
|
||||
this.otherQuery = this.getOtherQuery(query);
|
||||
// this.otherQuery = this.getOtherQuery(query);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
|
|
@ -167,59 +172,6 @@ export default {
|
|||
const { key } = e;
|
||||
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z');
|
||||
},
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = '';
|
||||
} else {
|
||||
this.passwordType = 'password';
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus();
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.$store.dispatch('user/login', this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
},
|
||||
getOtherQuery(query) {
|
||||
return Object.keys(query).reduce((acc, cur) => {
|
||||
if (cur !== 'redirect') {
|
||||
acc[cur] = query[cur];
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
// afterQRScan() {
|
||||
// if (e.key === 'x-admin-oauth-code') {
|
||||
// const code = getQueryObject(e.newValue)
|
||||
// const codeMap = {
|
||||
// wechat: 'code',
|
||||
// tencent: 'code'
|
||||
// }
|
||||
// const type = codeMap[this.auth_type]
|
||||
// const codeName = code[type]
|
||||
// if (codeName) {
|
||||
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
|
||||
// this.$router.push({ path: this.redirect || '/' })
|
||||
// })
|
||||
// } else {
|
||||
// alert('第三方登录失败')
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue