sis_zhfx/src/views/SandTable/SandTable.vue

<template>
    <div class="sand-table">
        <ThreeModel class="three-model-layer" @when="when"></ThreeModel>
        <div class="sand-table-left" v-if="showPanel">
            <PanelSand class="left-panel" title="板块标题" subTitle="AM10:52  实况">
                <weather class="pd-t-16" />
            </PanelSand>
            <PanelSand class="left-panel mg-t-16" title="板块标题">
                <div class="pd-t-16">
                    <list-bar-chart-2 :list="ForecastPower" height="8vh" />
                </div>
            </PanelSand>
            <PanelSand class="left-panel mg-t-16" title="板块标题">
                <div class="pd-t-16">
                    <div class="fdl-title">
                        <i class="fa fa-bolt green font-md mg-r-8"></i>
                        <span class="green font-md mg-r-16">发电量</span>
                        <span class="white font-num font-lg mg-r-8">2834.9</span>
                        <span class="white font-sm">亿元</span>
                    </div>
                    <power-plan />
                </div>
            </PanelSand>
            <PanelSand class="left-panel mg-t-16" title="板块标题">
                <power-review />
            </PanelSand>
        </div>
        <div class="sand-table-right" v-if="showPanel">
            <PanelSand class="right-panel" title="板块标题">
                <el-row>
                    <el-col :span="12" class="pre-img-box">
                        <img v-if="!videoShow" class="pre-img" :src="require('@assets/png/p1.jpg')" />
                        <video v-if="videoShow" class="pre-img" width="179" height="100" controls>
                            <source :src="require('@assets/png/p.mp4')" type="video/mp4">
                            您的浏览器不支持 video 标签。
                        </video>
                    </el-col>
                    <el-col :span="12" class="pre-img-box">
                        <img class="pre-img" :src="require('@assets/png/p2.jpg')" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="pre-img-box">
                        <img class="pre-img" :src="require('@assets/png/p3.jpg')" />
                    </el-col>
                    <el-col :span="12" class="pre-img-box">
                        <img class="pre-img" :src="require('@assets/png/p4.jpg')" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="pre-img-box">
                        <img class="pre-img" :src="require('@assets/png/p5.jpg')" />
                    </el-col>
                    <el-col :span="12" class="pre-img-box">
                        <img class="pre-img" :src="require('@assets/png/p6.jpg')" />
                    </el-col>
                </el-row>
            </PanelSand>
            <PanelSand class="right-panel mg-t-16" title="板块标题">
                <div class="person-info-box mg-t-16">
                    <img class="header mg-r-8 bg-green" :src="require('@assets/logo.png')" />
                    <div class="person-info">
                        <div class="green font-lg" style="font-weight: bold;">张三</div>
                        <div class="white font-sm">
                            <span>职务：高级检修工</span>
                            <span class="mg-l-16">当前任务编号 000000</span>
                        </div>
                        <div class="white font-sm">平均检修时间 <span class="green">5</span> 小时</div>
                    </div>
                </div>
                <div class="table mg-t-8">
                    <Table :data="tableData" />
                </div>
            </PanelSand>
            <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
                <template v-slot:tools>
                    <div class="exchange" @click="exchange">
                        <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
                        <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
                    </div>
                </template>
                <template v-slot:default>
                    <RadarPieChart height="21vh" />
                </template>
            </PanelSandToolbar>
        </div>
    </div>
</template>

<script>
import ThreeModel from "./component/ThreeModel.vue";
import PanelSand from "@com/coms/panel/panel-sand.vue";
import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
import Weather from "./component/weather.vue";
import ListBarChart2 from "@com/chart/bar/list-bar-chart2.vue";
import PowerPlan from "./component/power-plan.vue";
import PowerReview from "./component/power-review.vue";
import Table from "@com/coms/table/table.vue";
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";

export default {
    // 名称
    name: "SandTable",
    // 使用组件
    components: {
        ThreeModel,
        PanelSand,
        PanelSandToolbar,
        Weather,
        ListBarChart2,
        PowerPlan,
        PowerReview,
        Table,
        RadarPieChart,
    },
    // 数据
    data() {
        return {
            videoShow: true,
            showPanel: false,
            exchangeBtn: false,
            ForecastPower: [
                {
                    name: "今日预测电量",
                    value: 103.62,
                    total: 150,
                },
                {
                    name: "月预测发电量",
                    value: 98.62,
                    total: 100,
                },
            ],
            tableData: {
                column: [
                    {
                        name: "标题",
                        field: "v1",
                        is_num: false,
                        is_light: false,
                    },
                    {
                        name: "标题",
                        field: "v2",
                        is_num: false,
                        is_light: false,
                    },
                    {
                        name: "标题",
                        field: "v3",
                        width: "150px",
                        is_num: false,
                        is_light: false,
                    },
                    {
                        name: "标题",
                        field: "v4",
                        is_num: false,
                        is_light: false,
                    },
                ],
                data: [
                    {
                        v1: "内容内容",
                        v2: "内容内容",
                        v3: "内容内容内容内容内容",
                        v4: "内容内容",
                        is_light: false,
                    },
                    {
                        v1: "内容内容",
                        v2: "内容内容",
                        v3: "内容内容内容内容内容",
                        v4: "内容内容",
                        is_light: false,
                    },
                    {
                        v1: "内容内容",
                        v2: "内容内容",
                        v3: "内容内容内容内容内容",
                        v4: "内容内容",
                        is_light: false,
                    },

                    {
                        v1: "内容内容",
                        v2: "内容内容",
                        v3: "内容内容内容内容内容",
                        v4: "内容内容",
                        is_light: false,
                    },
                ],
            },
        };
    },
    // 函数
    methods: {
        when: function() {
            this.showPanel = true;
        },
        exchange: function () {
            this.exchangeBtn = !this.exchangeBtn;
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less">
.sand-table {
    width: 100%;
    height: 91.667vh;
    position: relative;

    .left-panel {
        width: 36.852vh;
    }

    .right-panel {
        width: 36.852vh;
    }

    .three-model-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .sand-table-left {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }

    .sand-table-right {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
    }

    .pre-img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.556vh;
        padding: 0;
        
        .pre-img {
            width: 98%;
        }
    }

    .person-info-box {
        display: flex;

        .header {
            width: 75px;
        }
    }

    .table {
        width: calc(100% + 2.963vh);
        margin-left: -1.481vh;
        margin-bottom: -1.481vh;

        .com-table thead tr th,
        .com-table tr td {
            padding: 0.556vh 0;
        }
    }

    .exchange {
        cursor: pointer;
    }
}
</style>