<template>
    <div class="full bg-container upper">
        <div class="left-section">
            <div class="left-section1">
                <div>
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title">实时视频</span>
                </div>
                <div class="station-search videoSelect">
                    <el-select
                        ref="select"
                        style="width: 100%"
                        class="search-select"
                        v-model="currentSite"
                        placeholder="请选择"
                        @change="changeSite"
                        @visible-change="visibleChange"
                        size="mini"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="site in siteOption"
                            :key="site.code"
                            :value="site.code"
                            :label="site.name"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="full full-out-header">
                    <!-- <video-player split="1" id="videoIframe" siteCode="1234567891" :defaultSplit="1"
						:hadSiteOption="true" :siteOption="siteOption" class="video-container"></video-player> -->
                    <!-- <video-player
                        ref="videoIframe"
                        id="videoIframe"
                        :siteCode="currentSite"
                        :defaultSplit="1"
                        :hadSiteOption="true"
                        :siteOption="siteOption"
                        class="video-container"
                    ></video-player> -->
                    <video-play-plugin
                        id="videoIframe"
                        class="videoWindow"
                        ref="videoIframe"
                        :options="options"
                        @ready="ready"
                    >
                    </video-play-plugin>
                </div>
            </div>
            <div class="section-con left-section2">
                <div>
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title">测站概况</span>
                </div>
                <div class="full full-out-header equipment-item-content">
                    <div
                        class="equipment-item"
                        v-for="item in stationData"
                        :key="item.sttp"
                        @click="
                            handleStation(item.sttp, 'station', {
                                type: 'shuiku',
                                stationType: item.sttp,
                                sttp: '',
                            })
                        "
                    >
                        <div>
                            <div class="eq-item-name">
                                <span>{{ item.sttp }}</span>
                                <i
                                    class="eq-item-icon bbsl-iconfont"
                                    :class="item.icon"
                                ></i>
                                <div class="eq-item-total">
                                    {{ item.count }}<i>个</i>
                                </div>
                            </div>
                            <div class="eq-item-detail flex">
                                <div>
                                    <div class="eq-item-kind">
                                        正常
                                        <span style="color: rgb(6, 194, 6)">
                                            {{ item.normalCount }}
                                        </span>
                                    </div>
                                </div>
                                <div>
                                    <div class="eq-item-kind">
                                        故障
                                        <span style="color: rgb(199, 61, 61)">
                                            {{ item.faultCount }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-con left-section3">
                <div>
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title"
                        >位移监测
                        <span
                            class="details_title"
                            @click="searchDisplacement()"
                            >详情</span
                        >
                    </span>
                </div>
                <div class="station-search">
                    <el-select
                        style="width: 100%"
                        class="search-select"
                        v-model="stationKey1"
                        placeholder="请选择"
                        @change="getDammvList"
                        size="mini"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in monitoringList1"
                            :key="item.mpcd"
                            :label="item.mpnm"
                            :value="item.mpcd"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="full full-out-header">
                    <div id="shiftChart" class="full"></div>
                </div>
            </div>
        </div>
        <div class="center-section">
            <div class="structure-title">
                <i class="icon el-icon-d-arrow-left" @click="goBack"></i>
                <div
                    class="title"
                    style="display: flex; justify-content: space-between"
                >
                    <span></span>{{ title }}

                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            切换水库<i
                                class="el-icon-arrow-down el-icon--right"
                            ></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- reservoirList -->
                            <el-dropdown-item
                                v-for="(items, index) in reservoirList"
                                :key="index"
                                :command="items"
                                v-text="items.rsnm"
                            ></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="section-con center-section-top">
                <div class="top-container">
                    <div class="total-count-container">
                        <div class="total-count-container-top">
                            <div class="total-count-item">
                                <!-- <div class="icon">
									<i class="bbsl-iconfont bbsl-kurong"></i>
								</div> -->
                                <div class="num">
                                    <span>{{
                                        rsvrAndPptnValues.dyp || 0
                                    }}</span>
                                </div>
                                <div class="title">日累计雨量( mm )</div>
                                <div class="circle"></div>
                            </div>
                            <div class="total-count-item">
                                <!-- <div class="icon">
									<i class="bbsl-iconfont bbsl-xushui"></i>
								</div> -->
                                <div class="num">
                                    <span>{{ rsvrAndPptnValues.p1 || 0 }}</span>
                                </div>
                                <div class="title">1小时雨量( mm )</div>
                                <div class="circle"></div>
                            </div>
                            <div class="total-count-item">
                                <!-- <div class="icon">
									<i class="bbsl-iconfont bbsl-kurong"></i>
								</div> -->
                                <div class="num">
                                    <span
                                        class="CurrentWaterLevel"
                                        :style="title_style"
                                        >{{ rsvrAndPptnValues.rz || 0 }}</span
                                    >
                                </div>
                                <div class="title">当前水位( m )</div>
                                <div class="circle"></div>
                            </div>
                            <div class="total-count-item">
                                <!-- <div class="icon">
									<i class="bbsl-iconfont bbsl-kurong"></i>
								</div> -->
                                <div class="num">
                                    <span v-show="showWord" class="word">{{
                                        word
                                    }}</span>
                                    <span>{{
                                        rsvrAndPptnValues.rstpc || 0
                                    }}</span>
                                </div>
                                <div class="title">当前库容( 万m³ )</div>
                                <div class="circle"></div>
                            </div>
                        </div>
                        <div class="water-rain-container">
                            <div class="section plan">
                                <div class="num">
                                    <span>{{
                                        generalSituation.ttstcp || 0
                                    }}</span>
                                </div>
                                <div class="title">总设计库容( 万m³ )</div>
                            </div>
                            <div class="section plan">
                                <div class="num">
                                    <span>{{ generalSituation.w || 0 }} </span>
                                </div>
                                <div class="title">正常蓄水位( m )</div>
                            </div>
                            <div class="section plan">
                                <div class="num">
                                    <span
                                        >{{ generalSituation.dsfllv || 0 }}
                                    </span>
                                </div>
                                <div class="title">设计洪水位( m )</div>
                            </div>
                            <div class="section plan">
                                <div class="num">
                                    <span
                                        >{{ generalSituation.chfllv || 0 }}
                                    </span>
                                </div>
                                <div class="title">核校洪水位( m )</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-container">
                    <div class="full full-out-header alarm">
                        <div
                            v-for="(item, index) in rainAlarm"
                            :key="index"
                            class="alarm-item"
                            @click="handlePopup(item.name, item.list)"
                        >
                            <div class="num" v-if="item.name == '水位报警'">
                                <i
                                    class="alarmIcon el-icon-message-solid"
                                    :class="item.count > 0 ? 'light' : 'dark'"
                                ></i>
                            </div>
                            <div class="num" v-else>{{ item.count }}</div>
                            <div class="title">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-section-center">
                <div class="section-con center-m-section1">
                    <!-- 历史文化 -->
                    <div class="other-info">
                        <div class="section history" @click="openHistory">
                            <i class="bbsl-iconfont bbsl-lishi"></i>
                            <span>历史文化</span>
                        </div>
                        <div class="section history" @click="openPDF(1)">
                            <i class="bbsl-iconfont bbsl-yuan"></i
                            ><span>调度规程</span>
                        </div>
                        <div class="section history" @click="openPDF(2)">
                            <i class="bbsl-iconfont bbsl-yuan"></i
                            ><span>应急预案</span>
                        </div>
                    </div>
                    <!-- 安全鉴定 -->
                    <div class="safe-maintain">
                        <div
                            class="safe-maintain-item"
                            @click="openList(1, params.rscd)"
                        >
                            <div class="name">安全鉴定</div>
                            <div class="num">
                                {{ generalSituation.appraisalCount || 0 }}
                                <span>次</span>
                            </div>
                        </div>
                        <div
                            class="safe-maintain-item"
                            @click="openList(2, params.rscd)"
                        >
                            <div class="name">除险加固</div>
                            <div class="num">
                                {{ generalSituation.reinforceCount || 0 }}
                                <span>次</span>
                            </div>
                        </div>
                        <div
                            class="safe-maintain-item"
                            @click="openList(3, params.rscd)"
                        >
                            <div class="name">维修养护</div>
                            <div class="num">
                                {{ generalSituation.maintainCount || 0 }}
                                <span>次</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section-con center-m-section2">
                    <div class="full responsible">
                        <div class="responsible-item">
                            <div class="title">
                                <i class="bbsl-iconfont bbsl-zerenren"></i>
                                水库防汛责任人
                            </div>
                            <div
                                class="person-item"
                                v-for="person in responsible2"
                                :key="person.mobilePhone"
                            >
                                <i class="icon-person el-icon-user-solid"></i>
                                <span>{{ person.name }}</span>
                                <span>{{ person.mobilePhone }}</span>
                                <!-- <el-popover placement="top" trigger="hover" width="230" popper-class="yuan-outer">
									<div>
										<el-input style="
                                                width: 140px;
                                                margin-right: 10px;
                                            " v-model="message" type="textarea" :rows="2" placeholder="请输入消息内容"
											size="mini"></el-input>
										<el-button type="primary" icon="el-icon-message" circle></el-button>
										<el-button type="success" icon="el-icon-phone" circle></el-button>
									</div>
									<i slot="reference" class="
                                            icon-contact
                                            el-icon-chat-line-square
                                        "></i>
								</el-popover> -->
                            </div>
                        </div>
                        <div class="responsible-item">
                            <div class="title">
                                <i class="bbsl-iconfont bbsl-zerenren"></i>
                                大坝安全责任人
                            </div>
                            <div
                                class="person-item"
                                v-for="person in responsible1"
                                :key="person.mobilePhone"
                            >
                                <i class="icon-person el-icon-user-solid"></i>
                                <span>{{ person.name }}</span>
                                <span>{{ person.mobilePhone }}</span>
                                <!-- <el-popover placement="top" trigger="hover" width="230" popper-class="yuan-outer">
									<div>
										<el-input style="
                                                width: 140px;
                                                margin-right: 10px;
                                            " v-model="message" type="textarea" :rows="2" placeholder="请输入消息内容"
											size="mini"></el-input>
										<el-button type="primary" icon="el-icon-message" circle></el-button>
										<el-button type="success" icon="el-icon-phone" circle></el-button>
									</div>
									<i slot="reference" class="
                                            icon-contact
                                            el-icon-chat-line-square
                                        "></i>
								</el-popover> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-section-bottom">
                <div class="section-con center-section1">
                    <div>
                        <img
                            class="section-title-img"
                            src="../../assets/img/title_icon.png"
                        /><span class="section-title"
                            >水情监测
                            <span
                                class="details_title"
                                @click="searchRsvrLatest()"
                                >详情</span
                            >
                        </span>
                    </div>
                    <div class="full full-out-header">
                        <div id="waterChart" class="full"></div>
                    </div>
                </div>
                <div class="section-con center-section2">
                    <div>
                        <img
                            class="section-title-img"
                            src="../../assets/img/title_icon.png"
                        /><span class="section-title"
                            >雨情监测
                            <span class="details_title" @click="searchRain()"
                                >详情</span
                            >
                        </span>
                    </div>
                    <div class="full full-out-header">
                        <div id="rainChart" class="full"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-section">
            <div class="section-con right-section1">
                <div>
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title">最新巡检</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 inspectionHeader"
                            :key="column.key"
                            :style="{width: column.width}"
                            style="text-align: center"
                        >
                            {{ column.name }}
                        </div>
                    </div>
                    <div style="height: calc(100% - 30px); overflow: auto">
                        <div
                            class="scroll-table-column"
                            v-for="column in inspectionData"
                            :key="column.key"
                        >
                            <div class="column-item" style="width: 14px">
                                <span class="column-item-icon"></span>
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 25%"
                                :title="column.structure"
                            >
                                {{ column.structure + '/' + column.position }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 15%; text-align: center"
                                :title="column.isNormal"
                            >
                                {{ column.isNormal == 1 ? '是' : '否' }}
                            </div>

                            <!-- <div class="column-item ellipsis"
			         style="width: 10%"
			         :title="column.isNormal">
			      {{ column.isNormal == 1 ? '正常' : '异常' }}
			    </div> -->
                            <div
                                class="column-item ellipsis"
                                style="
                                    width: calc(33% - 14px);
                                    text-align: center;
                                "
                                :title="column.createTime"
                            >
                                {{ column.createTime }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 20%; text-align: center"
                                :title="column.conclusion"
                            >
                                {{ column.conclusion }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-con right-section2">
                <div>
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title"
                        >测压管水位监测
                        <span class="details_title" @click="searchManometry()"
                            >详情</span
                        >
                    </span>
                </div>
                <div class="station-search">
                    <el-select
                        style="width: 100%"
                        class="search-select"
                        v-model="stationKey2"
                        placeholder="请选择"
                        @change="getDamspprList"
                        size="mini"
                        :popper-append-to-body="false"
                    >
                        <el-option
                            v-for="item in monitoringList2"
                            :key="item.mpcd"
                            :label="item.mpnm"
                            :value="item.mpcd"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="full full-out-header">
                    <div id="pressureChart" class="full"></div>
                </div>
            </div>
            <div class="section-con right-section3">
                <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="seepageChart" class="full"></div>
                </div>
            </div>
        </div>
        <stations-model
            ref="stationsModel"
            @close="closeModel"
        ></stations-model>
        <historyModel ref="historyModel" @close="closeModel"></historyModel>
        <SafeModel ref="SafeModel" @close="closeModel"></SafeModel>
        <PDFModel ref="PDFModel" @close="closeModel"></PDFModel>
        <DSModel
            ref="DSModel"
            @close="closeModel"
            @callAgain="getWarnInfo"
        ></DSModel>
    </div>
</template>

<script>
// import videoPlayer from './components/videoPlayer.vue'
import videoPlayPlugin from './components/videoPlayPlugin.vue'
import VueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts'
import stationsModel from './components/stationsModel.vue'
import historyModel from './components/historyModel.vue'
import SafeModel from './components/SafeModel.vue'
import DSModel from './components/DSModel.vue'
import PDFModel from './components/PDFModel.vue'
import digitalReservoir from '@/api/frontScreen/digitalReservoir.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
export default {
    name: 'digitalReservoir',
    components: {
        videoPlayPlugin,
        VueSeamlessScroll,
        stationsModel,
        historyModel,
        SafeModel,
        PDFModel,
        DSModel,
    },
    computed: {
        optionSingleHeightTime() {
            return {
                singleHeight: 29,
                waitTime: 2500,
            }
        },
    },
    data() {
        return {
            showWord: false,
            word: '',
            title_style: {
                color: '',
            },
            firstShow: false,
            options: {
                layout: '1x1',
                showToolbar: 1,
                simpleTips: true,
                mountedInit: true,
            },
            list: null, //上级传参
            message: '', // 要发送的消息
            title: '',
            capacity: 86.49,
            storage: 71.28,
            params: {
                rscd: '',
                time: '',
                waterId: '',
                year: 0,
            },
            //水库概况
            monitoringList1: [], //测站下拉列表
            monitoringList2: [], //测站下拉列表
            monitoringList3: [], //测站下拉列表
            generalSituation: '',
            dammvLists: [], //位移曲线数据
            damspprLists: [], //渗压曲线数据
            damspgLists: [], //渗流曲线数据
            rsvrLatestLists: [], //水情监测
            pptnLatestLists: [], //雨情监测
            rsvrAndPptnValues: {}, //当日水位雨情情况
            // 安全责任人
            responsible1: [],
            // 防汛责任人
            responsible2: [],
            safeMaintain: [
                {
                    name: '安全鉴定',
                    num: 3,
                    key: 1,
                },
                {
                    name: '除险加固',
                    num: 65,
                    key: 2,
                },
                {
                    name: '保养维护',
                    num: 65,
                    key: 3,
                },
            ],
            siteOption: [
                // {
                // 	name: '视频监测点A',
                // 	code: '1234567891',
                // },
                // {
                // 	name: '视频监测点B',
                // 	code: '1234567892',
                // },
                // {
                // 	name: '视频监测点C',
                // 	code: '1234567893',
                // },
                // {
                // 	name: '视频监测点D',
                // 	code: '1234567894',
                // },
                // {
                // 	name: '视频监测点E',
                // 	code: '1234567895',
                // },
            ],
            rainAlarm: [
                {
                    name: '水位报警',
                    count: 0,
                    list: [],
                },
                {
                    name: '雨量报警',
                    count: 0,
                    list: [],
                },
                {
                    name: '工情报警',
                    count: 0,
                    list: [],
                },
            ],
            stationData: [
                {
                    sttp: '雨量站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-yuliang',
                },
                {
                    sttp: '水库水位站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shuiwen',
                },
                {
                    sttp: '生态流量站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shenliu',
                },
                {
                    sttp: '渗压点',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shenya',
                },
                {
                    sttp: '位移点',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-weiyi',
                },
                {
                    sttp: '视频站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shipin',
                },
            ],
            inspectionHeader: [
                {
                    key: 'order',
                    width: '14px',
                    name: '',
                },
                {
                    key: 'structure',
                    width: '23%',
                    name: '巡检部位',
                },
                {
                    key: 'isNormal',
                    width: '15%',
                    name: '是否正常',
                },
                {
                    key: 'createTime',
                    width: 'calc(33% - 14px)',
                    name: '时间',
                },
                {
                    key: 'conclusion',
                    width: '20%',
                    name: '处理结论',
                },
                // {
                //   key: 'isNormal',
                //   width: '10%',
                //   name: '状态',
                // },
            ],
            inspectionData: [],
            rainChart: null, //雨情监测
            waterChart: null, //水情监测
            seepageChart: null, //渗流监测
            pressureChart: null, //渗压监测
            shiftChart: null, //位移监测
            stationKey1: '',
            options1: [],
            stationKey2: '',
            stationKey3: '',
            options3: [],
            reservoirList: [], //水库下拉列表
            currentSite: '',
        }
    },
    created() {
        if (window.localStorage.getItem('rscd')) {
            this.params.rscd = window.localStorage.getItem('rscd')
            this.title = window.localStorage.getItem('title')
        } else {
            this.params.rscd = this.$route.query.rscd
            this.title = this.$route.query.rsnm
        }
        // if (window.performance.navigation.type === 1) {
        //      console.log('页面被刷新')
        //    } else {
        //      console.log('页面首次被加载')
        //   this.params.rscd = this.$route.query.rscd
        //    }
        this.getFindAll()
        this.getRsvrAndPptnValue() //当日水位雨情情况
        this.getResDetail() //水库详情
        this.getWarnInfo() //根据水库编码获取预警信息
        this.getStationSituation() //测站概况
        this.getPersonList() //责任人列表
        this.getLatestIns() //最新巡检
        this.getRsvrLatestList() //水情监测
        this.getPptnLatestList() //雨情监测
        this.getMonitoring() //测站下拉列表
        this.getVideoList()
    },
    mounted() {
        window.addEventListener('popstate', this.removeCache, false)
        this.initCharts()
        this.$root.$on('resize', () => {
            this.resize(500)
        })
        // this.title = this.list.rsnm
    },
    methods: {
        /**
         * 详情点击事件
         * */
        // 位移
        searchDisplacement() {
            console.log(this.params.rscd, '位移')
            let sqID = this.params.rscd
            window.sessionStorage.setItem('StationId', sqID)
            let routeData = this.$router.resolve({
                path: '/bizPlat/monitor/gqMonitor/wyQuery',
            })
            window.open(routeData.href, '_blank')
        },
        // 水情
        searchRsvrLatest() {
            console.log('水情')
            let sqID = this.params.rscd
            window.sessionStorage.setItem('StationId', sqID)
            let routeData = this.$router.resolve({
                path: '/bizPlat/monitor/sqMonitor/resWaterLatest',
            })
            window.open(routeData.href, '_blank')
        },
        // 雨情
        searchRain() {
            console.log('雨情')
            let rainStcd = ''
            this.pptnLatestLists.forEach((res) => {
                rainStcd = res.stcd
            })
            console.log(rainStcd)
            window.sessionStorage.setItem('StationId', rainStcd)
            let routeData = this.$router.resolve({
                path: '/bizPlat/monitor/resMonitor/ylStQuery',
            })
            window.open(routeData.href, '_blank')
        },
        // 测压管
        searchManometry() {
            console.log('测压管')
            let sqID = this.params.rscd
            window.sessionStorage.setItem('rscdId', sqID)
            let routeData = this.$router.resolve({
                path: '/bizPlat/monitor/gqMonitor/sygQuery',
            })
            window.open(routeData.href, '_blank')
        },
        // 安全、除险、维护弹窗
        openList(value, id) {
            this.$nextTick(() => {
                let sqID = id
                window.sessionStorage.setItem('rscdId', sqID)
                this.$refs.SafeModel.open(value, id)
            })
        },
        // 设置水位数据颜色
        setCorlor() {
            if (this.rsvrAndPptnValues.rz < this.generalSituation.w) {
                this.title_style.color = 'rgb(6, 194, 6) !important'
            }
            if (this.rsvrAndPptnValues.rz >= this.generalSituation.w) {
                this.title_style.color = 'yellow !important'
            }
            if (this.rsvrAndPptnValues.rz >= this.generalSituation.dsfllv) {
                this.title_style.color = 'orange !important'
            }
            if (this.rsvrAndPptnValues.rz >= this.generalSituation.chfllv) {
                this.title_style.color = 'red !important'
            }
        },
        handleCommand(command) {
            this.word = ''
            this.showWord = false
            this.title = command.rsnm
            this.params.rscd = command.rscd
            window.localStorage.setItem('rscd', command.rscd)
            window.localStorage.setItem('title', command.rsnm)
            this.getResDetail() //水库详情
            this.getWarnInfo() //根据水库编码获取预警信息
            this.getStationSituation() //测站概况
            this.getPersonList() //责任人列表
            this.getLatestIns() //最新巡检
            this.getRsvrLatestList() //水情监测
            this.getPptnLatestList() //雨情监测
            this.getMonitoring() //测站下拉列表
            this.getRsvrAndPptnValue() //当日水位雨情情况
            this.getVideoList()
            this.setCorlor()
        },
        //打开报警弹框
        handlePopup(title, type, data, logo) {
            this.$nextTick(() => {
                this.$refs.DSModel.open(title, type, data, logo)
            })
        },
        //获取水库下拉列表
        getFindAll() {
            digitalReservoir.findAll({}, (res) => {
                if (res.state) {
                    this.reservoirList = res.value
                }
            })
        },
        cutWindowSelect(size) {
            this.$nextTick(() => {
                let widthV = this.$refs.videoIframe.$el.clientWidth
                let heightV = this.$refs.videoIframe.$el.clientHeight
                let iLeft,
                    iTop = 0,
                    iWidth,
                    iHeight
                iLeft = widthV - size.width
                iWidth = size.width + 2
                iHeight = size.height >= heightV ? heightV : size.height + 1
                this.$refs.videoIframe.cutWindow(
                    iLeft,
                    iTop,
                    iWidth,
                    iHeight + 12
                )
            })
        },
        visibleChange(flag) {
            this.$nextTick(() => {
                if (flag) {
                    setTimeout(() => {
                        let size =
                            this.$refs.select.$el.children[1].getBoundingClientRect()
                        this.cutWindowSelect(size)
                    }, 500)
                } else {
                    this.$refs.videoIframe.repairWindow()
                }
            })
        },
        // 根据监控点获取视频流地址
        getSiteVideoURL(cameraIndexCode) {
            let query = {
                cameraIndexCode, // 监控点编码
            }
            this.$http
                .post('${portal}/biz/catalog/base/previewURLs', query)
                .then((res) => {
                    if (res.data.state && res.data.value) {
                        let data = res.data.value
                        this.$nextTick(() => {
                            this.$refs.videoIframe.useVideoURL(data)
                        })
                    } else {
                        this.$message.warning('获取监控点资源失败！')
                    }
                })
        },
        ready() {
            this.$refs.videoIframe.play(this.currentSite)
        },
        //关联监控点列表
        getVideoList() {
            this.siteOption = this.$options.data().siteOption
            this.currentSite = this.$options.data().currentSite
            let param = {
                insStatus: 0,
                rscd: this.params.rscd,
                time: '',
                waterId: '',
                year: 0,
            }
            digitalReservoir.videoList(param, (res) => {
                if (res.state) {
                    this.siteOption = res.value
                    if (this.siteOption.length) {
                        this.currentSite = this.siteOption[0].code
                        if (this.currentSite) {
                            this.$refs.videoIframe.play(this.currentSite)
                            // this.getSiteVideoURL(this.currentSite)
                        }
                    } else {
                        this.$refs.videoIframe.play(' ')
                    }
                }
            })
        },
        // 切换监控点
        changeSite(val) {
            this.currentSite = val
            this.$refs.videoIframe.play(this.currentSite)
        },
        //水库详情
        getResDetail() {
            let param = {
                appTypeList: [],
                endTime: '',
                id: '',
                mpcd: '',
                periodTime: '',
                rscd: this.params.rscd,
                startTime: '',
                stcd: '',
                stlc: '',
                stnm: '',
                sttp: '',
                sttpList: [],
                usfl: '',
            }
            this.generalSituation = this.$options.data().generalSituation
            this.rsvrAndPptnValues = this.$options.data().rsvrAndPptnValues
            digitalReservoir.resDetail(this.params, (res) => {
                if (res.state) {
                    this.generalSituation = res.value
                    // 数据对比使用
                    digitalReservoir.rsvrAndPptnValue(param, (res) => {
                        if (res.state) {
                            this.rsvrAndPptnValues = res.value
                            if (this.rsvrAndPptnValues.rstpc == -1) {
                                this.rsvrAndPptnValues.rstpc = 0
                            }
                            if (
                                this.rsvrAndPptnValues.rstpc > 0 &&
                                this.rsvrAndPptnValues.isMatched == 'f'
                            ) {
                                this.word = '约'
                                this.showWord = true
                            }
                            this.setCorlor()
                        }
                    })
                }
            })
        },
        //根据水库编码获取预警信息
        getWarnInfo() {
            this.rainAlarm = this.$options.data().rainAlarm
            digitalReservoir.getWarnInfo(this.params.rscd, (res) => {
                if (res.state) {
                    res.value.forEach((e, ex) => {
                        this.rainAlarm[ex].count = e.count
                        this.rainAlarm[ex].list = e.list
                    })
                } else {
                }
            })
        },
        //当日水位雨情情况
        getRsvrAndPptnValue() {
            this.rsvrAndPptnValues = this.$options.data().rsvrAndPptnValues
            let param = {
                appTypeList: [],
                endTime: '',
                id: '',
                mpcd: '',
                periodTime: '',
                rscd: this.params.rscd,
                startTime: '',
                stcd: '',
                stlc: '',
                stnm: '',
                sttp: '',
                sttpList: [],
                usfl: '',
            }
            digitalReservoir.rsvrAndPptnValue(param, (res) => {
                if (res.state) {
                    this.rsvrAndPptnValues = res.value
                }
            })
        },
        //测站概况
        getStationSituation() {
            this.stationData = [
                {
                    sttp: '雨量站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-yuliang',
                },
                {
                    sttp: '水库水位站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shuiwen',
                },
                {
                    sttp: '生态流量站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shenliu',
                },
                {
                    sttp: '渗压点',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shenya',
                },
                {
                    sttp: '位移点',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-weiyi',
                },
                {
                    sttp: '视频站',
                    count: 0,
                    normalCount: 0,
                    faultCount: 0,
                    icon: 'bbsl-shipin',
                },
            ]
            digitalReservoir.stationSituation(this.params, (res) => {
                if (res.state) {
                    console.log(res)
                    res.value.forEach((e) => {
                        this.stationData.forEach((s) => {
                            if (e.sttp == s.sttp) {
                                s.count = e.count
                                s.normalCount = e.normalCount
                                s.faultCount = e.faultCount
                            }
                        })
                    })
                }
            })
        },
        //责任人列表
        getPersonList() {
            this.responsible1 = this.$options.data().responsible1
            this.responsible2 = this.$options.data().responsible2
            digitalReservoir.personList(this.params.rscd, (res) => {
                if (res.state && res.value) {
                    for (let i in res.value) {
                        if (i <= 3) {
                            this.responsible2.push(res.value[i][0])
                        } else if (i > 3) {
                            this.responsible1.push(res.value[i][0])
                        }
                    }
                }
            })
        },
        //最新巡检
        getLatestIns() {
            this.inspectionData = []
            let id = this.params.rscd
            digitalReservoir.latestIns(id, (res) => {
                if (res.state) {
                    this.inspectionData = res.value
                    this.inspectionData.forEach((e) => {
                        if (!e.createTime) {
                            e.createTime = ''
                        } else {
                            e.createTime = e.createTime
                                .replace('-', '/')
                                .split('/')[1]
                                .slice(0, 11)
                                .replace('-', '/')
                        }
                    })
                }
            })
        },
        //水情监测
        getRsvrLatestList() {
            this.rsvrLatestLists = []
            let param = {
                // rscd: this.params.rscd
                appTypeList: [],
                endTime: '',
                id: '',
                mpcd: '',
                periodTime: '',
                rscd: this.params.rscd,
                startTime: '',
                stcd: '',
                stlc: '',
                stnm: '',
                sttp: '',
                sttpList: [],
                usfl: '',
            }
            digitalReservoir.rsvrLatestList(param, (res) => {
                if (res.state) {
                    this.rsvrLatestLists = res.value
                    this.$nextTick(() => {
                        this.initWaterChart()
                    })
                }
            })
        },
        //雨情监测
        getPptnLatestList() {
            this.pptnLatestLists = []
            let param = {
                // rscd: this.params.rscd
                appTypeList: [],
                endTime: '',
                id: '',
                mpcd: '',
                periodTime: '',
                rscd: this.params.rscd,
                startTime: '',
                stcd: '',
                stlc: '',
                stnm: '',
                sttp: '',
                sttpList: [],
                usfl: '',
                tmOrderAsc: true,
            }
            digitalReservoir.pptnLatestList(param, (res) => {
                if (res.state) {
                    this.pptnLatestLists = res.value
                    this.$nextTick(() => {
                        this.initRainChart()
                    })
                }
            })
        },
        //获取监测站下拉
        getMonitoring() {
            this.dropDownList(1)
            this.dropDownList(2)
            this.dropDownList(3)
        },
        dropDownList(val) {
            // console.log(val);
            this.monitoringList1 = this.$options.data().monitoringList1
            this.monitoringList2 = this.$options.data().monitoringList2
            this.monitoringList3 = this.$options.data().monitoringList3
            this.stationKey1 = this.$options.data().stationKey1
            this.stationKey2 = this.$options.data().stationKey2
            this.stationKey3 = this.$options.data().stationKey3
            let param = {
                id: '',
                mpcd: '',
                mpnm: '',
                rscd: this.params.rscd,
                stlc: '',
                sttp: val,
                wkcn: '',
            }
            digitalReservoir.monitoring(param, (res) => {
                // console.log(res);
                if (res.state) {
                    // this.monitoringList = res.value
                    if (val == 1) {
                        this.monitoringList1 = res.value
                        if (this.monitoringList1.length > 0) {
                            this.stationKey1 = this.monitoringList1[0].mpcd
                        }
                        this.getDammvList() //位移曲线
                    } else if (val == 2) {
                        this.monitoringList3 = res.value
                        if (this.monitoringList3.length > 0) {
                            this.stationKey3 = this.monitoringList3[0].mpcd
                        }
                        this.getDamspgList() //渗流曲线
                    } else if (val == 3) {
                        this.monitoringList2 = res.value
                        if (this.monitoringList2.length > 0) {
                            this.stationKey2 = this.monitoringList2[0].mpcd
                        }
                        this.getDamspprList() //渗压曲线
                    }
                }
            })
        },
        //位移曲线图
        getDammvList() {
            this.dammvLists = []
            let param = {
                appTypeList: [],
                endTime: '',
                id: '',
                mpcd: '',
                periodTime: '',
                rscd: this.params.rscd,
                startTime: '',
                stcd: this.stationKey1,
                stlc: '',
                stnm: '',
                sttp: '',
                sttpList: [],
                usfl: '',
                tmOrderAsc: true,
            }
            digitalReservoir.dammvList(param, (res) => {
                if (res.state) {
                    this.dammvLists = res.value
                    this.$nextTick(() => {
                        this.initShiftChart()
                    })
                }
            })
        },
        //渗压监测
        getDamspprList() {
            let param = {
                startTime: '',
                endTime: '',
                mptp: '4',
                rscd: this.params.rscd,
                mpcd: this.stationKey2,
                tmOrderAsc: true,
            }
            digitalReservoir.getDamspprList(param, (res) => {
                if (res.state) {
                    this.damspprLists = res.value
                    // console.log(res.value);
                    this.$nextTick(() => {
                        this.initPressureChart()
                    })
                }
            })
        },
        //渗流曲线图
        getDamspgList() {
            let param = {
                pageBean: {
                    page: 1,
                    pageSize: -1,
                    showTotal: true,
                },
                params: {
                    rscd: this.params.rscd,
                },
            }
            digitalReservoir.lvtpcQuery(param, (res) => {
                if (res.state) {
                    this.damspgLists = res.value.rows
                    this.$nextTick(() => {
                        this.initSeepageChart()
                    })
                }
            })
        },
        openHistory() {
            //this.title, 1 // title 和 水库id
            this.$refs.historyModel.open(this.title, this.params.rscd)
            this.$refs.PDFModel.close()
            this.$refs.stationsModel.close()
            this.cutwindow('historyModel')
        },
        calculationWindow(size) {
            let iLeft, iTop, iWidth, iHeight
            iLeft = size.left - size.leftV
            iTop = size.top - size.topV
            iWidth = size.leftV + size.widthV - size.left
            iHeight = size.topV + size.heightV - size.top
            return [iLeft, iTop, iWidth + 1, iHeight + 1]
        },
        cutwindow(openWindow) {
            this.$nextTick(() => {
                let top = this.$refs[openWindow].$el.getBoundingClientRect().top
                let left =
                    this.$refs[openWindow].$el.getBoundingClientRect().left
                let topV =
                    this.$refs.videoIframe.$el.getBoundingClientRect().top
                let leftV =
                    this.$refs.videoIframe.$el.getBoundingClientRect().left
                let widthV = this.$refs.videoIframe.$el.clientWidth
                let heightV = this.$refs.videoIframe.$el.clientHeight
                let windowSize = {top, left, topV, leftV, widthV, heightV}
                let cutSize = this.calculationWindow(windowSize)
                this.$refs.videoIframe.cutWindow(...cutSize)
            })
        },
        openPDF(val, path) {
            //this.title, 1 // title 和 水库id
            this.$refs.PDFModel.open(val, this.title, this.params.rscd, path)
            this.$refs.historyModel.close()
            this.$refs.stationsModel.close()
            this.cutwindow('PDFModel')
        },
        handleStation(title, type, data) {
            let czlbList = dictUtils.getDictItemsFromCache('tj-czlb')
            czlbList.forEach((e) => {
                if (e.name == title) {
                    data.sttp = e.value
                }
            })
            this.$refs.stationsModel.open(title, type, data, this.params.rscd)
            this.$refs.historyModel.close()
            this.$refs.PDFModel.close()
            this.cutwindow('stationsModel')
        },
        closeModel() {
            this.$nextTick(() => {
                this.$refs.videoIframe.repairWindow()
            })
        },
        removeCache() {
            window.localStorage.removeItem('rscd')
            window.localStorage.removeItem('title')
        },
        goBack() {
            window.localStorage.removeItem('rscd')
            window.localStorage.removeItem('title')
            this.$router.push('/frontPlat/digitalReservoir/')
        },
        resize(delay) {
            // 动态计算表格的高度，自适应当前容器
            setTimeout(() => {
                this.rainChart.resize()
                this.waterChart.resize()
                this.seepageChart.resize()
                this.pressureChart.resize()
                this.shiftChart.resize()
            }, delay || 0)
        },
        initCharts() {
            this.$nextTick(() => {
                // this.initRainChart()
                // this.initWaterChart()
                // this.initSeepageChart()
                // this.initPressureChart()
            })
        },
        //下拉框选择
        // chengeMonitoring(){
        // 	console.log(this.stationKey1);
        // 	this.getDammvList()
        // },
        initRainChart() {
            // pptnLatestLists
            let times = []
            let drpList = []
            this.pptnLatestLists.forEach((e) => {
                times.push(e.tm.split(' ')[1])
                drpList.push(e.drp)
            })
            const rainChartDom = document.getElementById('rainChart')
            this.rainChart = echarts.init(rainChartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    top: '2%',
                    left: '4%',
                    data: ['小时雨量(mm)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '20%',
                    left: '4%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                    },
                ],
                series: [
                    {
                        name: '小时雨量(mm)',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data: drpList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                ],
            }
            option && this.rainChart.setOption(option)
        },
        initWaterChart() {
            // rsvrLatestLists
            let times = []
            let rzList = []
            let wList = []
            this.rsvrLatestLists.forEach((e) => {
                times.push(e.tm.split(' ')[1])
                rzList.push(e.rz)
                wList.push(e.w)
            })
            // let yMin = (Math.min(...rzList) + 1.5).toFixed(2)
            // let yMax = (Math.max(...rzList) - 1.5).toFixed(2)
            const waterChartDom = document.getElementById('waterChart')
            this.waterChart = echarts.init(waterChartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                    formatter(params) {
                        // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                        var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
                        var _today = moment()
                        let endTime = moment().format('YYYY-MM-DD') //当前年月日
                        var relVal = endTime + ' ' + params[0].name

                        for (var i = 0, l = params.length; i < l; i++) {
                            // circle变量是在数据前画一个对应颜色的圆形
                            let circle = `<i class="iconfont icon-yuan" style="margin-right:4px;font-size:14px;color:${params[i].color}">o</i>`
                            relVal +=
                                '<br/>' +
                                circle +
                                params[i].seriesName +
                                ' : ' +
                                params[i].value
                        }
                        return relVal
                    },
                },
                legend: {
                    top: '2%',
                    left: '4%',
                    data: ['当前水位(m)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '20%',
                    left: '4%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        max: Math.ceil(Math.max(...rzList)),
                        min: Math.floor(Math.min(...rzList)),
                        interval: 0.5, //每次增加几个
                    },
                ],
                series: [
                    {
                        name: '当前水位(m)',
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data: rzList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                ],
            }
            option && this.waterChart.setOption(option)
        },
        initSeepageChart() {
            let times = []
            let rslvs = []
            let rstpcs = []

            // console.log(this.damspgLists);
            this.damspgLists.forEach((e) => {
                // times.push(e.createTime.split(' ')[1])
                rslvs.push(e.rslv)
                rstpcs.push(e.rstpc)
            })
            const seepageChartDom = document.getElementById('seepageChart')
            this.seepageChart = echarts.init(seepageChartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                // legend: {
                //   top: '2%',
                //   left: '4%',
                //   // data: ['水位'],
                //   textStyle: {
                //     color: '#adb9ba',
                //     fontSize: 10,
                //   },
                // },
                grid: {
                    top: '20%',
                    left: '4%',
                    right: '10%',
                    bottom: '6%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: '库容',
                        type: 'category',
                        boundaryGap: false,
                        data: rstpcs,
                    },
                ],
                yAxis: [
                    {
                        name: '水位',
                        type: 'value',
                        scale: true,
                    },
                ],
                series: [
                    {
                        name: '水位',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: rslvs,
                        itemStyle: {
                            color: '#0091ff',
                        },
                    },
                ],
            }
            option && this.seepageChart.setOption(option)
        },
        initPressureChart() {
            // damspprLists
            let times = []
            let pztbwls = []
            let jpztbwls = []
            let dpztbwls = []
            let maxNum = []
            let minNum = []
            this.damspprLists.forEach((e) => {
                console.log(e)
                if (e.pztbwl) {
                    pztbwls.push(e.pztbwl)
                }
                if (e.jpztbwl) {
                    jpztbwls.push(e.jpztbwl)
                }
                if (e.dpztbwl) {
                    dpztbwls.push(e.dpztbwl)
                }
                times.push(e.mstm.slice(5))
            })
            if (pztbwls.length > 0) {
                maxNum.push(Math.max(...pztbwls))
                minNum.push(Math.min(...pztbwls))
            }
            if (jpztbwls.length > 0) {
                maxNum.push(Math.max(...jpztbwls))
                minNum.push(Math.min(...jpztbwls))
            }
            if (dpztbwls.length > 0) {
                maxNum.push(Math.max(...dpztbwls))
                minNum.push(Math.min(...dpztbwls))
            }
            const pressureChartDom = document.getElementById('pressureChart')
            this.pressureChart = echarts.init(pressureChartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    top: '2%',
                    left: '4%',
                    data: ['测压管危险水位', '测压管警戒水位', '测压管水位'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '20%',
                    left: '4%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        // max: Math.ceil(Math.max(...maxNum) * 1.0001),
                        // min: Math.floor(Math.min(...maxNum) * 0.999),
                        max: Math.ceil(Math.max(...maxNum)),
                        min: Math.floor(Math.min(...maxNum)),
                        // splitNumber: 6,// 想要分隔的段数
                        interval: 0.1, //每次增加几个
                        axisLabel: {
                            showMaxLabel: true,
                            showMinLabel: true,
                        },
                    },
                ],
                series: [
                    // {
                    //   name: '测压管危险水位',
                    //   type: 'line',
                    //   smooth: true,
                    //   emphasis: {
                    //     focus: 'series' +
                    //   },
                    //   data: dpztbwls,
                    //   itemStyle: {
                    //     normal: {
                    //       color: '#b22222',
                    //       lineStyle: {
                    //         color: '#b22222'
                    //       }
                    //     }
                    //   }
                    // },
                    // {
                    //   name: '测压管警戒水位',
                    //   type: 'line',
                    //   smooth: true,
                    //   emphasis: {
                    //     focus: 'series'
                    //   },
                    //   data: jpztbwls,
                    //   itemStyle: {
                    //     normal: {
                    //       color: '#ff6347',
                    //       lineStyle: {
                    //         color: '#ff6347'
                    //       }
                    //     }
                    //   }
                    // },
                    {
                        name: '测压管水位',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: pztbwls,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                ],
            }
            option && this.pressureChart.setOption(option)
        },
        initShiftChart() {
            let times = []
            let xrdsList = []
            let yrdsList = []
            let zrdsList = []
            this.dammvLists.forEach((e) => {
                times.push(e.tm.split(' ')[1])
                xrdsList.push(e.dx)
                yrdsList.push(e.dy)
                zrdsList.push(e.dz)
            })
            const shiftChartDom = document.getElementById('shiftChart')
            this.shiftChart = echarts.init(shiftChartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    textStyle: {
                        color: '#dddee0',
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                legend: {
                    top: '6%',
                    left: '4%',
                    data: ['x方向位移(mm)', 'y方向位移(mm)', 'z方向位移(mm)'],
                    textStyle: {
                        color: '#adb9ba',
                        fontSize: 10,
                    },
                },
                grid: {
                    top: '24%',
                    left: '4%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                    },
                ],
                series: [
                    {
                        name: 'x方向位移(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: xrdsList,
                        itemStyle: {
                            color: '#ff9a00',
                        },
                    },
                    {
                        name: 'y方向位移(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: yrdsList,
                        itemStyle: {
                            color: '#6767ff',
                        },
                    },
                    {
                        name: 'z方向位移(mm)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                        },
                        data: zrdsList,
                        itemStyle: {
                            color: '#91cc75',
                        },
                    },
                ],
            }
            option && this.shiftChart.setOption(option)
        },
    },
}
</script>

<style lang="scss" scoped>
@import './css/screen.scss';

/deep/ .details_title {
  font-size: 15px;
  cursor: pointer;
  margin-left: 15px;
  font-style: oblique;
  font-weight: normal;
}

.section-title {
  display: inline-block;
  background: linear-gradient(to right, #c2a071, transparent, transparent);
  height: 20px;
  width: calc(100% - 50px);
  padding: 2px 0;
  line-height: 18px;
  font-style: oblique;
  font-weight: 700;
  text-shadow: 1px 1px 2px #000;
  font-size: 18px;
  margin-top: 10px;
}

.bg-container {
  overflow: hidden;
  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;
  display: flex;
  color: #043b68;
  padding: 0 20px;
}

.left-section {
  width: 30%;
  height: 100%;
}

.center-section {
  width: calc(40% - 22px);
  height: 100%;
  margin: 0 10px;
  position: relative;
}

.section-con {
  position: relative;
}

.right-section {
  width: 30%;
  height: 100%;
}

.left-section1,
.right-section1 {
  height: 40%;
  position: relative;
}

.left-section2,
.right-section2 {
  height: 30%;
  margin-top: 10px;
}

.left-section1 .full {
  margin-top: 10px;
  height: calc(100% - 34px);
}

.left-section3,
.right-section3 {
  height: calc(30% - 20px);
  margin-top: 10px;
}

.video-container {
  height: 100%;
  width: calc(100% - 4px);
}

.videoWindow {
  width: 100%;
  height: 100%;
}

.center-section-top {
  height: calc(50% - 40px);
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
}

.center-section-center {
  height: calc(20% - 10px);
  margin-top: 10px;
  width: 100%;
  display: flex;
}

.center-section-bottom {
  height: calc(30% - 20px);
  margin-top: 10px;
  display: flex;
  width: 100%;
}

.top-container {
  display: flex;
  height: 66%;
  width: 100%;
  margin-top: 10px;
}

.total-count-container {
  width: 100%;
  height: 100%;
}

.total-count-container-top {
  display: flex;
  height: 60%;
  width: 100%;
  margin-bottom: 2px;
}

.total-count-item {
  // margin-left: 10px;
  margin: 0 5px;
  width: 50%;
  height: 90%;
  background-image: linear-gradient(
    rgba(54, 90, 152, 0.6) 0%,
    rgba(27, 55, 116, 0.6) 100%
  );
  border-radius: 10px;
  color: #badeff;
  border: 1px solid #4885d5;

  .icon {
    text-align: center;
    margin-top: 10px;
  }

  .bbsl-iconfont {
    font-size: 50px;
    color: #3cbaf4;
  }

  .num {
    text-align: center;
    margin-top: 20px;
    color: rgb(6, 194, 6);
  }

  .word {
    font-size: 18px !important;
  }

  .num > span {
    font-size: 40px;
    font-weight: 700;
    font-family: 'electronicFont';
  }

  .title {
    text-align: center;
    font-size: 14px;
  }

  .CurrentWaterLevel {
    color: rgb(6, 194, 6);
  }

  .circle {
    margin: 0 auto;
    width: 146px;
    height: 100px;
    margin-top: -30px;
    pointer-events: auto;
    image-rendering: -webkit-optimize-contrast;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../../assets/img/circle-light.png');
    mask-image: none;
    mask-repeat: initial;
    mask-size: initial;
    border-radius: 0px;
    cursor: pointer;
  }
}

.water-rain-container {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .section {
    width: 80%;
    height: 100%;
    border: 1px solid #4885d5;
    color: #fff;
    background-image: linear-gradient(
      rgba(54, 90, 152, 0.6) 0%,
      rgba(27, 55, 116, 0.6) 100%
    );
    border-radius: 10px;
    color: #badeff;
    padding: 10px 10px;
    box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }

  .section:nth-of-type(2) {
    margin: 0 10px;
  }

  .section:nth-of-type(3) {
    margin-right: 10px;
  }

  .title {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    // color: #0498f6;
  }

  // .num {
  //   text-align: center;
  //   font-size: 20px;
  //   // text-align: right;
  //   color: #ff9a00;
  //   font-weight: normal;
  //   font-family: 'electronicFont';
  // }

  .num {
    text-align: center;
    margin-top: 10px;
    color: rgb(6, 194, 6);
  }

  .num > span {
    font-size: 40px;
    font-weight: 700;
    font-family: 'electronicFont';
  }

  // .unit {
  //   margin-left: -4px;
  //   font-size: 12px;
  //   color: #b7c6d8;
  //   font-weight: normal;
  //   font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
  // }
}

.other-info {
  margin-bottom: 6px;
  // width: calc(20% - 20px);
  width: 100%;
  height: 45%;
  color: #badeff;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;

  .section {
    background-image: linear-gradient(
      rgba(54, 90, 152, 0.6) 0%,
      rgba(27, 55, 116, 0.6) 100%
    );
    border-radius: 10px;
    color: #badeff;
    width: 100%;
    border: 1px solid #4885d5;
    text-align: center;
  }

  .history {
    margin: 0 5px;
    // height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .bbsl-iconfont {
      font-size: 25px;
      color: #ff9a00;
    }

    span {
      display: inline-block;
      font-weight: 700;
      margin-top: 6px;
    }
  }

  .history:hover,
  .plan:hover {
    background-image: linear-gradient(
      rgba(152, 121, 54, 0.6) 0%,
      rgba(116, 83, 27, 0.6) 100%
    );
    border: 1px solid #ff9a00;
  }

  .plan {
    height: calc(30% - 12px);
    margin-top: 10px;
    display: flex;
    // flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .bbsl-iconfont {
      display: inline-block;
      font-size: 16px;
      color: #ff9a00;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      font-weight: 700;
      vertical-align: middle;
      margin-left: 4px;
    }
  }
}

.bottom-container {
  width: 100%;
  height: 24%;
  margin-top: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.safe-maintain {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.safe-maintain-item {
  width: 50%;
  height: 100%;
  background-image: url('../../assets/img/safe-maintain.png');
  background-size: 100% 100%;
  background-position: center center;
  text-align: center;
  color: #a7e7f0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // margin-left: 10px;
  margin: 10px;

  .num {
    font-size: 16px;
    font-family: 'electronicFont';

    span {
      font-size: 12px;
      margin-left: -10px;
    }
  }

  .name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
  }
}

.safe-maintain-item:hover {
  background-image: url('../../assets/img/safe-maintain-light.png');
  color: #ffdfc6;
}

.safe-maintain-item.ad {
  width: 80px;
  height: 46px;
}

.center-section1 {
  margin-right: 10px;
  width: 50%;
}

.center-section2 {
  width: 50%;
}

.center-m-section1 {
  margin-right: 10px;
  width: 40%;
}

.center-m-section2 {
  width: calc(60% - 10px);
}

.structure-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // background-image: url('../../assets/img/title_light.apng');
  margin: 0 auto;
  position: relative;

  .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: #b9b2a0;
  }

  .icon:hover {
    color: #ff9a00;
    cursor: pointer;
  }

  .title {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 28px;
    color: #fcf8ef;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(#c2a071, 0.6),
      transparent
    );
    text-shadow: 1px 1px 2px #000;
  }
}

.section1-inner {
  width: 94%;
  margin: 0 auto;
  height: calc(50% - 20px);
  overflow: hidden;

  .pop-modal {
    margin-top: 18px;
    justify-content: center;
    align-items: center;
  }

  .pop-modal .pop-modal-item {
    margin: 0 10px;
    background-image: linear-gradient(
      rgb(57, 65, 120) 0%,
      rgb(38, 43, 85) 100%
    );
    opacity: 1;
    // position: absolute;
    // top: 0px;
    // left: 0px;
    // width: 100%;
    // height: 100%;
    // border-radius: inherit;
  }
}

.section1-top {
  height: calc(64% - 50px);
}

.section1-bottom {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36%;
}

.alarm {
  display: flex;
  align-items: center;
  justify-content: center;
}

.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: 76%;
    height: 18px;
    line-height: 18px;
    margin: auto;
    margin-top: 10px;
    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: 10px;
    font-family: 'electronicFont';
  }
}

