<template>

    <div class='default-main' :style="layout">
        <div :style="`height:${height}`" class="HomePage">
            <div class="HomePage-left ">
                <div class="title">
                    <span>流程进度统计</span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>

                <div>
                    <div class="vcl mt5">
                        <p v-for="(item, i) in vList" style="line-height: 30px;font-weight: 700;" :style="{
                            width: i === 0 ? '90px' : i === 5 ? '32px' : 'auto',
                            flex: i === 0 || i === 5 ? 'none' : '1',
                          

                        }">
                            {{ item }}
                        </p>
                    </div>

                    <div v-for="(item, i) in list" class="vcl">
                        <p style="width: 90px">
                            {{ item.title }}

                        </p>
                        <p class="numOne" style="color: #67c23a;">
                            {{ item.list[0].numOne }}
                        </p>
                        <p class="numOne" style="color: #409eff;">
                            {{ item.list[1].numOne }}
                        </p>
                        <p class="numOne" style="color: #e6a23c;">
                            {{ item.list[2].numOne }}
                        </p>
                        <p class="numOne" style="color: #f56c6c;">
                            {{ item.list[3].numOne }}
                        </p>

                    </div>
                </div>


            </div>
            <div class="HomePage-center">
                <div class="title">
                    <span>电能质量问题</span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div class="segmented-controller">
                    <div v-for="(segment, index) in segments" :key="index" class="segmented-button"
                        :class="{ active: selectedIndex === index }" @click="selectSegment(index)">
                        {{ segment }}
                    </div>
                </div>
                <!-- <div class="custom-style">
                    <el-segmented v-model="value" :options="segments" size="large" />
                </div> -->

                <MyEchartMap ref="EchartMap" :options="echartMapList" class="map" style="height: 100%;width: 100%;" />
            </div>
            <div class="HomePage-right" style="     max-width: 450px;">
                <div class="title">
                    <span>工单统计</span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div class="WorkOrder" style="border-bottom: 1px solid #ccc;">
                    <div class="WorkOrderBox">
                        <h4>工单转换率</h4>
                        <div class="WorkContent">
                            <div class="fontColor">电能质量问题</div>
                            <div class="fontColor">
                                <i class="ITop">{{ 100 }}</i>
                                个
                            </div>
                            <div class="fontColor">工单总数量</div>
                            <div class="fontColor">
                                <i class="IBottom">{{ 80 }}</i>
                                个
                            </div>
                        </div>
                        <div ref="Workontent" class="Workontent" style="flex: 1; width: 100%; height: 100%">
                            <MyEChart style="width: 100%; height: 100%" :options="incidentCharts"></MyEChart>
                        </div>
                    </div>
                    <div class="WorkOrderBox">
                        <h4>工单处置率</h4>
                        <div class="WorkContent">
                            <div class="fontColor">工单总数量</div>
                            <div class="fontColor">
                                <i class="ITop">{{ 80 }}</i>
                                个
                            </div>
                            <div class="fontColor">已处理工单数量</div>
                            <div class="fontColor">
                                <i class="IBottom">{{ 60 }}</i>
                                个
                            </div>
                        </div>
                        <div ref="Workontents" class="Workontent" style="flex: 1; width: 100%; height: 100%">
                            <MyEChart style="width: 100%; height: 100%" :options="incidentCharts1"></MyEChart>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <task :height="height1" />
    </div>

</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import task from '@/views/system/bpm/task/index.vue'
import { useDictData } from '@/stores/dictData'
const layout = mainHeight(25)
const height = mainHeight(50, 2).height
const height1 = mainHeight(410, 2).height
const dictData = useDictData()
const echartMapList: any = ref({})
const EchartMap = ref()

const incidentCharts = ref({})
const incidentCharts1 = ref({})
const color = ref(['', ' #67c23a', '#409eff', '#e6a23c', ' #f56c6c'])

