给 Node 页面添加了本节点打包的区块列表模板。

给各页面都读入了页头的数据，如IP地址，邻居数量。
2018-11-28 16:38:52 +08:00
parent aca23682ca
commit f70e5bd73d
11 changed files with 241 additions and 55 deletions
--- a/deploy.js
+++ b/deploy.js
@@ -57,13 +57,13 @@ const necessaryPath = (path) => {
 }

 ssh.connect(connection).then(async () => {
-  console.log(`[ mv ${dist} ${dist}-backup-${new Date().toISOString()} ... ]`)
+  console.log(`[ ${root} > mv ${dist} ${dist}-backup-${new Date().toISOString()} ... ]`)
  await ssh.execCommand(`mv ${dist} ${dist}-backup-${new Date().toISOString()}`, { cwd:root })
-  console.log(`[ mkdir ${dist} ... ]`)
+  console.log(`[ ${root} > mkdir ${dist} ... ]`)
  await ssh.execCommand(`mkdir ${dist}`, { cwd:root })
  const toCreate = necessaryPath('./dist')
  for (const name of toCreate) {
-    console.log(`[ mkdir ${dist}/${name.join('/')} ... ]`)
+    console.log(`[ ${root} > mkdir ${dist}/${name.join('/')} ... ]`)
    await ssh.execCommand(`mkdir ${dist}/${name.join('/')}`, { cwd:root })
  }

@@ -77,13 +77,13 @@ ssh.connect(connection).then(async () => {
      return !baseName.endsWith('.map');
    },
    tick: (localPath, remotePath, error) => {
-      console.log(`Uploading "${localPath}" ===> "${remotePath}" ${error || 'succeeded!'}`)
+      console.log(`"${localPath}" ===> "${remotePath}" ... ${error || 'succeeded!'}`)
      err = error
    },
  })
  ssh.dispose()
  if (err) {
-    console.log('[ Uploaded with error! ]')
+    console.log('[ Upload failed! ]')
    process.exit(1)
  } else {
    console.log('[ Uploaded successfully! ]')
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -8,9 +8,9 @@
  },
  home: {
    titleOwner: 'Owner',
-    titleChain: 'Chain',
    titleNode: 'Node',
    titleNetwork: 'Network',
+    titleChain: 'Chain',
    titleMarket: 'Market',
  },
  owner: {
@@ -32,7 +32,7 @@
    thIndex: '序号',
    thAddress: '连接地址',
    thStatus: '连接状态',
-    thNeighbour: '邻居主人的账户地址',
+    thPeerOwnerAddress: '邻居主人的账户地址',
    tableNone: '暂无数据',
  },
  chain: {
--- a/src/i18n/zh-CN.js
+++ b/src/i18n/zh-CN.js
@@ -7,10 +7,10 @@
    errorMnemonic: '输入的密语无效',
  },
  home: {
-    titleOwner: '个人',
-    titleChain: '区块',
+    titleOwner: '主人',
    titleNode: '节点',
    titleNetwork: '网络',
+    titleChain: '区块',
    titleMarket: '应用',
  },
  owner: {
@@ -32,11 +32,20 @@
    thIndex: '序号',
    thAddress: '连接地址',
    thStatus: '连接状态',
-    thNeighbour: '邻居主人的账户地址',
+    thPeerOwnerAddress: '邻居主人的账户地址',
    tableNone: '暂无数据',
  },
  chain: {
-    tableHeader: '区块列表',
+    tableHeader: '区块链',
+    searchHolder: '输入要查询的区块高度或者区块哈希',
+    thHeight: '区块高度',
+    thTimestamp: '时间戳',
+    thType: '区块类型',
+    thHash: '区块哈希',
+    tableNone: '暂无数据',
+  },
+  node: {
+    tableHeader: '本节点打包的区块列表',
    searchHolder: '输入要查询的区块高度或者区块哈希',
    thHeight: '区块高度',
    thTimestamp: '时间戳',
--- a/src/services/axios.js
+++ b/src/services/axios.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
 // import app from './app'

-// 控制台应当默认访问控制台所在主机(localhost 或者 window.location.hostname)的 TIC后台，或者访问用户自己设置的主机。
+// 控制台应当默认访问控制台所在主机(localhost 或者 window.location.hostname)的 TIC后台，或者让用户在控制台启动时，自己设置一个节点主机。
 axios.defaults.baseURL = `http://${window.location.hostname}:6842/api/`
--- a/src/store/modules/network.js
+++ b/src/store/modules/network.js
@@ -1,4 +1,6 @@
-export default {
+import axios from 'axios'
+
+export default {
  namespaced: true,

  state: {
@@ -7,27 +9,45 @@
      { text: 'network.thIndex', value: 'index', align: 'center' },
      { text: 'network.thAddress', value: 'address', align: 'center' },
      { text: 'network.thStatus', value: 'status', align: 'center' },
-      { text: 'network.thNeighbour', value: 'neighbour', align: 'center' },
+      { text: 'network.thPeerOwnerAddress', value: 'peerOwnerAddress', align: 'center' },
    ],
    desserts: [
-      {
-        index: '1',
-        address: '192.168.0.1',
-        status: '0',
-        neighbour: 'ajlk;gaklewklgjqwejj',
-      },
+      // {
+      //   index: '',
+      //   address: '',
+      //   status: '',
+      //   peerOwnerAddress: '',
+      // },
    ],
    fetching: false,
    filter: '',
+    peerNumber: 'unknown',
+    nodeNumber: ' unknown',
  },

  mutations: {
    inputFilter(state, filter) {
      state.filter = filter
    },
+    updatePeerNumber(state, peerNumber) {
+      state.peerNumber = peerNumber
+    },
+    updateNodeNumber(state, nodeNumber) {
+      state.nodeNumber = nodeNumber
+    },
+    updateDesserts(state, peerList) {
+      state.desserts = peerList
+    },
  },

-  actions: {},
+  actions: {
+    async updateNetInfo({ state, commit }) {
+      let result = await axios.post('Peer/sharePeer', {})
+      commit('updatePeerNumber', (result && result.data) ? result.data.length : 0)
+
+      commit('updateDesserts', result.data || [])
+    },
+  },

  getters: {},
 }
--- a/src/store/modules/node.js
+++ b/src/store/modules/node.js
@@ -1,7 +1,46 @@
-export default {
+import axios from 'axios'
+
+export default {
  namespaced: true,
-  state: {},
-  mutations: {},
-  actions: {},
+  state: {
+    pageEntity: [5, 10, 25],
+    headers: [
+      { text: 'node.thHeight', value: 'height', align: 'center' },
+      { text: 'node.thTimestamp', value: 'timestamp', align: 'center' },
+      { text: 'node.thType', value: 'type', align: 'center' },
+      { text: 'node.thHash', value: 'hash', align: 'center' },
+    ],
+    desserts: [
+      {
+        height: '1',
+        timestamp: '2011-11-20',
+        type: '0',
+        hash: 'null',
+      },
+    ],
+    fetching: false,
+    filter: '',
+    modal: false,
+    ipAddress: '',
+  },
+
+  mutations: {
+    inputFilter(state, filter) {
+      state.filter = filter
+    },
+    updateIpAddress(state, ipAddress) {
+      state.ipAddress = ipAddress
+    },
+    updateDesserts(state, desserts) {
+      state.desserts = desserts
+    },
+  },
+
+  actions: {
+    updateNodeInfo({ state, commit }) {
+      commit('updateIpAddress', axios.defaults.baseURL)
+    },
+  },
+
  getters: {},
 }
--- a/src/store/modules/owner.js
+++ b/src/store/modules/owner.js
@@ -29,7 +29,7 @@ export default {
    ],
    fetching: false,
    filter: '',
-    balance: 0,
+    balance: '',
    address: '',
  },

@@ -44,11 +44,11 @@ export default {

    updateAddress(state, address) {
      state.address = address
-    }
+    },
  },

  actions: {
-    async queryAccount({ state, commit }) {
+    async updateOwnerInfo({ state, commit }) {
      let account = sessionStorage.getItem('KEY_ACCOUNT')
      try {
        account = JSON.parse(account)
@@ -56,7 +56,7 @@ export default {
        const result = await axios.post('Account/getBalance', {
          Account: { address: account.address },
        })
-        commit('updateBalance', result.data || 0)
+        commit('updateBalance', (result && result.data) ? result.data : 0)
      } catch (e) {}
    },
  },
--- a/src/views/Chain.vue
+++ b/src/views/Chain.vue
@@ -89,8 +89,10 @@ import Vue from 'vue'
 import store from '../store'
 import VueSocketio from 'vue-socket.io'
 import io from 'socket.io-client'
+
 const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('chain')
-Vue.use(VueSocketio, io('http://localhost:6842'), store)
+
+Vue.use(VueSocketio, io(`http://${window.location.hostname}:6842/api/`), store) // todo: luk: 整个控制台应当依赖于同一个全局的节点地址变量。

 export default {
  name: 'Chain',
@@ -114,9 +116,6 @@ export default {
      this.addNewBlock(msg)
    },
  },
-  mounted() {
-    this.queryBlockList()
-  },

  methods: {
    ...mapActions([
@@ -130,6 +129,11 @@ export default {
      'addDesserts',
    ]),
  },
+
+  mounted() {
+    this.queryBlockList()
+  },
+
 }
 </script>

@@ -165,7 +169,7 @@ export default {
      margin: 0 20px;

      .search-input {
-        width: 400px;
+        width: 80%;
      }
    }

--- a/src/views/Network.vue
+++ b/src/views/Network.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="network-page">
    <div class="card-content">
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>当前邻居节点数 <br>{{ peerNumber }}</div>
+      </div>
      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
-      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
-      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>当前全网节点数 <br>{{ nodeNumber }}</div>
+      </div>
    </div>

    <div class="table-content elevation-1">
@@ -38,7 +38,7 @@
            <td>{{ props.item.index }}</td>
            <td>{{ props.item.address }}</td>
            <td>{{ props.item.status }}</td>
-            <td>{{ props.item.neighbour }}</td>
+            <td>{{ props.item.peerOwnerAddress }}</td>
          </template>
          <template slot="no-results">
            {{ $t('network.tableNone') }}
@@ -66,17 +66,27 @@ export default {
      'pageEntity',
      'fetching',
      'filter',
+      'peerNumber',
+      'nodeNumber',
    ]),
    ...mapGetters([]),
  },

  methods: {
    ...mapActions([
+      'updateNetInfo',
    ]),
    ...mapMutations([
      'inputFilter',
+      'updatePeerNumber',
+      'updateNodeNumber',
    ]),
  },
+
+  mounted() {
+    this.updateNetInfo()
+  },
+
 }
 </script>

