<template>
    <div id="index" ref="appRef">
        <div class="bg">
             <!-- <div class="bg" :style="{
      backgroundImage:
        'url(' + require(`../../../assets/${backgroundPic.index}.png`) + ')',
    }"> -->
          <iframe src="/wisdom/wisdomMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
          <!-- <div class="body-left"></div>
      <div class="body-right"></div>
      <div class="body-bottom"></div> -->
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body" id="wis">
                <headerIndex :cdata="{ title: '智慧工地', margin: '26px auto' }" style="position: relative"/>
                <div class="main"  style="margin-top:-100px">
                    <div class="left">
                        <BasicBox title="人员信息概览" :dataSource="false">
                            <template slot="top">
                                <div class="left_frist" v-for="i in 2" :key="i">
                                    <div class="left_frist_title">人员情况</div>
                                    <div class="main">
                                        <div class="list" v-for="(item, index) in 1 === 0 ? [
                                        { name: '工地总人数', count: 137 },
                                        { name: '管理人员数量', count: 10 },
                                        { name: '在场管理人员', count: 137 },] :
                                        [{ name: '正常考勤人数', count: 137 },
                                        { name: '实际考勤人数', count: 137 },
                                        { name: '异常考勤人数', count: 0},]" :key="index">
                                            <div class="image">{{ item.count }}</div>
                                            <div class="text">{{ item.name }}</div>
                                        </div>
                                    </div>
                                </div>

                            </template>

                        </BasicBox>

                        <BasicBox title="日常管理" :dataSource="false">
                            <template slot="top">
                                <div>
                                    <div class="daily">
                                        <label>安全宣传</label>
                                        <label>巡防检查</label>
                                        <label class="on">违规作业</label>
                                    </div>
                                </div>
                                <CustomDvScrollBoard :config="dailyConfig"
                                    :style="{ height: '150px', padding: '10px' }"></CustomDvScrollBoard>

                            </template>
                        </BasicBox>

                        <BasicBox title="疫情防控" :dataSource="false">
                            <template slot="top">
                                <div class="yqTop">
                                    <div class="yqTop_main">
                                        <img :src="require('@/assets/wisdom2/enter.png')" />
                                        <div class="yqTop_right">
                                            <span>18</span>
                                            <p>进入人数</p>
                                        </div>
                                    </div>
                                    <div class="yqTop_main">
                                        <img :src="require('@/assets/wisdom2/exit.png')" />
                                        <div class="yqTop_right">
                                            <span>43</span>
                                            <p>进去人数</p>
                                        </div>
                                    </div>
                                </div>
                                <CustomDvScrollBoard :config="yqConfig" :style="{ height: '150px', padding: '10px' }">
                                </CustomDvScrollBoard>
                            </template>
                        </BasicBox>


                    </div>

                    <div class="right">

                        <BasicBox title="智慧用电" :dataSource="false">
                            <template slot="top">
                                <div class="electric">
                                    <div>
                                        <div class="f1">
                                            <span>375</span>
                                        </div>
                                        <p>生活用大功率用电设备数量</p>

                                    </div>
                                    <div>
                                        <div class="f1 r">
                                            <span>524</span>
                                        </div>
                                        <p>建设用大功率用电设备数量</p>
                                    </div>
                                </div>
                                <div class="h2">生活用电实时功率曲线</div>
                                <Chart1 type="0"></Chart1>
                                <div class="h2">生活用电实时功率曲线</div>
                                <Chart1 type="1"></Chart1>
                            </template>
                        </BasicBox>
                        <BasicBox title="设备运行情况" :dataSource="false">
                            <template slot="top">
                                <div class="yqTop">
                                    <div class="yqTop_main">
                                        <img :src="require('@/assets/wisdom2/camera.png')" />
                                        <div class="yqTop_right">
                                            <span>26</span>
                                            <p>摄像头数量</p>
                                        </div>
                                    </div>
                                    <div class="yqTop_main">
                                        <img :src="require('@/assets/wisdom2/sensor.png')" />
                                        <div class="yqTop_right">
                                            <span>30</span>
                                            <p>传感器数量</p>
                                        </div>
                                    </div>
                                </div>
                                <CustomDvScrollBoard :config="cameraConfig"
                                    :style="{ height: '150px', padding: '10px' }">
                                </CustomDvScrollBoard>
                            </template>
                        </BasicBox>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import headerIndex from "@/components/layout/header";
import BasicBox from "@/components/BasicBox"
import CustomDvScrollBoard from "@/components/customDvScrollBoard"
import Chart1 from "./chart1.vue"

// import { url } from "inspector";

