daibi-list
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.zhimg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <!-- import axios -->
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body,
        #app,
        .content {
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            /* min-width: 980px; */
            color: #303133;
        }

        #app {
            /* display: flex; */
            background-color: #738A9A;
            padding: 20px;
        }

        .box-card {
            margin-bottom: 20px;
            color: #ffffff;
        }

        .text-right {
            text-align: right;
        }

        .title-right {
            margin-left: 40px;
            color: #67C23A;
            font-weight: 500;
        }

        .margin-bt-20 {
            margin-bottom: 20px;
        }

        .margin-bt-10 {
            margin-bottom: 10px;
        }

        .text-blue {
            color: #409EFF;
        }

        .text-red {
            color: #F56C6C;
        }

        .text-green {
            color: #67C23A;
        }

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #B3C0D1;
            border-radius: 10px;
            height: 50px;
        }

        .table {
            margin-top: 40px;
        }

        .black .box-card {
            background-color: #212430;
            color: #ffffff;
        }

        .black .title-left {
            color: #ffffff;
        }

        .black .box-card-b {
            background-color: #2A3B4B;
            color: #ffffff;
        }

        .black .el-descriptions__body {
            background-color: #212430;
            color: #ffffff;
        }

        .black .box-card-b .el-table {
            background-color: #212430;
            color: #ffffff;
        }

        .black .box-card-b .el-table tr,
        .black .box-card-b .el-table th.el-table__cell {
            background-color: #212430;
            color: #ffffff;
        }

        .black .box-card-b .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
            background-color: #2A3B4B;
        }

        .el-table tr.text-red .cell {
            color: #F56C6C !important;
        }

        .el-table tr.text-green .cell{
            color: #67C23A !important;
        }

        .flex {
            display: flex;
            /* align-items: center; */
            justify-content: space-between;
        }

        .flex-1 {
            flex: 1;
            flex-shrink: 0;
        }
    </style>
</head>

