<template>
    <div class="default-main">
        <TableHeader area date-picker ref="header">

        </TableHeader>
        <div v-loading="tableStore.table.loading" class="pr10">
            <el-row>
                <el-col :span="12">
                    <MyEchartMap ref="EchartMap" :options="echartMapList" class="map"
                        @getRegionByRegion="getRegionByRegion" />
                </el-col>
                <el-col :span="12">
                    <my-echart class="tall" :options="echartList" />

                </el-col>
            </el-row>
        </div>
        <el-carousel :interval="6000" :autoplay="action" type="card" class="boxDiv" @change="carouselChange"
            style="width: 700px; font-size: 12px; left: 50px; margin-bottom: 10px" height="40px">
            <el-button type="primary" @click="stopFucarous" class="primary" :icon="icon" circle style="z-index: 9999;    height: 40px;
    width: 40px; position: relative;"></el-button>
            <el-carousel-item v-for="item in XList" :key="item">
                <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>


    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableStore from '@/utils/tableStore'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
import * as echarts from 'echarts/core'
import { getEnterpriseSteadyQualify, getSteadyQualifyCensus, IntegrityIcon, getTHDistortionCensus } from '@/api/harmonic-boot/monitoring';
defineOptions({
    name: 'harmonic-boot/views'
})
const EchartMap = ref()
const dictData = useDictData()
const echartMapList: any = ref({})
const echartList = ref({})
const header = ref()
const action: any = ref(true)
const mapList: any = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}])
const listcard: any = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}])
const itemStyle = ref({
    normal: {
        // 随机显示

        // 定制显示（按顺序）
        color: function (params) {
            if (params.value >= 90) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#339966',
                        }
                    ],
                    false
                )
            } else if (params.value >= 60 && params.value <= 90) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#FFCC33',
                        }
                    ],
                    false
                )
            } else if (params.value <= 60 && params.value !== 3.14159) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#A52a2a',
                        }
                    ],
                    false
                )
            } else if (params.value == 3.14159) {
                return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                        {
                            offset: 1,
                            color: '#cccccc'
                        }
                    ],
                    false
                )
            }
        }
    }
})
const markLine = ref({
    silent: false,
    symbol: 'circle',
    data: [
        {
            name: '',
            xAxis: 100,
            lineStyle: {
                color: '#339966',
            },
            label: {
                // position: "middle",
                formatter: '{b}',
                textStyle: {
                    color: '#339966',
                }
            }
        },
        {
            name: '',
            xAxis: 90,
            lineStyle: {
                color: '#FFCC33',
            },
            label: {
                // position: "middle",
                formatter: '{b}',
                textStyle: {
                    color: '#FFCC33',
                }
            }
        },
        {
            name: '',
            xAxis: 60,
            lineStyle: {
                color: '#A52a2a',
            },
            label: {
                // position: "middle",
                formatter: '{b}',
                textStyle: {
                    color: '#A52a2a',
                }
            }
        }
    ]
})
const mapName = ref('')
const type = JSON.parse(window.localStorage.getItem('sysdata') as string).type
const icon: any = ref('el-icon-VideoPause')
const XList = ['合格率', '完整性', '畸变率', '在线率', '暂降', '综合评估', '污区图', '谐波统计']
const tableStore = new TableStore({
    url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
    method: 'POST',
    column: [],
    beforeSearchFun: () => { },
    loadCallback: async () => {

        mapName.value = header.value.areaRef.areaName
        if (type == 1) {
            tableStore.table.params.statisticalType = {}
            getEnterpriseSteadyQualify(tableStore.table.params).then((res: any) => {
                res.data.forEach(item => {
                    item.data =
                        (item.flicker +
                            item.freqOffset +
                            item.harmonicCurrent +
                            item.harmonicVoltage +
                            item.interHarmonic +
                            item.negativeCurrent +
                            item.voltageOffset +
                            item.voltageUnbalance) /
                        8
                    item.children.forEach(val => {
                        val.data =
                            (val.flicker +
                                val.freqOffset +
                                val.harmonicCurrent +
                                val.harmonicVoltage +
                                val.interHarmonic +
                                val.negativeCurrent +
                                val.voltageOffset +
                                val.voltageUnbalance) /
                            8
                    })
                })
                listcard.value[0] = res.data
            })

            getSteadyQualifyCensus(tableStore.table.params).then(res => {
                // this.ydata1 = res.data.freqOffset
                // this.ydata2 = res.data.flicker
                // this.ydata3 = res.data.voltageUnbalance
                // this.ydata4 = res.data.harmonicVoltage
                // this.ydata5 = res.data.voltageOffset
                // this.ydata6 = res.data.harmonicCurrent
                // this.ydata7 = res.data.negativeCurrent
                // this.ydata8 = res.data.interHarmonic
                // for (let i = 0; i < res.data.type.length; i++) {
                //     this.mapList[0].push({
                //         name: res.data.type[i].split('\n')[0],
                //         value: res.data.harmonicVoltage[i]
                //     })
                // }
                // this.showCarousel = true

                // this.evaluation(this.mapList[0], '合格率')
                // this.loading = false
            })
            //     // 完整性
            //     getEnterpriseIntegrityData(data1).then(res => {
            //         res.data.forEach(item => {
            //             item.data = item.integrityData

            //             item.children.forEach(val => {
            //                 val.data = val.integrityData
            //             })
            //         })
            //         this.listcard[1] = res.data
            //     })
            //     IntegrityIcon(data).then(res => {
            //         res.data.forEach(item => {
            //             this.mapList[1].push({
            //                 name: item.type.split('\n')[0],
            //                 value: item.single
            //             })
            //         })
            //     })
            //     // 畸变率
            //     getNodeTHDistortionData(data1).then(res => {
            //         res.data.forEach(item => {
            //             item.data = item.distortion
            //             item.children.forEach(val => {
            //                 val.data = val.distortion
            //             })
            //         })
            //         this.listcard[2] = res.data
            //     })
            //     getTHDistortionCensus(data).then(res => {
            //         for (let i = 0; i < res.data.type.length; i++) {
            //             this.mapList[2].push({
            //                 name: res.data.type[i].split('\n')[0],
            //                 value: res.data.single[i]
            //             })
            //         }
            //     })
            //     // 在线率
            //                         .getNodeOnlineRateData({
            //             deptIndex: this.formData.deptIndex,
            //             loadType: dicData('Interference_Source', []),
            //             monitorFlag: 2,
            //             manufacturer: dicData('Dev_Manufacturers', []),
            //             searchBeginTime: this.$refs.interval.timeValue[0],
            //             searchEndTime: this.$refs.interval.timeValue[1],
            //             statisticalType: dicData('Statistical_Type', ['Report_Type'])[0], //dicData("Statistical_Type", ["Report_Type"]),
            //             powerFlag: 2,
            //             serverName: 'harmonicBoot',
            //             scale: dicData('Dev_Voltage_Stand', [])
            //         })
            //         .then(res => {
            //             res.data.forEach(item => {
            //                 item.data = item.onlineRate
            //                 item.children.forEach(val => {
            //                     val.data = val.onlineRate
            //                 })
            //             })
            //             this.listcard[3] = res.data
            //         })
            //     getOnlineRateDataCensus(data).then(res => {
            //         for (let i = 0; i < res.data.type.length; i++) {
            //             this.mapList[3].push({
            //                 name: res.data.type[i].split('\n')[0],
            //                 value: res.data.single[i]
            //             })
            //         }
            //     })
            //     // 暂降
            //     lculation(data).then(res => {
            //         this.listcard[4] = res.data
            //     })
            //     eaData(data).then(res => {
            //         res.data.areaStatistics.areaCalculation.forEach(item => {
            //             this.mapList[4].push({
            //                 name: item.areaName.split('\n')[0],
            //                 value: item.frequency
            //             })
            //         })
            //     })
            //     getComAccessData(data).then(res => {
            //         this.listcard[5] = res.data
            //         res.data.forEach(item => {
            //             this.mapList[5].push({
            //                 name: item.name,
            //                 value: item.data
            //             })
            //         })
            //     })
            //                         .deptSubstationRelations({
            //             deptIndex: this.formData.deptIndex,
            //             id: '',
            //             monitorFlag: 2,
            //             powerFlag: 2,
            //             reportFlag: this.$refs.interval.interval,
            //             searchBeginTime: this.$refs.interval.timeValue[0],
            //             searchEndTime: this.$refs.interval.timeValue[1],
            //             statisticalType: dicData('Pollution_Statis', [
            //                 'I_Neg',
            //                 'V_Inharm',
            //                 'V_Dev',
            //                 'V_Unbalance',
            //                 'Plt',
            //                 'Freq_Dev'
            //             ])[0]
            //         })
            //         .then(res => {
            //             this.listcard[6] = res.data
            //             res.data.forEach(item => {
            //                 this.mapList[6].push({
            //                     name: item.name.split('\n')[0],
            //                     value: item.data == -1 ? 0 : item.data
            //                 })
            //             })
            //         })
            //     // 谐波统计
            //                         .deptInfolins({
            //             deptIndex: this.formData.deptIndex,
            //             id: '',
            //             monitorFlag: 2,
            //             powerFlag: 2,
            //             searchBeginTime: this.$refs.interval.timeValue[0],
            //             searchEndTime: this.$refs.interval.timeValue[1],
            //             statisticalType: dicData('Indicator_Type', [
            //                 'PLPC',
            //                 'DYPC',
            //                 'SXDYBPHD',
            //                 'CSSB',
            //                 'FXDL',
            //                 'JXBDY'
            //             ])[0]
            //         })
            //         .then(res => {
            //             res.data.forEach(item => {
            //                 this.mapList[7].push({ name: item.name, value: item.ratio })
            //             })
            //         })
            //                         .deptSubstationRelations({
            //             deptIndex: this.formData.deptIndex,
            //             id: '',
            //             monitorFlag: 2,
            //             powerFlag: 2,
            //             searchBeginTime: this.$refs.interval.timeValue[0],
            //             searchEndTime: this.$refs.interval.timeValue[1],
            //             statisticalType: dicData('Indicator_Type', [
            //                 'PLPC',
            //                 'DYPC',
            //                 'SXDYBPHD',
            //                 'CSSB',
            //                 'FXDL',
            //                 'JXBDY'
            //             ])[0]
            //         })
            //         .then(res => {
            //             this.listcard[7] = res.data
            //         })


        } else {
            tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
            // 合格率
            await getSteadyQualifyCensus(tableStore.table.params).then(res => {
                listcard.value[0] = {
                    title: {
                        text: '合格率'
                    },
                    legend: {
                        show: false
                    },
                    xAxis: {
                        type: 'value',
                        name: '%',
                        min: 0,
                        max: 100,

                        axisLine: {
                            show: true,
                        },
                    },
                    yAxis: {
                        type: 'category',
                        name: '区域',// 给X轴加单位
                        data: res.data.type.map((item: any) => item.split('\n')[0]),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                        },
                        axisTick: {
                            alignWithLabel: false
                        },
                    },
                    grid: {
                        left: '60px',
                    },
                    tooltip: {
                        formatter: function (params) {

                            var tips = ''
                            tips += params[0].name + '</br/>'
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].value == 3.14159) {
                                    tips += params[i].seriesName + '：暂无数据<br/>'
                                } else {
                                    tips += params[i].seriesName + '：' + params[i].value + '<br/>'
                                }
                            }
                            return tips
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            orient: 'vertical',
                            left: '30px',
                            start: 0,
                            width: '13px',
                            end: 100
                        },
                        {
                            orient: 'vertical',
                            start: 0,
                            width: '13px',
                            left: '30px',
                            end: 100
                        }
                    ],
                    options: {

                        series: [
                            {
                                name: '频率偏差',
                                zlevel: -99,

                                type: 'bar',
                                stack: '1',

                                itemStyle: itemStyle.value,
                                data: res.data.freqOffset
                            },
                            {
                                name: '闪变',
                                zlevel: -99,

                                type: 'bar',
                                label: {
                                    normal: {
                                        // show: true,
                                        position: 'top'
                                    }
                                },
                                itemStyle: itemStyle.value,
                                data: res.data.flicker
                            },
                            {
                                name: '三相电压不平衡',
                                zlevel: -99,

                                type: 'bar',
                                label: {
                                    normal: {
                                        // show: true,
                                        position: 'top'
                                    }
                                },
                                itemStyle: itemStyle.value,
                                data: res.data.voltageUnbalance
                            },
                            {
                                name: '谐波电压',
                                zlevel: -99,

                                type: 'bar',

                                itemStyle: itemStyle.value,
                                data: res.data.harmonicVoltage
                            },
                            {
                                name: '电压偏差',
                                zlevel: -99,

                                type: 'bar',

                                itemStyle: itemStyle.value,
                                data: res.data.voltageOffset
                            },
                            {
                                name: '谐波电流',
                                zlevel: -99,

                                type: 'bar',
                                label: {
                                    normal: {
                                        // show: true,
                                        position: 'top'
                                    }
                                },
                                itemStyle: itemStyle.value,
                                data: res.data.harmonicCurrent
                            },
                            {
                                name: '负序电流',
                                zlevel: -99,

                                type: 'bar',
                                label: {
                                    normal: {
                                        // show: true,
                                        position: 'top'
                                    }
                                },
                                itemStyle: itemStyle.value,
                                data: res.data.negativeCurrent
                            },
                            {
                                name: '间谐波电压含有率',
                                zlevel: -99,

                                type: 'bar',

                                itemStyle: itemStyle.value,
                                markLine: markLine.value,
                                data: res.data.interHarmonic
                            }
                        ]
                    }
                }


                mapList.value[0] = {
                    tooltip: {
                        formatter: function (params) {
                            var tips = params.name + '</br/>'

                            if (params.value == 3.14159) {
                                tips += '合格率：暂无数据<br/>'
                            } else {
                                tips += '合格率：' + (params.data == undefined ? '-' : params.value) + '<br/>'
                            }
                            return tips
                        }
                    },
                    visualMap: {

                        left: 25,
                        bottom: 40,
                        pieces: [
                            {
                                gt: 90,
                                label: '在线率≥90%',
                                color: '#339966'
                            },
                            {
                                gte: 60,
                                lt: 90,
                                label: '60%≤在线率<90%',
                                color: '#FFCC33'
                            },

                            {
                                gt: 0,
                                lt: 60,
                                label: '在线率<60%',
                                color: '#A52a2a'
                            },
                            {
                                value: 3.14159,
                                label: '无数据',
                                color: '#ccc'
                            }

                        ],
                    },

                    options: {
                        series: [
                            {
                                type: "map",
                                geoIndex: 0,
                                data: res.data.type.map((item: any, i: any) => {
                                    return {
                                        name: item.split('\n')[0],
                                        value: res.data.harmonicVoltage[i]
                                    }
                                }),

                            }
                        ]
                    }


                }
                histogram(listcard.value[0])
                map(mapList.value[0])
                EchartMap.value.GetEchar(header.value.areaRef.areaName)

            })
            // 完整性
            await IntegrityIcon(tableStore.table.params).then(res => {

                listcard.value[1] = {
                    title: {
                        text: '完整性'
                    },
                    legend: {
                        show: false
                    },
                    xAxis: {
                        type: 'value',
                        name: '%',
                        min: 0,
                        max: 100,
                        axisLine: {
                            show: true,
                        },
                    },
                    tooltip: {
                        formatter: function (params) {

                            var tips = ''
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].value == 3.14159) {
                                    tips += params[i].name + '</br>'
                                    tips += '数据完整性：暂无数据'
                                } else {
                                    tips += params[i].name + '</br>'
                                    tips += '数据完整性：' + params[i].value
                                }
                            }
                            return tips
                        }
                    },
                    yAxis: {
                        type: 'category',
                        name: '区域',// 给X轴加单位
                        data: res.data.map((item: any) => item.type.split('\n')[0]),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                        },
                        axisTick: {
                            alignWithLabel: false
                        },
                    },
                    grid: {
                        left: '60px',
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            orient: 'vertical',
                            left: '30px',
                            start: 0,
                            width: '13px',
                            end: 100
                        },
                        {
                            orient: 'vertical',
                            start: 0,
                            width: '13px',
                            left: '30px',
                            end: 100
                        }
                    ],
                    options: {

                        series: [
                            {
                                name: '数据完整性',
                                type: 'bar',

                                itemStyle: itemStyle.value,
                                markLine: markLine.value,
                                data: res.data.map((item: any) => item.single)
                            }
                        ]
                    }
                }


                mapList.value[1] = {
                    tooltip: {
                        formatter: function (params) {
                            var tips = params.name + '<br/>'

                            if (params.value == 3.14159) {
                                tips += '完整性' + '：暂无数据<br/>'
                            } else {
                                tips += '完整性' + '：' + (params.data == undefined ? '-' : params.value) + '<br/>'
                            }
                            return tips
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 2,
                        left: 25,
                        bottom: 40,
                        pieces: [
                            {
                                gt: 90,
                                label: '完整性≥90%',
                                color: '#339966'
                            },
                            {
                                gte: 60,
                                lt: 90,
                                label: '60%≤完整性<90%',
                                color: '#FFCC33'
                            },
                            {
                                gt: 0,
                                lt: 60,
                                label: '完整性<60%',
                                color: '#A52a2a'
                            },
                            {

                                value: 3.14159,
                                label: '无数据',
                                color: '#ccc'
                            }
                        ],
                    },

                    options: {
                        series: [
                            {

                                type: "map",
                                geoIndex: 0,
                                data: res.data.map((item: any, i: any) => {
                                    return {
                                        name: item.type.split('\n')[0],
                                        value: item.single
                                    }
                                }),

                            }
                        ]
                    }


                }


            })
            // 畸变率
            await getTHDistortionCensus(tableStore.table.params).then(res => {
                listcard.value[2] = {
                    title: {
                        text: '畸变率'
                    },
                    legend: {
                        show: false
                    },
                    xAxis: {
                        type: 'value',
                        name: '%',
                        min: 0,
                        // max: 100,
                        axisLine: {
                            show: true,
                        },
                    },
                    tooltip: {
                        formatter: function (params) {

                            var tips = ''
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].value == 0.314159) {
                                    tips += params[i].name + '</br>'
                                    tips += '畸变率：暂无数据'
                                } else {
                                    tips += params[i].name + '</br>'
                                    tips += '畸变率：' + params[i].value
                                }
                            }
                            return tips
                        }
                    },
                    yAxis: {
                        type: 'category',
                        name: '区域',// 给X轴加单位
                        data: res.data.type.map((item: any) => item.split('\n')[0]),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                        },
                        axisTick: {
                            alignWithLabel: false
                        },
                    },
                    grid: {
                        left: '60px',
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            orient: 'vertical',
                            left: '30px',
                            start: 0,
                            width: '13px',
                            end: 100
                        },
                        {
                            orient: 'vertical',
                            start: 0,
                            width: '13px',
                            left: '30px',
                            end: 100
                        }
                    ],
                    options: {

                        series: [
                            {
                                name: '畸变率',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        // 随机显示
                                        color: function (params) {
                                            if (params.value == 0.314159) {
                                                return new echarts.graphic.LinearGradient(
                                                    0,
                                                    1,
                                                    0,
                                                    0,
                                                    [
                                                        {
                                                            offset: 1,
                                                            color: '#cccccc'
                                                        }
                                                    ],
                                                    false
                                                )
                                            } else if (params.value > 2) {
                                                return new echarts.graphic.LinearGradient(
                                                    0,
                                                    1,
                                                    0,
                                                    0,
                                                    [{ offset: 1, color: '#A52a2a' }],
                                                    false
                                                )
                                            } else if (params.value <= 2) {
                                                return new echarts.graphic.LinearGradient(
                                                    0,
                                                    1,
                                                    0,
                                                    0,
                                                    [{ offset: 1, color: '#07CCCA' }],
                                                    false
                                                )
                                            }
                                        }
                                    }
                                },
                                markLine: {
                                    silent: false,
                                    symbol: 'circle',
                                    data: [
                                        {
                                            name: '',
                                            xAxis: 2,
                                            lineStyle: {
                                                color: '#07CCCA'
                                            },
                                            label: {
                                                // position: "middle",
                                                formatter: '{b}',
                                                textStyle: {
                                                    color: '#07CCCA'
                                                }
                                            }
                                        }
                                    ]
                                },



                                data: res.data.single.map(item => item == 3.14159 ? 0.314159 : item),
                            }
                        ]
                    }
                }


                mapList.value[2] = {
                    tooltip: {
                        formatter: function (params) {
                            var tips = params.name + '<br/>'

                            if (params.value == 0.314159) {
                                tips += '完整性' + '：暂无数据<br/>'
                            } else {
                                tips += '完整性' + '：' + (params.data == undefined ? '-' : params.value) + '<br/>'
                            }
                            return tips
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 2,
                        left: 25,
                        bottom: 40,
                        pieces: [
                            {
                                gt: 0,
                                lt: 2,
                                label: '畸变率<=2%',
                                color: '#07CCCA'
                            },
                            {
                                gt: 2,
                                lt: 100,
                                label: '畸变率>2%',
                                color: '#A52a2a'
                            },

                            {

                                value: 3.14159,
                                label: '无数据',
                                color: '#ccc'
                            }
                        ],
                    },

                    options: {
                        series: [
                            {

                                type: "map",
                                geoIndex: 0,
                                data: res.data.type.map((item: any, i: any) => {
                                    return {
                                        name: item.split('\n')[0],
                                        value: res.data.single[i] == 3.14159 ? 0.314159 : res.data.single[i],
                                    }
                                }),

                            }
                        ]
                    }


                }
            })

        }
    }
})

tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.loadType = dictData.getBasicData('Interference_Source',)
tableStore.table.params.manufacturer = dictData.getBasicData('Dev_Manufacturers',)
tableStore.table.params.scale = dictData.getBasicData('Dev_Voltage_Stand',)
tableStore.table.params.statisticalType = {}
provide('tableStore', tableStore)

// 地图点击事件
const getRegionByRegion = (list: any) => {
    tableStore.table.params.deptIndex = list.id
    tableStore.onTableAction('search', {})
}




// 地图数处理
const map = (res: any) => {
    echartMapList.value = res
}

// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = res
}

const carouselChange = (index: any) => {
    histogram(listcard.value[index])
    map(mapList.value[index])
    EchartMap.value.GetEchar(mapName.value)

}
const stopFucarous = () => {
    if (action.value) {
        action.value = false
        icon.value = 'el-icon-VideoPlay'
    } else {
        action.value = true
        icon.value = 'el-icon-VideoPause'
    }
}

onMounted(() => {
    setTimeout(() => {
        tableStore.index()
    }, 10)
})
const layout = mainHeight(83) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.map {
    height: v-bind('layout.height');
}

:deep(.el-carousel__container) {
    position: relative;
    // height: 300px ;
    border-radius: 20px;
    background: #466e831e !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

:deep(.el-carousel__mask) {
    width: 100%;
    background-color: #4f5c6141 !important;
    border-radius: 20px;
    opacity: 0.24;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

:deep(.el-carousel__arrow--left) {
    left: 40px !important;
}

:deep(.el-carousel__indicators) {
    display: none;
}

.tall {
    height: calc(v-bind('layout1.height') - 50px);
}

.boxDiv {
    position: absolute;
    top: calc(100vh - 175px) !important;
    left: calc(50% - 350px) !important;
    z-index: 10;
    border-radius: 20px !important;
    background: #fff;
}

.medium {
    margin-top: 6px;
    text-align: center;
    align-items: center;
}
</style>