.alarm .alarm-item {
  cursor: pointer;
  position: relative;
  // top: -10%;
  width: 90%;

  .num {
    color: #ff9a00;
    width: 60%;
    margin: 0 auto;
    height: 70px;
    background: url('../../assets/img/alarm_icon.png');
    background-size: 100% 100%;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 60px;
    font-family: 'electronicFont';
  }

  .alarmIcon {
    font-size: 30px;
    color: red;
  }

  .alarmIcon.dark {
    color: #cbcaca;
  }
}

.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, 0.45),
      transparent
    );
    text-shadow: 1px 1px 2px rgb(58, 58, 58);
  }

  .num {
    color: #ff9a00;
    width: 60%;
    margin: 0 auto;
    height: 70px;
    background: url('../../assets/img/alarm_icon_active.png');
    background-size: 100% 100%;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 60px;
  }
}

.responsible {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .responsible-item {
    width: calc(50% - 10px);
    margin: 0 auto;
  }

  .title {
    display: inline-block;
    background: url('../../assets/img/nav_normal.png');
    background-size: 100% 100%;
    color: #badeff;
    font-weight: 700;
    padding: 6px 20px 8px;
    margin-bottom: 10px;
    margin-left: 10px;
    text-align: center;
  }

  .person-item {
    padding: 4px;

    span {
      padding: 0 4px;
      color: #badeff;
    }

    .icon-contact {
      color: #ff9a00;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
    }

    .icon-person {
      color: #188df0;
    }
  }
}