<body>
    <div id="app" :class="{'black': isBlack}">
        <el-card class="box-card" shadow="always">
            <el-descriptions :column="6" class="margin-bt-20">
                <template slot="title">
                    <div class="title-left"><span>代币名称：</span><span>{{topData.name}}</span><span
                            class="title-right">当前总持仓数量：{{topData.numT}}/d当前总持仓金额：{{topData.priceT}}</span>
                    </div>
                </template>
                <el-descriptions-item label="总市值">{{topData.total}}</el-descriptions-item>
                <el-descriptions-item label="当前池子v2">{{topData.v2}}</el-descriptions-item>
                <el-descriptions-item label="当前池子v3">{{topData.v3}}</el-descriptions-item>
                <el-descriptions-item label="当前单价">{{topData.price}}</el-descriptions-item>
                <el-descriptions-item label="持币地址数"> {{topData.address}} </el-descriptions-item>
                <el-descriptions-item label="持币地址数48H变化"> {{topData.h48}} </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="2">
                <template slot="title">
                    <div class="title-left"><span>基本面信息（手写）</span></div>
                </template>
                <el-descriptions-item label="24H健康度更新">{{topData.h24}}</el-descriptions-item>
                <el-descriptions-item label="描述">{{topData.marks}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card class="box-card-b" shadow="hover">
                    <div class="margin-bt-10 text-green">总买入金额：{{buys.amount.eth}} ETH</div>
                    <div class="text-green">总买入数量：{{buys.amount.token}}</div>
                    <el-table class="table" :data="tableDataL" style="width: 100%">
                        <el-table-column prop="priceETH" label="ETH"></el-table-column>
                        <el-table-column prop="price" label="PRICE"></el-table-column>
                        <el-table-column prop="blockNumber" label="NUM"></el-table-column>
                        <el-table-column prop="timestamp" label="DATE">
                            <template slot-scope="scope">
                                <div>{{getTime(scope.row.timestamp)}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card-b" shadow="hover">
                    <div class="margin-bt-10 text-red">总卖出金额：{{sells.amount.eth}} ETH</div>
                    <div class="text-red">总卖出数量：{{sells.amount.token}}</div>
                    <el-table class="table" :data="tableDataC" style="width: 100%">
                        <el-table-column prop="priceETH" label="ETH"></el-table-column>
                        <el-table-column prop="price" label="PRICE"></el-table-column>
                        <el-table-column prop="blockNumber" label="NUM"></el-table-column>
                        <el-table-column prop="timestamp" label="DATE">
                            <template slot-scope="scope">
                                <div>{{getTime(scope.row.timestamp)}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card-b" shadow="hover">
                    <div class="flex">
                        <div>
                            <div class="margin-bt-10 text-blue">当前买入挂单金额：ETH</div>
                            <div class="text-red">当前卖出挂单百分比：</div>
                        </div>
                        <div>
                            <el-button type="primary" plain @click="dialogFormVisible=true">添加挂单</el-button>
                        </div>
                    </div>
                    <el-table class="table" :data="tableDataR" :row-class-name="getClassName" style="width: 100%">
                        <el-table-column prop="ETH" label="ETH"></el-table-column>
                        <el-table-column prop="orderprice" label="PRICE"></el-table-column>
                        <el-table-column prop="ordernum" label="NUM"></el-table-column>
                        <el-table-column prop="orderexpiry_time" label="DATE">
                            <template slot-scope="scope">
                                <div>{{getDate(scope.row.orderexpiry_time)}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="添加挂单" width="80%" :visible.sync="dialogFormVisible">
            <div class="margin-bt-20">选择买单</div>
            <div class="flex">
                <el-table class="flex-1" :data="tableDataL" highlight-current-row @current-change="handleCurrentChange">
                    <el-table-column prop="priceETH" label="ETH"></el-table-column>
                    <el-table-column prop="price" label="PRICE"></el-table-column>
                    <el-table-column prop="blockNumber" label="NUM"></el-table-column>
                    <el-table-column prop="timestamp" label="DATE">
                        <template slot-scope="scope">
                            <div>{{getTime(scope.row.timestamp)}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-form class="flex-1" :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item label="交易类型" :label-width="formLabelWidth">
                        <el-select v-model="form.type" placeholder="请选择活动区域">
                            <el-option label="挂单" value="0"></el-option>
                            <el-option label="买入" value="1"></el-option>
                            <el-option label="卖出" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="ETH" label="ETH" :label-width="formLabelWidth">
                        <el-input v-model="form.ETH" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="orderprice" label="挂单价格" :label-width="formLabelWidth">
                        <el-input v-model="form.orderprice" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 挂单数量 -->
                    <el-form-item prop="ordernum" label="挂单数量" :label-width="formLabelWidth">
                        <el-input v-model="form.ordernum" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 到期时间 -->
                    <el-form-item prop="orderexpiry_time" label="到期时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="form.orderexpiry_time" type="date" value-format="yyyy-MM-dd"
                            placeholder="请选择日期" />
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrder">添加挂单</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isBlack: true,
                topData: {
                    name: '代币名称',
                    numT: 4332,
                    priceT: 1230,
                    num: 4332,
                    price: 1230,
                    total: 99999,
                    v2: 'v2',
                    v3: 'v3',
                    address: 'address',
                    h48: '48h',
                    h24: '24h',
                    marks: '一段描述'
                },
                tableDataL: [],
                tableDataC: [],
                tableDataR: [],
                buys: {
                    "count": 6,
                    "amount": {
                        "token": 217504227.49692762,
                        "eth": 13.333333333333334,
                        "tokenRef": 13.333333333333334
                    }
                },
                sells: {
                    "count": 6,
                    "amount": {
                        "token": 363077180.2130521,
                        "eth": 23.37830483732773,
                        "tokenRef": 23.37830483732773
                    }
                },
                loading: false,
                dialogFormVisible: false,
                form: {
                    type: '0',
                    ETH: '',
                    orderprice: '',
                    ordernum: '',
                    orderexpiry_time: ''
                },
                formLabelWidth: '120px',
                wallet: '',
                trade: '',
                rules: {
                    ETH: [
                        { required: true, message: '请输入', trigger: 'change' }
                    ],
                    orderprice: [
                        { required: true, message: '请输入', trigger: 'change' }
                    ],
                    ordernum: [
                        { required: true, message: '请输入', trigger: 'change' }
                    ],
                    orderexpiry_time: [
                        { required: true, message: '请选择日期', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            getClassName({ row }) {
                if (row.type == '1') {
                    return 'text-green'
                }
                if (row.type == '2') {
                    return 'text-red'
                }
            },
            getCellAndBuy() {
                axios({
                    url: './data.json',
                }).then((res) => {
                    const { data } = res.data
                    const list = data.events
                    if (list && list.length) {
                        this.tableDataL = list.filter(item => item.type === 'buy')
                        this.tableDataC = list.filter(item => item.type === 'sell')
                    }
                    console.log(this.tableDataL, this.tableDataC)
                    const makers = data.makers.length > 0 ? data.makers[1] : null
                    if (makers) {
                        this.buys = makers.buys
                        this.sells = makers.sells
                        this.wallet = data.wallet
                    }
                })
            },
            getData() {
                axios({
                    url: 'https://mc.0xplayer.one/api/tradedetail/index',
                    method: 'get',
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    }
                }).then((res) => {
                    const { data } = res.data
                    this.tableDataR = data.rows
                })
            },
            // 将时间戳转化为年-月-日
            getTime(time) {
                let date = new Date(time * 1000);
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let day = ("0" + date.getDate()).slice(-2);
                return `${year}/${month}/${day}`;
            },
            // 将时间戳转化为年-月-日
            getDate(time) {
                let date = new Date(time);
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let day = ("0" + date.getDate()).slice(-2);
                return `${year}/${month}/${day}`;
            },
            handleCurrentChange(row) {
                this.trade_id = row.id;
            },
            // 添加挂单
            addOrder() {
                if (!this.trade_id) {
                    return this.$message('请选择买单');
                }
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios({
                            url: 'https://mc.0xplayer.one/api/tradedetail/add',
                            method: 'post',
                            data: {
                                wallet_id: this.wallet,
                                trade_id: this.trade,
                                type: this.form.type,
                                ETH: this.form.ETH,
                                orderprice: this.form.orderprice,
                                ordernum: this.form.ordernum,
                                orderexpiry_time: this.form.orderexpiry_time
                            }
                        }).then((res) => {
                            console.log(res)
                            if (res.data.code === 1) {
                                this.getData()
                                this.$message.success('添加成功')
                                this.trade_id = ''
                                this.dialogFormVisible = false
                            } else {
                                this.$message.error(res.data.msg)
                            }

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
        },
        created() {
            this.getCellAndBuy()
            this.getData()
        }
    })
</script>

</html>