You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@iotdb.apache.org by su...@apache.org on 2020/03/10 08:19:05 UTC
[incubator-iotdb-website] branch master updated: [IOTDB-521]modify
home and document (#67)
This is an automated email from the ASF dual-hosted git repository.
sunzesong pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-iotdb-website.git
The following commit(s) were added to refs/heads/master by this push:
new e223b5d [IOTDB-521]modify home and document (#67)
e223b5d is described below
commit e223b5d5390bed1f6c276d9e6f508b9957ef0083
Author: Sail <37...@users.noreply.github.com>
AuthorDate: Tue Mar 10 16:18:58 2020 +0800
[IOTDB-521]modify home and document (#67)
* modify home and document
* modify home and document
---
package.json | 6 +-
src/main.js | 7 ++
src/views/Documents.vue | 58 ++++++++++-------
src/views/Home.vue | 170 ++++++++++++++++++++++++++++++++++++++++++++----
4 files changed, 204 insertions(+), 37 deletions(-)
diff --git a/package.json b/package.json
index 85a4ddd..d41c866 100644
--- a/package.json
+++ b/package.json
@@ -13,15 +13,17 @@
"deploy": "node build/deploy.js"
},
"dependencies": {
+ "ajv": "^6.9.1",
"axios": "^0.18.0",
"cheerio": "^1.0.0-rc.2",
+ "element-ui": "^2.13.0",
"popper.js": "^1.14.6",
"text-loader": "0.0.1",
"unit": "^1.0.4",
"vue": "^2.5.2",
+ "vue-github-button": "latest",
"vue-markdown": "^2.2.4",
- "vue-router": "^3.0.1",
- "vue-github-button": "latest"
+ "vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
diff --git a/src/main.js b/src/main.js
index 22116f2..d7c570c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,16 @@ import App from './App'
import router from './router'
import global_ from './components/Global'
import $ from 'jquery'
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+
Vue.config.productionTip = false;
Vue.prototype.GLOBAL = global_
+
/* eslint-disable no-new */
new Vue({
el: '#app',
diff --git a/src/views/Documents.vue b/src/views/Documents.vue
index 9c2c793..ced6b54 100644
--- a/src/views/Documents.vue
+++ b/src/views/Documents.vue
@@ -37,16 +37,18 @@
</ul>
<div class="text-field" id="text-content">
<language-button :eng="eng" @click.native="switchLanguage()"/>
- <vue-markdown class="markdown-area" :source="document" :toc="true" :toc-anchor-link="true"
+ <vue-markdown v-show="!ok" class="markdown-area" :source="document" :toc="true" :toc-anchor-link="true"
toc-anchor-link-symbol=""></vue-markdown>
- <p class="find-mistake">This documentation is open source. Find mistakes? Want to contribute? <span
+
+ <p class="find-mistake" v-show="!ok">This documentation is open source. Find mistakes? Want to contribute? <span
class="go-to-development" @click="goToDevelopment()">Go for it.</span></p>
+
+ <iframe :src="solidhtml" v-show="ok" style="margin:0;padding:0;align:middle;width: 800px;height:600px;border:none; overflow-x:hidden; overflow-y:hidden;"></iframe>
+
</div>
+
<div class="doc-footer">
- <p style="color: #AAA">
- Disclaimer: Apache IoTDB (incubating) (Database for Internet of Things) is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the c [...]
- </p>
- <span style="text-align: center">Copyright © 2020 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</span>
+ <span>Copyright © 2020 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</span>
</div>
</div>
</div>
@@ -73,7 +75,9 @@
chapter: "",
section: "",
text: "",
- eng: true
+ eng: true,
+ ok:false,
+ solidhtml:"incubator-iotdb/rel/0.9/docs/Documentation/UserGuide/1-Overview/1-What is IoTDB.html"
}
},
components: {
@@ -162,23 +166,25 @@
if (version === "0.8.x") {
chapter -= 1
}
+ if (version === "0.8.x" || version === "0.9.x") {
+ this.ok = true;
+ }else{
+ this.ok = false;
+ }
let section = Number(this.getSection().substr(3));
+
let url = Global.SUPPORT_VERSION[version]['doc-prefix'] + Global.SUPPORT_VERSION[version]['branch'] +
Global.DOC_ENG_PREFIX + "/UserGuide/" + Global.SUPPORT_VERSION[version]['content'];
- axios.get(url).then(() => {
- this.chapter = this.result[chapter][0].substr(2);
- this.section = this.result[chapter][section].trim().substr(3);
- url = Global.SUPPORT_VERSION[version]['doc-prefix'] + Global.SUPPORT_VERSION[version]['branch'] +
- docLanguageUrl + "/UserGuide/" + this.chapter.substr(8).replace(': ', '-') + "/" + this.section + ".md";
- axios.get(url)
- .then((response) => {
- this.document = response.data;
- document.getElementById("text-content").scrollTop = 0;
- })
- .catch(function (error) {
- console.log(error);
- });
- });
+
+ this.chapter = this.result[chapter][0].substr(2);
+ this.section = this.result[chapter][section].trim().substr(3);
+ url = 'incubator-iotdb/' + Global.SUPPORT_VERSION[version]['branch'] +
+ docLanguageUrl + "/UserGuide/" + this.chapter.substr(8).replace(': ', '-') + "/" + this.section + ".md";
+ this.solidhtml = url.replace('.md','.html');
+ axios.get(url).then((response) => {
+ this.document = response.data;
+ document.getElementById("text-content").scrollTop = 0;
+ });
} else {
this.$router.push('/404');
}
@@ -215,6 +221,7 @@
</script>
<style scoped>
+
#bread-chapter {
margin-left: 2%;
margin-right: 17%;
@@ -307,7 +314,7 @@
margin-bottom: 5px;
padding: 5px;
max-width: 80%;
- line-height: 15px;
+ line-height: 15px;
}
.list-group > li:hover {
@@ -347,8 +354,10 @@
position: fixed;
width: 75%;
bottom: 0px;
- right: 0;
- padding: 10px 5px;
+ right: 0px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ text-align: center;
color: #fff;
background: #222222;
}
@@ -408,4 +417,5 @@
}
+
</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c31db73..c307c7a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,9 +1,115 @@
-<template>
- <div>
+<template >
+ <div style="background:linear-gradient(top,#A2A2A2,#fff);">
+
+ <div style="max-width: 1200px;margin: 0 auto;position: relative;height:450px;border-bottom:1px solid gray;">
+
+ <h2 class="h2">Apache IoTDB</h2>
+ <p style="font-size: 20px;line-height:23px;margin: 10px 0 20px 0;font-family: 'Arimo', sans-serif;
+ text-transform: uppercase;
+ font-weight: 700;
+ letter-spacing: 0.03em;
+ color: #777;
+ text-align: center;">incubating,Database for Internet of Things</p>
+ <p style="font-size: 20px;margin: 0 0 10px 0;">Apache IoTDB (incubating) (Database for Internet of Things) is an integrated data
+ management engine designed for timeseries data. It provides users with services for
+ data collection, storage and analysis. Due to its light-weight architecture, high
+ performance and rich feature set together with its deep integration with Apache
+ Hadoop and Spark, Apache IoTDB (incubating) can meet the requirements of massive
+ data storage, high-speed data ingestion and complex data analysis in the IoT
+ industrial fields.
+ </p>
+
+ <el-row style="margin: 50px auto;text-align: center;">
+ <el-button type="warning" round style="width:220px;
+ font-size: 18px; letter-spacing: 0.03em;font-family: 'Arimo', sans-serif;" @click="addRoutes1">Download</el-button>
+ <el-button type="info" round style="width:220px;
+ font-size: 18px; letter-spacing: 0.03em;font-family: 'Arimo', sans-serif;" @click="addRoutes2">QuickStart</el-button>
+ </el-row>
+ </div>
+
+ <div style="max-width:1200px;margin:0 auto;text-align: center;margin-top:20px;">
+ <p class="home-title" style="font-size: 50px;">Scenarios</p>
+ <div id="myCarousel" class="carousel slide" data-ride="carousel" style="background: rgb(31,31,31)">
+ <ol class="carousel-indicators">
+ <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+ <li data-target="#myCarousel" data-slide-to="1"></li>
+ <li data-target="#myCarousel" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="https://user-images.githubusercontent.com/1021782/50463652-f67c6480-09c7-11e9-8f65-c8adaff09043.png" alt="First slide">
+ <br/>
+ <div class="Scenarios">
+ <h1>High-end equipment</h1>
+ <article lang="en">
+ <p> In high-end manufacturing, there are many devices equipped with sensors collecting working status data.
+ Meteorological stations, wind turbines are common high-end devices.
+ These devices, if supports Java or Go (in developing), can run TsFile to store data locally.
+ In this way, TsFile can provide the ability to save data with high throughput, high compression ratio, and millisecond query.
+ Together with TsFile-Sync tool, TsFiles can be transmitted to the data center.
+ </p>
+ </article>
+ </div>
+ </div>
+ <div class="item">
+ <img src="https://user-images.githubusercontent.com/1021782/50463651-f67c6480-09c7-11e9-9374-3e6c6c540d7b.png" alt="Second slide">
+ <br/>
+ <div class="Scenarios">
+ <h1>Local Controller</h1>
+ <article lang="en">
+ <p>
+ In the scene of factories, there are tens of devices under LAN network.
+ IoTDB can be installed on a local controller server in the factory to receive data from those devices.
+ The local controller server (normal PC or workstation) with IoTDB can provide the ability to persist data and query data with SQL-like interface.
+ In addition, with TsFile-Sync tool, TsFiles on the local controller can be transmitted to the data center equipped with IoTDB instance in the cloud.
+ </p>
+ </article>
+ </div>
+ </div>
+ <div class="item">
+ <img src="https://user-images.githubusercontent.com/1021782/50463650-f67c6480-09c7-11e9-9b80-bc66aa5dc0ab.png" alt="Third slide">
+ <br/>
+ <div class="Scenarios">
+ <h1>Cloud Data Management</h1>
+ <article lang="en">
+ <p>
+ In the scene of high-speed network (Internet of Vehicles, etc.), a car installed sensors on it can collect monitoring information(driving status, etc.) of itself at a certain frequency.
+ Usually, these automotive devices have limited hardware configurations and are difficult to carry complex applications.
+ Lightweight IoTDB(IoTDB Client) came into being.
+ With JDBC API, it can make data sent by narrow-band IoT or 4G possible. In this way, devices and cloud are connected together.
+ </p>
+ </article>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div style="max-width:1200px;margin:0 auto;text-align: center;margin-top:20px;border-top:1px solid gray;">
+ <p class="home-title" style="padding-top:15px;font-size: 54px;">Main Features</p>
+ <div class="row feature">
+ <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-item" v-for="item in featureBlock1" @mouseover="hover($event)"
+ @mouseleave="unhover($event)">
+ <div class="row feature-title-row">
+ <div class="col-xs-2 col-sm-2">
+ <img :src=item.featureSrc style="vertical-align:middle">
+ </div>
+ <div class="col-xs-10 col-sm-10 feature-title"><p>{{item.featureTitle}}</p></div>
+ </div>
+ <p class="feature-content">{{item.featureContent}}</p>
+ <hr/>
+ </div>
+ </div>
+ </div>
+
+
+
<div class="main container">
<div class="row">
<div class="col-md-9 col-sm-9">
- <div>
+
+
+ <!-- <div>
<p class="home-title">Apache IoTDB (incubating) (Database for Internet of Things)</p>
<article lang="en">
<p>Apache IoTDB (incubating) (Database for Internet of Things) is an integrated data
@@ -20,8 +126,9 @@
Apache Software Foundation (ASF), sponsored by the Incubator.
</p>
</article>
- </div>
- <div>
+ </div> -->
+
+ <!-- <div>
<p class="home-title">Scenarios</p>
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="background: rgb(31,31,31)">
<ol class="carousel-indicators">
@@ -77,8 +184,9 @@
</div>
</div>
</div>
- </div>
- <div>
+ </div> -->
+
+ <!-- <div>
<p class="home-title" style="padding-top: 15px">Main Features</p>
<div class="row feature">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-item" v-for="item in featureBlock1" @mouseover="hover($event)"
@@ -93,9 +201,10 @@
<hr/>
</div>
</div>
- </div>
+ </div> -->
+
</div>
- <side-bar/>
+ <!-- <side-bar/> -->
</div>
</div>
@@ -149,7 +258,15 @@
},
unhover: function (e) {
e.currentTarget.style.boxShadow = "";
+ },
+
+ addRoutes1 () {
+ this.$router.push('/Download')
+ },
+ addRoutes2 () {
+ this.$router.push('/Documents/0.9.x/chap1/sec1')
}
+
}
}
@@ -159,6 +276,7 @@
.item{
margin-bottom: 10px;
+
}
.item > img {
@@ -289,11 +407,13 @@
}
.feature-item p {
- font-size: 14px;
+ font-size: 18px;
+ line-height:20px;
}
.Scenarios > article > p {
- font-size: 14px;
+ font-size: 18px;
+ line-height:20px;
}
.Scenarios > h1 {
@@ -302,4 +422,32 @@
color: #fcac45;
}
+
+.colorful{
+ /* width: 250px; */
+ font-size: 30px;
+ background-image:linear-gradient(to right, #7e297c, #f79a22, #d03135);
+ color: transparent;
+ -webkit-background-clip: text;
+ -moz-background-clip: text;
+ -ms-background-clip: text;
+ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+}
+
+h2 {
+ margin: 150px auto 0;
+ padding: 0 5%;
+ opacity: 0.9;
+ color: #3f3b3f;
+ /* color: #ffa500; */
+ /* background-image:linear-gradient(to right, #7e297c, #f79a22, #d03135);
+ color: transparent; */
+ font-size: 108px;
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: 700;
+ letter-spacing: 0.03em;
+}
+
+
</style>