fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_ecologicalBigDataPlatform_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: #011635ff">
        <div id="main">
            <sm-layout-header>
                <a-row>
                    <a-col :span="16" :offset="4">
                        <sm-text title="XX生态大数据平台"></sm-text>
                    </a-col>
                    <a-col :span="4">
                        <sm-time-text time-type="date+second+week"></sm-time-text>
                    </a-col>
                </a-row>
            </sm-layout-header>
            <a-row style="height: 100%">
                <a-col :span="4">
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="地区介绍"
                        ></sm-text>
                        <sm-text
                            class="container-content"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="XX州是XX省的自治州，位于XX省东南部。地处XX与XX交界处。具有大陆性季风气候的特点。全州总面积XX平方米。下辖X县、X市，总人口约为XX万人。"
                        ></sm-text>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="水域概况"
                        ></sm-text>
                        <sm-text-list v-bind="textlistPropDatas"></sm-text-list>>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="水质信息"
                        ></sm-text>
                        <a-row>
                            <a-col :span="10">
                                <sm-liquid-fill class="liquid-ball1" v-bind="liquidPropDatas" />
                            </a-col>
                            <a-col :span="14">
                                <sm-text
                                    title="水质达标率80%，水质总体表现较为一般，主要污染原因为PH超标，请个监测站做好监测工作"
                                ></sm-text>
                                <a-row>
                                    <a-col :span="8">
                                        <sm-liquid-fill v-bind="liquidPropDatas" />
                                    </a-col>
                                    <a-col :span="14" :offset="2">
                                        <sm-indicator v-bind="indicatorPropDatas"></sm-indicator>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                    </sm-border>
                </a-col>
                <a-col :span="4">
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="生态类型与分布"
                        ></sm-text>
                        <a-row>
                            <a-col :span="12">
                                <sm-chart class="chartXBar" v-bind="chartXBarPropDatas"></sm-chart>
                            </a-col>
                            <a-col :span="11" :offset="1">
                                <sm-chart class="chart-pie" v-bind="chartPiePropDatas"></sm-chart>
                            </a-col>
                        </a-row>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="检测站点概况"
                        ></sm-text>
                        <a-row>
                            <a-col :span="9">
                                <sm-text-list class="textlist2" v-bind="textlistPropDatas2"></sm-text-list>
                            </a-col>
                            <a-col :span="14" :offset="1">
                                <a-row class="indicator-box">
                                    <a-col :span="12"
                                        ><sm-indicator v-bind="indicatorPropDatas30"></sm-indicator
                                    ></a-col>
                                    <a-col :span="12" class="indicator-box-right">
                                        <sm-indicator v-bind="indicatorPropDatas28"></sm-indicator>
                                        <sm-indicator v-bind="indicatorPropDatas2"></sm-indicator>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <sm-chart class="chartLine1" v-bind="chartLinePropDatas1"></sm-chart>
                                </a-row>
                            </a-col>
                        </a-row>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="储水量"
                        ></sm-text>
                        <a-row>
                            <sm-chart class="chartLineCommon" v-bind="chartLineCommon"></sm-chart>
                        </a-row>
                    </sm-border>
                </a-col>
                <a-col :span="8" class="center-iframe-grid">
                    <a-row style="height: 100%;">
                        <a-col style="height: 100%;">
                            <sm-iframe v-bind="iframePropDatas"></sm-iframe>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :span="4">
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="全州草蓄平衡压力趋势"
                        ></sm-text>
                        <a-row>
                            <sm-chart class="chartLineCommon" v-bind="chartLineCommon"></sm-chart>
                        </a-row>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="人类扰动趋势"
                        ></sm-text>
                        <a-row>
                            <sm-chart class="chartLineCommon" v-bind="chartLineCommon"></sm-chart>
                        </a-row>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="资金补偿"
                        ></sm-text>
                        <a-row>
                            <sm-chart class="chartGauge" v-bind="chartGaugePropDatas"></sm-chart>
                        </a-row>
                    </sm-border>
                </a-col>
                <a-col :span="4">
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="实时气象"
                        ></sm-text>
                        <a-row>
                            <a-col :span="6" :offset="2">
                                <sm-image v-bind="imagePropDatas"></sm-image>
                            </a-col>
                            <a-col :span="14" :offset="1">
                                <sm-indicator v-bind="indicatorPropDatas"></sm-indicator>
                                <sm-indicator v-bind="indicatorPropDatas"></sm-indicator>
                            </a-col>
                            <a-row>
                                <a-col :span="20" :offset="2" class="temperature-text">
                                    <sm-text title="小雨，温度6-30℃，舒适度较高。"></sm-text>
                                </a-col>
                            </a-row>
                        </a-row>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="全州月度植被STD/MEAN平均"
                        ></sm-text>
                        <a-row>
                            <sm-chart class="chartLineCommon" v-bind="chartLineCommon"></sm-chart>
                        </a-row>
                    </sm-border>
                    <sm-border type="border1" class="container">
                        <sm-text
                            class="container-title"
                            background="rgba(0,0,0,0)"
                            text-color="#C5D6E8"
                            :font-style="{'fontSize': 24,
                                        'lineHeight': 1.5,
                                        'fontWeight': 'normal',
                                        'justifyContent': 'center',
                                        'textAlign': 'center',
                                        'textIndent': 0,
                                        'fontFamily': '微软雅黑'}"
                            title="全州历年植被变化趋势"
                        ></sm-text>
                        <a-row>
                            <sm-chart class="chartLineCommon" v-bind="chartLineCommon"></sm-chart>
                        </a-row>
                    </sm-border>
                </a-col>
            </a-row>
        </div>

        <script>
            //本示例数据纯属虚构
            new Vue({
                el: '#main',
                data() {
                    return {
                        textlistPropDatas: {
                            autoResize: true,
                            content: [
                                { 站台: '漠河', 省份: '黑龙江1', 海拔: '296', 平均最低气温: '-47', 最热七天气温: '29' },
                                {
                                    站台: '塔河',
                                    省份: '黑龙江2',
                                    海拔: '357.4',
                                    平均最低气温: '-42',
                                    最热七天气温: '29'
                                },
                                {
                                    站台: '呼玛',
                                    省份: '黑龙江3',
                                    海拔: '177.4',
                                    平均最低气温: '-42',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '额尔古纳右旗',
                                    省份: '内蒙古1',
                                    海拔: '581.4',
                                    平均最低气温: '-42',
                                    最热七天气温: '29'
                                },
                                {
                                    站台: '图里河',
                                    省份: '内蒙古2',
                                    海拔: '732.6',
                                    平均最低气温: '-46',
                                    最热七天气温: '27'
                                },
                                {
                                    站台: '黑河',
                                    省份: '黑龙江4',
                                    海拔: '166.4',
                                    平均最低气温: '-37',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '满洲里',
                                    省份: '内蒙古3',
                                    海拔: '661.7',
                                    平均最低气温: '-37',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '海拉尔',
                                    省份: '内蒙古4',
                                    海拔: '610',
                                    平均最低气温: '-40',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '小二沟',
                                    省份: '内蒙古5',
                                    海拔: '286',
                                    平均最低气温: '-42',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '嫩江',
                                    省份: '黑龙江5',
                                    海拔: '242.2',
                                    平均最低气温: '-40',
                                    最热七天气温: '30'
                                }
                            ],
                            dataset: {},
                            fontSize: 10,
                            autoRolling: true,
                            rows: 6,
                            columns: [
                                {
                                    header: '站台',
                                    field: '站台',
                                    sort: false,
                                    defaultSortType: 'none',
                                    fixInfo: { prefix: '', suffix: '' },
                                    width: 25
                                },
                                {
                                    header: '海拔',
                                    field: '海拔',
                                    sort: false,
                                    defaultSortType: 'none',
                                    fixInfo: { prefix: '', suffix: '' },
                                    width: 25
                                },
                                {
                                    header: '平均最低气温',
                                    field: '平均最低气温',
                                    sort: false,
                                    defaultSortType: 'none',
                                    fixInfo: { prefix: '', suffix: '' },
                                    width: 25
                                },
                                {
                                    header: '最热七天气温',
                                    field: '最热七天气温',
                                    sort: false,
                                    defaultSortType: 'none',
                                    fixInfo: { prefix: '', suffix: '' },
                                    width: 25
                                }
                            ],
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            headerStyle: {
                                background: 'rgba(63, 177, 227, 0)',
                                sortBtnSelectColor: '#626c91',
                                color: '#fff',
                                sortBtnColor: '#fff',
                                show: true,
                                height: 0
                            },
                            rowStyle: {
                                oddStyle: { background: 'rgba(0, 0, 0, 0)' },
                                evenStyle: { background: 'rgba(63, 177, 227, 0)' },
                                height: 0
                            },
                            highlightColor: '#01ffff',
                            thresholdsStyle: [
                                { type: 'background', data: [] },
                                { type: 'background', data: [] },
                                { type: 'background', data: [] },
                                { type: 'background', data: [] }
                            ]
                        },
                        liquidPropDatas: {
                            dataType: 'static',
                            background: 'rgba(0,0,0,0)',
                            value: 0.8,
                            percentType: 'percentage',
                            size: 100,
                            waveCount: 1,
                            fontSize: 18,
                            waveColor: '',
                            borderColor: '',
                            backgroundColor: '',
                            insideLabelColor: '',
                            labelColor: '',
                            waveAnimation: false,
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        indicatorPropDatas: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '水质同比上月▲',
                            unit: '%',
                            num: '13',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#11F16A',
                            fontSize: '26',
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 18,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        chartXBarPropDatas: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            headerName: '',
                            iconClass: '',
                            seriesType: 'xBar',
                            dataset: { maxFeatures: 20, url: '', type: '' },
                            datasetOptions: [{ seriesType: 'bar' }],
                            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: false },
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: false,
                                        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] },
                                    axisTick: { show: false }
                                },
                                grid: { left: 50, right: 0, top: 10, bottom: 10 },
                                legend: {
                                    type: 'scroll',
                                    data: ['Y2', 'Y1', 'Y3'],
                                    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: ['100', '520', '2000', '3340', '3900', '3300', '2500'],
                                        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] }
                                    },
                                    {
                                        data: ['230', '600', '2200', '2500', '3000', '4000', '1000'],
                                        name: 'Y3',
                                        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] }
                                    }
                                ],
                                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' }
                                }
                            },
                            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: [] },
                                { show: false, type: 'data', dataConfig: [], rankConfig: [] }
                            ]
                        },
                        chartPiePropDatas: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            seriesType: 'pie',
                            headerName: '',
                            iconClass: '',
                            dataset: { maxFeatures: 20, url: '', type: '' },
                            datasetOptions: [{ seriesType: 'pie' }],
                            options: {
                                tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
                                legend: {
                                    type: 'scroll',
                                    orient: 'vertical',
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                    show: false,
                                    top: 'top',
                                    left: 'left',
                                    textStyle: { color: '#fff', fontSize: 12 }
                                },
                                series: [
                                    {
                                        name: 'demo',
                                        type: 'pie',
                                        radius: '70%',
                                        avoidLabelOverlap: true,
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'outside',
                                                textStyle: { fontSize: 12 },
                                                formatter: '{b}: {c}'
                                            },
                                            emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } }
                                        },
                                        labelLine: { show: true },
                                        data: [
                                            { value: 500, name: 'Mon' },
                                            { value: 800, name: 'Tue' },
                                            { value: 3000, name: 'Wed' },
                                            { value: 3617, name: 'Thu' },
                                            { value: 3400, name: 'Fri' },
                                            { value: 4200, name: 'Sat' },
                                            { value: 1842, name: 'Sun' }
                                        ],
                                        clockwise: true,
                                        maxLabels: '',
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        startAngle: 90,
                                        center: ['50%', '50%']
                                    }
                                ]
                            },
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            isGradient: false,
                            autoPlay: false,
                            animationDelay: true,
                            highlightColor: '#00eeff',
                            thresholdConfig: [{ show: false, type: 'data', dataConfig: [], rankConfig: [] }]
                        },
                        textlistPropDatas2: {
                            autoResize: true,
                            content: [
                                { 站台: '漠河', 省份: '黑龙江1', 海拔: '296', 平均最低气温: '-47', 最热七天气温: '29' },
                                {
                                    站台: '塔河',
                                    省份: '黑龙江2',
                                    海拔: '357.4',
                                    平均最低气温: '-42',
                                    最热七天气温: '29'
                                },
                                {
                                    站台: '呼玛',
                                    省份: '黑龙江3',
                                    海拔: '177.4',
                                    平均最低气温: '-42',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '额尔古纳右旗',
                                    省份: '内蒙古1',
                                    海拔: '581.4',
                                    平均最低气温: '-42',
                                    最热七天气温: '29'
                                },
                                {
                                    站台: '图里河',
                                    省份: '内蒙古2',
                                    海拔: '732.6',
                                    平均最低气温: '-46',
                                    最热七天气温: '27'
                                },
                                {
                                    站台: '黑河',
                                    省份: '黑龙江4',
                                    海拔: '166.4',
                                    平均最低气温: '-37',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '满洲里',
                                    省份: '内蒙古3',
                                    海拔: '661.7',
                                    平均最低气温: '-37',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '海拉尔',
                                    省份: '内蒙古4',
                                    海拔: '610',
                                    平均最低气温: '-40',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '小二沟',
                                    省份: '内蒙古5',
                                    海拔: '286',
                                    平均最低气温: '-42',
                                    最热七天气温: '30'
                                },
                                {
                                    站台: '嫩江',
                                    省份: '黑龙江5',
                                    海拔: '242.2',
                                    平均最低气温: '-40',
                                    最热七天气温: '30'
                                }
                            ],
                            dataset: {},
                            fontSize: 11,
                            autoRolling: true,
                            rows: 6,
                            columns: [
                                {
                                    header: '站台',
                                    field: '站台',
                                    sort: false,
                                    defaultSortType: 'none',
                                    fixInfo: { prefix: '', suffix: '' },
                                    width: 0
                                },
                                {
                                    header: '省份',
                                    field: '省份',
                                    sort: false,
                                    defaultSortType: 'none',
                                    fixInfo: { prefix: '', suffix: '' },
                                    width: 0
                                }
                            ],
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            headerStyle: {
                                background: 'rgba(63, 177, 227, 0)',
                                sortBtnSelectColor: '#626c91',
                                color: '#fff',
                                sortBtnColor: '#fff',
                                show: true,
                                height: 0
                            },
                            rowStyle: {
                                oddStyle: { background: 'rgba(0, 0, 0, 0.01)' },
                                evenStyle: { background: 'rgba(63, 177, 227, 0)' },
                                height: 0
                            },
                            highlightColor: '#01ffff',
                            thresholdsStyle: [
                                { type: 'background', data: [] },
                                { type: 'background', data: [] }
                            ]
                        },
                        indicatorPropDatas30: {
                            background: '#083381',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '水质监测点',
                            unit: '',
                            num: '30',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#FFFFFF',
                            fontSize: '26',
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 18,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        indicatorPropDatas28: {
                            background: '#116A66',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '正常',
                            unit: '',
                            num: '28',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'horizontal',
                            indicatorColor: '#FFFFFF',
                            fontSize: '26',
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 18,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        indicatorPropDatas2: {
                            background: '#741B21',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '异常',
                            unit: '',
                            num: '2',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'horizontal',
                            indicatorColor: '#FFFFFF',
                            fontSize: '26',
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 18,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        chartLinePropDatas1: {
                            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: false,
                                        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: false,
                                        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: false,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
                                    name: '',
                                    show: true,
                                    splitLine: {
                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
                                        show: true
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: false }
                                },
                                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: false },
                                    splitLine: {
                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category',
                                    boundaryGap: true
                                },
                                grid: { top: 10, left: 10, bottom: 35, right: 0 },
                                legend: {
                                    data: ['Y1', 'Y2'],
                                    show: false,
                                    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' }
                                }
                            },
                            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: [] }
                            ]
                        },
                        chartLineCommon: {
                            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: 'circle',
                                        symbolSize: 8,
                                        itemStyle: { borderWidth: 2 },
                                        lineStyle: { color: '#3fb1e3' },
                                        areaStyle: { opacity: 0.7 }
                                    },
                                    {
                                        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: 'circle',
                                        symbolSize: 8,
                                        itemStyle: { borderWidth: 2 },
                                        lineStyle: { color: '#6be6c1' },
                                        areaStyle: { opacity: 0.7 }
                                    }
                                ],
                                yAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
                                    name: '',
                                    show: true,
                                    splitLine: {
                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
                                        show: true
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: false }
                                },
                                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: false },
                                    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: false,
                                    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' }
                                }
                            },
                            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: [] }
                            ]
                        },
                        chartGaugePropDatas: {
                            dataType: 'static',
                            value: 80,
                            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: '',
                                        type: 'gauge',
                                        customType: 'customRingsSeries',
                                        customOptions: { pointState: 'startPoint', radius: 0.65, color: '' },
                                        radius: '58%',
                                        center: ['50%', '50%'],
                                        startAngle: 90,
                                        endAngle: -269.9,
                                        splitNumber: 8,
                                        hoverAnimation: true,
                                        axisTick: { show: false },
                                        splitLine: { length: 20, lineStyle: { width: 5, color: '#2a2e34' } },
                                        axisLabel: { show: false, distance: 25, fontSize: 14, formatter: '{value}' },
                                        pointer: { show: false },
                                        axisLine: { lineStyle: { opacity: 0 } },
                                        detail: {
                                            show: true,
                                            offsetCenter: [0, 0],
                                            color: '#fff',
                                            textStyle: { fontSize: 20 }
                                        },
                                        data: [{ value: 80, name: '' }],
                                        animation: false
                                    },
                                    {
                                        name: '吃猪肉频率',
                                        type: 'pie',
                                        radius: ['58%', '45%'],
                                        silent: true,
                                        clockwise: true,
                                        startAngle: 90,
                                        z: 0,
                                        zlevel: 0,
                                        label: { normal: { position: 'center' } },
                                        data: [
                                            { value: 80, name: '', itemStyle: { normal: {} } },
                                            {
                                                value: 46,
                                                name: '',
                                                label: { normal: { show: false } },
                                                itemStyle: { normal: {} }
                                            }
                                        ]
                                    }
                                ]
                            },
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        imagePropDatas: {
                            background: 'rgba(0,0,0,0)',
                            src: '../img/background/image7.png',
                            repeat: 'center',
                            href: '',
                            target: '_blank',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        iframePropDatas: {
                            src: 'http://support.supermap.com.cn:8090/webgl/examples/webgl/fan.html',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            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: 16vw;
                height: 28vh;
                margin: 20px 8px;
            }

            .container .container-title {
                height: 35px;
                margin-top: -12px;
                font-size: 12px;
            }

            .indicator-box .indicator-box-right .sm-component-indicator {
              width: 100%;
              height: 40px;
            }

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

            .sm-component-layout-header .sm-component-text {
                background: none !important;
                display: flex;
                font-size: 22px;
                height: 65px;
                color: #fff !important;
            }

            .chartXBar {
                height: 220px;
            }

            .chartLine1 {
                height: 140px;
            }

            .chartLineCommon {
                height: 220px;
            }
            .chartGauge {
                width: 240px;
                height: 240px;
                margin: 0 auto;
            }

            .center-iframe-grid {
              margin-top: 20px;
              height: calc(100% - 115px);
            }

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

            .sm-component-image {
                height: 100px;
            }

            .chart-pie {
              height: 180px;
            }

            .temperature-text {
              margin-top: 40px;
            }

            .sm-component-text-list {
                width: 278px;
                height: 208px;
            }

            .textlist2 {
                width: 120px;
            }

            .liquid-ball1 {
                height: 200px;
            }

            .sm-component-layout-header .sm-component-time-text {
                background: none !important;
                display: flex;
                color: #fff !important;
            }

            .sm-component-layout-header .sm-component-time-text span {
                padding: 1px;
            }

            @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>