fuyuhang
/
Project_yhfu
spiegel van http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_natureResourcePlatform_Vue"></title>
        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
        <script
            include="echarts-vue,ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                box-sizing: border-box;
            }

            @media screen and (max-width: 992px) {
                #main {
                    overflow: auto;
                }
            }

            @media screen and (max-height: 640px) {
                #main {
                    overflow: auto;
                }
            }
        </style>
    </head>

    <body style="margin: 0; background: #192d2f">
        <div id="main">
            <sm-layout-header>
                <div class="dashboard-header">
                    <div class="left-header">
                        <sm-text class="btn-active" v-bind="textPropsCommon" title="指标总览"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="调查监测"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="耕地保护"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="空间规划"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="用途管制"></sm-text>
                    </div>
                    <sm-text class="middle-header" v-bind="headerTitleProps"></sm-text>
                    <div class="right-header">
                        <sm-text v-bind="textPropsCommon" title="权益保护"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="地质矿产"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="生态修复"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="确权登记"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="执法监察"></sm-text>
                    </div>
                </div>
            </sm-layout-header>

            <sm-layout-content>
                <a-row>
                    <a-col :span="6">
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="调查监测"></sm-text>
                            <div class="indicator-group">
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                            </div>
                            <div class="indicator-background">
                                <div class="indicator-background-item">
                                    <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                    <div class="circle-center">
                                        <sm-text title="国土空间用地构成"></sm-text>
                                    </div>
                                    <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                </div>
                                <div class="indicator-background-item">
                                    <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                </div>
                            </div>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="耕地保护"></sm-text>
                            <div class="indicator-bar">
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                            </div>
                            <sm-chart v-bind="lineChartProps"></sm-chart>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="空间规划"></sm-text>
                            <div class="indicator-bar">
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                            </div>
                            <div class="datalist-container">
                                <div class="datalist-item">
                                    <sm-text title="生态保护红线"></sm-text>
                                    <sm-text v-bind="textNumberProps" title="5.0"></sm-text>
                                    <sm-indicator v-bind="indicatorNumberProps"></sm-indicator>
                                </div>
                                <div class="datalist-item">
                                    <sm-text title="生态保护红线"></sm-text>
                                    <sm-text v-bind="textNumberProps" title="5.0"></sm-text>
                                    <sm-indicator v-bind="indicatorNumberProps"></sm-indicator>
                                </div>
                                <div class="datalist-item">
                                    <sm-text title="生态保护红线"></sm-text>
                                    <sm-text v-bind="textNumberProps" title="5.0"></sm-text>
                                    <sm-indicator v-bind="indicatorNumberProps"></sm-indicator>
                                </div>
                            </div>
                        </sm-border>
                    </a-col>
                    <a-col :span="12">
                        <a-row class="middle-map-box">
                            <sm-web-map v-bind="mapProps"></sm-web-map>
                        </a-row>
                        <a-row class="middle-grid-box">
                            <sm-border
                                :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                                class="container"
                            >
                                <sm-text class="container-title" v-bind="textGridTitle" title="执法监察"></sm-text>
                                <div class="chart-container">
                                    <div class="chart-box-item">
                                        <sm-text title="新增建设用地"></sm-text>
                                        <sm-chart v-bind="gaugeChartProps"></sm-chart>
                                    </div>
                                    <div class="chart-box-item">
                                        <sm-text title="新增建设用地"></sm-text>
                                        <sm-chart v-bind="gaugeChartProps"></sm-chart>
                                    </div>
                                </div>
                                <div>
                                    <div class="land-indicator-container">
                                        <div class="land-indicator-row">
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                        </div>
                                        <div class="land-indicator-row">
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </sm-border>
                            <sm-border
                                :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                                class="container"
                            >
                                <sm-text class="container-title" v-bind="textGridTitle" title="生态修复"></sm-text>
                                <div class="indicator-bar">
                                    <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                    <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                    <div class="project-list">
                                      <div class="project-list-item">
                                        <sm-text title="85.2"></sm-text>
                                        <div class="project-list-item-color1"></div>
                                        <sm-text title="沙化土地"></sm-text>
                                      </div>
                                      <div class="project-list-item">
                                        <sm-text title="85.2"></sm-text>
                                        <div class="project-list-item-color2"></div>
                                        <sm-text title="沙化土地"></sm-text>
                                      </div>
                                      <div class="project-list-item">
                                        <sm-text title="85.2"></sm-text>
                                        <div class="project-list-item-color3"></div>
                                        <sm-text title="沙化土地"></sm-text>
                                      </div>
                                    </div>
                                    <div class="project-container">
                                        <div class="project-item">
                                            <sm-text
                                                class="text-circle"
                                                v-bind="projectTextProps"
                                                title="10%"
                                            ></sm-text>
                                            <sm-text title="立项（个）"></sm-text>
                                        </div>
                                        <div class="project-item">
                                            <sm-text
                                                class="text-circle"
                                                v-bind="projectTextProps"
                                                title="10%"
                                            ></sm-text>
                                            <sm-text title="立项（个）"></sm-text>
                                        </div>
                                        <div class="project-item">
                                            <sm-text
                                                class="text-circle"
                                                v-bind="projectTextProps"
                                                title="10%"
                                            ></sm-text>
                                            <sm-text title="立项（个）"></sm-text>
                                        </div>
                                    </div>
                                </div>
                            </sm-border>
                        </a-row>
                    </a-col>
                    <a-col :span="6">
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="确权登记"></sm-text>
                            <div class="indicator-group">
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                            </div>
                            <sm-chart v-bind="lineChartProps"></sm-chart>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="执法监察"></sm-text>
                            <div class="indicator-bar">
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                            </div>
                            <sm-chart v-bind="chartXBarProps"></sm-chart>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="地质矿产"></sm-text>
                            <div class="miner-container">
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                            </div>
                            <div class="miner-container">
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                            </div>
                        </sm-border>
                    </a-col>
                </a-row>
            </sm-layout-content>
        </div>

        <script>
            //本示例数据纯属虚构
            new Vue({
                el: '#main',
                data() {
                    return {
                        headerTitleProps: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '自然资源承载能力监管决策平台',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 32,
                                fontWeight: 'bolder',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'px',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        textPropsCommon: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 16,
                                lineHeight: 1.5,
                                fontWeight: 'normal',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        textGridTitle: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '耕地保护',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 16,
                                lineHeight: 1.5,
                                fontWeight: 'normal',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        indicatorGroup: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '农用地占比',
                            unit: '%',
                            num: '65',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#84F0F9',
                            // fontSize: 18, ?
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: './static/material/border/border15.png',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 12,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        indicatorBar: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '本年度耕地面积:',
                            unit: '元,',
                            num: '85.2',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'horizontal',
                            indicatorColor: '#E98F52',
                            // fontSize: 16,
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 14,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        lineChartProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            iconClass: '',
                            seriesType: 'line',
                            headerName: '',
                            dataset: { maxFeatures: 20, url: '', type: '' },
                            datasetOptions: [{ seriesType: 'line' }],
                            options: {
                                series: [
                                    {
                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 8,
                                        itemStyle: { borderWidth: 2 },
                                        lineStyle: { color: '#3fb1e3' }
                                    },
                                    {
                                        data: ['3400', '3617', '4200', '1842', '3000', '800', '500'],
                                        name: 'Y2',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 8,
                                        itemStyle: { borderWidth: 2 },
                                        lineStyle: { color: '#6be6c1' }
                                    }
                                ],
                                yAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    name: '',
                                    show: true,
                                    splitLine: {
                                        lineStyle: {
                                            width: 0.3,
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1
                                        },
                                        show: false
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: true }
                                },
                                xAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    show: true,
                                    name: '',
                                    axisTick: { alignWithLabel: true, show: true },
                                    splitLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1,
                                            width: 0.3
                                        },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category',
                                    boundaryGap: true
                                },
                                grid: { top: 35, left: 50, bottom: 35, right: 20 },
                                legend: {
                                    data: ['Y1', 'Y2'],
                                    show: true,
                                    textStyle: { color: '#fff', fontSize: 12 },
                                    type: 'scroll',
                                    top: 'top',
                                    left: 'center'
                                },
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'line' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: {
                                        fontFamily: 'Microsoft YaHei Light',
                                        fontWeight: '100'
                                    }
                                }
                            },
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            isGradient: false,
                            animationDelay: true,
                            highlightColor: '#00eeff',
                            thresholdConfig: [
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                },
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                }
                            ]
                        },
                        textNumberProps: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#E98F52',
                            dataType: 'static',
                            title: '4.1',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 22,
                                lineHeight: 1.5,
                                fontWeight: 'bolder',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        indicatorNumberProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '',
                            unit: '万km',
                            num: '5.0',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '',
                            // fontSize: 18,
                            fontWeight: 'normal',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 14,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        indicatorMinerProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '地质调查项目',
                            unit: '个',
                            num: '15',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#84F0F9',
                            // fontSize: 22,
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 14,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        projectTextProps: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#84F0F9',
                            dataType: 'static',
                            title: '10%',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 18,
                                lineHeight: 1.5,
                                fontWeight: 'bolder',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: './static/material/image/image4.png',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        gaugeChartProps: {
                            dataType: 'static',
                            value: 36,
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            iconClass: '',
                            seriesType: 'gauge',
                            headerName: '',
                            dataset: {
                                maxFeatures: 20,
                                url: '',
                                type: '',
                                withCredentials: false
                            },
                            datasetOptions: [{ seriesType: 'gauge' }],
                            options: {
                                series: [
                                    {
                                        name: 'inLoop',
                                        type: 'gauge',
                                        min: 0,
                                        max: 100,
                                        center: ['50%', '50%'],
                                        startAngle: 180,
                                        endAngle: 0,
                                        splitNumber: 10,
                                        radius: '102%',
                                        data: [{ value: 36, name: '完成率' }],
                                        title: {
                                            show: false,
                                            textStyle: { fontSize: 14, color: '#ffffff' }
                                        },
                                        detail: {
                                            show: true,
                                            textStyle: { fontSize: 20, color: '#ffffff' }
                                        },
                                        axisTick: {
                                            show: false,
                                            length: 13,
                                            lineStyle: { width: 1, color: '#fff' }
                                        },
                                        splitLine: {
                                            show: false,
                                            length: 20,
                                            lineStyle: { width: 2, color: '#fff' }
                                        },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 16,
                                            color: '#fff'
                                        },
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                color: [
                                                    [0.36, '#1ADDD3'],
                                                    [1, '#747070']
                                                ],
                                                width: 8
                                            }
                                        },
                                        pointer: { show: false, length: '75%', width: 7 },
                                        itemStyle: { show: false, color: 'auto' }
                                    },
                                    {
                                        name: 'outLoop',
                                        type: 'gauge',
                                        min: 0,
                                        max: 100,
                                        center: ['50%', '50%'],
                                        startAngle: 225,
                                        endAngle: -45,
                                        splitNumber: 10,
                                        radius: '75%',
                                        title: { show: false },
                                        detail: { show: false },
                                        axisTick: {
                                            show: false,
                                            length: -8,
                                            lineStyle: { width: 1, color: '' },
                                            splitNumber: 7
                                        },
                                        splitLine: {
                                            show: false,
                                            length: -20,
                                            lineStyle: { width: 2, color: '' }
                                        },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 25
                                        },
                                        axisLine: { show: false },
                                        pointer: { show: false },
                                        itemStyle: { show: true, color: '' }
                                    }
                                ]
                            },
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        imageProps: {
                            background: 'rgba(0,0,0,0)',
                            src: '../img/background/image3.png',
                            repeat: 'center',
                            href: '',
                            target: '_blank',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        landIndicatorProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '新增建设用地面积',
                            unit: '元',
                            num: 1232,
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#E98F52',
                            // fontSize: 16,
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 12,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        mapProps: {
                            mapId: 1887887232,
                            name: 'landuse',
                            serverUrl: 'https://www.supermapol.com',
                            target: 'map_1599996603987',
                            layers: [],
                            tdtComponents: {
                                tdtRoute: {
                                    data: {
                                        carUrl: 'https://api.tianditu.gov.cn/drive',
                                        busUrl: 'https://api.tianditu.gov.cn/transit',
                                        searchUrl: 'https://api.tianditu.gov.cn/search',
                                        tk: ''
                                    },
                                    headerName: '路线',
                                    background: 'rgba(0,0,0,0.3)',
                                    textColor: '#fff',
                                    show: false,
                                    position: 'bottom-right',
                                    uri: 'mapboxgl/tdt/route/TdtRoute',
                                    collapsed: true
                                },
                                tdtSearch: {
                                    data: {
                                        searchUrl: 'https://api.tianditu.gov.cn/search',
                                        tk: ''
                                    },
                                    background: 'rgba(0,0,0,0.3)',
                                    textColor: '#fff',
                                    show: false,
                                    position: 'bottom-right',
                                    uri: 'mapboxgl/tdt/search/TdtSearch',
                                    collapsed: true
                                },
                                tdtMapSwitcher: {
                                    data: { select: '', label: true, tk: '' },
                                    headerName: '地图切换',
                                    show: false,
                                    background: 'rgba(0,0,0,0.3)',
                                    textColor: '#fff',
                                    position: 'bottom-right',
                                    uri: 'mapboxgl/tdt/mapSwitcher/TdtMapSwitcher',
                                    collapsed: true
                                }
                            },
                            zoomControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-left',
                                showZoomSlider: false
                            },
                            scaleControl: {
                                background: 'rgba(0,0,0,0)',
                                textColor: '#3fb1e3',
                                show: false,
                                position: 'bottom-left'
                            },
                            panControl: { show: false, position: 'top-left' },
                            miniMapControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'bottom-right',
                                collapsed: true
                            },
                            layerListControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                collapsed: true
                            },
                            measureControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                showUnitSelect: true,
                                distanceDefaultUnit: 'kilometers',
                                areaDefaultUnit: 'kilometers',
                                collapsed: true
                            },
                            legendControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'bottom-left',
                                headerName: '',
                                layerNames: [],
                                isShowTitle: false,
                                isShowField: false,
                                mode: 'panel',
                                collapsed: false
                            },
                            queryControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                collapsed: true,
                                restMap: null,
                                restData: null,
                                iportalData: null,
                                headerName: '查询',
                                layerStyle: {
                                    line: {
                                        paint: {
                                            'line-width': 3,
                                            'line-color': '#409eff',
                                            'line-opacity': 1
                                        }
                                    },
                                    circle: {
                                        paint: {
                                            'circle-color': '#409eff',
                                            'circle-opacity': 0.6,
                                            'circle-radius': 8,
                                            'circle-stroke-width': 2,
                                            'circle-stroke-color': '#409eff',
                                            'circle-stroke-opacity': 1
                                        }
                                    },
                                    fill: {
                                        paint: {
                                            'fill-color': '#409eff',
                                            'fill-opacity': 0.6,
                                            'fill-outline-color': '#409eff'
                                        }
                                    },
                                    stokeLine: {
                                        paint: {
                                            'line-width': 3,
                                            'line-color': '#409eff',
                                            'line-opacity': 1
                                        }
                                    }
                                }
                            },
                            searchControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                maxFeatures: 8,
                                layerNames: null,
                                addressMatch: null,
                                restMap: null,
                                restData: null,
                                iportalData: null,
                                onlineLocalSearch: { enable: true, city: '北京市' },
                                collapsed: true
                            },
                            identifyControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                layers: {},
                                fields: {},
                                layerStyle: {
                                    line: {
                                        paint: { 'line-color': '#409eff', 'line-opacity': 1 }
                                    },
                                    circle: {
                                        paint: {
                                            'circle-color': '#409eff',
                                            'circle-opacity': 0.6,
                                            'circle-stroke-color': '#409eff',
                                            'circle-stroke-opacity': 1
                                        }
                                    },
                                    fill: {
                                        paint: {
                                            'fill-color': '#409eff',
                                            'fill-opacity': 0.6,
                                            'fill-outline-color': '#409eff'
                                        }
                                    },
                                    stokeLine: {
                                        paint: { 'line-color': '#409eff', 'line-opacity': 1 }
                                    }
                                }
                            },
                            layerManagerControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                headerName: '图层管理',
                                defaultExpandAll: true,
                                collapsed: true,
                                position: 'top-right',
                                show: false,
                                layers: [],
                                mapTarget: null
                            },
                            mapOptions: {
                                style: { version: 8, sources: {}, layers: [] },
                                center: [108.8596, 23.8136],
                                zoom: 14.12,
                                bearing: 24.44,
                                pitch: 44.5,
                                tileSize: 256
                            },
                            layerStyle: {
                                circle: {
                                    paint: {
                                        'circle-color': '#4fcfff',
                                        'circle-opacity': 0.8,
                                        'circle-stroke-color': '#4fcfff',
                                        'circle-stroke-opacity': 1,
                                        'circle-radius': 8,
                                        'circle-stroke-width': 2
                                    }
                                },
                                line: {
                                    paint: {
                                        'line-color': '#4fcfff',
                                        'line-opacity': 1,
                                        'line-width': 2
                                    }
                                },
                                stokeLine: {
                                    paint: {
                                        'line-width': 2,
                                        'line-color': '#4fcfff',
                                        'line-opacity': 1
                                    }
                                },
                                fill: {
                                    paint: {
                                        'fill-color': '#4fcfff',
                                        'fill-opacity': 0.6,
                                        'fill-outline-color': '#4fcfff'
                                    }
                                }
                            },
                            highlightLayerStyle: {
                                circle: {
                                    paint: {
                                        'circle-color': '#01ffff',
                                        'circle-opacity': 0.8,
                                        'circle-stroke-color': '#01ffff',
                                        'circle-stroke-opacity': 0
                                    }
                                },
                                line: { paint: { 'line-color': '#01ffff', 'line-opacity': 1 } },
                                stokeLine: {
                                    paint: {
                                        'line-width': 2,
                                        'line-color': '#01ffff',
                                        'line-opacity': 1
                                    }
                                },
                                fill: {
                                    paint: {
                                        'fill-color': '#01ffff',
                                        'fill-opacity': 0.6,
                                        'fill-outline-color': '#01ffff'
                                    }
                                }
                            },
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            fixedMap: 'unFixed',
                            layersIdField: {},
                            trackLayers: [],
                            withCredentials: false
                        },
                        chartXBarProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            headerName: '',
                            iconClass: '',
                            seriesType: 'xBar',
                            dataset: { maxFeatures: 10, type: 'geoJSON' },
                            datasetOptions: [
                                {
                                    seriesType: 'bar',
                                    isStastic: false,
                                    isStack: false,
                                    xField: '最高七天气温_num',
                                    yField: '最高气温',
                                    sort: 'unsort',
                                    rankLabel: false
                                },
                                {
                                    seriesType: 'bar',
                                    isStastic: false,
                                    isStack: false,
                                    xField: '最高七天气温_num',
                                    yField: '最低气温',
                                    sort: 'unsort',
                                    rankLabel: false
                                }
                            ],
                            options: {
                                yAxis: {
                                    show: true,
                                    type: 'category',
                                    name: '',
                                    nameLocation: 'end',
                                    nameGap: 2,
                                    axisTick: { alignWithLabel: true, show: true },
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            width: 0.3,
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1
                                        },
                                        show: false
                                    },
                                    boundaryGap: true
                                },
                                xAxis: {
                                    type: 'value',
                                    name: '',
                                    nameLocation: 'end',
                                    nameGap: 5,
                                    show: true,
                                    scale: false,
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1,
                                            width: 0.3
                                        },
                                        show: false
                                    },
                                    splitArea: { show: false },
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    min: -50,
                                    max: 50,
                                    axisTick: { show: true }
                                },
                                grid: { left: 50, right: 50, top: 35, bottom: 35 },
                                legend: {
                                    type: 'scroll',
                                    data: ['最高气温', '最低气温'],
                                    show: false,
                                    top: 'top',
                                    left: 'center',
                                    textStyle: { color: '#fff', fontSize: 12 }
                                },
                                series: [
                                    {
                                        data: ['500', '800', '3000', '3617', '3400', '4200', '1842'],
                                        name: 'Y2',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'bar',
                                        barWidth: 10,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        itemStyle: { barBorderRadius: [0, 0, 0, 0] }
                                    },
                                    {
                                        data: ['-450', '-700', '-2000', '-2617', '-2400', '-3200', '-2842'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'bar',
                                        barWidth: 10,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        itemStyle: { barBorderRadius: [0, 0, 0, 0] }
                                    },
                                    {
                                        type: 'bar',
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        barWidth: 0,
                                        itemStyle: { barBorderRadius: [0, 0, 0, 0] }
                                    }
                                ],
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'shadow' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: {
                                        fontFamily: 'Microsoft YaHei Light',
                                        fontWeight: '100'
                                    }
                                }
                            },
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            isGradient: false,
                            animationDelay: true,
                            highlightColor: '#00eeff',
                            thresholdConfig: [
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                },
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                }
                            ],
                            field: 'smid',
                            orderYField: '最高气温'
                        },
                        iconProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            iconStyle: { fontSize: 18, color: '' },
                            iconClass: 'sm-mapdashboard-user-icon-zoom-to',
                            autoPrefix: false,
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        }
                    };
                },
                mounted() {
                    let screenWidth = document.body.clientWidth;
                    if (screenWidth <= 540) {
                        this.showMap = false;
                    }
                }
            });
        </script>
        <style>
            html {
                font-size: 10px;
            }
            .container {
                width: 24vw;
                height: 29vh;
                margin: 10px 8px;
            }

            .container .container-title {
                height: 35px;
                margin-top: -12px;
                font-size: 14px;
                background-image: url('../img/background/image2.png') !important;
            }

            .indicator-group {
                width: 420px;
                height: 55px;
                display: flex;
                margin-top: 10px;
                justify-content: space-around;
            }

            .chart-container {
                width: 80%;
                margin: 5px auto;
                display: flex;
                height: 100px;
                justify-content: space-around;
            }

            .chart-box-item {
                width: 30%;
                height: 80px;
            }
            .chart-box-item .sm-component-chart {
                height: 80px;
            }

            .project-list {
              width: 80%;
              height: 50px;
              display: flex;
              margin: 5px auto;
              justify-content: space-around;
            }

            .project-list .project-list-item {
              width: 33.3%;
            }

            .project-list .project-list-item > div {
              height: 16px;
            }

            .project-list .project-list-item .project-list-item-color1 {
              background: #3D7CB3;
            }

            .project-list .project-list-item .project-list-item-color2 {
              background: #3DB346;
            }

            .project-list .project-list-item .project-list-item-color3 {
              background: #5F676E;
            }


            .indicator-bar {
                text-align: center;
                height: 30px;
                margin-top: 15px;
                font-size: 14px;
            }

            .sm-component-layout-header {
                padding: 0px;
                background: none;
            }

            .sm-component-chart {
                height: 18vh;
            }

            .circle-center {
                width: 75px;
                height: 75px;
                background-image: url('../img/background/image3.png');
                background-size: cover;
            }

            .sm-component-layout-content {
                margin-top: 20px;
            }

            .left-header {
                width: 34%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .btn-active span {
                background-image: url('../img/background/image8.png') !important;
                background-size: contain;
            }

            .miner-container {
                width: 380px;
                height: 98px;
                margin: 10px auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-image: url('../img/background/image5.png');
            }

            .indicator-background {
                width: 80%;
                height: 140px;
                margin: 10px auto;
                background-image: url('../img/background/image11.png');
            }

            .indicator-background-item {
                height: 64px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .indicator-background-item .sm-component-indicator .sm-component-indicator__title {
                font-size: 12px;
            }

            .miner-container .sm-component-indicator {
                margin-left: 60px;
            }

            .middle-grid-box {
                height: 281px;
                display: flex;
                justify-content: space-around;
            }

            .middle-map-box {
                width: 910px;
                height: 58vh;
                margin: 20px auto 2px;
            }

            .datalist-container {
                width: 360px;
                height: 120px;
                margin: 60px auto 0px;
            }

            .datalist-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 30px;
                margin-bottom: 10px;
                background-image: url('../img/background/image6.png');
            }

            .datalist-item > .sm-component-text {
                margin-left: 20px;
            }

            .sm-component-text {
                background: none !important;
                color: #fff !important;
            }

            .land-indicator-container {
                width: 90%;
                margin: 2px auto 0px;
            }

            .land-indicator-row {
                height: 46px;
                display: flex;
                margin-bottom: 10px;
                justify-content: space-around;
                align-items: center;
            }

            .land-indicator-item {
                display: flex;
                position: relative;
                justify-content: space-around;
                align-items: center;
            }

            .land-indicator-row .land-indicator-item .sm-component-image {
                width: 46px;
                height: 46px;
            }

            .land-indicator-row .land-indicator-item .sm-component-indicator .sm-component-indicator__title {
                font-size: 12px;
            }

            .right-header {
                width: 34%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .dashboard-header {
                background-image: url('../img/background/image1.png');
                height: 72px;
                display: flex;
                align-items: center;
            }
            .middle-header {
                font-size: 32px;
                display: flex;
                height: 72px;
                width: 612px;
            }

            .project-container {
                width: 392px;
                height: 98px;
                margin: 0px auto 0px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .project-container > .project-item {
                width: 80px;
                height: 100%;
            }

            .project-container > .project-item .text-circle {
                width: 100%;
                height: 64px;
                background-image: url('../img/background/image4.png') !important;
                background-size: 90% 90%;
            }

            .project-container > .project-item .sm-component-text {
              margin-top: 10px;
              width: 80px;
            }

            .project-container > .project-item .sm-component-text .sm-component-text__span {
              margin-top: 8px;
            }

            @media (max-width: 540px) {
                html {
                    font-size: 10px;
                }
                .left-container {
                    padding-top: 0;
                }
                .map-wrap {
                    width: 100vw;
                    height: 90vh;
                }
            }
            @media (min-width: 1200px) {
                html {
                    font-size: 16px;
                }
            }
        </style>
    </body>
</html>