<template>
    <div class="right-title max-w mt-1 ta-l flex">
        <div v-for="item in navsList" class="flex-1 flex ai-c jc-c">
            <div class="mr-1 flex ai-c jc-c">
                <img class="navsimg" src="/images/totalnum.png" v-if="item.typeName=='总数'"  />
                <img class="navsimg" :src="item.image" v-else />
            </div>
            <div class="flex column flex ai-c jc-c">
                <div class="fz-20 fw-b" style="color: #2F6BEE;">{{ item.count }}</div>
                <div class="mt-1 fz-16">{{ item.typeName }}</div>
            </div>
        </div>
    </div>
    <div class="flex max-w right-section mt-2">
        <div class="mr-1 max-h flex column" style="width: 40%;">
            <div class="flex-1 echarts-box mb-2">
                <div id="echartid1" ref="echartid1" class="max-w max-h"></div>
            </div>
            <div class="flex-1 echarts-box">
                <div id="echartid2" ref="echartid2" class="max-w max-h"></div>
            </div>
        </div>
        <div class="flex-1 map-box max-h">
        </div>
    </div>
    <el-dialog v-model="dialogFormVisible" class="ta-l dia-box" title="部件详情">
        <el-form :model="diaForm" disabled="true">
            <div class="flex max-w">
                <el-form-item label="编号：" class="flex-1">
                    <el-input v-model="diaForm.deviceNum" autocomplete="off" />
                </el-form-item>
                <el-form-item label="部件名称：" class="flex-1">
                    <el-input v-model="diaForm.deviceName" autocomplete="off" />
                </el-form-item>
            </div>
            <el-form-item label="地址：" class="label-other flex">
                <div @click="areaClick" class="inp-div-box">
                    {{ diaForm.address }}
                </div>
            </el-form-item>
            <div class="flex max-w">
                <el-form-item label="经度：" class="flex-1">
                    <div @click="areaClick" class="inp-div-box">
                        {{ diaForm.lon }}
                    </div>
                </el-form-item>
                <el-form-item label="纬度：" class="flex-1">
                    <div @click="areaClick" class="inp-div-box">
                        {{ diaForm.lat }}
                    </div>
                </el-form-item>
            </div>
            <el-form-item label="部件类型：" class="label-other">
                <el-input v-model="diaForm.typeName" autocomplete="off" />
            </el-form-item>

            <el-form-item label="部件图片：" class="label-other">
                <img :src="diaForm.image" style="width: 100px;" />
            </el-form-item>

            <el-form-item label="部件简介：" class="label-other">
                <el-input type="textarea" v-model="diaForm.description" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer" v-if="diaForm.devicetype=='1'">
                <el-button type="primary" @click="playVideoClick">播放</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue"; 
