删除操作、数据分组、提示框

src/App.vue

@@ -1,5 +1,7 @@
 <template>
   <v-app>
+    <div v-title data-title="EthMevTools"></div>
+
     <v-app-bar
       app
       elevation="1"

src/components/History.vue

@@ -68,6 +68,8 @@
 
       <v-data-table
         multi-sort
+        group-by="block"
+        group-desc
         :headers="headers"
         :items="tableData"
         :search="search"
@@ -78,13 +80,13 @@
         <!--        :sort-desc="[true, true, true]"-->
         <template v-slot:item.option="{ item }">
           <v-row>
+<!--            <v-col cols="5">-->
+<!--              <v-btn icon elevation="0" color="blue" small>-->
+<!--                <v-icon small>mdi-pencil-outline</v-icon>-->
+<!--              </v-btn>-->
+<!--            </v-col>-->
             <v-col cols="5">
-              <v-btn icon elevation="0" color="blue" small>
-                <v-icon small>mdi-pencil-outline</v-icon>
-              </v-btn>
-            </v-col>
-            <v-col cols="5">
-              <v-btn icon elevation="0" color="red" small>
+              <v-btn icon elevation="0" color="red" small @click="deleteByHash(item.hash)">
                 <v-icon small>mdi-delete-forever-outline</v-icon>
               </v-btn>
             </v-col>
@@ -206,6 +208,23 @@
 
         this.loading = false
       },
