<template>
    <div class="bkh">


        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-geo-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-spt-liq-plot-depths-with-grades-and-tools</span></div>


        <div style="padding:0px;">


            <div class="bk" style="margin:0px; padding:0px;">
                <demolink
                    :kbname="'w-spt-liq-plot-depths-with-grades-and-tools'"
                    :casename="'default'"
                ></demolink>

                <div style="width:calc( 100vw - 60px );">
                    <w-spt-liq-plot-depths-with-grades-and-tools
                        :sts="WSptLiqPlotDepthsWithGradesAndTools.sts1"
                        :keyStsSelects.sync="WSptLiqPlotDepthsWithGradesAndTools.keyStsSelects1"
                        @update:keyStsSelects="modifyKeyStsSelects"
                    ></w-spt-liq-plot-depths-with-grades-and-tools>
                </div>

            </div>


        </div>


    </div>
</template>

<script>
import demolink from './components/demolink.vue'
import WSptLiqPlotDepthsWithGradesAndTools from './components/WSptLiqPlotDepthsWithGradesAndTools.vue'

export default {
    components: {
        demolink,
        WSptLiqPlotDepthsWithGradesAndTools,
    },
    props: {
    },
    data: function() {
        return {
            'WSptLiqPlotDepthsWithGradesAndTools': {
                'sts1': [
                    {
                        key: 'Geolayer',
                        width: 350,
                        // height: 550,
                        valueTitle: 'geologic',
                        depthTitle: 'Depth(m)',
                        // depthMin: 0, //由數據自動計算, 不使用
                        // depthMax: 15, //由數據自動計算, 不使用
                        waterLevel: 0.5,
                        item: {
                            type: 'Geolayer',
                            name: '',
                            data: [
                                {
                                    depthStart: '0',
                                    depthEnd: '2.025',
                                    depth: 1.0125,
                                    legendCode: '207',
                                    description: 'Silty Gravel',
                                },
                                {
                                    depthStart: '2.025',
                                    depthEnd: '5.025',
                                    depth: 4.275,
                                    legendCode: '227',
                                    description: 'Silty Fine Sand',
                                },
                                {
                                    depthStart: '5.025',
                                    depthEnd: '6.525',
                                    depth: 5.775,
                                    legendCode: '227',
                                    description: 'Silty Fine Sand',
                                },
                                {
                                    depthStart: '6.525',
                                    depthEnd: '8.025',
                                    depth: 7.275,
                                    legendCode: '106',
                                    description: 'Low Plasticity Clay',
                                },
                                {
                                    depthStart: '8.025',
                                    depthEnd: '9.525',
                                    depth: 8.775,
                                    legendCode: '227',
                                    description: 'Silty Fine Sand',
                                },
                                {
                                    depthStart: '9.525',
                                    depthEnd: '11.025',
                                    depth: 10.275,
                                    legendCode: '105',
                                    description: 'Low Plasticity Silt with Sand',
                                },
                                {
                                    depthStart: '11.025',
                                    depthEnd: '12.525',
                                    depth: 11.775,
                                    legendCode: '105',
                                    description: 'Low Plasticity Silt',
                                },
                                {
                                    depthStart: '12.525',
                                    depthEnd: '14.025',
                                    depth: 13.275,
                                    legendCode: '227',
                                    description: 'Silty Medium Fine Sand',
                                },
                                {
                                    depthStart: '14.025',
                                    depthEnd: '15.525',
                                    depth: 14.775,
                                    legendCode: '227',
                                    description: 'Silty Coarse Medium Sand',
                                },
                                {
                                    depthStart: '15.525',
                                    depthEnd: '17.025',
                                    depth: 16.275,
                                    legendCode: '105',
                                    description: 'Low Plasticity Silt with Sand',
                                },
                                {
                                    depthStart: '17.025',
                                    depthEnd: '20',
                                    depth: 19.2625,
                                    legendCode: '106',
                                    description: 'Low Plasticity Clay',
                                },
                            ],
                        },
                        plotType: 'none',
                    },
                    {
                        key: 'N60',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'N60',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'N60',
                            data: [
                                [1.0125, 10.5],
                                [2.775, 5.83],
                                [4.275, 7],
                                [5.775, 8.167],
                                [7.275, 10.5],
                                [8.775, 26.83],
                                [10.275, 23.33],
                                [11.775, 26.83],
                                [13.275, 35],
                                [14.775, 74.67],
                                [16.275, 51.33],
                                [17.775, 38.5],
                                [19.2625, 43.17],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'FC(%)',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FC(%)',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'FC(%)',
                            data: [
                                [1.0125, 19],
                                [2.775, 42],
                                [4.275, 42],
                                [5.775, 34],
                                [7.275, 95],
                                [8.775, 35],
                                [10.275, 73],
                                [11.775, 96],
                                [13.275, 23],
                                [14.775, 23],
                                [16.275, 84],
                                [17.775, 100],
                                [19.2625, 99],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'Vertical stress(MPa)',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'Vertical stress(MPa)',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'Vertical stress',
                            data: [
                                [1.0125, 0.018589877008928567],
                                [2.775, 0.050986327997448976],
                                [4.275, 0.07859947595663266],
                                [5.775, 0.10805745902713358],
                                [7.275, 0.13727623893143978],
                                [8.775, 0.16517264253172217],
                                [10.275, 0.19378082341643352],
                                [11.775, 0.2220852058892596],
                                [13.275, 0.25100393582638975],
                                [14.775, 0.2827815313885199],
                                [16.275, 0.3146559998095725],
                                [17.775, 0.34385674388507537],
                                [19.2625, 0.3719980220785881],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'sptSeed-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptSeed-FS',
                            data: [
                                [1.0125, 1.3071466225973551],
                                [2.775, 0.6609445090344305],
                                [4.275, 0.6411281121897928],
                                [5.775, 0.5932625699883369],
                                [7.275, 2],
                                [8.775, 1.8294556431806128],
                                [10.275, 1.8623505957209805],
                                [11.775, 1.9213429940701832],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },

                    {
                        key: 'sptSeed-PL',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'PL',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptSeed-PL',
                            data: [
                                [1.0125, 0],
                                [2.775, 4.380173124],
                                [4.275, 8.612618451],
                                [5.775, 12.95199841],
                                [7.275, 12.95199841],
                                [8.775, 12.95199841],
                                [10.275, 12.95199841],
                                [11.775, 12.95199841],
                                [13.275, 12.95199841],
                                [14.775, 12.95199841],
                                [16.275, 12.95199841],
                                [17.775, 12.95199841],
                                [19.2625, 12.95199841],
                            ],
                        },
                        plotType: 'line+marker',
                    },

                    {
                        key: 'sptSeed-vstrTS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'Volumetric Strain(%)',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptSeed-vstrTS',
                            data: [
                                [1.0125, 1.510390113],
                                [2.775, 2.64285869],
                                [4.275, 2.548960151],
                                [5.775, 2.529820398],
                                [7.275, null],
                                [8.775, 0.725764557],
                                [10.275, 1.284866737],
                                [11.775, 1.127742246],
                                [13.275, 0.151311473],
                                [14.775, null],
                                [16.275, null],
                                [17.775, null],
                                [19.2625, null],
                            ],
                        },
                        plotType: 'line+marker',
                    },

                    {
                        key: 'sptSeed-stlTS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'Settlement(m)',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptSeed-stlTS',
                            data: [
                                [1.0125, 0.0305854],
                                [2.775, 0.07022828],
                                [4.275, 0.108462682],
                                [5.775, 0.146409988],
                                [7.275, 0.146409988],
                                [8.775, 0.157296457],
                                [10.275, 0.176569458],
                                [11.775, 0.193485591],
                                [13.275, 0.195755264],
                                [14.775, 0.195755264],
                                [16.275, 0.195755264],
                                [17.775, 0.195755264],
                                [19.2625, 0.195755264],
                            ],
                        },
                        plotType: 'line+marker',
                    },

                    {
                        key: 'sptSeed-vstrIY',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'Volumetric Strain(%)',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptSeed-vstrIY',
                            data: [
                                [1.0125, 0.330918143],
                                [2.775, 3.945043277],
                                [4.275, 3.814739114],
                                [5.775, 3.788096086],
                                [7.275, null],
                                [8.775, 0.047142427],
                                [10.275, 0.046195319],
                                [11.775, 0.024987977],
                                [13.275, null],
                                [14.775, null],
                                [16.275, null],
                                [17.775, null],
                                [19.2625, null],
                            ],
                        },
                        plotType: 'line+marker',
                    },

                    {
                        key: 'sptSeed-stlIY',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'Settlement(m)',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptSeed-stlIY',
                            data: [
                                [1.0125, 0.006701092],
                                [2.775, 0.065876742],
                                [4.275, 0.123097828],
                                [5.775, 0.17991927],
                                [7.275, 0.17991927],
                                [8.775, 0.180626406],
                                [10.275, 0.181319336],
                                [11.775, 0.181694155],
                                [13.275, 0.181694155],
                                [14.775, 0.181694155],
                                [16.275, 0.181694155],
                                [17.775, 0.181694155],
                                [19.2625, 0.181694155],
                            ],
                        },
                        plotType: 'line+marker',
                    },

                    {
                        key: 'sptHBF2012-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptHBF2012-FS',
                            data: [
                                [1.0125, 1.7237576057647734],
                                [2.775, 0.7554527604924898],
                                [4.275, 0.7328817776780343],
                                [5.775, 0.7045172405192883],
                                [7.275, 2],
                                [8.775, 2],
                                [10.275, 2],
                                [11.775, 2],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'sptHBF2017-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptHBF2017-FS',
                            data: [
                                [1.0125, 1.3587960049745331],
                                [2.775, 0.5955049535220189],
                                [4.275, 0.5777127992341635],
                                [5.775, 0.555353727607526],
                                [7.275, 2],
                                [8.775, 2],
                                [10.275, 2],
                                [11.775, 2],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'sptNCEER-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptNCEER-FS',
                            data: [
                                [1.0125, 1.5258488452172894],
                                [2.775, 0.7884161879458845],
                                [4.275, 0.7573840698088078],
                                [5.775, 0.7389239004315552],
                                [7.275, 2],
                                [8.775, 2],
                                [10.275, 2],
                                [11.775, 2],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'sptJRA1996-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptJRA1996-FS',
                            data: [
                                [1.0125, 0.727341293886219],
                                [2.775, 0.4999013528041831],
                                [4.275, 0.4797099152628735],
                                [5.775, 0.45389680275798233],
                                [7.275, 2],
                                [8.775, 2],
                                [10.275, 2],
                                [11.775, 2],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'sptJRA2017-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptJRA2017-FS',
                            data: [
                                [1.0125, 0.727341293886219],
                                [2.775, 0.5955384042697853],
                                [4.275, 0.584335904199995],
                                [5.775, 0.5070810469715401],
                                [7.275, 2],
                                [8.775, 2],
                                [10.275, 2],
                                [11.775, 2],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'sptTY-FS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'sptTY-FS',
                            data: [
                                [1.0125, 1.2827150527815019],
                                [2.775, 0.6036160149264506],
                                [4.275, 0.5764814112644259],
                                [5.775, 0.5583847098870249],
                                [7.275, 2],
                                [8.775, 2],
                                [10.275, 2],
                                [11.775, 2],
                                [13.275, 2],
                                [14.775, 2],
                                [16.275, 2],
                                [17.775, 2],
                                [19.2625, 2],
                            ],
                        },
                        plotType: 'line+marker',
                    },
                    {
                        key: 'All-cmpFS',
                        // width: 260,
                        // height: 550,
                        valueTitle: 'FS',
                        depthTitle: 'Depth(m)',
                        depthMin: 0,
                        depthMax: 20,
                        item: {
                            name: 'All-cmpFS',
                            data: [
                                {
                                    name: 'sptSeed-FS',
                                    data: [
                                        [1.0125, 1.2300195204453892],
                                        [2.775, 0.7641931669487014],
                                        [4.275, 0.5904622641491573],
                                        [5.775, 0.6198744238703031],
                                        [7.275, 2],
                                        [8.775, 1.7538567282841457],
                                        [10.275, 1.8424011494060215],
                                        [11.775, 1.8866063017949188],
                                        [13.275, 1.9699995916708597],
                                        [14.775, 2],
                                        [16.275, 1.9215429614148407],
                                        [17.775, 1.8808684280377663],
                                        [19.2625, 2],
                                    ],
                                },
                                {
                                    name: 'sptHBF2012-FS',
                                    data: [
                                        [1.0125, 1.6537700284907746],
                                        [2.775, 0.8791923122750522],
                                        [4.275, 0.6420970461139518],
                                        [5.775, 0.7672387646189103],
                                        [7.275, 2],
                                        [8.775, 2],
                                        [10.275, 1.971386676453903],
                                        [11.775, 1.8784469553674072],
                                        [13.275, 2],
                                        [14.775, 2],
                                        [16.275, 1.8786823461775386],
                                        [17.775, 2],
                                        [19.2625, 1.999801187397332],
                                    ],
                                },
                                {
                                    name: 'sptHBF2017-FS',
                                    data: [
                                        [1.0125, 1.4369805546084378],
                                        [2.775, 0.550073488465203],
                                        [4.275, 0.5815014495704269],
                                        [5.775, 0.6073564974856451],
                                        [7.275, 2],
                                        [8.775, 2],
                                        [10.275, 2],
                                        [11.775, 2],
                                        [13.275, 1.983210995349519],
                                        [14.775, 1.907506454116397],
                                        [16.275, 1.9421156359887028],
                                        [17.775, 1.9456547551859051],
                                        [19.2625, 2],
                                    ],
                                },
                                {
                                    name: 'sptNCEER-FS',
                                    data: [
                                        [1.0125, 1.5215497277760064],
                                        [2.775, 0.6934467319753688],
                                        [4.275, 0.7639696049252113],
                                        [5.775, 0.7392914552812266],
                                        [7.275, 1.9144926125512762],
                                        [8.775, 1.913584010625697],
                                        [10.275, 2],
                                        [11.775, 2],
                                        [13.275, 2],
                                        [14.775, 2],
                                        [16.275, 2],
                                        [17.775, 2],
                                        [19.2625, 1.9595332250684208],
                                    ],
                                },
                                {
                                    name: 'sptJRA1996-FS',
                                    data: [
                                        [1.0125, 0.6394652929316359],
                                        [2.775, 0.4221945763474594],
                                        [4.275, 0.422573955532376],
                                        [5.775, 0.359987074739875],
                                        [7.275, 2],
                                        [8.775, 2],
                                        [10.275, 2],
                                        [11.775, 2],
                                        [13.275, 1.9991668594017074],
                                        [14.775, 1.8896700382918215],
                                        [16.275, 1.9891037648738308],
                                        [17.775, 1.913342397260381],
                                        [19.2625, 2],
                                    ],
                                },
                                {
                                    name: 'sptJRA2017-FS',
                                    data: [
                                        [1.0125, 0.7789314207024558],
                                        [2.775, 0.5736915345361623],
                                        [4.275, 0.6305899369006207],
                                        [5.775, 0.4809079512648955],
                                        [7.275, 1.9025769483207893],
                                        [8.775, 1.9893288030422704],
                                        [10.275, 2],
                                        [11.775, 1.905028747319038],
                                        [13.275, 1.9415949208753112],
                                        [14.775, 1.953590334738463],
                                        [16.275, 2],
                                        [17.775, 2],
                                        [19.2625, 2],
                                    ],
                                },
                                {
                                    name: 'sptTY-FS',
                                    data: [
                                        [1.0125, 1.2168982455008048],
                                        [2.775, 0.5480346534145311],
                                        [4.275, 0.5657841077521539],
                                        [5.775, 0.5541787465087251],
                                        [7.275, 2],
                                        [8.775, 2],
                                        [10.275, 2],
                                        [11.775, 2],
                                        [13.275, 1.9243604004231096],
                                        [14.775, 1.982075142996793],
                                        [16.275, 2],
                                        [17.775, 1.9563862605961793],
                                        [19.2625, 1.8780409937668314],
                                    ],
                                },
                            ],
                        },
                        plotType: 'line+marker',
                    },
                ],
                'keyStsSelects1': [
                    'Geolayer',
                    'N60',
                    'FC(%)',
                    'sptSeed-FS',
                    'sptSeed-PL',
                    'sptSeed-stlTS',
                    'sptSeed-stlIY',
                    'sptHBF2012-FS',
                    'sptHBF2017-FS',
                    'sptNCEER-FS',
                    'sptJRA1996-FS',
                    'sptJRA2017-FS',
                    'sptTY-FS',
                    'All-cmpFS',
                ],
            },
        }
    },
    methods: {
        modifyKeyStsSelects: function(keyStsSelects) {
            console.log('modifyKeyStsSelects', keyStsSelects)
        },
    }
}
</script>

<style scoped>
</style>