import {useRouter} from 'vue-router'   
import { BASE_API } from "/public/config/server"
import { getMethodCommon } from "../../../api/tokencommon1"
export default defineComponent({
    name: 'Index',
    components: {
        
    },
    setup() {
        let data = reactive({
            colorList: [{
			        type: 'linear',
			        x: 0, y: 0, x2: 1, y2: 1,
			        colorStops: [
						{ offset: 0, color: '#81FED4' },
			            { offset: 1, color: '#00B3FF' }
			        ],
			        globalCoord: false // 缺省为 false
			    },
			    {
			        type: 'linear',
			        x: 1, y: 0, x2: 0, y2: 1,
			        colorStops: [
						{ offset: 0, color: '#FCFF00' },
			            { offset: 1, color: '#F19E6C' }
			        ],
			        globalCoord: false // 缺省为 false
			    },
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#8BE7FF' },
				        { offset: 1, color: '#02BBEA' }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#9AFC8F' },
				        { offset: 1, color: '#00E63D'  }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#83D7FF'  },
				        { offset: 1, color: '#00D5FF' }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#904A2D'  },
				        { offset: 1, color: '#ED4F0F' }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#8C278B' },
				        { offset: 1, color: '#ED0FEB'  }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#8B2E42' },
				        { offset: 1, color: '#E80E3C'  }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#2F528D' },
				        { offset: 1, color: '#0E5EE8'  }
				    ],
				    globalCoord: false // 缺省为 false
				},
				{
				    type: 'linear',
				    x: 1, y: 0, x2: 0, y2: 1,
				    colorStops: [
						{ offset: 0, color: '#2F8D6B' },
				        { offset: 1, color: '#0BF39F'  }
				    ],
				    globalCoord: false // 缺省为 false
				}
			],
            globalMap: null,
            dialogFormVisible: false,
            diaForm:{},
            navsList:[],
            cameraVisible:false,
            cameraData:''
        })
        const router = useRouter()
        onMounted(() => {
            methods.getTitleData()
            
            methods.getEchartsData1()
        })
        let methods = {
            getTitleData(){
                getMethodCommon('DeviceInfo/StatisticsData').then(res =>{
                    let rel = res.data.result
                    data.navsList = JSON.parse(JSON.stringify(rel))
                    data.navsList.forEach(item =>{
                        item.image = BASE_API + '/' + item.icon
                    })

                    let arr = []
                    rel.forEach(item =>{
                        if(item.typeName !== '总数'){
                            arr.push({
                                name: item.typeName,
                                value: item.count
                            })
                        }
                    })
                    methods.renderEcharts1(arr)
                })
            },
            getTableListData(){
                getMethodCommon('DeviceInfo/GetMapData').then(res =>{
                    let rel = res.data.result
                    rel.forEach(item =>{
                        if(item.devicetype == '摄像头'){
                            item.deviceInfo.forEach(val =>{
                                val.icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NDhjYTAzMS0xZGM0LTA1NDUtOTFlZS0zNWVjNjJmZDgzOGIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM3OUMzMEM4Mzc0MTFFQTk3RThFNkJEMzJCRjI2ODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM3OUMzMEI4Mzc0MTFFQTk3RThFNkJEMzJCRjI2ODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZhOTRjNDI2LTc5MzgtNTc0Ni1hNjRkLTc4NDJjZGU4MzdlNiIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1N2MwNGVhLTc3OGEtMTk0OC1iMDRhLWRiYTVh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'
                                if(val.lnglat){
                                    methods.createMarkerByHTMLNode(val)
                                }
                            })
                        }
                        if(item.devicetype == '门禁'){
                            item.deviceInfo.forEach(val =>{
                                val.icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRGRjVFNTNENDFFQzExRUM4NTc5QzZDODBFOTY1RTNGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRGRjVFNTNFNDFFQzExRUM4NTc5QzZDODBFOTY1RTNGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEZGNUU1M0I0MUVDMTFFQzg1NzlDNkM4MEU5NjVFM0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEZGNUU1M0M0MUVDMTFFQzg1NzlDNkM4MEU5NjVFM0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4RzIyzAAAHm0lEQVR42uxZ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'
                                if(val.lnglat){
                                    methods.createMarkerByHTMLNode(val)
                                }
                            })
                        }
                        if(item.devicetype == '路灯'){
                            item.deviceInfo.forEach(val =>{
                                val.icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NDhjYTAzMS0xZGM0LTA1NDUtOTFlZS0zNWVjNjJmZDgzOGIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUZENUVCMEY4Mzc0MTFFQTk3RThFNkJEMzJCRjI2ODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUZENUVCMEU4Mzc0MTFFQTk3RThFNkJEMzJCRjI2ODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZhOTRjNDI2LTc5MzgtNTc0Ni1hNjRkLTc4NDJjZGU4MzdlNiIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1N2MwNGVhLTc3OGEtMTk0OC1iMDRhLWRiYTVhYzg5YTVmYiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvzDl0oAAAbpSURBVHjarFldbFRVEP5693b7SwsWqNBYpQUMgijSIsYHohRtaVUgIA/Ki29Go0Z9If4lBPRFEjVRY6JG4y8qYKSlEIuEB2JDtyURBKEtwRIEWqD/+9fdrXPuOaedPdy7W1cmmZzds+fMfHfunDkzs1njn4BTFhstNvoU24x9bPSptXr/uOK44hgbY+y74IRaq0ew0VHAwXG2DFDZHqxBWgbABAM15sEcLH+wCZC2CzhLMQfmV5xjsAmSAzTBRQyOKrYY0IRiTeN2GqtxMHmKc9nIQWorglmPgwsTh9gYUjo04CwFEhykbficj1kth4HJJy5gnO8C0gsgBxckHlXsV6N2jQiSKWFa0GLgOLBCxdPYWAA7fxoWPzcfZTUVKF5QhtyZM+DLy3VEx0NhhK/2Y7DzIi62nMOfH3YhFhxWgIaVfL+H/3JfzMqiU6xPYTYDpy0mwBQpLnbGwvJZWPnuSpTXVaOvIx89TcCVo8BgF9mgX4rPmUGr5wOlDwLl9cCs5UH07G9D66utGOnpoxVDxINqHFKgR5WFw8w1EgKgdnI/s1whAzV9gqu2LceSF2pxfm8Bjr9DKs5iSlS8ALh3KzBvwyhOfnAAgTfbaXaAsQY7wvxUHKCYAJjDTqi2nAZGpsAtsPwzUbe/gaxXhcNPA73HkBHNXgGs3kVQugNoXtuIRPQqzV4n7mdAtSWdk84PBgepLTjdAbeudTPG41XYszxzcILE3r0E0uevcmQK2dIQRUpngcIw4Z8W8z+/er3a96QVaxvXYmx4EQ48Rl4xjP9NYXLBxhqyTf8i1DXVK4DFSqeODn4dGSwjrGiA0oJV2+4j/1mBXzeSu0Zx00jIOriOtJRXOzqSLZjHQpdtu8Q9aUFxWu9+qQ5NNfKpvciih136MnD742SHhXJu8Azw9z7gj50EZsx9n3gbh7cA9S11+OvTbjrdIRYrc5QP2uKQzFHohalLhCsTl6Lmh3qMjazCkWe8wc0kn1zzIz3OPPffh84BhzYDfQFvGas+I/NMO4KWJyle4YrwVOJr6tCMcB+cvDmyC4ucOHf8bW/BRRTnNgS8wTlrKoD1bZOWdSMRroQuodPldrKMTEWCvOvZSvS152Ooy1twbePUfe7RX7x/EzqELqHzxvvdNu9fCbKsppIiv7fQuQ+TQ9w5dYBirdjjRUJX2ZpKFmKyzTCTDLJo/hxc+d1b4B3rbgwdw+eTfS/Um3pPUnxsFVfjHAZsIhF2z5rzS0tSXmOFtxkWIP/+jnwx8Jbk7yvlXKo9nAbo1OfNLjEydAeb7ZLeZ8GXm4PogLfAWCj5+zyKk4OdQMc2+X3Za0DFJmNP0FueSDKEThcsVkaB9mp78vdsilLVO+jWXkqB6h76vF3OpdozRbKMgkWO8XAE/uneu7q+cZ+3c4UlPPZ86y1PpGdCpwsWyyhwZB0R6r2WMnYFL1P82pE8J17x9ZOSTf/t2C73eKZjC+HodKn2LKM0lEXOYOcllD6Q2vZtr9N1xuLbhWYSR2LGY8kHRKwJvJFaltA12HXJpdKLW0b1FXXuwIst3Shfm95BDj4BnP1Sfl78PLClV/KSF+Xc2S/kmnQkdAmdk9WeBhq3XErDME593I1ZVSHnOktHwnJQ581fJFmfvQsH0u8XOkRJcOqjbpVJR3jdbLlWX2MjQxTdj2HZ1imc6OOZ/aZJ6OhpbnN0Tqb7GmSSBSNJpaEocCo2jTppeioSB+K3p+SdKlIoweKzmEtXs8yqpni5Mejomkz1QwxgzDYAhidKQ1F9nXivGau/34i996fOCUUISRVG3CibEuiHvgJOvN+sKj1d2XELxtwsOKqqqyGqvjqowGnDmp9kYnqzSMh6ZA9putCmKjxd0Y2aFuQ+GGWveFhVWANorm+ipz2N2n033g6ZUC7VSQ0tFJxLTjuyJ6u5YfaKo9wHdZiJKuSTFhSbRWn488pdyPIFsKFd+k2mJPaup8ouHg04MmXZOWBYUIeaiTCTcHnNkwBF3ZqI9lJtsgfdu3aj4dAoVn0ui/GpklgrUnuxt/Pr3Y4sIVPWxANG0R5hcdDpLNjqTv4PrY+dovWxgjLhPPRQZn35qCjGk1sfRZRy3SpaHw0izoUolBxD6ysZtT4slg9mZ9A8qqSMea5sHuXmyeZROOQ0jwbO/OPcECLwyzinm0cjbBxhvsfBxTVA3rT0ar8VGC04t/abbTQwY2nab0F2asPGq9XJQsI2WrZwaYEljEMUNMCZbTQY7d9oigZmxO3+5f1qmzesGchxoxHOrZHDiuub0QIec2kBT+i3za66sSDh0gyPsF6ObViPWzBhpHHRNE30hGGYcbPLz7vrqbr1mfwNYf4FMeW/If4VYAByXEiagYzOlwAAAABJRU5ErkJggg=='
                                if(val.lnglat){
                                    methods.createMarkerByHTMLNode(val)
                                }
                            })
                        }
                    })
                    
                })
            },
            createMarkerByHTMLNode(value) {
                // new mapboxgl.Marker(里面可以放marker的属性比如rotation,color,scale)
                const dom = document.createElement('div');
                dom.style.width = '40px'
                dom.style.height = '40px'
                dom.style.display = 'flex'
                dom.style.justifyContent = 'center'
                dom.style.backgroundImage = 'url('+value.icon+')';
                dom.style.backgroundSize = "40px 40px";
                let lng = ''
                let lat = ''
                if(value.lnglat.split(',')[1]){
                    lng = value.lnglat.split(',')[0]
                    lat = value.lnglat.split(',')[1]
                    // data.globalMap.fitBounds([ [lat, lng] ])
                    data.globalMap.flyTo({
                        center: [lng,lat] // 中心点
                    })
                    let marker = new mapBoxGl.Marker({element:dom})
                    .setLngLat([lng, lat])
                    .addTo(data.globalMap);
                    marker.getElement().addEventListener("click", function(e){
                        data.dialogFormVisible = true
                        data.diaForm = JSON.parse(JSON.stringify(value))
                        data.diaForm.lon = value.lnglat.split(',')[0]
                        data.diaForm.lat = value.lnglat.split(',')[1]
                        data.diaForm.image = BASE_API+'/'+value.image
                        console.log('adsss',value)
                    });	
                }
                
            }, 
            playVideoClick(){
                console.log('data.diaForm',data.diaForm)
                let obj = {
                    name: data.diaForm.deviceName,
                    sbbh: data.diaForm.deviceNum
                }
                let param = {
                    pageIndex: 1,
                    pageSize: 10,
                    rtid: data.diaForm.rtuId
                }
                getMethodCommon("DeviceInfo/GetRtuInfo",param).then(res =>{
                    let rel = res.data.result[0]
                    obj.appKey = rel.appKey
                    obj.ip = rel.ip
                    obj.port = rel.port
                    obj.appSecret = rel.appSecret
                    data.cameraData = obj
                    data.cameraVisible = true
                })
                
            },
            getEchartsData1(){
                getMethodCommon('DeviceInfo/CompanyCountData').then(res =>{
                    let rel = res.data.result
                    let arr = []
                    rel.forEach(item =>{
                        arr.push({
                            name: item.typeName,
                            value: item.count
                        })
                    })
                    methods.renderEcharts2(arr)
                })
                
            },
            renderEcharts1(dataArr){
                //职称结构图表
                let legData = []
                dataArr.forEach(item =>{
                    legData.push(item.name)
                })
                let option = {
                    legend: {
                        itemWidth: 20,
					    temHeight: 8,
                        bottom: "5%",
                        x: "center",
                        textStyle: {
                            fontWeight: 'bold',
                            fontSize: 14,
                        },
                        data: legData
                    },
                    series: [{
                        itemStyle: {
                            normal:{
								borderWidth: 2,
								color: function(params) {
								    return data.colorList[params.dataIndex]
								},
								label: {
									textStyle: {
										//数值样式
										fontSize: 14,
									},
									formatter:"{c}",
								}
							}
                        },
                        emphasis: {
                            label: {
                                show: true,
                            }
                        },
                        type: 'pie',
                        hoverAnimation: false,
                        radius: ['40%', '60%'],
                        center: ["50%", "40%"],
                        labelLine: {
                            normal: {
                               
                            }
                        },
                        data: dataArr,
                        z: -1
                    }]
                };
                let chartBox = echarts.init(document.getElementById("echartid1"));
                chartBox.setOption(option);
            },
            renderEcharts2(dataArr){
                //职称结构图表
                let legData = []
                dataArr.forEach(item =>{
                    legData.push(item.name)
                })
                let option = {
                    legend: {
                        itemWidth: 20,
					    temHeight: 8,
                        bottom: "5%",
                        x: "center",
                        textStyle: {
                            fontWeight: 'bold',
                            fontSize: 14,
                        },
                        data: legData
                    },
                    series: [{
                        itemStyle: {
                            normal:{
								borderWidth: 2,
								color: function(params) {
								    return data.colorList[params.dataIndex]
								},
								label: {
									textStyle: {
										//数值样式
										fontSize: 14,
									},
									formatter:"{c}",
								}
							}
                        },
                        emphasis: {
                            label: {
                                show: true,
                            }
                        },
                        type: 'pie',
                        hoverAnimation: false,
                        radius: ['40%', '60%'],
                        center: ["50%", "40%"],
                        labelLine: {
                            normal: {
                               
                            }
                        },
                        data: dataArr,
                        z: -1
                    }]
                };
                let chartBox = echarts.init(document.getElementById("echartid2"));
                chartBox.setOption(option);
            },
        };
        return {
            ...methods,
            ...toRefs(data),
        };
    },
    });
</script>

<style scoped>
 .right-title{
    height: 102px;
    background: #fff;
    box-shadow: 0px 2px 24px 0px rgb(0 0 0 / 16%);
    padding: 24px 12px;
    border-radius: 7px;
    box-sizing: border-box;
}
.right-section{
    height: calc(100% - 140px);
}
.map-box{
    background: #fff;
    border-radius: 7px;
}
.echarts-box{
    border-radius: 7px;
    background: #fff;
    box-shadow: 0px 2px 24px 0px rgb(0 0 0 / 16%);
}
.navsimg{
    width: 50px;
    height: 50px;
}
.mapboxgl-map{
    width: 100%;
    height: 100%;
}
.inp-div-box{
    width: 100%;
    padding-left: 12px;
    height: 32px;
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    border-radius: 4px;
    overflow: hidden;
}
::v-deep input:focus{
    border: none !important;
}
::v-deep .el-form-item__label{
    width: 30% !important;
}
::v-deep .label-other .el-form-item__label{
    width: 15% !important;
}
</style>