+      async deleteByHash(hash_code) {
+        if (confirm('要删吗?\n' + hash_code)) {
+          let url = '/ethmev/deleteByHash'
+
+          const rst = await this.$http.post(url, {
+            hash: hash_code
+          })
+
+          if (rst.data.state) {
+            this.$msgkit.success(rst.data.msg)
+
+            await this.pullData()
+          } else {
+            this.$msgkit.error(rst.data.msg)
+          }
+        }
+      },
       dateToTimestamp (str) {
         let [a, b] = str.split(' ')
         let [year, month, day] = a.split('/')
@@ -228,10 +247,10 @@
       loading: false,
       headers: [
         { text: "Option", value: 'option', width: '100' },
-        { text: 'Block', value: 'block', width: '120' },
+        { text: 'Block', value: 'block', width: '150' },
         // { text: 'Sender', value: 'fm' },
         { text: 'Hash', value: 'hash' },
-        { text: 'Data', value: 'data' },
+        { text: 'Data', value: 'data', width: '800' },
         // { text: '交易数量', value: 'amount' },
         // { text: '利润', value: 'profit' },
         // { text: 'Gas', value: 'gas' },

src/main.js

@@ -2,8 +2,17 @@ import Vue from 'vue'
 import './plugins/axios'
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
+import MsgKit from '@/plugins/kit/MsgKit.js'
+
+// 标题指令
+Vue.directive('title', {
+  inserted: function (el) {
+    document.title = el.dataset.title
+  }
+})
 
 Vue.config.productionTip = false
+Vue.prototype.$msgkit = MsgKit
 
 new Vue({
   vuetify,

src/plugins/kit/MsgKit.js

@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import vuetify from '@/plugins/vuetify'
+import MsgKit from '@/plugins/kit/MsgKit.vue'
+
+// 创建消息提示器
+class Msg {
+  constructor () {
+    let vm = new Vue({
+      vuetify,
+
+      render: h => h(MsgKit)
+    }).$mount()
+
+    document.body.appendChild(vm.$el)
+    this.component = vm.$children[0]
+  }
+
+  normal (msg, timeout = 2000) {
+    this.component.normal(msg, '#2196F3', timeout)
+  }
+
+  success (msg, timeout = 2000) {
+    this.component.success(msg, timeout)
+  }
+
+  error (msg, timeout = 60 * 1000) {
+    this.component.error(msg, timeout)
+  }
+
+  warning (msg, timeout = 2000) {
+    this.component.warning(msg, timeout)
+  }
+}
+
+Msg.getInstance = (function () {
+  let instance
+
+  return function () {
+    if (!instance) {
+      instance = new Msg()
+    }
+    return instance
+  }
+})()
+
+export default Msg.getInstance()

src/plugins/kit/MsgKit.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-snackbar top v-model="visible" :color="color" :timeout="timeout">
+    <v-icon left>{{ icon }}</v-icon> {{ msg }}
+
+    <template v-slot:action="{ attr }">
+      <v-btn text v-bind="attr" @click="visible = false">关 闭</v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+
+  name: 'MsgKit',
+
+  data: () => ({
+    visible: false,
+
+    msg: 'Hello, Friends!',
+
+    color: 'teal',
+
+    timeout: 2000,
+
+    icon: 'mdi-check-circle-outline'
+  }),
+
+  methods: {
+    normal (msg, color = '#2196F3', timeout = 2000, icon = 'mdi-information-outline') {
+      this.visible = true
+      this.msg = msg
+      this.color = color
+      this.timeout = timeout
+      this.icon = icon
+    },
+
+    success (msg, timeout = 2000) {
+      this.normal(msg, '#009688', timeout, 'mdi-check-circle-outline')
+    },
+
+    warning (msg, timeout = 2000) {
+      this.normal(msg, '#673AB7', timeout, 'mdi-alert-octagram-outline')
+    },
+
+    error (msg, timeout = 2000) {
+      this.normal(msg, '#C62828', timeout, 'mdi-sticker-remove-outline')
+    }
+  }
+}
+</script>

src/plugins/kit/MyKit.js

@@ -0,0 +1,187 @@
+class MyKit {}
+
+/**
+ * 豪秒级时间戳转换
+ *
+ * @param timestamp
+ * @returns {*}
+ */
+MyKit.getTimeByMillisecond = function (timestamp) {
+  // 组织日期格式并返回
+  return MyKit.dateFormat('YYYY-mm-dd HH:MM:SS', new Date(timestamp))
+}
+
+/**
+ * 秒级时间戳转换
+ *
+ * @param timestamp
+ * @returns {*}
+ */
+MyKit.getTimeBySecond = function (timestamp) {
+  // 组织日期格式并返回
+  return MyKit.dateFormat('YYYY-mm-dd HH:MM:SS', new Date(timestamp * 1000))
+}
+
+/**
+ * 格式化日期
+ *
+ * @param fmt 日期格式
+ * @param date 日期对象
+ * @returns {*}
+ */
+MyKit.dateFormat = function (fmt, date) {
+  let ret
+  const opt = {
+    "Y+": date.getFullYear().toString(),        // 年
+    "m+": (date.getMonth() + 1).toString(),     // 月
+    "d+": date.getDate().toString(),            // 日
+    "H+": date.getHours().toString(),           // 时
+    "M+": date.getMinutes().toString(),         // 分
+    "S+": date.getSeconds().toString(),         // 秒
+    "s+": date.getMilliseconds().toString()     // 毫秒
+    // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  }
+
+  for (let k in opt) {
+    ret = new RegExp("(" + k + ")").exec(fmt)
+    if (ret) {
+      fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+    }
+  }
+
+  return fmt
+}
+
+/**
+ * 截取小数位工具
+ * @param num 需要截取的小数
+ * @param n 截取位数
+ * @returns {number}
+ * @private
+ */
+MyKit._N = function (num, n) {
+  if (!num) {
+    return 0
+  }
+
+  let rst = num.toString()
+
+  if (rst.indexOf('.') !== -1) {
+    rst = rst.substring(0, rst.indexOf('.') + n + 1)
+  }
+
+  return parseFloat(rst)
+}
+
+/**
+ * 转成非科学计数法
+ * @param num
+ * @returns {string}
+ */
+MyKit.toNonExponential = function (num) {
+  const m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/)
+  return num.toFixed(Math.max(0, (m[1] || '').length - m[2]))
+}
+
+/**
+ * 睡眠工具
+ * @param time 单位：毫秒
+ * @returns {Promise<unknown>}
+ */
+MyKit.sleep = function (time) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve(true)
+    }, time)
+  })
+}
+
+/**
+ * EMA计算器
+ * @param lastEma 上一个EMA
+ * @param closePrice 收盘价
+ * @param units 数据条数
+ * @returns {number}
+ */
+MyKit.EMA = function (lastEma, closePrice, units) {
+  return (lastEma * (units - 1) + closePrice * 2) / (units + 1)
+}
+
+/**
+ *
+ * 计算移动平均线指标, ma的周期为days
+ *
+ * @method MA
+ * @param {Array} ticks 一维数组类型，每个元素为当前Tick的收盘价格
+ * @param {Integer} day
+ * @return {Array} mas
+ */
+MyKit.MA = function (ticks, day) {
+  const mas = []
+  for (let i = 0; i < ticks.length; i++) {
+    if (i < day - 1) {
+      mas.push(ticks[i])
+    } else {
+      let valueSum = 0
+      for (let j = i; j > i - day; j--) {
+        valueSum += ticks[j]
+
+        if (i === ticks.length - 1) {
+          // console.log(day, ticks[j])
+        }
+      }
+      if (i === ticks.length - 1) {
+        // console.log(day, valueSum)
+      }
+      mas.push(valueSum / day)
+    }
+  }
+  return mas
+}
+
+/**
+ *
+ * 计算macd指标,快速和慢速移动平均线的周期分别取12和26
+ *
+ * @method MACD
+ * @param {Array} ticks
+ * 一维数组类型，每个元素为tick的收盘价格
+ * @param {Integer} N1
+ * 整数类型，是为快线
+ * @param {Integer} N2
+ * 整数类型，是为慢线
+ * @param {Integer} N3
+ * 整数类型，是为信号长度
+ * @return {Object} 返回一个包含diffs deas bars属性的对象,每个属性对应的类型为{Array[Number]}
+ */
+MyKit.MACD = function (ticks, N1, N2, N3) {
+  const emaN1 = []
+  const emaN2 = []
+  const diffs = []
+  const deas = []
+  const bars = []
+
+  for (let i = 0; i < ticks.length; i++) {
+    const c = ticks[i]
+    if (i === 0) {
+      emaN1.push(c)
+      emaN2.push(c)
+      deas.push(0)
+    } else {
+      emaN1.push(MyKit.EMA(emaN1[i - 1], c, N1))
+      emaN2.push(MyKit.EMA(emaN2[i - 1], c, N2))
+    }
+    // 计算离差值
+    diffs.push(emaN1[i] - emaN2[i])
+
+    if (i !== 0) {
+      deas.push(MyKit.EMA(deas[i - 1], diffs[i], N3))
+    }
+    // bars.push((diffs[i]-deas[i]) * 2);
+    bars.push(diffs[i] - deas[i])
+  }
+
+  return { diffs: diffs, deas: deas, bars: bars }
+}
+
+export default MyKit