<template>
    <div class="index-container">
        <div class="top-container">
            <div class="section-con top-left">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">政区基础概况</span>
                </div>
                <div class="flex top-left-content">
                    <div
                        v-for="item in regionData"
                        :key="item.name"
                        class="alarm-item"
                    >
                        <div class="icon">
                            <i class="bbsl-iconfont" :class="item.icon"></i>
                        </div>
                        <div class="title">{{ item.name }}</div>
                        <div class="num">{{ item.num }}</div>
                    </div>
                </div>
            </div>
            <div class="section-con top-center1">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">水位报警</span>
                </div>
                <div class="flex top-left-content alarm">
                    <div
                        v-for="item in waterAlarm"
                        :key="item.name"
                        class="alarm-item"
                    >
                        <div class="num">{{ item.num }}</div>
                        <div class="title">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div class="section-con top-center2">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">雨量报警</span>
                </div>
                <div class="flex top-left-content alarm">
                    <div
                        v-for="item in rainAlarm"
                        :key="item.name"
                        class="alarm-item"
                    >
                        <div class="num">{{ item.num }}</div>
                        <div class="title">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div class="section-con top-right flex">
                <div class="section-btn-group flex">
                    <div
                        @click="changeEqItem(btn.key)"
                        class="section-btn"
                        :class="currentQpType == btn.key ? 'active' : ''"
                        v-for="btn in headerBtn"
                        :key="btn.key"
                    >
                        {{ btn.name }}
                    </div>
                </div>
                <div class="equipment-item-content flex">
                    <div
                        class="equipment-item"
                        v-for="item in headerData"
                        :key="item.name"
                    >
                        <div class="eq-item-name">
                            <span>{{ item.name }}</span>
                            <i
                                class="eq-item-icon bbsl-iconfont"
                                :class="item.icon"
                            ></i>
                            <div class="eq-item-total">
                                {{ item.total }}<i>个</i>
                            </div>
                        </div>
                        <div class="eq-item-detail flex">
                            <div>
                                <div class="eq-item-kind">正常</div>
                                <div class="eq-item-num">
                                    <!-- style="color: rgb(6, 194, 6)" -->
                                    {{ item.normal }}
                                </div>
                            </div>
                            <div>
                                <div class="eq-item-kind">故障</div>
                                <div class="eq-item-num">
                                    <!-- style="color: rgb(199, 61, 61)" -->
                                    {{ item.error }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-container">
            <div class="section-con center-con1">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">工程概况</span>
                </div>
                <div class="col-flex full full-out-header">
                    <div id="pie-container"></div>
                    <div class="col-flex project-container">
                        <div
                            class="bar-item"
                            v-for="item in projectItemData"
                            :key="item.name"
                        >
                            <span class="name">{{ item.name }}</span>
                            <div class="icon-num">
                                <div
                                    class="icon-num-inner"
                                    :style="{
                                        width:
                                            (item.num / item.total) * 100 + '%',
                                    }"
                                ></div>
                            </div>
                            <span class="num">{{ item.num }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-con center-con3">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">临界水位排行</span>
                </div>
                <div class="type-btn-group">
                    <span
                        :key="type.key"
                        v-for="type in criticalTypeList"
                        class="type-btn-item"
                        :class="criticalType == type.key ? 'active' : ''"
                        @click="changeCriticalType(type.key)"
                        >{{ type.name }}</span
                    >
                </div>
                <div class="full full-out-header">
                    <div id="criticalWaterLevel"></div>
                </div>
                <div class="explain">临界水位单位：mm</div>
            </div>
            <div class="section-con center-con2">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">实时水情</span>
                </div>
                <div class="type-btn-group">
                    <span
                        :key="type.key"
                        v-for="type in waterTypeList"
                        class="type-btn-item"
                        :class="realtimeWaterType == type.key ? 'active' : ''"
                        @click="changeWaterType(type.key)"
                        >{{ type.name }}</span
                    >
                </div>
                <div
                    id="realWater"
                    class="scroll-table full full-out-header padding"
                >
                    <div class="scroll-table-header">
                        <div
                            class="header-item"
                            v-for="column in realtimeWaterHeader"
                            :key="column.key"
                            :style="{width: column.width}"
                        >
                            {{ column.name }}
                        </div>
                    </div>
                    <vue-seamless-scroll
                        class="scroll-table-body"
                        :data="realtimeRainData"
                        :class-option="optionSingleHeightTime"
                    >
                        <div
                            class="scroll-table-column"
                            v-for="column in realtimeWaterData"
                            :key="column.key"
                        >
                            <div class="column-item" style="width: 14px">
                                <span class="column-item-icon"></span>
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 22%"
                                :title="column.cezhen"
                            >
                                {{ column.cezhen }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 22%"
                                :title="column.place"
                            >
                                {{ column.place }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 15%"
                                :title="column.num1"
                            >
                                {{ column.num1 }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 15%"
                                :title="column.num2"
                            >
                                {{ column.num2 }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: calc(26% - 14px)"
                                :title="column.time"
                            >
                                {{ column.time }}
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="bottom-container">
            <div class="section-con bottom-con1">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">日累计降雨排行</span>
                </div>
                <div class="type-btn-group">
                    <span
                        :key="type.key"
                        v-for="type in rainfallTypeList"
                        class="type-btn-item"
                        :class="rainfallType == type.key ? 'active' : ''"
                        @click="changeRainfallType(type.key)"
                        >{{ type.name }}</span
                    >
                </div>
                <div class="col-flex full full-out-header padding rain-fall">
                    <div
                        class="bar-item order-type"
                        v-for="(item, index) in rainfallData"
                        :key="item.key"
                    >
                        <span class="order">{{ index + 1 }}</span>
                        <span class="name ellipsis"> {{ item.name }}</span>
                        <div
                            class="icon-num"
                            :style="{
                                width: (item.num / item.frist) * 100 + '%',
                            }"
                        >
                            <div class="icon-num-inner"></div>
                        </div>
                        <span class="num">{{ item.num }}</span>
                    </div>
                </div>
                <div class="explain">降雨量单位：mm</div>
            </div>
            <div class="section-con bottom-con2">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">实时雨情</span>
                </div>
                <div class="type-btn-group">
                    <span
                        :key="type.key"
                        v-for="type in rainTypeList"
                        class="type-btn-item"
                        :class="realtimeRainType == type.key ? 'active' : ''"
                        @click="changeRainType(type.key)"
                        >{{ type.name }}</span
                    >
                </div>
                <div
                    id="realRain"
                    class="scroll-table full full-out-header padding"
                >
                    <div class="scroll-table-header">
                        <div
                            class="header-item"
                            v-for="column in realtimeRainHeader"
                            :key="column.key"
                            :style="{width: column.width}"
                        >
                            {{ column.name }}
                        </div>
                    </div>
                    <vue-seamless-scroll
                        class="scroll-table-body"
                        :data="realtimeRainData"
                        :class-option="optionSingleHeightTime"
                    >
                        <div
                            class="scroll-table-column"
                            v-for="column in realtimeRainData"
                            :key="column.key"
                        >
                            <div class="column-item" style="width: 14px">
                                <span class="column-item-icon"></span>
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 24%"
                                :title="column.cezhen"
                            >
                                {{ column.cezhen }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 26%"
                                :title="column.place"
                            >
                                {{ column.place }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 20%"
                                :title="column.num1"
                            >
                                {{ column.num1 }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: calc(30% - 14px)"
                                :title="column.time"
                            >
                                {{ column.time }}
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="section-con bottom-con3">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">大坝位移排行</span>
                </div>
                <div class="type-btn-group">
                    <span
                        :key="type.key"
                        v-for="type in displacementTypeList"
                        class="type-btn-item"
                        :class="displacementType == type.key ? 'active' : ''"
                        @click="changeDisplacementType(type.key)"
                        >&nbsp;{{ type.name }}&nbsp;</span
                    >
                </div>
                <div class="col-flex full full-out-header padding rain-fall">
                    <div
                        class="bar-item order-type"
                        v-for="(item, index) in displacementData"
                        :key="item.key"
                    >
                        <span class="order">{{ index + 1 }}</span>
                        <span class="name ellipsis"> {{ item.name }}</span>
                        <div
                            class="icon-num"
                            :style="{
                                width: (item.num / item.frist) * 100 + '%',
                            }"
                        >
                            <div class="icon-num-inner"></div>
                            <div class="icon-num-sub">{{ item.place }}</div>
                        </div>
                        <span class="num">{{ item.num }}</span>
                    </div>
                </div>
                <div class="explain">大坝位移单位：mm</div>
            </div>
            <div class="section-con bottom-con4">
                <div>
                    <img
                        class="section-title-img"
                        src="./../assets/img/title_icon.png"
                    /><span class="section-title">水库渗流排行</span>
                </div>
                <div class="full full-out-header">
                    <div id="reservoirSeepage"></div>
                </div>
                <div class="explain top">渗流单位：mm</div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
// import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
    // components: {
    //     VueSeamlessScroll,
    // },
    data() {
        return {
            // 政区基础概况
            regionData: [
                {
                    name: '河流',
                    num: 100,
                    icon: 'bbsl-heliu',
                },
                {
                    name: '街道',
                    num: 100,
                    icon: 'bbsl-jiedao',
                },
                {
                    name: '居委会',
                    num: 100,
                    icon: 'bbsl-juweihui',
                },
            ],
            // 水位报警
            waterAlarm: [
                {
                    name: '水库',
                    num: 1,
                },
                {
                    name: '河道',
                    num: 2,
                },
            ],
            // 雨量报警
            rainAlarm: [
                {
                    name: '水库',
                    num: 0,
                },
                {
                    name: '山洪',
                    num: 0,
                },
                {
                    name: '水文',
                    num: 2,
                },
            ],
            // 测站数量统计
            currentQpType: 1,
            headerBtn: [
                // {
                //     name: '总计',
                //     key: 'total',
                // },
                {
                    name: '山洪',
                    key: 1,
                },
                {
                    name: '水文',
                    key: 2,
                },
                {
                    name: '水库',
                    key: 3,
                },
            ],
            headerData: [
                {
                    name: '雨量站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-yuliang',
                },
                {
                    name: '水位站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-shuiwei',
                },
                {
                    name: '渗压站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-shenya',
                },
                {
                    name: '渗流站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-shenliu',
                },
                {
                    name: '位移站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-weiyi',
                },
                {
                    name: '视频站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-shipin',
                },
                {
                    name: '广播站',
                    total: 30,
                    normal: 28,
                    error: 2,
                    icon: 'bbsl-guangbo',
                },
            ],
            // 工程概况
            projectItemData: [
                {
                    name: '水库',
                    num: 43,
                    total: 125,
                },
                {
                    name: '堤防',
                    num: 42,
                    total: 125,
                },
                {
                    name: '分洪',
                    num: 37,
                    total: 125,
                },
                {
                    name: '水电站',
                    num: 3,
                    total: 125,
                },
            ],
            projectItemDataAll: [
                {
                    name: '水库',
                    num: 43,
                    total: 125,
                },
                {
                    name: '堤防',
                    num: 42,
                    total: 125,
                },
                {
                    name: '分洪',
                    num: 37,
                    total: 125,
                },
                {
                    name: '水电站',
                    num: 3,
                    total: 125,
                },
            ],
            projectItemData1: [
                {
                    name: '水库',
                    num: 1,
                    total: 20,
                },
                {
                    name: '堤防',
                    num: 7,
                    total: 20,
                },
                {
                    name: '分洪',
                    num: 12,
                    total: 20,
                },
                {
                    name: '水电站',
                    num: 0,
                    total: 20,
                },
            ],
            projectItemData2: [
                {
                    name: '水库',
                    num: 1,
                    total: 5,
                },
                {
                    name: '堤防',
                    num: 3,
                    total: 5,
                },
                {
                    name: '分洪',
                    num: 1,
                    total: 5,
                },
                {
                    name: '水电站',
                    num: 0,
                    total: 5,
                },
            ],
            projectItemData3: [
                {
                    name: '水库',
                    num: 20,
                    total: 110,
                },
                {
                    name: '堤防',
                    num: 43,
                    total: 110,
                },
                {
                    name: '分洪',
                    num: 35,
                    total: 110,
                },
                {
                    name: '水电站',
                    num: 12,
                    total: 110,
                },
            ],
            pie: null,
            pieOption: {},
            // 累计雨量
            rainfallType: 'mountain',
            rainfallTypeList: [
                {
                    name: '山洪',
                    key: 'mountain',
                },
                {
                    name: '水文',
                    key: 'hydrology',
                },
                {
                    name: '水库',
                    key: 'reservoir',
                },
                {
                    name: '全部',
                    key: 'all',
                },
            ],
            rainfallData: [
                {
                    key: '1',
                    name: '测站1',
                    num: 50,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '2',
                    name: '测站2',
                    num: 42,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '3',
                    name: '测站3',
                    num: 37,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '4',
                    name: '测站4',
                    num: 29,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '5',
                    name: '测站5',
                    num: 16,
                    total: 174,
                    frist: 50,
                },
            ],
            displacementType: 'x',
            displacementTypeList: [
                {
                    name: '东',
                    key: 'x',
                },
                {
                    name: '北',
                    key: 'y',
                },
                {
                    name: '垂直',
                    key: 'Z',
                },
            ],
            // 大坝位移排行
            displacementData: [
                {
                    key: '1',
                    name: 'XX水库',
                    place: 'xx点位',
                    num: 50,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '2',
                    name: 'XX水库',
                    place: 'xx点位',
                    num: 42,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '3',
                    name: 'XX水库',
                    place: 'xx点位',
                    num: 37,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '4',
                    name: 'XX水库',
                    place: 'xx点位',
                    num: 29,
                    total: 174,
                    frist: 50,
                },
                {
                    key: '5',
                    name: 'XX水库',
                    place: 'xx点位',
                    num: 16,
                    total: 174,
                    frist: 50,
                },
            ],
            // 临界水位
            criticalWaterLevel: null,
            criticalType: 'reservoir',
            criticalTypeList: [
                {
                    name: '水库',
                    key: 'reservoir',
                },
                {
                    name: '河道',
                    key: 'river',
                },
            ],
            // 水库渗流
            reservoirSeepage: null,
            // 实时水情
            realtimeWaterType: 'reservoir',
            waterTypeList: [
                {
                    name: '水库',
                    key: 'reservoir',
                },
                {
                    name: '河道',
                    key: 'river',
                },
            ],
            realtimeWaterHeader: [
                {
                    key: 'order',
                    width: '14px',
                    name: '',
                },
                {
                    key: 'cezhan',
                    width: '22%',
                    name: '测站',
                },
                {
                    key: 'place',
                    width: '22%',
                    name: '位置',
                },
                {
                    key: 'num1',
                    width: '15%',
                    name: '当前水位',
                },
                {
                    key: 'num2',
                    width: '15%',
                    name: '汛限水位',
                },
                {
                    key: 'time',
                    width: 'calc(26% - 14px)',
                    name: '时间',
                },
            ],
            realtimeWaterData: [
                {
                    key: 1,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 2,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 3,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 4,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 5,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 6,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 7,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
                {
                    key: 8,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    num2: '130',
                    time: '20220309 17:07:43',
                },
            ],
            // 实时雨情
            realtimeRainType: 'mountain',
            rainTypeList: [
                {
                    name: '山洪',
                    key: 'mountain',
                },
                {
                    name: '水文',
                    key: 'hydrology',
                },
                {
                    name: '水库',
                    key: 'reservoir',
                },
                {
                    name: '全部',
                    key: 'all',
                },
            ],
            realtimeRainHeader: [
                {
                    key: 'order',
                    width: '14px',
                    name: '',
                },
                {
                    key: 'cezhan',
                    width: '24%',
                    name: '测站',
                },
                {
                    key: 'place',
                    width: '26%',
                    name: '位置',
                },
                {
                    key: 'num1',
                    width: '20%',
                    name: '时段雨量',
                },
                {
                    key: 'time',
                    width: 'calc(30% - 14px)',
                    name: '时间',
                },
            ],
            realtimeRainData: [
                {
                    key: 1,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 2,
                    cezhen: '测站123',
                    place: '位置在哪里位置在哪里位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 3,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 4,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 5,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 6,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 7,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
                {
                    key: 8,
                    cezhen: '测站123',
                    place: '位置在哪里',
                    num1: '120',
                    time: '20220309 17:07:43',
                },
            ],
        }
    },
    computed: {
        optionSingleHeightTime() {
            return {
                singleHeight: 29,
                waitTime: 2500,
            }
        },
    },
    mounted() {
        // 初始化饼图
        this.initPie()
        // 初始化临界水位
        this.initCriticalBar()
        // 初始化水库渗流
        this.initReservoirBar()
        this.$root.$on('resize', () => {
            this.resize(500)
        })
    },
    methods: {
        resize(delay) {
            // 动态计算表格的高度，自适应当前容器
            setTimeout(() => {
                this.pie.resize()
                this.criticalWaterLevel.resize()
                this.reservoirSeepage.resize()
            }, delay || 0)
        },
        // 切换测站数量统计类型
        changeEqItem(key) {
            this.currentQpType = key
        },
        // 切换降雨量统计类型
        changeRainfallType(key) {
            this.rainfallType = key
        },
        // 切换大坝位移统计类型
        changeDisplacementType(key) {
            this.displacementType = key
        },
        // 切换临界水位统计类型
        changeCriticalType(key) {
            this.criticalType = key
        },
        // 切换实时水情统计类型
        changeWaterType(key) {
            this.realtimeWaterType = key
        },
        // 切换实时雨情统计类型
        changeRainType(key) {
            this.realtimeRainType = key
        },
        // 初始化饼图
        initPie() {
            const pieDom = document.getElementById('pie-container')
            this.pie = echarts.init(pieDom)
            this.pieOption = {
                title: {
                    text: '总计 125',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                    triggerEvent: true,
                },
                legend: {
                    bottom: 0,
                    right: 0,
                    textStyle: {
                        color: '#adb9ba',
                    },
                    icon: 'circle',
                    itemWidth: 10,
                    itemHeight: 10,
                    // orient: 'vertical'
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                },
                series: [
                    {
                        name: '工程概况',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: true,
                        itemStyle: {
                            opacity: 1,
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2,
                            shadowColor: 'rgba(255,255,255,0.2)',
                            borderRadius: 6,
                        },
                        label: {
                            alignTo: 'edge',
                            formatter: '{name|{b}}\n{num|{c} 个}',
                            minMargin: 5,
                            edgeDistance: 90,
                            lineHeight: 15,
                            rich: {
                                name: {
                                    fontSize: 12,
                                    color: '#f5f5f5',
                                },
                                num: {
                                    fontSize: 10,
                                    color: '#999',
                                },
                            },
                        },
                        labelLine: {
                            length: 10,
                            length2: 0,
                            maxSurfaceAngle: 80,
                        },
                        data: [
                            {
                                value: 2,
                                name: '',
                                itemStyle: {
                                    color: 'transparent',
                                },
                                tooltip: {
                                    show: false, //划上不显示提示框
                                },
                                label: {
                                    show: false,
                                },
                            },
                            {value: 20, name: '已建', key: '1'},
                            {
                                value: 2,
                                name: '',
                                itemStyle: {
                                    color: 'transparent',
                                },
                                tooltip: {
                                    show: false, //划上不显示提示框
                                },
                                label: {
                                    show: false,
                                },
                            },
                            {value: 5, name: '规划', key: '2'},
                            {
                                value: 2,
                                name: '',
                                itemStyle: {
                                    color: 'transparent',
                                },
                                tooltip: {
                                    show: false, //划上不显示提示框
                                },
                                label: {
                                    show: false,
                                },
                            },
                            {value: 110, name: '在建', key: '3'},
                        ],
                        color: ['#0091ff', '#ff9a00', '#5e5eff'],
                    },
                ],
            }
            this.pieOption && this.pie.setOption(this.pieOption)
            this.pie.on('click', (params) => {
                if (params.componentType == 'title') {
                    this.changePieDetail('all')
                } else if (params.componentType == 'series') {
                    this.changePieDetail(params.data.key)
                }
            })
            this.pie.on('legendselectchanged', function (params) {
                console.log(params)
                // 获取点击图例的选中状态
                var isSelected = params.selected[params.name]
                // 在控制台中打印
                console.log(
                    (isSelected ? '选中了' : '取消选中了') +
                        '图例' +
                        params.name
                )
                // 打印所有图例的状态
                console.log(params.selected)
            })
        },
        changePieDetail(key) {
            if (key == 1) {
                this.projectItemData = this.projectItemData1
            } else if (key == 2) {
                this.projectItemData = this.projectItemData2
            } else if (key == 3) {
                this.projectItemData = this.projectItemData3
            } else {
                this.projectItemData = this.projectItemDataAll
            }
        },
        // 初始化临界水位
        initCriticalBar() {
            const waterLevelDom = document.getElementById('criticalWaterLevel')
            this.criticalWaterLevel = echarts.init(waterLevelDom)
            let option = {
                legend: {
                    left: 5,
                    bottom: 5,
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                },
                grid: {
                    top: 30,
                    right: '2%',
                    bottom: 50,
                },
                dataset: {
                    source: [
                        ['product', '实时水位', '临界水位'],
                        ['xxx水库1', 83.3, 85.8],
                        ['xxX水库2', 68.1, 73.4],
                        ['xxx水库3', 75.2, 86.4],
                        ['xxx水库4', 40.4, 53.9],
                        ['xxx水库5', 38.4, 66.9],
                    ],
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                },
                yAxis: {
					scale:true,
                    axisLine: {
                        show: true,
                    },
                    splitLine: {
                        show: false,
                    },
					
                },
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {offset: 0, color: '#188df0'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#86c5f8'},
                                ]
                            ),
                            // barBorderRadius: [20, 20, 0, 0],
                        },
                        barWidth: 14,
                    },
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {offset: 0, color: '#f69502'},
                                    {offset: 0.5, color: '#f69502'},
                                    {offset: 1, color: '#ffd9a3'},
                                ]
                            ),
                            // barBorderRadius: [20, 20, 0, 0],
                        },
                        barWidth: 14,
                    },
                ],
            }
            option && this.criticalWaterLevel.setOption(option)
        },
        // 初始化水库渗流  纵向
        initReservoirBar() {
            const reservoirSeepageDom =
                document.getElementById('reservoirSeepage')
            this.reservoirSeepage = echarts.init(reservoirSeepageDom)
            let option = {
                legend: {
                    // right: 5,
                    // top: 8,
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                },
                grid: {
                    top: 36,
                    right: '2%',
                    bottom: 50,
                },
                dataset: {
                    source: [
                        ['product', '实时渗流', '临界渗流'],
                        ['水库1', 83.3, 85.8],
                        ['水库2', 68.1, 73.4],
                        ['水库3', 75.2, 86.4],
                        ['水库4', 40.4, 53.9],
                        ['水库5', 38.4, 66.9],
                    ],
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#adb9ba',
                        },
                        formatter: function (value) {
                            var ret = '' //拼接加\n返回的类目项
                            var maxLength = 3 //每项显示文字个数
                            var valLength = value.length //X轴类目项的文字个数
                            var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                            if (rowN > 1) {
                                //如果类目项的文字大于3,
                                for (var i = 0; i < rowN; i++) {
                                    var temp = '' //每次截取的字符串
                                    var start = i * maxLength //开始截取的位置
                                    var end = start + maxLength //结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + '\n'
                                    ret += temp //凭借最终的字符串
                                }
                                return ret
                            } else {
                                return value
                            }
                        },
                    },
                },
                yAxis: {
					 scale:true,
                    axisLine: {
                        show: true,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {offset: 0, color: '#6767ff'},
                                    {offset: 0.5, color: '#6767ff'},
                                    {offset: 1, color: '#bcbcf8'},
                                ]
                            ),
                            barBorderRadius: [20, 20, 0, 0],
                        },
                        barWidth: 10,
                    },
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {offset: 0, color: '#f69502'},
                                    {offset: 0.5, color: '#f69502'},
                                    {offset: 1, color: '#ffd9a3'},
                                ]
                            ),
                            barBorderRadius: [20, 20, 0, 0],
                        },
                        barWidth: 10,
                    },
                ],
            }
            option && this.reservoirSeepage.setOption(option)
        },
    },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.index-container {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    background: #060f18; //#ebeef5;
    box-sizing: border-box;
    // background-image: url('./../assets/img/waterbg5.jpg'); 
    background-image: url('./../assets/img/app-bg.jpg'); 
	background-repeat:no-repeat;
	background-size:100% 100%;
    color: #fff;
}
.top-container{
    height: 140px;
    margin-top: 10px;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
}
.center-container{
    height: calc(50% - 90px);
    margin-top: 10px;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
}
.bottom-container{
    height: calc(50% - 90px);
    margin-top: 10px;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
}
.section-con{
    background: rgba(#314351, 0.2);
    box-shadow: inset 0 0 100px rgba(#000 , 0.3);
}
.section-con:hover{
    box-shadow: inset -10px 10px 100px rgba(#000 , 0.3), 0 0 4px rgba(#fff, 0.2);
}
.top-left{
    width: 16%;
}
.top-center1{
    width: 12%;
}
.top-center2{
    width: 16%;
}
.top-right{
    width: calc(56% - 20px);
    margin-left: 10px;
}
.section-btn-group{
    width: 100px;
    height: 100%;
    text-align:center;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .section-btn{
        width: 96px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        padding:2px 0;
        background: linear-gradient(to right,transparent,#0574d4,transparent);
        color: #badeff;
        text-shadow: 1px 1px 2px rgb(58, 58, 58);
    }
    .section-btn:hover,.section-btn.active{
        background: linear-gradient(to right,transparent,#c2a071,transparent);
        color: #f1e5d2
    }
}

.equipment-item-content{
    width: calc(100% - 120px);
    justify-content: space-around;
    margin-left: 20px;
    
    .eq-item-name{
        span{
            font-size: 20px;
            font-weight: bold;
            color:rgb(187, 191, 192);
        }
        .eq-item-icon{
            font-size: 20px;
            margin-left: 10px;
            color: #ff9a00;
        }
        .eq-item-total{
            font-size: 30px;
            font-weight: bold;
            color: #ff9a00;
            i{
                font-style: normal;
                margin-left: 6px;
            }
        }

    }
    .eq-item-detail{
        >div{
            margin: 8px 12px 0 0;
            font-size: 16px;
        }
        .eq-item-kind{
            font-size: 14px;
            color: #b7c6d8;
        }
        .eq-item-num{
            font-size: 18px;
            font-weight: bold;
            margin-top: 4px;
            color: #b7c6d8;
        }
    }
}

.center-con1{
    width: 28%;
    height: 100%;
}
.center-con2{
    width: 42%;
    margin-left: 10px;
    position: relative;
}
.center-con3{
    // width: calc(42% - 320px);
    width: calc(30% - 20px);
    margin-left: 10px;
    position: relative;
}
.center-con4{
    width: 290px;
    margin-left: 10px;
}
.bottom-con1{
    width: 24%;
    position: relative;
}
.bottom-con2{
    width: 30%;
    margin-left: 10px;
    position: relative;
}
.bottom-con3{
    width: calc(22% - 15px);
    margin-left: 10px;
    position: relative;
}
.bottom-con4{
    width: calc(24% - 15px);
    margin-left: 10px;
    position: relative;
}

.top-left-content{
    margin-top: 10px;
}
.alarm-item{
    // width: 33.33%;
    flex: 1;
    .icon{
        text-align: center;
        color: #4885d5;
    }
    i{
        font-size: 40px;
    }
    .title{
        font-weight: 700;
        letter-spacing: 1px;
        width: 60%;
        height: 18px;
        line-height: 18px;
        margin: auto;
        margin-top: 6px;
        margin-bottom: 0.1rem;
        text-align: center;
        color: #badeff;
        background: linear-gradient(to right,transparent,#0574d4,transparent);
        font-size: 16px;
        text-shadow: 1px 1px 2px rgb(58, 58, 58);
    }
    .num{
        font-size: 20px;
        text-align: center;
        color: #fff;
        margin-top: 6px;
    }
}
.alarm .alarm-item{
    cursor: pointer;
    .num{
        color:#ff9a00;
        width: 60%;
        margin: 0 auto;
        height: 60px;
        background: url('../assets/img/alarm_icon.png');
        background-size: 100% 100%;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
    }
}
.alarm .alarm-item.active,.alarm .alarm-item:hover{
    transform: scale(1.1);
    .icon{
        color: #e7a74d;
    }
    .title{
        color: #ffce5a;
        background: linear-gradient(to right,transparent,rgba(255,192,0,.45),transparent);
        text-shadow: 1px 1px 2px rgb(58, 58, 58);
    }
    .num{
        color:#ff9a00;
        width: 60%;
        margin: 0 auto;
        height: 60px;
        background: url('../assets/img/alarm_icon_active.png');
        background-size: 100% 100%;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
    }
}
.section-title{
    display: inline-block;
    background: linear-gradient(to right,#c2a071,transparent,transparent);
    height: 18px;
    width: calc(100% - 50px);
    line-height: 18px;
    font-style: oblique;
    font-weight: 700;
    text-shadow: 1px 1px 2px #000;
    font-size: 14px;
    margin-top: 10px;
}
.section-title-img{
    margin-top: 10px;
    margin-left: 4px;
    margin-right: 4px;
    width: 14px;
    height: 14px;
}
#pie-container{
    width: 100%;
    height: 50%;
    margin: 0 auto;
}

div.full-out-header{
    height: calc(100% - 24px)
}
.project-container{
    width: 100%;
    height: 50%;
    box-sizing: border-box;
}
.bar-item{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    span{
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
    }
    .name{
        width: 80px;
        text-align: right;
        color: #adb9c4;
    }
    .num{
        width: 50px;
        text-align: left;
        color: #309cfa;
        font-size: 18px;
    }
    .icon-num{
        width: calc(100% - 140px);
        height: 16px;
        padding: 4px;
        box-sizing: border-box;
        display: flex;
        margin: 0 10px;
        border: 1px solid rgba(0,132,251,.25);
        background: rgba(0,132,251,.1);
        position: relative;
    }
    .icon-num-inner {
        height: 6px;
        background: #0084fb;
    }
    .icon-num-sub{
        display: none;
        position: absolute;
        bottom: 150%;
        left: 50%;
        transform: translateX(-50%);
        color:#adb9c4;
    }
}
.bar-item:hover{
    .icon-num-sub{
        display: block;
    }
}

.type-btn-group{
    position: absolute;
    right: 10px;
    top: 10px;
}
.type-btn-item{
    display: inline-block;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 8px;
    color: #badeff;
    font-size: 10px;
    background: linear-gradient(to right,transparent,#0574d4,transparent);
    font-style: oblique;
    margin: 0 2px;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgb(58, 58, 58);
    vertical-align: middle;
}
.type-btn-item:hover,.type-btn-item.active{
    color: #f1e5d2;
    background: linear-gradient(to right,transparent,#c2a071,transparent);
}
.col-flex{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.padding{
    padding: 10px 20px;
    box-sizing: border-box;
}   
.order-type.bar-item{
    justify-content: start;
    .order{
        width: 20px;
        height: 24px;
        font-size: 14px;
        font-weight: 700;
        color: #ff9a00;
        background: url('./../assets/img/order_icon.png');
        background-size: 100% 100%;
        text-align: center;
        line-height: 24px;
        font-style: oblique;
        margin-right: 10px;
        padding-right: 2px;
        flex-grow:0;
        flex-shrink:0;
    }
    .name{
        text-align: left;
        flex-grow:0;
        flex-shrink:0;
    }
    .icon-num{
        text-align: left;
    }
    .icon-num-inner {
        // background: #ff9a00;
        background: linear-gradient(to right,transparent,#0084fb);
    }
    .icon-num-inner{
        width: 100%
    }
}
.order-type:nth-of-type(1),
.order-type:nth-of-type(2),
.order-type:nth-of-type(3){
    .icon-num{
        border: 1px solid rgba(255,154,0,.15);
        background: rgba(255,154,0,.1);
    }
    .icon-num-inner {
        // background: #ff9a00;
        background: linear-gradient(to right,transparent,#ff9a00);
    }
    .num{
       color: #ffdaa5;
    }
}
.explain{
    position: absolute;
    right: 20px;
    bottom: 6px;
    font-size: 10px;
    color: #9c9c9c;
}
.explain.top{
    top: 10px;
}
#criticalWaterLevel, #reservoirSeepage{
    width: 100%;
    height: 100%;
    color: #a9f8fc
}
.scroll-table{
    
    .scroll-table-header{
        width: 100%;
        display: flex;
        justify-content: space-around;
        background: rgba(#0574d4, 0.8);
        background: rgba(92, 88, 79, 0.6);
        height: 36px;
        line-height: 36px;
        padding: 0 10px;
        box-sizing: border-box;
        
    }
    .scroll-table-body{
        height: calc(100% - 36px);
        overflow: hidden;
    }
    .header-item,.column-item{
        text-align: left;
    }
    .scroll-table-column{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .header-item{
        font-size: 16px;
        font-weight: 700;
        color: #d8dddd;
    }
    .scroll-table-column{
        padding: 6PX 10px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0,132,251,.2);
    }
    .scroll-table-column:nth-of-type(2n){
        background-color: rgba(0,132,251,.1);
    }
    .column-item{
        font-size: 12px;
        color: #dbdbdb;
        padding-right: 4px;
        box-sizing: border-box;
    }
    .column-item-icon{
        display: inline-block;
        width: 10px;
        height: 10px;
        line-height: 12px;
        background-color: #ff9a00;
        border-radius: 100%;
        margin-right:4px;
    }
}


</style>