<template>
    <div>
        <div v-for="(val, ind) in listcard" :key="ind">
            <div v-if="ind == 0">
                <div v-show="showDiv == ind">
                    <el-tag style="background: #339966; color: #fff" size="mini">优</el-tag>
                    <span style="color: #339966">:优秀<60%</span>
                    <el-tag style="background: #ffcc33; color: #fff" size="mini">良</el-tag>
                    <span style="color: #ffcc33">:60%≤良好<90%</span>
                    <el-tag style="background: #cc0000; color: #fff" size="mini">差</el-tag>
                    <span style="color: #cc0000">:极差≥90%</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" style="margin-top: 5px">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;background-image: linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);color:#fff;opacity:0.8;'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:5px;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>
                                        <el-tag
                                            v-if="item.data < 60 && item.data > 0"
                                            style="color: #fff; background: #339966"
                                            size="mini"
                                        >
                                            优
                                        </el-tag>
                                        <el-tag
                                            v-if="60 <= item.data && item.data < 90"
                                            style="color: #fff; background: #ffcc33"
                                            size="mini"
                                        >
                                            良
                                        </el-tag>
                                        <el-tag
                                            v-if="90 <= item.data && item.data"
                                            style="color: #fff; background: #cc0000"
                                            size="mini"
                                        >
                                            差
                                        </el-tag>
                                        <el-tag
                                            v-if="item.data == -1 || item.data == 0"
                                            style="color: #fff; background: #ccc"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div
                                                style="height: 30px; margin-top: 5px; cursor: pointer"
                                                @click="queryline(item1.id, item1.pid, item1.name)"
                                            >
                                                <el-tag
                                                    v-if="item1.data < 60 && item1.data > 0"
                                                    style="color: #fff; background: #339966"
                                                    size="mini"
                                                >
                                                    优
                                                </el-tag>
                                                <el-tag
                                                    v-if="60 <= item1.data && item1.data < 90"
                                                    style="color: #fff; background: #ffcc33"
                                                    size="mini"
                                                >
                                                    良
                                                </el-tag>
                                                <el-tag
                                                    v-if="90 <= item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000"
                                                    size="mini"
                                                >
                                                    差
                                                </el-tag>
                                                <el-tag
                                                    v-if="item1.data == -1 || item1.data == 0"
                                                    style="color: #fff; background: #ccc"
                                                    size="mini"
                                                >
                                                    无
                                                </el-tag>
                                                <span class="xdf" style="color: #000">
                                                    <el-tooltip
                                                        :open-delay="500"
                                                        effect="light"
                                                        :visible-arrow="false"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <el-button size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 1">
                <div v-show="showDiv == ind">
                    <el-tag style="background: #339966; color: #fff" size="mini">优</el-tag>
                    <span style="color: #339966">:完整性<60%</span>
                    <el-tag style="background: #ffcc33; color: #fff" size="mini">良</el-tag>
                    <span style="color: #ffcc33">:60%≤完整性<90%</span>
                    <el-tag style="background: #cc0000; color: #fff" size="mini">差</el-tag>
                    <span style="color: #cc0000">:完整性≥90%</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" style="margin-top: 5px">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;background-image: linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);color:#fff;opacity:0.8;'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:5px;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>
                                        <el-tag
                                            v-if="item.data < 60 && item.data > 0"
                                            style="color: #fff; background: #339966"
                                            size="mini"
                                        >
                                            优
                                        </el-tag>
                                        <el-tag
                                            v-if="60 <= item.data && item.data < 90"
                                            style="color: #fff; background: #ffcc33"
                                            size="mini"
                                        >
                                            良
                                        </el-tag>
                                        <el-tag
                                            v-if="90 <= item.data && item.data"
                                            style="color: #fff; background: #cc0000"
                                            size="mini"
                                        >
                                            差
                                        </el-tag>
                                        <el-tag
                                            v-if="item.data == -1 || item.data == 0"
                                            style="color: #fff; background: #ccc"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div
                                                style="height: 30px; margin-top: 5px; cursor: pointer"
                                                @click="queryline(item1.id, item1.pid, item1.name)"
                                            >
                                                <el-tag
                                                    v-if="item1.data < 60 && item1.data > 0"
                                                    style="color: #fff; background: #339966"
                                                    size="mini"
                                                >
                                                    优
                                                </el-tag>
                                                <el-tag
                                                    v-if="60 <= item1.data && item1.data < 90"
                                                    style="color: #fff; background: #ffcc33"
                                                    size="mini"
                                                >
                                                    良
                                                </el-tag>
                                                <el-tag
                                                    v-if="90 <= item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000"
                                                    size="mini"
                                                >
                                                    差
                                                </el-tag>
                                                <el-tag
                                                    v-if="item1.data == -1 || item1.data == 0"
                                                    style="color: #fff; background: #ccc"
                                                    size="mini"
                                                >
                                                    无
                                                </el-tag>
                                                <span class="xdf" style="color: #000">
                                                    <el-tooltip
                                                        :open-delay="500"
                                                        effect="light"
                                                        :visible-arrow="false"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <el-button size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 2">
                <div v-show="showDiv == ind">
                    <el-tag style="background: #06bdb4; color: #fff" size="mini">正</el-tag>
                    <span style="color: #06bdb4">:畸变率≦2%</span>
                    <el-tag style="background: #cc0000; color: #fff" size="mini">超</el-tag>
                    <span style="color: #cc0000">:畸变率≥7%</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" style="margin-top: 5px">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;background-image: linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);color:#fff;opacity:0.8;'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:5px;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>

                                        <el-tag
                                            v-if="item.data && item.data <= 2"
                                            style="color: #fff; background: #06bdb4"
                                            size="mini"
                                        >
                                            正
                                        </el-tag>
                                        <el-tag
                                            v-if="2 < item.data && item.data"
                                            style="color: #fff; background: #cc0000"
                                            size="mini"
                                        >
                                            超
                                        </el-tag>
                                        <el-tag
                                            v-if="item.data == -1 || item.data == 0"
                                            style="color: #fff; background: #ccc"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div
                                                style="height: 30px; margin-top: 5px; cursor: pointer"
                                                @click="queryline(item1.id, item1.pid, item1.name)"
                                            >
                                                <el-tag
                                                    v-if="item1.data && item1.data <= 2"
                                                    style="color: #fff; background: #06bdb4"
                                                    size="mini"
                                                >
                                                    正
                                                </el-tag>
                                                <el-tag
                                                    v-if="2 < item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000"
                                                    size="mini"
                                                >
                                                    超
                                                </el-tag>
                                                <el-tag
                                                    v-if="item1.data == -1 || item1.data == 0"
                                                    style="color: #fff; background: #ccc"
                                                    size="mini"
                                                >
                                                    无
                                                </el-tag>
                                                <span class="xdf" style="color: #000">
                                                    <el-tooltip
                                                        :open-delay="500"
                                                        effect="light"
                                                        :visible-arrow="false"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <el-button size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 3">
                <div v-show="showDiv == ind">
                    <el-tag style="background: #339966; color: #fff" size="mini">优</el-tag>
                    <span style="color: #339966">:在线率<60%</span>
                    <el-tag style="background: #ffcc33; color: #fff" size="mini">良</el-tag>
                    <span style="color: #ffcc33">:60%≤在线率<90%</span>
                    <el-tag style="background: #cc0000; color: #fff" size="mini">差</el-tag>
                    <span style="color: #cc0000">:在线率≥90%</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" style="margin-top: 5px">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;background-image: linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);color:#fff;opacity:0.8;'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:5px;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>
                                        <el-tag
                                            v-if="item.data < 60 && item.data > 0"
                                            style="color: #fff; background: #339966"
                                            size="mini"
                                        >
                                            优
                                        </el-tag>
                                        <el-tag
                                            v-if="60 <= item.data && item.data < 90"
                                            style="color: #fff; background: #ffcc33"
                                            size="mini"
                                        >
                                            良
                                        </el-tag>
                                        <el-tag
                                            v-if="90 <= item.data && item.data"
                                            style="color: #fff; background: #cc0000"
                                            size="mini"
                                        >
                                            差
                                        </el-tag>
                                        <el-tag
                                            v-if="item.data == -1 || item.data == 0"
                                            style="color: #fff; background: #ccc"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div
                                                style="height: 30px; margin-top: 5px; cursor: pointer"
                                                @click="queryline(item1.id, item1.pid, item1.name)"
                                            >
                                                <el-tag
                                                    v-if="item1.data < 60 && item1.data > 0"
                                                    style="color: #fff; background: #339966"
                                                    size="mini"
                                                >
                                                    优
                                                </el-tag>
                                                <el-tag
                                                    v-if="60 <= item1.data && item1.data < 90"
                                                    style="color: #fff; background: #ffcc33"
                                                    size="mini"
                                                >
                                                    良
                                                </el-tag>
                                                <el-tag
                                                    v-if="90 <= item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000"
                                                    size="mini"
                                                >
                                                    差
                                                </el-tag>
                                                <el-tag
                                                    v-if="item1.data == -1 || item1.data == 0"
                                                    style="color: #fff; background: #ccc"
                                                    size="mini"
                                                >
                                                    无
                                                </el-tag>
                                                <span class="xdf" style="color: #000">
                                                    <el-tooltip
                                                        :open-delay="500"
                                                        effect="light"
                                                        :visible-arrow="false"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <el-button size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 4">
                <div v-show="showDiv == ind">
                    <el-tag style="background: #339966; color: #fff" size="mini">优</el-tag>
                    <span style="color: #339966">:次数<60%</span>
                    <el-tag style="background: #ffcc33; color: #fff" size="mini">良</el-tag>
                    <span style="color: #ffcc33">:60%≤次数<90%</span>
                    <el-tag style="background: #cc0000; color: #fff" size="mini">差</el-tag>
                    <span style="color: #cc0000">:次数≥90%</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" style="margin-top: 5px">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;background-image: linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);color:#fff;opacity:0.8;'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:5px;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>
                                        <el-tag
                                            v-if="item.data < 60 && item.data > 0"
                                            style="color: #fff; background: #339966"
                                            size="mini"
                                        >
                                            优
                                        </el-tag>
                                        <el-tag
                                            v-if="60 <= item.data && item.data < 90"
                                            style="color: #fff; background: #ffcc33"
                                            size="mini"
                                        >
                                            良
                                        </el-tag>
                                        <el-tag
                                            v-if="90 <= item.data && item.data"
                                            style="color: #fff; background: #cc0000"
                                            size="mini"
                                        >
                                            差
                                        </el-tag>
                                        <el-tag
                                            v-if="item.data == -1 || item.data == 0"
                                            style="color: #fff; background: #ccc"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div
                                                style="height: 30px; margin-top: 5px; cursor: pointer"
                                                @click="queryline(item1.id, item1.pid, item1.name)"
                                            >
                                                <el-tag
                                                    v-if="item1.data < 60 && item1.data > 0"
                                                    style="color: #fff; background: #339966"
                                                    size="mini"
                                                >
                                                    优
                                                </el-tag>
                                                <el-tag
                                                    v-if="60 <= item1.data && item1.data < 90"
                                                    style="color: #fff; background: #ffcc33"
                                                    size="mini"
                                                >
                                                    良
                                                </el-tag>
                                                <el-tag
                                                    v-if="90 <= item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000"
                                                    size="mini"
                                                >
                                                    差
                                                </el-tag>
                                                <el-tag
                                                    v-if="item1.data == -1 || item1.data == 0"
                                                    style="color: #fff; background: #ccc"
                                                    size="mini"
                                                >
                                                    无
                                                </el-tag>
                                                <span class="xdf" style="color: #000">
                                                    <el-tooltip
                                                        :open-delay="500"
                                                        effect="light"
                                                        :visible-arrow="false"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <el-button size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 5">
                <div v-show="showDiv == ind">
                    <el-tag class="wd" circle style="color: #fff; background: #339966" size="mini">5级</el-tag>
                    <span class="h3" style="color: #339966; font-weight: bold">:优秀--(4.5,5]</span>
                    <el-tag class="qw" circle style="color: #fff; background: #3399ff" size="mini">4级</el-tag>
                    <span class="h3" style="color: #3399ff; font-weight: bold">:良好--(4,4.5]</span>
                    <el-tag class="qd" circle style="color: #fff; background: #ffcc33" size="mini">3级</el-tag>
                    <span class="h3" style="color: #ffcc33; font-weight: bold">:合格--(3,4]</span>
                    <el-tag class="zzd" circle style="color: #fff; background: #ff9900" size="mini">2级</el-tag>
                    <span class="h3" style="color: #ff9900; font-weight: bold">:较差--(2,3]</span>
                    <el-tag class="zd" circle style="color: #fff; background: #cc0000" size="mini">1级</el-tag>
                    <span class="h3" style="color: #cc0000; font-weight: bold">:极差--[1,2]</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col
                                v-for="(item, index) in val"
                                :key="index"
                                :span="8"
                                style="margin-top: 5px"
                                class="qwe"
                            >
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;color:#fff;opacity:0.8;background-image:linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:2%;cursor: pointer;'
                                        "
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>
                                        <el-tag
                                            size="mini"
                                            v-if="item.data == 3.14159 || item.data == 0"
                                            style="
                                                line-height: 10px;
                                                padding: 1.5%;
                                                float: left;
                                                color: #fff;
                                                background: #999999;
                                            "
                                            type=""
                                            circle
                                        >
                                            无
                                        </el-tag>
                                        <el-tag
                                            size="mini"
                                            v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
                                            style="
                                                line-height: 10px;
                                                padding: 1.5%;
                                                float: left;
                                                color: #fff;
                                                background: #339966;
                                            "
                                            type=""
                                            circle
                                        >
                                            5级
                                        </el-tag>
                                        <el-tag
                                            size="mini"
                                            v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
                                            style="
                                                line-height: 10px;
                                                padding: 1.5%;
                                                float: left;
                                                color: #fff;
                                                background: #3399ff;
                                            "
                                            type=""
                                            circle
                                        >
                                            4级
                                        </el-tag>
                                        <el-tag
                                            size="mini"
                                            v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
                                            style="
                                                line-height: 10px;
                                                padding: 1.5%;
                                                float: left;
                                                color: #fff;
                                                background: #ffcc33;
                                            "
                                            type=""
                                            circle
                                        >
                                            3级
                                        </el-tag>
                                        <el-tag
                                            size="mini"
                                            v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
                                            style="
                                                line-height: 10px;
                                                padding: 1.5%;
                                                float: left;
                                                color: #fff;
                                                background: #ff9900;
                                            "
                                            type=""
                                            circle
                                        >
                                            2级
                                        </el-tag>
                                        <el-tag
                                            size="mini"
                                            v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
                                            style="
                                                line-height: 10px;
                                                padding: 1.5%;
                                                float: left;
                                                color: #fff;
                                                background: #cc0000;
                                            "
                                            type=""
                                            circle
                                        >
                                            1级
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div style="height: 0.3%; background: ; margin-top: 1%; cursor: pointer">
                                                <el-tag
                                                    size="mini"
                                                    v-if="item1.data == 3.14159 || item1.data == 0"
                                                    style="'float: left;color:#fff;background:#999999"
                                                    type=""
                                                    icon=""
                                                    circle
                                                >
                                                    无
                                                </el-tag>
                                                <el-tag
                                                    size="mini"
                                                    v-if="4.5 <= item1.data && item1.data < 5 && item1.data !== 3.14159"
                                                    style="'float: left;color:#fff;background:#339966"
                                                    type=""
                                                    icon=""
                                                    circle
                                                >
                                                    5级
                                                </el-tag>
                                                <el-tag
                                                    size="mini"
                                                    v-if="4 < item1.data && item1.data < 4.5 && item1.data !== 3.14159"
                                                    style="'float: left;color:#fff;background:#3399FF"
                                                    type=""
                                                    icon=""
                                                    circle
                                                >
                                                    4级
                                                </el-tag>
                                                <el-tag
                                                    size="mini"
                                                    v-if="3 < item1.data && item1.data <= 4 && item1.data !== 3.14159"
                                                    style="'float: left;color:#fff;background:#FFCC33"
                                                    type=""
                                                    icon=""
                                                    circle
                                                >
                                                    3级
                                                </el-tag>
                                                <el-tag
                                                    size="mini"
                                                    v-if="2 < item1.data && item1.data <= 3 && item1.data !== 3.14159"
                                                    style="'float: left;color:#fff;background:#FF9900"
                                                    type=""
                                                    icon=""
                                                    circle
                                                >
                                                    2级
                                                </el-tag>
                                                <el-tag
                                                    size="mini"
                                                    v-if="1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159"
                                                    style="'float: left;color:#fff;background:#CC0000"
                                                    type=""
                                                    icon=""
                                                    circle
                                                >
                                                    1级
                                                </el-tag>
                                                <span
                                                    style="
                                                        line-height: 0.6rem;
                                                        color: #000;
                                                        font-weight: bold;
                                                        margin-left: 2%;
                                                        font-size: 12px;
                                                    "
                                                >
                                                    <el-tooltip
                                                        class="item"
                                                        effect="light"
                                                        :content="item1.name"
                                                        :open-delay="500"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                        :visible-arrow="false"
                                                    >
                                                        <el-button
                                                            class="h3"
                                                            size="mini"
                                                            type="text"
                                                            style="color: #000; font-weight: bold"
                                                        >
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 6">
                <div v-show="showDiv == ind">
                    <span class="wr" :style="`color:${WordColor}`">污染预警:</span>
                    <el-tag size="mini" style="color: #fff; background: #f30">5级</el-tag>
                    <span class="mr10" :style="`color:${WordColor}`">:重度污染</span>
                    <el-tag size="mini" style="color: #fff; background: #f90">4级</el-tag>
                    <span class="mr10" :style="`color:${WordColor}`">:中度污染</span>
                    <el-tag size="mini" style="color: #fff; background: #fc0">3级</el-tag>
                    <span class="mr10" :style="`color:${WordColor}`">:轻度污染</span>
                    <el-tag size="mini" style="color: #fff; background: #39f">2级</el-tag>
                    <span class="mr10" :style="`color:${WordColor}`">:轻微污染</span>
                    <el-tag size="mini" style="color: #fff; background: #393">1级</el-tag>
                    <span class="mr10" :style="`color:${WordColor}`">:无污染</span>
                    <el-tag size="mini" style="color: #fff; background: #999">无</el-tag>
                    <span class="mr10" :style="`color:${WordColor}`">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" class="qwe">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;color:#fff;opacity:0.8;background-image:linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:2%;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span class="asd" style="">{{ item.name }}</span>
                                        <el-tag
                                            v-if="item.data == -1"
                                            style="color: #fff; background: #999"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                        <el-tag
                                            v-if="0 <= item.data && item.data < 1"
                                            size="mini"
                                            style="color: #fff; background: #393"
                                        >
                                            1级
                                        </el-tag>
                                        <el-tag
                                            v-if="1 <= item.data && item.data < 1.2"
                                            style="color: #fff; background: #39f"
                                            size="mini"
                                        >
                                            2级
                                        </el-tag>
                                        <el-tag
                                            v-if="1.2 <= item.data && item.data < 1.6"
                                            size="mini"
                                            style="color: #fff; background: #fc0"
                                        >
                                            3级
                                        </el-tag>
                                        <el-tag
                                            v-if="1.6 <= item.data && item.data < 2"
                                            size="mini"
                                            style="color: #fff; background: #f90"
                                        >
                                            4级
                                        </el-tag>
                                        <el-tag
                                            v-if="2 <= item.data && item.data"
                                            size="mini"
                                            style="color: #fff; background: #f30"
                                        >
                                            5级
                                        </el-tag>
                                    </div>
                                    <div class="cvb">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            class="fgh"
                                        >
                                            <div class="jkl" @click="queryline(item1.id, item1.pid, item1.name)">
                                                <el-tag
                                                    v-if="item1.data == -1"
                                                    size="mini"
                                                    style="color: #fff; background: #999"
                                                >
                                                    无
                                                </el-tag>
                                                <el-tag
                                                    v-if="0 <= item1.data && item1.data < 1"
                                                    size="mini"
                                                    style="color: #fff; background: #393"
                                                >
                                                    1级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1 <= item1.data && item1.data < 1.2"
                                                    size="mini"
                                                    style="color: #fff; background: #39f"
                                                >
                                                    2级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.2 <= item1.data && item1.data < 1.6"
                                                    size="mini"
                                                    style="color: #fff; background: #fc0"
                                                >
                                                    3级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.6 <= item1.data && item1.data < 2"
                                                    size="mini"
                                                    style="color: #fff; background: #f90"
                                                >
                                                    4级
                                                </el-tag>
                                                <el-tag
                                                    v-if="2 <= item1.data && item1.data"
                                                    size="mini"
                                                    style="color: #fff; background: #f30"
                                                >
                                                    5级
                                                </el-tag>
                                                <span class="xdf">
                                                    <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        :content="item1.name"
                                                        placement="top"
                                                    >
                                                        <span size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 8) }}
                                                        </span>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div v-if="ind == 7">
                <div v-show="showDiv == ind">
                    <el-tag style="background: #339966; color: #fff" size="mini">优</el-tag>
                    <span style="color: #339966">:优秀<60%</span>
                    <el-tag style="background: #ffcc33; color: #fff" size="mini">良</el-tag>
                    <span style="color: #ffcc33">:60%≤良好<90%</span>
                    <el-tag style="background: #cc0000; color: #fff" size="mini">差</el-tag>
                    <span style="color: #cc0000">:极差≥90%</span>
                    <el-tag style="background: #999999; color: #fff" circle>无</el-tag>
                    <span style="color: #999999">:无数据</span>
                    <div :style="`height:${boxvh - 20}px;overflow-y:auto;overflow-x:hidden`">
                        <el-row :gutter="5">
                            <el-col v-for="(item, index) in val" :key="index" :span="8" style="margin-top: 5px">
                                <el-card
                                    class="box-card3"
                                    :style="
                                        'height:25vh;background-image: linear-gradient(' +
                                        settings.themeColor +
                                        ',#ccc);color:#fff;opacity:0.8;'
                                    "
                                >
                                    <div
                                        slot="header"
                                        class="clearfix"
                                        :style="
                                            'height:30px;background:' +
                                            settings.themeColor +
                                            ';padding:5px;cursor: pointer;'
                                        "
                                        @click="queryStation(item)"
                                    >
                                        <span
                                            style="
                                                line-height: 15px;
                                                color: #fff;
                                                font-weight: bold;
                                                float: right;
                                                font-size: 14px;
                                            "
                                        >
                                            {{ item.name }}
                                        </span>
                                        <el-tag
                                            v-if="item.data < 60 && item.data > 0"
                                            style="color: #fff; background: #339966"
                                            size="mini"
                                        >
                                            优
                                        </el-tag>
                                        <el-tag
                                            v-if="60 <= item.data && item.data < 90"
                                            style="color: #fff; background: #ffcc33"
                                            size="mini"
                                        >
                                            良
                                        </el-tag>
                                        <el-tag
                                            v-if="90 <= item.data && item.data"
                                            style="color: #fff; background: #cc0000"
                                            size="mini"
                                        >
                                            差
                                        </el-tag>
                                        <el-tag
                                            v-if="item.data == -1 || item.data == 0"
                                            style="color: #fff; background: #ccc"
                                            size="mini"
                                        >
                                            无
                                        </el-tag>
                                    </div>
                                    <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
                                        <el-col
                                            :span="12"
                                            v-for="(item1, index1) in item.children"
                                            :key="index1"
                                            style="height: 5vh"
                                        >
                                            <div
                                                style="height: 30px; margin-top: 5px; cursor: pointer"
                                                @click="queryline(item1.id, item1.pid, item1.name)"
                                            >
                                                <el-tag
                                                    v-if="item1.data < 60 && item1.data > 0"
                                                    style="color: #fff; background: #339966"
                                                    size="mini"
                                                >
                                                    优
                                                </el-tag>
                                                <el-tag
                                                    v-if="60 <= item1.data && item1.data < 90"
                                                    style="color: #fff; background: #ffcc33"
                                                    size="mini"
                                                >
                                                    良
                                                </el-tag>
                                                <el-tag
                                                    v-if="90 <= item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000"
                                                    size="mini"
                                                >
                                                    差
                                                </el-tag>
                                                <el-tag
                                                    v-if="item1.data == -1 || item1.data == 0"
                                                    style="color: #fff; background: #ccc"
                                                    size="mini"
                                                >
                                                    无
                                                </el-tag>
                                                <span class="xdf" style="color: #000">
                                                    <el-tooltip
                                                        :open-delay="500"
                                                        effect="light"
                                                        :visible-arrow="false"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <el-button size="mini" type="text" class="ll">
                                                            {{ item1.name.substr(0, 6) }}
                                                        </el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        listcard: {
            type: [Object, Array],
            required: true
        },
        // listcard6: {
        //   type: [Object, Array],
        //   required: true,
        // },
        // listcard7: {
        //   type: [Object, Array],
        //   required: true,
        // },
        showDiv: {
            type: [String, Number],
            required: true
        }
    },
    data() {
        return {
            boxvh: null,
            WordColor: JSON.parse(window.localStorage.echartsColor).WordColor
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.boxvh = window.sessionStorage.getItem('appheight') - 110
        }
    },

    computed: {
        settings() {
            return this.$store.state.settings
        }
    },

    watch: {}
}
</script>
<style lang="less" scoped>
::v-deep .el-card__header {
    padding: 5px 5px !important;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
::v-deep .el-button--text:focus,
.el-button--text:hover {
    color: #fdfdfd !important;
}
@import url('../../../styles/comStyle.less');
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.wr {
    margin-left: 0%;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.zd {
    color: #fff !important;
    background: #f30;
}
.zzd {
    color: #fff !important;
    background: #f90;
}
.qd {
    color: #fff !important;
    background: #fc0;
}
.qw {
    color: #fff !important;
    background: #39f;
}
.wd {
    color: #fff !important;
    background: #393;
}
.ws {
    color: #fff !important;
    background: #999;
}
.xshou {
    cursor: pointer;
}

.right-top {
    color: rgb(7, 131, 161);
    border: 1.5px solid rgb(7, 131, 161);
    border-style: solid hidden hidden hidden;
}
.xdf {
    margin-left: 2%;
    font-size: 12px;
    font-weight: bold;
    line-height: 0.6rem;
    color: #000;
}

.l1 {
    color: #fff;
    background: #999;
}
.l2 {
    color: #fff;
    background: #393;
}
.l3 {
    color: #fff;
    background: #39f;
}
.l4 {
    color: #fff;
    background: #f90;
}
.l5 {
    color: #fff;
    background: #fc0;
}
.l6 {
    color: #fff;
    background: #f30;
}
.jkl {
    height: 0.3%;
    margin-top: 1%;
    cursor: pointer;
    display: flex;
}
.cvb {
    height: 20vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.ll {
    font-weight: bold;
    color: #000;
    line-height: 20px;
    //margin-top: 1.5%;
}
.d1 {
    padding: 5px;
    line-height: 15px;
    color: #fff;
    background: #999;
    margin-top: -5px;
}
.asd {
    float: right;
    font-size: 14px;
    font-weight: bold;
    line-height: 15px;
    color: #fff;
}
.d3 {
    padding: 1.5%;
    line-height: 10px;
    color: #fff;
    background: #39f;
    margin-top: -5px;
}
.d2 {
    line-height: 10px;
    padding: 1.5%;
    color: #fff;
    background: #339933;
    margin-top: -5px;
}
.d4 {
    padding: 1.5%;
    line-height: 10px;
    color: #fff;
    background: #f90;
    margin-top: -5px;
}
.d5 {
    padding: 5px;
    line-height: 10px;
    color: #fff;
    background: #fc0;
    margin-top: -5px;
}
.d6 {
    padding: 1.5%;
    line-height: 15px;
    color: #fff;
    background: #f30;
    margin-top: -5px;
}
.qwe {
    margin-top: 5px;
}
.fgh {
    height: 5vh;
}
.lf {
    float: left;
}
</style>