export default {
    mixins: [drawMixin],

    data() {
        return {
            backgroundPic: {
                index: "wisdom/bg",
            },
            loading: false,
            imgList: [
                { imgUrl: require("@/assets/wisdom/construct_amount.png"), count: 36, title: "工地数量" },
                { imgUrl: require("@/assets/wisdom/land_amount.png"), count: 15250.5, title: "涉及宗地数量" },
                { imgUrl: require("@/assets/wisdom/construct_area.png"), count: 5233665, title: "施工总面积" },
                { imgUrl: require("@/assets/wisdom/land_area.png"), count: 84585.2, title: "涉及宗地面积" },
            ],
            dailyConfig: {
                header: ['时间', '地点', '违规人', '违规信息', '抓拍图片'],
                rowNum: 4,
                data:
                    new Array(4).fill(['ID345633', '150000', '办公楼', '45000000', '建设阶段']),
                columnWidth: [50],
            },
            yqConfig: {
                index: false,
                header: ['进入时间', '姓名', '健康码', '行程码', '异常信息'],
                rowNum: 4,
                columnWidth: [100],
                data: [
                    ['2022-06-07', '王明', '绿色', '南京市', '无'],
                    ['2022-06-07', '杨凯', '绿色', '南京市', '无'],
                    ['2022-06-07', '宋敏鸿', '绿色', '南京市', '无'],
                    ['2022-06-07', '龚文博', '绿色', '南京市', '无'],
                ]
            },
            cameraConfig: {
                index: false,
                header: ['设备名称', '设备编号', '设备位置', '运行情况'],
                rowNum: 4,
                columnWidth: [100],
                data: [
                    ['视频监控', '4578', '3F11', '正常'],
                    ['塔吊监控', '4578', '3F11', '正常'],
                    ['环境监测', '4578', '3F11', '正常'],
                    ['蓝牙人员定位', '4578', '3F11', '正常'],
                ]
            },

        };
    },
    components: {
        headerIndex,
        BasicBox,
        CustomDvScrollBoard, Chart1
    },
    mounted() {
        this.cancelLoading();
    },
    beforeDestroy() {
        clearInterval(this.timing);
    },
    methods: {
        cancelLoading() {
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },
    },
};
</script>
<style lang="scss">
@import "~@/common/var.scss";
.body-left{
    background: url('~@/assets/left.png') no-repeat!important;
}
.body-right{
    background: url('~@/assets/right.png') no-repeat!important;
}

.body-bottom{
    background: url('~@/assets/down.png') no-repeat!important;
}
#wis {
    .dv-scroll-board .rows .ceil {
        color: $default-font-color  !important;
        text-align: center
    }
}
</style>

<style lang="scss" scoped>
@import "~@/common/var.scss";


.daily {
    text-align: center;



    label {
        padding: 5px 15px;
        background: $table-header-bg;
        color: $table-header-color;
        margin: 0 1px;

        &.on {
            background: #226883;
            color: $default-font-color;
        }
    }
}

.right {
    width: 21.5%;
    right: 2%;
    position: absolute;
}

.h2 {
    padding-left: 50px;
    position: relative;
    font-size: 20px;
    margin: 10px 0;

    &::before {
        width: 11px;
        height: 11px;
        content: " ";
        display: inline-block;
        position: absolute;
        background: url("~@/assets/wisdom2/square.png") no-repeat center;
        left: 30px;
        /* line-height: 100%; */
        top: 4px;

    }
}

.main {
    color: $default-font-color;
    display: flex;
    justify-content: space-between;

    .electric {
        display: flex;
        justify-content: space-around;


        p {
            padding: 10px 0;
        }

        .f1 {
            height: 99px;
            width: 98px;
            background: url("~@/assets/wisdom2/panel-green.png") no-repeat center;
            position: relative;
            margin: 0 auto;



            &.r {

                background: url("~@/assets/wisdom2/panel-blue.png") no-repeat center;

            }

            span {
                position: absolute;
                left: 35px;
                top: 40px;
                font-weight: bolder;

            }

        }
    }

    .yqTop {
        padding: 10px 60px 0 60px;
        display: flex;


        &_main {
            width: 50%;
            display: flex;

        }

        &_right {
            flex: 1;
            text-align: center;
            display: inline-block;
            padding: 0 30px;

            span {
                color: #fff;
                font-weight: bold;
                font-size: 20px;

            }

            p {
                border-top: 2px solid #114869;
                padding-top: 5px;
                color: $table-header-color;
            }


        }

        img {
            display: inline-block;
            vertical-align: middle;
            width: 50px;
            height: 50px;
            margin-top: 8px;
        }
    }

    .left {
        width: 21.5%;
    left: 2%;
    position: absolute;


        &_frist {
            padding-left: 15px;
            margin-bottom: 15px;


            &_title {
                color: $default-font-color;
                background: url("~@/assets/rect-bg.png") no-repeat center;
            }

            .main {
                display: flex;
                justify-content: space-between;
                text-align: center;
                padding: 0 20px;

                .list {
                    &:nth-child(1) {
                        color: #01FFB0;
                    }

                    &:nth-child(2) {
                        color: #00DFFC
                    }

                    &:nth-child(3) {
                        color: #FAB002
                    }
                }

                .image {
                    margin: 8px auto;
                    width: 62px;
                    height: 73px;
                    line-height: 73px;
                    font-size: 26px;
                    font-weight: bold;
                    background: url("~@/assets/wisdom2/panel-number.png") no-repeat center;
                }

                .text {
                    height: 30px;
                    line-height: 30px;
                    color: #fff;
                    background: url("~@/assets/wisdom2/text-bottom.png") no-repeat bottom;
                }
            }
        }
    }
}

// .bg {
//     background-image: url("~@/assets/wisdom2/bg.png") !important
// }

@import "~@/assets/scss/index.scss";
</style>