@@ -112,7 +122,7 @@ export default {
      margin: 0 20px;

      .search-input {
-        width: 400px;
+        width: 80%;
      }
    }

--- a/src/views/Node.vue
+++ b/src/views/Node.vue
@@ -1,16 +1,92 @@
 <template>
  <div class="node-page">
    <div class="card-content">
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>主机地址 <br> {{ ipAddress }}</div>
+      </div>
      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>在线用户 <br> </div>
+      </div>
    </div>
+
+    <div class="table-content elevation-1">
+      <div class="panel-header">
+        <h3>{{ $t('node.tableHeader') }}</h3>
+        <div class="search-input">
+          <v-text-field
+            :placeholder="$t('node.searchHolder')"
+            :value="filter"
+            @input="inputFilter"
+            append-icon="search" />
+        </div>
+      </div>
+
+      <template>
+        <v-data-table
+          :headers="headers"
+          :items="desserts"
+          :total-items="100"
+          :rows-per-page-items="pageEntity"
+          :loading="fetching"
+          class="panel-content elevation-1"
+        >
+          <template slot="headerCell" slot-scope="props">
+            <span>{{ $t(props.header.text) }}</span>
+          </template>
+          <template slot="items" slot-scope="props">
+            <td>{{ props.item.height }}</td>
+            <td>{{ props.item.timestamp }}</td>
+            <td>{{ props.item.type }}</td>
+            <td>{{ props.item.hash }}</td>
+          </template>
+          <template slot="no-results">
+            {{ $t('node.tableNone') }}
+          </template>
+        </v-data-table>
+      </template>
+    </div>
+
  </div>
 </template>

 <script>