const segments = ref(['总数', '技术监督计划', '用户投诉', '在线监测', '试运行'])
const selectedIndex = ref(0)
const vList = ['', '总数', '审批中', '待提交审批', '审批不通过',]
const list: any = ref([
    {
        title: '干扰源未建档',
        color: ['#000', '#bd3124'],

        list: [
            {
                numOne: 20,


            },
            {
                numOne: 3,


            },
            {
                numOne: 1,


            },
            {
                numOne: 0,


            },

        ]
    },
    {
        title: '干扰源已建档',
        color: ['#000', '#2dcd28'],
        list: [
            {
                numOne: 10,


            },
            {
                numOne: 3,


            },
            {
                numOne: 0,


            },
            {
                numOne: 1,


            },

        ]
    },
    {
        title: '终端',

        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
                numOne: 8,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },

        ]
    },
    {
        title: '入网检测',

        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },

        ]
    },
    {
        title: '退运',

        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },

        ]
    },
    {
        title: '告警单',

        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
                numOne: 10,


            },
            {
                numOne: 3,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },

        ]
    },
    {
        title: '预警单',

        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
                numOne: 5,


            },
            {
                numOne: 2,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            },
            {
                numOne: 0,


            }
        ]
    },
])
const url: any = [
    new URL(`@/assets/img/ZS.png`, import.meta.url),
    new URL(`@/assets/img/SHTG.png`, import.meta.url),
    new URL(`@/assets/img/SPZ.png`, import.meta.url),
    new URL(`@/assets/img/DTJ.png`, import.meta.url),
    new URL(`@/assets/img/YQX.png`, import.meta.url),
    new URL(`@/assets/img/SHBTG.png`, import.meta.url)
]

const eliminate = (name: string) => {
    echartMapList.value.options.series = []
    EchartMap.value.GetEchar(name)
}
const selectSegment = (index) => {
    selectedIndex.value = index;
}
onMounted(() => {
    EchartMap.value.GetEchar('海南')
    // EchartMap.value.GetEchar(dictData.state.area[0].areaName)

    echartMapList.value = {
        name: '',
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                if (typeof (params.value)[2] == "undefined") {
                    return params.name + ' : ' + params.value;
                } else {
                    return params.name + ' : ' + params.value[2];
                }
            }
        },
        legend: {
            show: false
        },



        options: {
            series: [
                // {

                //     type: "map",
                //     geoIndex: 0,

                // }
                {

                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    symbolSize: [50, 50],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 9,
                            },
                            formatter(value) {
                                return value.data.value[2]
                            }
                        }
                    },


                    itemStyle: {
                        normal: {
                            color: '#f56c6c', //标志颜色
                        }
                    },
                    data: [
                        {
                            "name": "三亚",
                            "value": [
                                109.497863, 18.397384,
                                3
                            ]
                        },
                        {
                            "name": "海口",
                            "value": [
                                110.440419, 19.886042,
                                6
                            ]
                        },
                        {
                            "name": "文昌",
                            "value": [
                                110.754493, 19.688807,
                                4
                            ]
                        },

                    ],
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    zlevel: 1
                }
            ]
        }


    }

    incidentCharts.value = {
        title: {
            text: '转换率',
            bottom: '3%',
            left: 'center',
            textStyle: {
                fontSize: 16
            }
        },
        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        toolbox: {
            feature: null
        },

        options: {
            dataZoom: null,
            series: [
                {
                    //第二个球的填充
                    type: 'liquidFill',
                    radius: '75%',
                    center: ['50%', '45%'], //中心点
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: '#2aa1e3'
                                }
                            ],
                            globalCoord: false
                        }
                    ],
                    data: [0.8, 0.8], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: '#f7f8fc'
                    },
                    label: {
                        normal: {
                            formatter: () => {
                                return (0.8 * 100).toFixed(2) + '%'
                            },
                            textStyle: {
                                fontSize: 20,
                                color: '#000'
                            }
                        }
                    },
                    outline: {
                        // show: false
                        borderDistance: 0,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff'
                        }
                    }
                }
            ]
        }
    }
    incidentCharts1.value = {
        title: {
            text: '处置率',
            bottom: '3%',
            left: 'center',
            textStyle: {
                fontSize: 16
            }
        },
        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        toolbox: {
            feature: null
        },

        options: {
            dataZoom: null,
            series: [
                {
                    //第二个球的填充
                    type: 'liquidFill',
                    radius: '75%',
                    center: ['50%', '45%'], //中心点
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 1,
                                    color: '#2aa1e3'
                                }
                            ],
                            globalCoord: false
                        }
                    ],
                    data: [0.75, 0.75], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: '#f7f8fc'
                    },
                    label: {
                        normal: {
                            formatter: () => {
                                return (0.75 * 100).toFixed(2) + '%'
                            },
                            textStyle: {
                                fontSize: 20,
                                color: '#000'
                            }
                        }
                    },
                    outline: {
                        // show: false
                        borderDistance: 0,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff'
                        }
                    }
                }
            ]
        }
    }
})

