data_visual/src/views/home/components/index.vue

<template>
    <div class="row_tab">
        <div class="row_monitors">
            <div class="col">
                <div class="item" :class="tab_key === '1' ? 'select' : ''" @click="tabTap('1')">
                    <span>位移</span>
                </div>
            </div>
            <div class="col">
                <div class="item" :class="tab_key === '2' ? 'select' : ''" @click="tabTap('2')">
                    <span>温度</span>
                </div>
            </div>
            <div class="col">
                <div class="item" :class="tab_key === '3' ? 'select' : ''" @click="tabTap('3')">
                    <span>应变</span>
                </div>
            </div>
        </div>
        <div class="search-form">
            <div class="form-type">
                <el-select v-model="typeId">
                    <el-option label="类型名称1" value="1" />
                    <el-option label="类型名称2" value="2" />
                </el-select>
            </div>
            <div class="form-date">
                <el-date-picker v-model="dateTime" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
            </div>
        </div>
    </div>
    <div class="row_data_statistics">
        <div class="statistics_item_container" style="padding-right: 8px;">
            <div class="statistics_item blue">
                <div class="left_text">
                    <div class="number">暂无</div>
                    <div class="text">本周最大值</div>
                </div>
                <div class="divider" />
                <div class="right_text">
                    <div>环比上周：暂无</div>
                    <div>监测时间：暂无</div>
                </div>
            </div>
        </div>
        <div class="statistics_item_container" style="padding-left: 8px;">
            <div class="statistics_item purple">
                <div class="left_text">
                    <div class="number">暂无</div>
                    <div class="text">本周平均值</div>
                </div>
                <div class="divider" />
                <div class="right_text">
                    <div>环比上周：暂无</div>
                    <div>最大变幅：暂无</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row_radio_group">
        <el-radio-group v-model="change_type" size="large">
            <el-radio label="echarts">图表</el-radio>
            <el-radio label="table">表格</el-radio>
        </el-radio-group>
    </div>
    <div class="data_container">
        <baseEcharts v-if="change_type === 'echarts'" />
        <template v-if="change_type === 'table'">
            <div class="data_table_box">
                <el-table :data="tableData" height="100%" style="width: 100%">
                    <el-table-column prop="key1" label="检测时间" />
                    <el-table-column prop="key2" label="传感器名称" />
                    <el-table-column prop="key3" label="原始值" />
                    <el-table-column prop="key4" label="检测值" />
                    <el-table-column prop="key5" label="报警信息" />
                </el-table>
            </div>
            <div class="data_page_box">
                <el-pagination background layout="total, prev, pager, next" :total="1000" :page-size="30" />
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import baseEcharts from './echarts.vue'

//选项卡
const tab_key = ref('1')
const tabTap = (val) => {
    tab_key.value = val
}

//类型
const typeId = ref('1')
const dateTime = ref(null)
const change_type = ref('echarts')

const tableData = [
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
]
</script>

<style lang="scss">
@import "./style";
</style>