gis_bridge_project/src/views/index.vue

<template>
    <section class="hc-container relative h-full flex flex-col">
        <header class="hc-header relative h-[70px]">
            <div class="gis-header">
                <div class="header_left" />
                <div class="header_center">
                    <div class="title">长寿区国道G243长寿长江大桥危桥改造工程</div>
                    <div class="time">
                        <span>{{ headerDate }}</span>
                        <span class="ml-3">{{ headerTime }}</span>
                    </div>
                </div>
                <div class="header_right" />
            </div>
        </header>
        <main class="hc-main relative">
            <div class="main-left w-[66%]">
                <div class="content flex-1">
                    <div class="hc-border-1" />
                    <div class="hc-border-2" />
                    <iframe src="http://3d.hczcxx.cn/" hc-border="0" name="iframe3d" class="relative h-full w-full cursor-pointer" />
                    <div class="text-content">
                        <div class="title">施工换索进度</div>
                        <div class="scroll-bar">
                            <div class="number-box">
                                <div class="name">总换索量</div>
                                <number-card value="34" />
                            </div>
                            <div class="number-box">
                                <div class="name letter">已换</div>
                                <number-card value="0" />
                            </div>
                            <div class="number-box">
                                <div class="name letter">未换</div>
                                <number-card value="0" />
                            </div>
                        </div>
                    </div>
                    <div v-if="isDataContent" v-click-outside="onClickOutside" class="data-content">
                        <div class="close-icon" @click="onClickOutside">
                            <i class="i-solar-close-circle-linear" />
                        </div>
                        <div class="data-item">
                            <div class="name">部位名称：</div>
                            <div class="text">上部结构工程（B2)/斜拉桥换索/拉索XBJ-2</div>
                        </div>
                        <div class="data-item">开工日期：2023/10/23</div>
                        <div class="data-item">检验日期：2023/11/23</div>
                        <div class="data-item">
                            <div class="name">签字审批人：</div>
                            <div class="text">刘三 ---> 张立 ---> xxx</div>
                        </div>
                        <div class="data-item">
                            <div class="name">质检资料：</div>
                            <div class="text text-hover text-blue" @click="pdfClick">5c4fba79.pdf</div>
                        </div>
                    </div>
                </div>
                <div class="bottom h-[320px]">
                    <div class="hc-border-1" />
                    <div class="hc-border-2" />
                    <div class="content h-full">
                        <!-- <div class="title text-center">内外业进度对比</div>
                        <hc-progress name="内业资料" value="1" color="1" />
                        <hc-progress name="外业施工" value="12" color="2" /> -->
                        <h-table :table-data="tableData" /> 
                    </div>
                </div>
            </div>
            <div class="main-right w-[34%]">
                <div class="hc-border-1" />
                <div class="hc-border-2" />
                <div class="content h-full">
                    <!-- <div class="title text-center">监控视频</div> -->
                    <div class="video-content">
                        <div v-for="item in 8" :key="item" class="video-item">
                            <video playsinline controls src="https://cdn.modao.cc/Default_video.mp4" class="h-full w-full" />
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </section>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
import dayjs from 'dayjs'

onMounted(() => {
    getDateTime()

    window.addEventListener('message', ({ data }) => {
        // isDataContent.value = !!data.data
       
        if (!data.data) {
            tableData.value = [
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
            { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
            ]
        } else {
            tableData.value = [{ name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true }]
        }
   
    })
  
})

//实时日期时间
const headerDate = ref(dayjs().format('YYYY年MM月DD日'))
const headerTime = ref(dayjs().format('HH:mm:ss'))
const getDateTime = () => {
    setInterval(() => {
        headerDate.value = dayjs().format('YYYY年MM月DD日')
        headerTime.value = dayjs().format('HH:mm:ss')
    }, 1000)
}

//是否显示数据内容
const isDataContent = ref(false)

const onClickOutside = () => {
    isDataContent.value = false
  
}

//pdf点击
const pdfClick = () => {
    window.open('https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231010/317426386a5f3b6144a9649e5c4fba79.pdf', '_blank')
}
const tableData = ref([
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:true },
    { name:'基础及下部构造/0#桥墩 (台) /扩大基础', date1:'2023/10/10', date2:'2023/10/10', isWarn:false },


])
</script>

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