</script>
<style lang="scss" scoped>
.HomePage {
    display: flex;

    .HomePage-left,
    .HomePage-right {
        padding: 10px;
        flex: 1.2;
        margin: 10px 10px 0;
        box-shadow: var(--el-box-shadow-light);
        position: relative
    }

    .HomePage-center {
        margin: 10px 0 0;
        padding: 10px;
        flex: 1.5;
        overflow: hidden;
        position: relative;
        box-shadow: var(--el-box-shadow-light);
        // margin: 0 20px;
    }

    // .main_title {
    //     width: 180px;
    //     height: 35px;
    //     line-height: 33px;
    //     background-color: var(--el-color-primary);
    //     border-radius: 18px;
    //     position: absolute;
    //     top: 0px;
    //     // left: 50%;
    //     z-index: 999;
    //     left: 0px;
    //     // margin-left: -90px;
    //     color: #fff;
    //     font-size: 18px;
    //     font-weight: 600;
    //     box-sizing: border-box;
    //     padding-left: 45px;

    //     img {
    //         position: absolute;
    //         top: 8px;
    //         left: 20px;
    //     }
    // }
}

.monitor {
    display: flex;

    .monitorBox {
        flex: 1;
    }

    .monitorTop {
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .monitorCenter {
        display: flex;
        margin: 10px 5px 0;
        height: 120px;

        .Icon {
            font-size: 16px;
            line-height: 16px;
        }
    }

    .left {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        text-align: center;
        // flex: 1;
        width: 80px;

        span {
            font-weight: 600;
            color: #32a5a6;
        }
    }

    .right {
        display: flex;

        justify-content: space-around;
        flex: 1.5;
        flex-wrap: wrap;
        flex-direction: column;

        div {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            width: 100%;
            line-height: 18px;

            span {
                font-weight: 600;
                color: #55bcb4;
            }
        }
    }
}



.title {
    // height: ;
    // display: flex;
    // justify-content: space-between;
    font-size: 18px;
    line-height: 23px;
    padding-left: 5px;
    width: 100%;
    font-weight: 550;
    display: flex;
    align-items: center;

    span:nth-child(1) {
        cursor: pointer;
    }

    .info {
        font-weight: normal;
        display: flex;
        font-size: 12px;
        cursor: pointer;
        color: #757575;
    }

    img {
        height: 1.2rem;
        width: 1.2rem;
        margin-right: 5px;
    }
}

:deep(.el-segmented__item) {
    padding: 0px 20px;
}

.custom-style .el-segmented {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99;
    --el-segmented-item-selected-color: #fff;
    --el-segmented-item-selected-bg-color: var(--el-color-primary);
    --el-border-radius-base: 5px;
    font-size: 15px;
    padding: 0 10px;

}

.evaluationData {
    height: 33px;
    margin: 10px 30px;
    width: 90%;
    box-shadow: 1px 1px 1px 1px #e8e3e3;
    display: flex;
    font-size: 18px;
    line-height: 35px;

    img {
        height: 25px;
        width: 25px;
        margin: 4px 20px 0px 30px;
    }
}

.vcl {
    display: flex;
    border-bottom: 2px solid #fff;
    border-bottom: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    font-size: 14px;

    p {
        text-align: center;
        margin: 6px;
        line-height: 35px;
    }

    .numOne {
        flex: 1;
        font-weight: 550;
        cursor: pointer;
        font-size: 18px;
    }


}

// 工单 转换率
.WorkOrder {
    height: 47%;
    width: 100%;

    padding: 0px 10px;

    .WorkOrderBox {
        padding: 5px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;

        h4 {
            position: absolute;
            top: 10px;
            left: 0px;
        }

        .WorkContent {
            font-size: 14px;
            flex: 1;
            display: flex;
            flex-direction: column;

            div {
                display: inline-block;
                // flex: 1;
                text-align: center;
                line-height: 30px;

                .ITop {
                    font-size: 20px;
                    color: #54a092;
                    font-weight: 600;
                }

                .IBottom {
                    font-size: 20px;
                    color: #63d763;
                    font-weight: 600;
                }
            }
        }
    }
}

.segmented-controller {
    width: 110px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    position: absolute;
    bottom: 10px;
    z-index: 99;
    box-shadow: var(--el-box-shadow-light);
}

.segmented-button {
    flex: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #ccc;

    transition: background-color 0.3s;
}

.segmented-button.active {
    background-color: var(--el-color-primary);
    color: white;
}

.segmented-button:not(.active):hover {
    background-color: #e0e0e0;
}
</style>
