fd_dwgz_zhyw_nx/src/views/SandTable/SandTable_old1.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">
            <div class="com-panel-sand">
                <div class="com-panel-sand-header font-sm white">
                    <div class="sand-time">{{sandTime}}</div>
                    <div class="sand-date mg-b-8">{{sandDate}}</div>
                </div>
                <div class="com-panel-body">
                    <div class="weather-box">
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-天气1" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">天气</div>
                                <div class="font-lg green">多云转晴</div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-温度1" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">温度</div>
                                <div>
                                    <span class="font-lg green">26</span>
                                    <span class="font-sm white mg-l-8">℃</span>
                                </div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-风速" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">风向</div>
                                <div>
                                    <span class="font-lg green">4-5</span>
                                    <span class="font-sm white mg-l-8">级 西北风</span>
                                </div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-能见度" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">能见度</div>
                                <div>
                                    <span class="font-lg green">20</span>
                                    <span class="font-sm white mg-l-8">KM</span>
                                </div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-湿度1" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">湿度</div>
                                <div>
                                    <span class="font-lg green">75.0</span>
                                    <span class="font-sm white mg-l-8">%</span>
                                </div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-气压1" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">气压</div>
                                <div>
                                    <span class="font-lg green">994</span>
                                    <span class="font-sm white mg-l-8">kPa</span>
                                </div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-日出1" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">日出时间</div>
                                <div class="font-lg green">04:36</div>
                            </div>
                        </div>
                        <div class="weather-item">
                            <div class="weather-icon">
                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
                                    <svg-icon svgid="svg-日落1" />
                                </div>
                            </div>
                            <div class="weather-info">
                                <div class="font-sm white">日落时间</div>
                                <div class="font-lg green">18:50</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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">
            <div class="stb-chart-panel">
                <PercentCard2></PercentCard2>
            </div>
            <div class="stb-chart-panel">
                <PercentCard2 title="年计划完成率"></PercentCard2>
            </div>
            <div class="stb-count-panel">
                <div class="stb-count-panel-icon">日</div>
                <div class="stb-count-panel-info mg-l-16">
                    <div class="white font-sm">今日预测发电量</div>
                    <div class="mg-t-8">
                        <span class="green font-num font-lg">994.76</span>
                        <span class="white font-sm mg-l-8">kWh</span>
                    </div>
                </div>
            </div>
            <div class="stb-count-panel">
                <div class="stb-count-panel-icon">月</div>
                <div class="stb-count-panel-info mg-l-16">
                    <div class="white font-sm">月预测发电量</div>
                    <div class="mg-t-8">
                        <span class="green font-num font-lg">994.76</span>
                        <span class="white font-sm mg-l-8">kWh</span>
                    </div>
                </div>
            </div>
            <div class="stb-count-panel">
                <div class="stb-count-panel-icon">
                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
                        <svg-icon svgid="svg-风速" />
                    </div>
                </div>
                <div class="stb-count-panel-info mg-l-16">
                    <div class="white font-sm">风速</div>
                    <div class="mg-t-8">
                        <span class="green font-num font-lg">994.76</span>
                        <span class="white font-sm mg-l-8">kWh</span>
                    </div>
                </div>
            </div>
            <div class="stb-count-panel">
                <div class="stb-count-panel-icon">
                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
                        <svg-icon svgid="svg-功率" />
                    </div>
                </div>
                <div class="stb-count-panel-info mg-l-16">
                    <div class="white font-sm">功率</div>
                    <div class="mg-t-8">
                        <span class="green font-num font-lg">994.76</span>
                        <span class="white font-sm mg-l-8">kWh</span>
                    </div>
                </div>
            </div>
        </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 StBack from "./component/st-back.vue";
import Table from "@com/coms/table/table.vue";
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import PercentCard2 from "@com/coms/cards/percent-card-2.0.1.vue";

export default {
    // 名称
    name: "SandTable",
    // 使用组件
    components: {
        ThreeModel1,
        PanelSand,
        PanelSandToolbar,
        Table,
        RadarPieChart,
        StBack,
        SvgIcon,
        PercentCard2,
    },
    // 数据
    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,
                    },
                ],
            },
            sandTime: "00:00:00",
            sandDate: "0000年00月00日 星期日",
        };
    },
    // 函数
    methods: {
        when: function() {
            this.showPanel = true;
        },
        exchange: function () {
            this.exchangeBtn = !this.exchangeBtn;
        },
        initDateTime: function () {
            const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            const setDateTime = () => {
                let myDate = new Date();
                let year = myDate.getFullYear();
                let month = myDate.getMonth() + 1;
                month = month < 10 ? `0${month}` : month;
                let day = myDate.getDate();
                day = day < 10 ? `0${day}` : day;
                let xq = days[myDate.getDay()];
                let hour = myDate.getHours();
                let minute = myDate.getMinutes();
                minute = minute < 10 ? `0${minute}` : minute;
                let second = myDate.getSeconds();
                second = second < 10 ? `0${second}` : second;
                this.sandTime = `${hour}:${minute}:${second}`;
                this.sandDate = `${year}年${month}月${day}日 ${xq}`;
                window.requestAnimationFrame(setDateTime);
            };
            setDateTime();
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
        this.initDateTime();
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

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

    .com-panel-sand {
        background: #53626826;
        padding: 0 1.481vh 1.481vh 1.481vh;
        border-top: 1px solid #15a952;
        position: relative;
        // width: 18.519vh;

        &::after {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            background: #15a952;
            right: -2.5px;
            top: -2.5px;
        }

        .com-panel-sand-header {
            text-align: left;
            position: relative;
            padding: 0.833vh 0;
            border-bottom: 1px solid #15a95266;

            .sand-time {
                color: #15A952;
                font-weight: 400;
                font-size: 24px;
            }

            .sand-date {
                font-size: 12px;
                font-weight: 400;
                color: #FFFFFF;
            }

            &::after,
            &::before {
                content: "";
                position: absolute;
                bottom: -1px;
                width: 15px;
                height: 1px;
                background: #15a952;
            }

            &::after {
                left: 0;
            }

            &::before {
                right: 0;
            }

            .com-panel-sand-sub-title {
                position: absolute;
                right: 0;
                top: 0.833vh;
            }
        }

        .weather-box {
            .weather-item {
                display: flex;
                align-items: center;
                margin-top: 16px;

                .weather-icon {
                    margin-right: 12px;
                }
            }
        }
    }

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

    .sand-table-bottom {
        position: absolute;
        left: 18vh;
        bottom: 0;
        z-index: 2;
        display: flex;

        .stb-chart-panel {
            background: #53626826;
            margin-right: 4px;
            padding: 0 16px;
            height: 64px;
        }

        .stb-count-panel {
            margin: 0 16px;
            display: flex;
            height: 64px;
            align-items: center;

            .stb-count-panel-icon {
                width: 37px;
                height: 37px;
                background: #5362684D;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #94A4AB;

                &::after,
                &::before {
                    content: '';
                    position: absolute;
                    width: 3px;
                    height: 3px;
                    background: #15A952;
                    top: 17px;
                }

                &::after {
                    left: -3px;
                }

                &::before {
                    right: -3px;
                }
            }
        }
    }

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