sis_zhfx/src/views/SandTable/SandTable.vue

<template>
    <div class="sand-table">
        <img :src="require('@assets/png/3dback.png')" class="i3dback">
        <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud">
        <StBack></StBack>
        <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
        <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="等级评估">
                <RankTable :data="levelTableData"></RankTable>
            </PanelSand>
            <PanelSand class="left-panel mg-t-16" title="等级评估">
                <RankTable :data="levelTableData"></RankTable>
            </PanelSand>
            <PanelSandToolbar class="left-panel mg-t-16" title="部件">
                <template v-slot:tools>
                    <div class="exchange" @click="exchange1">
                        <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
                        <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
                    </div>
                </template>
                <template v-slot:default>
                    <RadarPieChart height="20.6vh" />
                </template>
            </PanelSandToolbar>
        </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 class="sand-table-bottom" v-if="showPanel">
            <Ppanel title="利用小时"></Ppanel>
            <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
            <Ppanel title="MTBF" class="stb-p"></Ppanel>
            <Ppanel title="MTTR" class="stb-p"></Ppanel>
            <Ppanel title="MTTF" class="stb-p"></Ppanel>
        </div>
    </div>
</template>

<script>
import ThreeModel1 from "./component/ThreeModel1.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 StBack from "./component/st-back.vue";
import Table from "@com/coms/table/table.vue";
import RankTable from "./component/rank-table.vue";
import Ppanel from "./component/p-panel.vue";
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";

export default {
    // 名称
    name: "SandTable",
    // 使用组件
    components: {
        ThreeModel1,
        PanelSand,
        PanelSandToolbar,
        Weather,
        Table,
        RadarPieChart,
        StBack,
        RankTable,
        Ppanel,
    },
    // 数据
    data() {
        return {
            videoShow: true,
            showPanel: false,
            exchangeBtn: false,
            exchangeBtn1: 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,
                    },
                ],
            },
            levelTableData: {
                column: [{
                    name: "编号",
                    field: "no",
                },{
                    name: "等级",
                    field: "level",
                },{
                    name: "分数",
                    field: "score",
                }],
                data: [{
                    no: "MHS_A01",
                    level: "AAA",
                    score: 98,
                },{
                    no: "MHS_A02",
                    level: "AAA",
                    score: 95,
                },{
                    no: "MHS_A01",
                    level: "AA",
                    score: 94,
                },{
                    no: "MHS_A02",
                    level: "BB",
                    score: 92,
                },{
                    no: "MHS_A01",
                    level: "BB",
                    score: 90,
                }],
            },
        };
    },
    // 函数
    methods: {
        when: function() {
            this.showPanel = true;
        },
        exchange: function () {
            this.exchangeBtn = !this.exchangeBtn;
        },
        exchange1: function () {
            this.exchangeBtn1 = !this.exchangeBtn1;
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

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

    .i3dback {
        position: fixed;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
    }

    .i3dcloud {
        position: absolute;
        z-index: 2;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
    }

    .left-panel {
        width: 360px;
    }

    .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;
    }

    .sand-table-bottom {
        position: absolute;
        right: calc(50vw - 50.463vh);
        bottom: 0;
        z-index: 2;
        display: flex;

        .stb-p {
            margin-left: 0.926vh;
        }
    }

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

    .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>