+import {
+  createNamespacedHelpers,
+} from 'vuex'
+
+const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('node')
+
 export default {
  name: 'Node',
+
+  computed: {
+    ...mapState([
+      'headers',
+      'desserts',
+      'pageEntity',
+      'fetching',
+      'filter',
+      'modal',
+      'ipAddress',
+    ]),
+    ...mapGetters([]),
+  },
+
+  methods: {
+    ...mapActions([
+      'updateNodeInfo',
+    ]),
+    ...mapMutations([
+      'inputFilter',
+      'updateIpAddress',
+    ]),
+  },
+
+  mounted() {
+    this.updateNodeInfo()
+  },
+
 }
 </script>

@@ -23,7 +99,7 @@ export default {

    .app-card {
      flex: 1;
-      height: 200px;
+      height: 100px;
      background-color: white;
    }

@@ -32,5 +108,29 @@ export default {
    }

  }
+
+  .table-content {
+    flex: 1;
+    margin: 0 20px 20px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 20px;
+
+      .search-input {
+        width: 80%;
+      }
+    }
+
+    .panel-content {
+      margin: 0 20px 20px;
+    }
+  }
+
 }
 </style>
--- a/src/views/Owner.vue
+++ b/src/views/Owner.vue
@@ -2,11 +2,12 @@
  <div class="owner-page">
    <div class="card-content">
      <div class="app-card elevation-1">
-        <div>主人地址为 {{ address }}</div>
-        <div>余额为 {{ balance }}</div>
+        <div>主人地址 <br> {{ address }}</div>
      </div>
      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>余额 <br> {{ balance }}</div>
+      </div>
    </div>
    <div class="table-content elevation-1">
      <div class="panel-header">
@@ -74,18 +75,21 @@ export default {
    ...mapGetters([]),
  },

-  mounted() {
-    this.queryAccount()
-  },
-
  methods: {
    ...mapActions([
-      'queryAccount',
+      'updateOwnerInfo',
    ]),
    ...mapMutations([
      'inputFilter',
+      'updateBalance', // luk: 发现不写这句也没影响。但还是写吧，万一有用呢。
+      'updateAddress',
    ]),
  },
+
+  mounted() {
+    this.updateOwnerInfo()
+  },
+
 }
 </script>

@@ -104,7 +108,7 @@ export default {

    .app-card {
      flex: 1;
-      height: 200px;
+      height: 100px;
      background-color: white;
    }

@@ -128,7 +132,7 @@ export default {
      margin: 0 20px;

      .search-input {
-        width: 400px;
+        width: 80%;
      }
    }