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 <[email protected]>
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>
![https://user-images.githubusercontent.com/1021782/50463652-f67c6480-09c7-11e9-8f65-c8adaff09043.png"](https://user-images.githubusercontent.com/1021782/50463652-f67c6480-09c7-11e9-8f65-c8adaff09043.png"){kind=link}
![https://user-images.githubusercontent.com/1021782/50463651-f67c6480-09c7-11e9-9374-3e6c6c540d7b.png"](https://user-images.githubusercontent.com/1021782/50463651-f67c6480-09c7-11e9-9374-3e6c6c540d7b.png"){kind=link}
![https://user-images.githubusercontent.com/1021782/50463650-f67c6480-09c7-11e9-9b80-bc66aa5dc0ab.png"](https://user-images.githubusercontent.com/1021782/50463650-f67c6480-09c7-11e9-9b80-bc66aa5dc0ab.png"){kind=link}