.equipment-item-content .equipment-item > div {
  padding: 8px 10px;
  border: 1px dashed rgba(24, 141, 240, 0.6);
  width: 78%;
}

.equipment-item-content .equipment-item:hover > div {
  transform: translateY(-6px);
  cursor: pointer;
  border: 1px dashed rgba(#ff9a00, 0.6);
}

.pdf-item {
  font-weight: 700;
  cursor: pointer;
}

.pdf-item:hover {
  color: #188df0;
}

/deep/ .el-input--mini .el-textarea__inner {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #ebeef5;
  color: #dddee0;
}

.station-search {
  position: absolute;
  right: 10px;
  top: 6px;
  width: 40%;

  /deep/ .el-select .el-input--suffix .el-input__inner,
  /deep/ .el-input--mini .el-input__inner {
    background-color: #1c2330;
    border: 1px solid #2a3447;
    color: #dddddd;
  }

  /deep/ .el-select-dropdown {
    background-color: #1c2330;
    border: solid 1px #2a3447;
    left: 0 !important;
  }

  /deep/ .el-select-dropdown__item {
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-select-dropdown__item span {
    color: #dddddd;
  }

  /deep/ .el-select-dropdown__item.selected span {
    color: #4db7ff !important;
  }

  /deep/ .el-select-dropdown__item.hover,
  /deep/ .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #33415a !important;
  }

  /deep/ .el-scrollbar__wrap {
    margin-right: -8px !important;
  }
}

.station-search.videoSelect {
  right: 0;
  top: 0;
}

.el-dropdown {
  color: white;
}

.el-dropdown-menu {
  overflow: scroll; // 添加滚动条
  max-height: 200px; // 最大高度
  overflow-x: hidden; // 隐藏x轴上的滚动条
}
</style>

<style lang="scss">
.yuan-outer {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #ebeef5;
  padding: 12px !important;
  color: #dddee0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
