<template>
    <!-- <div>
        <ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="true"> -->
    <el-container class="container">
        <el-header class="header">
            <div class="header-left">
                <!-- <CascaderCompany v-model="companyIds" :placeholder="'请选择公司名称'" style="width: 190px" /> -->
                <el-cascader
                    v-model="companyId"
                    :options="options"
                    :show-all-levels="false"
                    clearable
                    :props="{
                        expandTrigger: 'hover',
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    style="width: 190px; margin-right: 10px"
                    ref="cascader"
                    @change="handleCascaderChange"
                ></el-cascader>
                <!-- <el-select
          v-model="roadSegmentId"
          placeholder="请选择路段"
          clearable
          @change="handleRoadChange"
          style="margin-right: 10px; width: 130px"
        >
          <el-option v-for="item in roadData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select> -->
                <el-date-picker
                    v-model="issueDate"
                    type="month"
                    placeholder="选择月"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    @change="handleTimeChange"
                    style="width: 120px"
                >
                </el-date-picker>
            </div>
            <div class="header-center">
                <div class="logo" @click="goIndex"></div>
            </div>
            <div class="header-right">
                <div class="header-right-min">
                    <span class="health-sys" @click="handleToJKJC"> 健康工作台 </span>
                    <span>
                        <i></i>
                        <p>{{ nowDate && nowDate.split(' ')[1] }}</p>
                    </span>
                    <span @click="handleLogout">
                        <i></i>
                        <font>退出登录</font>
                    </span>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="left">
                <div class="sideBar">
                    <Title :text="'安全评估'" />
                    <div class="safeBox">
                        <div class="safebg">
                            <div class="scanning"></div>
                        </div>
                        <div class="safetyAssessment">基本完好</div>
                        <div class="safetyName green l1">左幅主梁G01</div>
                        <div class="safetyName yellow l2">左幅主梁G02</div>
                        <div class="safetyName green l3">左幅主梁G03</div>
                        <div class="safetyName green l4">左幅主梁G04</div>
                        <div class="safetyName green l5">左幅主梁G05</div>
                        <div class="safetyName green r1">右幅主梁G01</div>
                        <div class="safetyName orange r2">右幅主梁G02</div>
                        <div class="safetyName red r3">右幅主梁G03</div>
                        <div class="safetyName green r4">右幅主梁G04</div>
                        <div class="safetyName green r5">右幅主梁G05</div>
                    </div>
                </div>
                <div class="sideBar">
                    <Title :text="'梁端位移监测'" />
                    <div
                        class="empty"
                        v-if="!beamMonitorData.length && !loading.beamMonitorData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="beamMonitor"
                        v-loading="loading.beamMonitorData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="sideBar">
                    <Title :text="'关键截面应变'" />
                    <div
                        class="empty"
                        v-if="!sectionStrainData.length && !loading.sectionStrainData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="sectionStrain"
                        v-loading="loading.sectionStrainData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="sideBar">
                    <Title :text="'结构裂缝'" />
                    <div
                        class="empty"
                        v-if="
                            !structuralCracksData.length && !loading.structuralCracksData
                        "
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="structuralCracks"
                        v-loading="loading.structuralCracksData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="bridgeInfo">
                    <div class="bridgeInfo-title">
                        <div class="title">郁江河特大桥</div>
                        <div class="back" @click="$router.back()"></div>
                    </div>
                    <div class="bridgeInfo-contents">
                        <div
                            class="bridgeInfo-content"
                            v-for="(item, index) in bridgeInfoData"
                            :key="index"
                        >
                            <div class="contentName">{{ item.name }}</div>
                            <div class="contentNum">
                                {{ item.num + item.unit }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bridgeCar">
                    <Title
                        isRightYear
                        :text="'车流量统计'"
                        @changeTime="(val) => changeTime(val, 1)"
                    />
                    <div
                        class="empty"
                        v-if="!barChartBRData.length && !loading.barChartBRData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        v-loading="loading.barChartBRData"
                        :element-loading-background="loadingColor"
                        class="section-content"
                        id="bar-chart-br"
                    ></div>
                </div>
                <div class="bridgeMonitor">
                    <Title :text="'实时视频'" />
                    <div class="monitor-container"></div>
                </div>
                <div class="bridgeWarn">
                    <Title :text="'报警信息'" />
                    <div class="rate-warn">
                        <vue-seamless-scroll
                            class="rate-warn-scrollbox"
                            v-loading="loading.warnInfoData"
                            :data="warnInfoData"
                            :class-option="optionSingleHeightTime"
                        >
                            <div
                                class="rate-warn-content"
                                v-for="(item, index) in warnInfoData"
                                :key="index"
                            >
                                <div class="warn-time">
                                    <img
                                        src="./img/SingleBridge/icon-warn-point.png"
                                        class="warn-point warn"
                                    />
                                    {{ item.warnDate }}
                                </div>
                                <div class="warn-cause">
                                    {{ item.deviceName }}：
                                    <span
                                        style="color: #f35675"
                                        :title="item.warnMsg"
                                        class="warnMsg"
                                        >{{ item.warnMsg }}</span
                                    >
                                </div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="sideBar">
                    <Title :text="'环境温度湿度'" />
                    <div
                        class="empty"
                        v-if="!temperatureData.length && !loading.temperatureData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="temperature"
                        v-loading="loading.temperatureData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="sideBar">
                    <Title :text="'地震'" />
                    <div
                        class="empty"
                        v-if="!earthquakeData.length && !loading.earthquakeData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="earthquake"
                        v-loading="loading.earthquakeData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="sideBar">
                    <Title :text="'结构倾斜'" />
                    <div
                        class="empty"
                        v-if="!structureData.length && !loading.structureData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="structure"
                        v-loading="loading.structureData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="sideBar">
                    <Title :text="'其他数据监测'" />
                    <div
                        class="empty"
                        v-if="!otherDataData.length && !loading.otherDataData"
                    >
                        <el-empty
                            description="暂无数据"
                            :image-size="50"
                            :image="require('./img/SingleBridge/empty.png')"
                        ></el-empty>
                    </div>
                    <div
                        class="section-content"
                        id="otherData"
                        v-loading="loading.otherDataData"
                        :element-loading-background="loadingColor"
                    ></div>
                    <div class="select selectdata">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="select selectdata2">
                        <el-select
                            v-model="value"
                            placeholder="请选择"
                            class="on_border_select"
                            size="mini"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
        </el-main>

        <InfoWindowVue ref="infoDialog" />
        <DetailDialog ref="detailDialog" :listData="deviceDetailData" />
    </el-container>
    <!-- </ScaleScreen>
    </div> -->
</template>

<script>
import * as echarts from 'echarts'
import orgData from './orgData.json'
import utils from '@/utils.js'
import basicData from '@/api/basicData.js'
import InfoWindowVue from '@/views/bigScreen/components/InfoWindowDialog.vue' // 引入信息窗体
// import CascaderCompany from '@/components/selector/CascaderCompany.vue' // 引入公司下拉选择组件
import Title from './components/Title.vue'
import VueSeamlessScroll from 'vue-seamless-scroll'
import DetailDialog from './components/DetailDialog.vue'
import {mapMixin} from './mixin/mapMixin.js' // 混入配置地图相关数据与方法
import {mixin} from './mixin/mixin.js' // 混入页面请求数据方法以及配置
export default {
    name: 'bigScreen',
    mixins: [mapMixin, mixin],
    components: {
        Title,
        VueSeamlessScroll,
        InfoWindowVue,
        DetailDialog,
        // CascaderCompany,
    },
    data() {
        return {
            loadingColor: 'rgba(6, 46, 106, 0.01)',
            loading: {
                warnInfoData: false,
                beamMonitorData: false,
                sectionStrainData: false,
                structuralCracksData: false,
                temperatureData: false,
                earthquakeData: false,
                sectionStrainData: false,
                otherDataData: false,
                barChartBRData: false,
            },
            //   梁端位移监测
            beamMonitorOption: null,
            beamMonitorResource: null,
            beamMonitorData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 7,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 5,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 4,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 6,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 3,
                },
            ],
            //   关键截面应变
            sectionStrainOption: null,
            sectionStrainResource: null,
            sectionStrainData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 4,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 10,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 4,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 5,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 3,
                },
            ],
            //   结构裂缝
            structuralCracksOption: null,
            structuralCracksResource: null,
            structuralCracksData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 7,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 8,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 4,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 3,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 6,
                },
            ],
            //   环境温度湿度
            temperatureOption: null,
            temperatureResource: null,
            temperatureData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 2,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 4,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 7,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 3,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 8,
                },
            ],
            //   地震
            earthquakeOption: null,
            earthquakeResource: null,
            earthquakeData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 3,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 7,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 4,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 9,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 3,
                },
            ],
            //   结构倾斜
            structureOption: null,
            structureResource: null,
            structureData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 9,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 10,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 2,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 5,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 7,
                },
            ],
            //   其他数据监测
            otherDataOption: null,
            otherDataResource: null,
            otherDataData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 5,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 2,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 8,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 6,
                },
                {
                    name: '2023-02-01 10:00:12',
                    value: 8,
                },
            ],
            barChartBR: null,
            barChartBROption: null,
            barChartBRData: [
                {
                    name: '2023-02-01 10:00:12',
                    value: 70,
                },
                {
                    name: '2023-02-02 10:00:12',
                    value: 50,
                },
                {
                    name: '2023-02-03 10:00:12',
                    value: 42,
                },
                {
                    name: '2023-02-04 10:00:12',
                    value: 80,
                },
                {
                    name: '2023-02-05 10:00:12',
                    value: 38,
                },
                {
                    name: '2023-02-06 10:00:12',
                    value: 68,
                },
                {
                    name: '2023-02-07 10:00:12',
                    value: 52,
                },
                {
                    name: '2023-02-08 10:00:12',
                    value: 39,
                },
                {
                    name: '2023-02-09 10:00:12',
                    value: 69,
                },
                {
                    name: '2023-02-010 10:00:12',
                    value: 48,
                },
            ],
            activeBridgeId: '', // 当前选中桥梁
            nowDate: null,
            timer: null,
            year: new Date().getFullYear(),
            mouth: new Date().getMonth(),
            options: orgData.list,
            companyId: ['1419863231459102720'], // 组织id(做为查询参数)
            companyIds: [],
            roadSegmentId: '', // 路段id(做为查询参数)
            issueDate: '', // 时间范围(做为查询参数)
            roadData: [], // 路段列表数据
            active: '1', // 当前选中
            prvActive: '1', // 点击选中
            basicList: [
                {
                    id: 'first',
                    name: '桥梁类型',
                    children: [
                        {
                            id: 1,
                            name: '悬索桥',
                            type: 1,
                            num: 0,
                            src: require('./img/xsq-icon.png'),
                            activeSrc: require('./img/xsq-icon-active.png'),
                        },
                        {
                            id: 2,
                            name: '斜拉桥',
                            type: 2,
                            num: 0,
                            src: require('./img/xlq-icon.png'),
                            activeSrc: require('./img/xlq-icon-active.png'),
                        },
                        {
                            id: 3,
                            name: '梁桥',
                            type: 3,
                            num: 0,
                            src: require('./img/lq-icon.png'),
                            activeSrc: require('./img/lq-icon-active.png'),
                        },
                        {
                            id: 4,
                            name: '供桥',
                            type: 4,
                            num: 0,
                            src: require('./img/gq-icon.png'),
                            activeSrc: require('./img/gq-icon-active.png'),
                        },
                    ],
                },
                {
                    id: 'seconed',
                    name: '监测设备',
                    children: [
                        {
                            id: 5,
                            name: '环境',
                            type: 1,
                            num: 0,
                            src: require('./img/hj-icon.png'),
                            activeSrc: require('./img/hj-icon-active.png'),
                        },
                        {
                            id: 6,
                            name: '作用',
                            type: 2,
                            num: 0,
                            src: require('./img/zy-icon.png'),
                            activeSrc: require('./img/zy-icon-active.png'),
                        },
                        {
                            id: 7,
                            name: '结构响应',
                            type: 3,
                            num: 0,
                            src: require('./img/jgxy-icon.png'),
                            activeSrc: require('./img/jgxy-icon-active.png'),
                        },
                        {
                            id: 8,
                            name: '结构变化',
                            type: 4,
                            num: 0,
                            src: require('./img/jgbh-icon.png'),
                            activeSrc: require('./img/jgbh-icon-active.png'),
                        },
                    ],
                },
            ],
            deviceDetailData: [], //设备详情列表数据
            bridgeInfoData: [
                {
                    name: '雪厚度',
                    num: 0,
                    unit: 'mm',
                },
                {
                    name: '摩擦系数',
                    num: 0.82,
                    unit: 'mm',
                },
                {
                    name: '路面状况',
                    num: '潮',
                    unit: '',
                },
                {
                    name: '水膜高度',
                    num: 0,
                    unit: 'mm',
                },
                {
                    name: '路面温度',
                    num: 6.2,
                    unit: '℃',
                },
                {
                    name: '冰层厚度',
                    num: '潮',
                    unit: '',
                },
                {
                    name: '雪深',
                    num: 0,
                    unit: 'mm',
                },
            ],
            warnInfoData: [
                {
                    warnDate: '2023-02-01 10:00:12',
                    deviceName: '监控设备故障',
                    warnMsg: '数据传输异常',
                },
                {
                    warnDate: '2023-02-01 10:00:12',
                    deviceName: '监控设备故障',
                    warnMsg: '数据传输异常',
                },
                {
                    warnDate: '2023-02-01 10:00:12',
                    deviceName: '监控设备故障',
                    warnMsg: '数据传输异常',
                },
                {
                    warnDate: '2023-02-01 10:00:12',
                    deviceName: '监控设备故障',
                    warnMsg: '数据传输异常',
                },
                {
                    warnDate: '2023-02-01 10:00:12',
                    deviceName: '监控设备故障',
                    warnMsg: '数据传输异常',
                },
            ],
        }
    },
    created() {
        this.getRoadData()
        let {year, mouth} = this
        mouth = mouth + 1
        this.issueDate = `${year}-${mouth > 10 ? mouth : '0' + mouth}`
    },
    mounted() {
        let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(function () {
            _this.nowDate = utils.formatDate(new Date()) //修改数据date
        }, 1000)
        this.initData()
    },
    methods: {
        initData() {
            this.drawbeamMonitorResource()
            this.drawsectionStrainResource()
            this.drawstructuralCracksResource()
            this.drawtemperatureResource()
            this.drawearthquakeResource()
            this.drawstructureResource()
            this.drawotherDataResource()
            this.drawBarChartBR()
        },
        // 梁端位移监测
        drawbeamMonitorResource() {
            // chart 已存在则为更新数据
            if (this.beamMonitorResource) {
                this.beamMonitorOption.xAxis.data = this.beamMonitorData.map(function (
                    item
                ) {
                    return item.name
                })
                this.beamMonitorOption.series[0].data = this.beamMonitorData.map(
                    function (item) {
                        return item.value
                    }
                )
                this.beamMonitorResource.setOption(this.beamMonitorOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.beamMonitorResource = echarts.init(
                    document.getElementById('beamMonitor')
                )
                this.beamMonitorOption = {
                    color: ['#66B2FF'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '梁端位移：' + '{c}mm',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.beamMonitorData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（mm）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(102,178,255,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(102,178,255,0)',
                                    },
                                ]),
                            },

                            data: this.beamMonitorData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.beamMonitorOption &&
                    this.beamMonitorResource.setOption(this.beamMonitorOption)
                window.addEventListener('resize', () => this.beamMonitorResource.resize())
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.beamMonitorData.shift()
                //   this.beamMonitorData.push(obj)

                //   this.beamMonitorOption.series[0].data = this.beamMonitorData
                //   this.beamMonitorResource.setOption(this.beamMonitorOption)
                // }, 1000)
            }
        },
        // 关键截面应变
        drawsectionStrainResource() {
            // chart 已存在则为更新数据
            if (this.sectionStrainResource) {
                this.sectionStrainOption.xAxis.data = this.sectionStrainData.map(
                    function (item) {
                        return item.name
                    }
                )
                this.sectionStrainOption.series[0].data = this.sectionStrainData.map(
                    function (item) {
                        return item.value
                    }
                )
                this.sectionStrainResource.setOption(this.sectionStrainOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.sectionStrainResource = echarts.init(
                    document.getElementById('sectionStrain')
                )
                this.sectionStrainOption = {
                    color: ['#55EDB0'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '关键截面应变：' + '{c}Hz',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.sectionStrainData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（Hz）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(85,237,176,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(85,237,176,0)',
                                    },
                                ]),
                            },

                            data: this.sectionStrainData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.sectionStrainOption &&
                    this.sectionStrainResource.setOption(this.sectionStrainOption)
                window.addEventListener('resize', () =>
                    this.sectionStrainResource.resize()
                )
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.sectionStrainData.shift()
                //   this.sectionStrainData.push(obj)

                //   this.sectionStrainOption.series[0].data = this.sectionStrainData
                //   this.sectionStrainResource.setOption(this.sectionStrainOption)
                // }, 1000)
            }
        },
        // 结构裂缝
        drawstructuralCracksResource() {
            // chart 已存在则为更新数据
            if (this.structuralCracksResource) {
                this.structuralCracksOption.xAxis.data = this.structuralCracksData.map(
                    function (item) {
                        return item.name
                    }
                )
                this.structuralCracksOption.series[0].data =
                    this.structuralCracksData.map(function (item) {
                        return item.value
                    })
                this.structuralCracksResource.setOption(this.structuralCracksOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.structuralCracksResource = echarts.init(
                    document.getElementById('structuralCracks')
                )
                this.structuralCracksOption = {
                    color: ['#66B2FF'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '结构裂缝：' + '{c}mm',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.structuralCracksData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（mm）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(102,178,255,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(102,178,255,0)',
                                    },
                                ]),
                            },

                            data: this.structuralCracksData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.structuralCracksOption &&
                    this.structuralCracksResource.setOption(this.structuralCracksOption)
                window.addEventListener('resize', () =>
                    this.structuralCracksResource.resize()
                )
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.structuralCracksData.shift()
                //   this.structuralCracksData.push(obj)

                //   this.structuralCracksOption.series[0].data = this.structuralCracksData
                //   this.structuralCracksResource.setOption(this.structuralCracksOption)
                // }, 1000)
            }
        },
        // 环境温度湿度
        drawtemperatureResource() {
            // chart 已存在则为更新数据
            if (this.temperatureResource) {
                this.temperatureOption.xAxis.data = this.temperatureData.map(function (
                    item
                ) {
                    return item.name
                })
                this.temperatureOption.series[0].data = this.temperatureData.map(
                    function (item) {
                        return item.value
                    }
                )
                this.temperatureResource.setOption(this.temperatureOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.temperatureResource = echarts.init(
                    document.getElementById('temperature')
                )
                this.temperatureOption = {
                    color: ['#FFDA81'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '环境温度湿度：' + '{c}℃',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.temperatureData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（℃）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(255,218,129,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255,218,129,0)',
                                    },
                                ]),
                            },

                            data: this.temperatureData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.temperatureOption &&
                    this.temperatureResource.setOption(this.temperatureOption)
                window.addEventListener('resize', () => this.temperatureResource.resize())
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.temperatureData.shift()
                //   this.temperatureData.push(obj)

                //   this.temperatureOption.series[0].data = this.temperatureData
                //   this.temperatureResource.setOption(this.temperatureOption)
                // }, 1000)
            }
        },
        // 地震
        drawearthquakeResource() {
            // chart 已存在则为更新数据
            if (this.earthquakeResource) {
                this.earthquakeOption.xAxis.data = this.earthquakeData.map(function (
                    item
                ) {
                    return item.name
                })
                this.earthquakeOption.series[0].data = this.earthquakeData.map(function (
                    item
                ) {
                    return item.value
                })
                this.earthquakeResource.setOption(this.earthquakeOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.earthquakeResource = echarts.init(
                    document.getElementById('earthquake')
                )
                this.earthquakeOption = {
                    color: ['#66B2FF'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '地震：' + '{c}cm/ss',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.earthquakeData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（cm/ss）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(102,178,255,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(102,178,255,0)',
                                    },
                                ]),
                            },

                            data: this.earthquakeData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.earthquakeOption &&
                    this.earthquakeResource.setOption(this.earthquakeOption)
                window.addEventListener('resize', () => this.earthquakeResource.resize())
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.earthquakeData.shift()
                //   this.earthquakeData.push(obj)

                //   this.earthquakeOption.series[0].data = this.earthquakeData
                //   this.earthquakeResource.setOption(this.earthquakeOption)
                // }, 1000)
            }
        },
        // 结构倾斜
        drawstructureResource() {
            // chart 已存在则为更新数据
            if (this.structureResource) {
                this.structureOption.xAxis.data = this.structureData.map(function (item) {
                    return item.name
                })
                this.structureOption.series[0].data = this.structureData.map(function (
                    item
                ) {
                    return item.value
                })
                this.structureResource.setOption(this.structureOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.structureResource = echarts.init(
                    document.getElementById('structure')
                )
                this.structureOption = {
                    color: ['#55EDB0'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '结构倾斜：' + '{c}mm',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.structureData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（mm）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(85,237,176,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(85,237,176,0)',
                                    },
                                ]),
                            },

                            data: this.structureData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.structureOption &&
                    this.structureResource.setOption(this.structureOption)
                window.addEventListener('resize', () => this.structureResource.resize())
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.structureData.shift()
                //   this.structureData.push(obj)

                //   this.structureOption.series[0].data = this.structureData
                //   this.structureResource.setOption(this.structureOption)
                // }, 1000)
            }
        },
        // 其他数据监测
        drawotherDataResource() {
            // chart 已存在则为更新数据
            if (this.otherDataResource) {
                this.otherDataOption.xAxis.data = this.otherDataData.map(function (item) {
                    return item.name
                })
                this.otherDataOption.series[0].data = this.otherDataData.map(function (
                    item
                ) {
                    return item.value
                })
                this.otherDataResource.setOption(this.otherDataOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.otherDataResource = echarts.init(
                    document.getElementById('otherData')
                )
                this.otherDataOption = {
                    color: ['#66B2FF'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '其他数据监测：' + '{c}mm',
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '6%',
                            bottom: '20%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(11, 16)
                            },
                        },
                        data: this.otherDataData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（mm）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showBackground: true,
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(102,178,255,0.3)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(102,178,255,0)',
                                    },
                                ]),
                            },

                            data: this.otherDataData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.otherDataOption &&
                    this.otherDataResource.setOption(this.otherDataOption)
                window.addEventListener('resize', () => this.otherDataResource.resize())
                // var i = 1
                // setInterval(() => {
                //   i = i + 1
                //   let obj = {}
                //   obj = {
                //     name: i + '月',
                //     value: [i + '月', 45 + i],
                //   }
                //   this.otherDataData.shift()
                //   this.otherDataData.push(obj)

                //   this.otherDataOption.series[0].data = this.otherDataData
                //   this.otherDataResource.setOption(this.otherDataOption)
                // }, 1000)
            }
        },
        drawBarChartBR() {
            // chart 已存在则为更新数据
            if (this.barChartBR) {
                this.barChartBROption.xAxis.data = this.barChartBRData.map(function (
                    item
                ) {
                    return item.name
                })
                this.barChartBROption.series[0].data = this.barChartBRData.map(function (
                    item
                ) {
                    return item.value
                })
                this.barChartBR.setOption(this.barChartBROption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.barChartBR = echarts.init(document.getElementById('bar-chart-br'))
                this.barChartBROption = {
                    color: ['#66B2FF'],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13, 79, 145, 0.9)',
                        borderColor: '#3399FF',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: '{b}<br/>' + '车流量统计：' + '{c}辆',
                    },
                    grid: [
                        {
                            top: '15%',
                            left: '6%',
                            right: '4%',
                            bottom: '23%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 5,
                            formatter: (val) => {
                                return val.slice(5, 10)
                            },
                        },
                        data: this.barChartBRData.map(function (item) {
                            return item.name
                        }),
                    },
                    yAxis: {
                        name: '单位（辆）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 8],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            formatter: (val) => {
                                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: 12,
                            itemStyle: {
                                borderRadius: [5, 5, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: '#FFDA81'},
                                    {offset: 0.6, color: '#6e6549'},
                                    {
                                        offset: 1,
                                        color: 'rgba(110, 101, 73, 0.2)',
                                    },
                                ]),
                            },
                            data: this.barChartBRData.map(function (item) {
                                return item.value
                            }),
                        },
                    ],
                }

                this.barChartBROption && this.barChartBR.setOption(this.barChartBROption)
                window.addEventListener('resize', () => this.barChartBR.resize())
            }
        },
        handleToJKJC() {
            let tokenKey = sessionStorage.getItem('jkjcKey')
            window.open(
                `https://cqtz.luancloud.cn:31081/ims/CQTZ/Tjyl/index?tokenKey=${tokenKey}`
            )
        },
        isActive(id) {
            return this.active == id || this.prvActive == id
        },
        handleClick({id, type}) {
            this.active = id
            this.activeType = type
            this.prvActive = id
            if (!type) return
            let query = this.getSearchParams()
            let querys = [
                {
                    group: 'main',
                    operation: 'EQUAL',
                    property: 'TYPE_',
                    relation: 'AND',
                    value: type,
                },
            ]
            query.length !== 0 && querys.push(query)
            this.params.querys = querys
            // 获取设备基础信息统计
            this.getDeviceTypeCount(this.params, id)

            // 重置数据
            if (id && id <= 4) {
                this.reloadTotalData()
            }
        },
        reloadTotalData() {
            this.cleatMarker()
            this.activeBridgeId = ''
            let {roadSegmentId, companyIds} = this
            let params = {
                pageBean: {
                    pageSize: -1,
                },
                querys: [],
            }
            if (roadSegmentId) {
                params.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    property: 'roadSegmentId',
                    relation: 'AND',
                    value: roadSegmentId,
                })
            }
            if (!roadSegmentId && companyIds && companyIds.length !== 0) {
                params.querys.push({
                    group: 'main',
                    operation: 'IN',
                    property: 'companyId',
                    relation: 'AND',
                    value: companyIds,
                })
            }
            this.getDeviceCountTotal(params) // 获取设备信息统计
            this.getDeviceCount(params) // 左侧基础信息统计 - 监测设备类型统计
            this.handleTimeChange()
        },
        hanldeOver({id}) {
            this.active = id
        },
        handleLeave() {
            this.active = this.prvActive
        },
        // 去首页
        goIndex() {
            // this.$router.go(-1)
            window.open('http://183.64.175.153:20003/#/curingManageyh')
        },
        //退出系统
        handleLogout() {
            this.$store.dispatch('menu/clearMenus')
            this.$store.dispatch('user/clearUser')
            this.$store.dispatch('menu/setCopyMenus', []) //菜单
            let loginRouthPath =
                localStorage.getItem(
                    this.$store.state.login.currentUser.account + 'loginRoutePath'
                ) || '/login'
            this.$store.dispatch('login/logoutAndCleanUp').then(() => {
                switch (window.ssoConfig.mode) {
                    case 'cas':
                    case 'oauth':
                        window.sessionStorage.removeItem('currentUser')
                        window.location.href =
                            window.ssoConfig.logout +
                            '?service=' +
                            window.location.href.split('?')[0]
                        break
                    default:
                        this.$router.push({
                            path: loginRouthPath,
                        })
                        break
                }
            })
        },
        // 获取路段列表数据
        getRoadData() {
            basicData.getRoadManagement().then((res) => {
                res.rows.forEach((item) => {
                    this.roadData.push({
                        name: item.name,
                        id: item.id,
                    })
                })
            })
        },
        // 时间回调
        handleTimeChange() {
            let {issueDate, roadSegmentId, companyIds, year, mouth} = this
            let params = {
                pageBean: {
                    pageSize: -1,
                },
                querys: [],
            }
            if (issueDate) {
                issueDate = issueDate + '-01'
                mouth = issueDate.split('-')[1]
                let lastDate = this.getLastDay(year, mouth)
                // issueDate: 2023-01-01, 截取最后两位
                let len = issueDate.length
                let endTime = issueDate.replaceAt(len - 2, len - 1, lastDate) // 获取当月最后一天
                params.querys.push(
                    {
                        group: 'main',
                        operation: 'GREAT',
                        property: 'modelDateGreat',
                        relation: 'AND',
                        value: issueDate,
                    },
                    {
                        group: 'main',
                        operation: 'LESS',
                        property: 'modelDateLess',
                        relation: 'AND',
                        value: endTime,
                    }
                )
            }
            if (roadSegmentId) {
                params.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    property: 'roadSegmentId',
                    relation: 'AND',
                    value: roadSegmentId,
                })
            }

            if (!roadSegmentId && companyIds && companyIds.length !== 0) {
                params.querys.push({
                    group: 'main',
                    operation: 'IN',
                    property: 'companyId',
                    relation: 'AND',
                    value: companyIds,
                })
            }

            if (this.activeBridgeId) {
                params.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'TP_BRIDGE_ID_',
                    relation: 'AND',
                    value: this.activeBridgeId,
                })
            }

            this.getBridgeAbnormalCount(params) // 获取桥梁健康统计
            this.getWarningCountTotal(params) // 获取预警事件统计
            this.getNotDisposedWarn(params) // 获取未处置预警统计
        },
        changeTime(val, type) {
            let params = {
                pageBean: {
                    pageSize: -1,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'GREAT',
                        property: 'modelDateGreat',
                        relation: 'AND',
                        value: val[0],
                    },
                    {
                        group: 'main',
                        operation: 'LESS',
                        property: 'modelDateLess',
                        relation: 'AND',
                        value: val[1],
                    },
                ],
            }
            if (this.activeBridgeId) {
                params.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'TP_BRIDGE_ID_',
                    relation: 'AND',
                    value: this.activeBridgeId,
                })
            }

            if (type == 1) {
                this.getBridgeAbnormalCount(params) // 获取桥梁健康统计
            } else if (type == 2) {
                this.getWarningCountTotal(params) // 获取预警事件统计
            } else {
                this.getNotDisposedWarn(params) // 获取未处置预警统计
            }
        },
        handleCascaderChange(val) {
            if (val && val.length == 0) {
                this.companyId = ['1419863231459102720']
                this.companyIds = [
                    '1419863231459102720',
                    '1497492989159804928',
                    '1430710034819584000',
                    '1497492555523297280',
                    '1497492614272913408',
                    '1497492713090715648',
                    '1497492783722795008',
                    '1497492820871745536',
                    '1497492898147602432',
                    '1430734631036129280',
                    '1497493076619431936',
                    '1497493109293060096',
                    '1497493158022483968',
                    '1494140182780317696',
                    '1497493254181097472',
                    '1497493287089606656',
                    '1497493237982695424',
                    '1419863231459102720',
                ]
            }
            if (val && val.length === 1 && val[0] === '1419863231459102720') {
                this.roadSegmentId = ''
            }
            let selectedList = this.$refs.cascader.getCheckedNodes()
            this.companyIds = []
            this.deepClone(selectedList)
            this.companyIds = [...val, ...this.companyIds]
            selectedList.forEach((i) => {
                if (!i.hasChildren && i.data.roadKey) {
                    this.roadSegmentId = i.data.id
                }
            })

            // 请求数据
            this.leftPromise()
        },
        deepClone(source) {
            if (source && source.length == 0) return
            source.forEach((i) => {
                if (i.hasChildren) {
                    this.deepClone(i.children)
                }
                // 筛选出不是路段信息的数据id
                if (!i.data.roadKey) {
                    this.companyIds.push(i.data.id)
                }
            })
        },
        // 左边数据请求
        leftPromise() {
            this.active = 1
            this.prvActive = 1
            let {roadSegmentId, companyIds} = this
            let params = {
                pageBean: {
                    pageSize: -1,
                },
                querys: [],
            }
            if (roadSegmentId) {
                params.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    property: 'roadSegmentId',
                    relation: 'AND',
                    value: roadSegmentId,
                })
            }
            if (!roadSegmentId && companyIds && companyIds.length !== 0) {
                params.querys.push({
                    group: 'main',
                    operation: 'IN',
                    property: 'companyId',
                    relation: 'AND',
                    value: companyIds,
                })
            }

            this.getBridgeData(params) // 获取基础信息统计 - 桥梁类型统计
            this.getDeviceCount(params) // 获取基础信息统计 - 监测设备类型统计
            this.getDeviceCountTotal(params) // 获取设备信息统计
            this.getDeviceTypeCount(params) // 获取设备基础信息统计

            // 请求右边数据
            this.handleTimeChange()
        },
        // 滚动列表点击回调事件,并在地图上标记点的位置
        handleScollItem(item) {
            // item.tpBridgeId = item.bridgeId
            // let img = [
            //     require('./img/blue_icon.png'),
            //     require('./img/yellow_icon.png'),
            //     require('./img/red_icon_point.png'),
            // ]
            // // 创建div作为标记点
            // let el = document.createElement('div')
            // el.id = 'marker'
            // el.style['background-size'] = 'cover'
            // el.style.width = '30px'
            // el.style.height = '30px'
            // el.style['background-image'] = `url(${img[item.state - 1]})`
            // // 标记点位
            // let marker = new minemap.Marker(el, {offset: [-15, -15]})
            //     .setLngLat([item.lng, item.lat])
            //     .addTo(this.map)

            // el.addEventListener('click', () => {
            //     this.$refs.infoDialog.open(item)
            // })

            //更新页面显示数据 以当前桥梁为准
            if (item.bridgeId) {
                this.activeBridgeId = item.bridgeId
                //panTo方法，以动画的形式将地图的中心位置平移到参数中的目标坐标点，参数为地图坐标点
                this.map.panTo([item.lng, item.lat])
                let {roadSegmentId, companyIds} = this
                let params = {
                    pageBean: {
                        pageSize: -1,
                    },
                    querys: [],
                }
                if (roadSegmentId) {
                    params.querys.push({
                        group: 'main',
                        operation: 'EQUAL',
                        property: 'roadSegmentId',
                        relation: 'AND',
                        value: roadSegmentId,
                    })
                }
                if (!roadSegmentId && companyIds && companyIds.length !== 0) {
                    params.querys.push({
                        group: 'main',
                        operation: 'IN',
                        property: 'companyId',
                        relation: 'AND',
                        value: companyIds,
                    })
                }
                params.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'TP_BRIDGE_ID_',
                    relation: 'AND',
                    value: item.bridgeId,
                })

                this.getDeviceCountTotal(params) //设备信息统计
                this.getDeviceCount(params) // 左侧基础信息统计 - 监测设备类型统计
                this.handleTimeChange(params) //右侧数据
            } else {
                this.getDeviceTypeDetail(item)
            }
        },
    },
    computed: {
        optionSingleHeightTime() {
            return {
                step: 0.3,
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                openWatch: true, // 开启数据实时监控刷新dom
            }
        },
    },
    beforeDestroy: function () {
        if (this.timer) {
            clearInterval(this.timer) //在Vue实例销毁前，清除定时器
        }
    },
}
</script>

<style lang="scss" scoped>
@import './css/common.scss';
.scale-wrap {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}
.container {
  width: 100%;
  height: 100%;
  background: url('./img/bg_.png') no-repeat 100% 100%;
  //   background-color: rgba($color: #0f2a3f, $alpha: 1);
}
.el-main {
  background-color: transparent;
  padding: 0 30px;
}
.el-date-editor.el-input {
  margin-right: 0;
  margin-bottom: 0;
}
.sideBar {
  width: 100%;
  height: 25% !important;
  position: relative;
}
.safeBox{
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    .safebg{
        // width: 50%;
        height: 100%;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        background: url('./img/SingleBridge/safe-bg.png') no-repeat 100% 100%;
        background-size:100% 100%;
        aspect-ratio: 1/1;

    }
    .safetyAssessment{
        width: 55px;
        height: 55px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        position: absolute;
        font-weight: 400;
        font-size: 12px;
        color: #1AFFD9;
        line-height: 55px;
        text-align: center;
        background: rgba(0,77,64,0.4);
        border: 1px dashed rgba(26,255,217,0.37);
        border-radius: 50%;

    }
    .safetyName{
        position: absolute;
        width: 87px;
        height: 24px;
        border-radius: 25px 25px 25px 25px;
        font-weight: 400;
        font-size: 12px;
        line-height: 24px;
        text-align: center;


    }
    .green{
            background: #0A272C;
            color: #1AFFD9;
        }
        .orange{
            background: #2C150A;
            color: #FF884D;
        }
        .yellow{
            background: #2C260A;
            color: #FFEA80;
        }
        .red{
            background: #2C0A11;
            color: #F35675;
        }
        .l1{
            top: 4%;
            left: 42px;
        }
        .l2{
            top: 16%;
            left: 129px;
        }
        .l3{
            top: 4%;
            left: 280px;
        }
        .l4{
            top: 34%;
            left: 83px;
        }
        .l5{
            top: 55%;
            left: 19px;
        }
        .r1{
            top: 35%;
            left: 241px;
        }
        .r2{
            top: 58%;
            left: 151px;
        }
        .r3{
            top: 65%;
            left: 280px;
        }
        .r4{
            top: 82%;
            left: 83px;
        }
        .r5{
            top: 84%;
            left: 220px;
        }
 
}

.scanning { 
            position:absolute;
            top: 50%;
            left: 50%;
            margin-left: -40%;
            margin-top: -40%;
            // width:160px;
            height:80%;
            aspect-ratio: 1/1;
            background: url('./img/SingleBridge/safe-scanning.png') no-repeat 100% 100%;
            background-size:100% 100%;
            // background: linear-gradient(45deg, #ffffff 0%, transparent 50%);
            animation: investigation  4s infinite linear;
            // transform-origin: left top;
            
        }
 @keyframes investigation  {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
.center{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    box-sizing: border-box;
    padding: 0px 20px 26px 26px;
    .bridgeInfo{
        width: 100%;
        height: 33%;
        display: flex;
        flex-wrap: wrap;
    }
    .bridgeCar{
        width: 100%;
        height: 30%;
        background: linear-gradient( 270deg, rgba(10,17,26,0.5) 0%, rgba(12,22,51,0.3) 100%);
    }
    .bridgeMonitor{
        width: 49%;
        height: 30%;
        padding:0px 16px;
        box-sizing:border-box;
        background: linear-gradient( 270deg, rgba(10,17,26,0.5) 0%, rgba(12,22,51,0.3) 100%);
    }
    .bridgeWarn{
        width: 49%;
        height: 30%;
        padding:0px 16px;
        box-sizing:border-box;
        background: linear-gradient( 270deg, rgba(10,17,26,0.5) 0%, rgba(12,22,51,0.3) 100%);
        margin-left: 2%;
    }
}
.bridgeInfo-title{
    width: 100%;
    height: 100px;
    background: url('./img/SingleBridge/bridgeInfo-title.png') no-repeat 100% 100%;
    background-size:100% 100%;
   
    position: relative;
    .title{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    font-weight: 700;
    font-size: 28px;
    color: #FFFFFF;
    }
    .back{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
		margin-left: 24px;
		width: 24px;
		height: 20px;
        background: url('./img/SingleBridge/back-icon.png') no-repeat 100% 100%;
      background-size:100% 100%;
      cursor: pointer;
	}

}
.bridgeInfo-contents{
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
    .bridgeInfo-content{
    width: 23%;
    height:48%;
    background: url('./img/SingleBridge/bridgeInfo-bg.png') no-repeat 100% 100%;
    background-size:100% 100%;
    margin-right: 2%;
    .contentName{
        width: 100%;
        height: 38%;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 18px;
        padding: 8px 27px;
    }
    .contentNum{
    width: 100%;
    height: 62%;
    padding: 5px 27px;
    font-weight: 700;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 40px;
    text-shadow: 0px 0px 6px #FFFFFF;
    }
}
}
.monitor-container{
    width: 100%;
    height: calc(100% - 16px);
    padding-top: 16px;
    background: url('./img/SingleBridge/monitor-img.png') no-repeat 100% 100%;
    background-size:100% 100%;
}
.rate-warn {
  width: 100%;
  height: 100%;

}
.rate-warn-scrollbox {
  width: 100%;
  height: 88%;
  overflow: hidden;
  margin-top: 1%;
}
.rate-warn-content {
  width: 100%;
  height: 30%;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  .warn-time {
    width: 100%;
    height: calc(50% - 8px);
    padding-top: 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    color: #ffffff;
  }
  .warn-cause {
    width: 100%;
    height: 48%;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 1%;
    span {
      font-size: 14px;
      font-weight: 400;
    }
  }

//   .warnMsg {
//     display: inline-block;
//     width: 110px;
//     white-space: nowrap;
//     overflow: hidden;
//     text-overflow: ellipsis;
//   }
}
.warn-point {
  width: 15px;
  height: 100%;
  margin-right: 5px;
}
.warn {
  animation: warn 1.5s ease-out infinite alternate;
}
@keyframes warn {
  from {
    transform: scale(1.3);
  }
  to {
    transform: scale(0.8);
  }
}
.empty{
 width: 100%;
 height: 100%;
  display: flex;  
   justify-content: center;       /*水平排列居中*/
   align-items: center;
}
.section-content{
    width: 100%;
 height: 100%;
 overflow: hidden;
}
.select{
width: 200px;
height: 18px;
position: absolute;
top: 0px;
right: -20px;
}
.selectdata{
    width: 100px !important;
    right:12px !important;
}
.selectdata2{
    top: 30px !important;
}
.select{
    /deep/.el-select{
    .el-input__inner{
             width: 100%;
             height: 22px;
            font-size: 12px !important;
            font-weight: 400;
            outline: none !important;
            border: none !important;
            border-radius: 0% !important;
            background-color: transparent !important;
            border-bottom: 1px solid #1A4A72 !important;
  }
  .el-input__inner:hover{
    border-bottom: 1px solid #0358A3 !important;

  }}
}

</style>
<style lang="scss">
.el-popper {
  background-color: rgba($color: #112b44, $alpha: 0.9) !important;
}
.el-cascader-menu {
  //   border: 1px solid #fff;
  &:nth-child(n + 1) {
    border-right: 1px solid #fff;
  }
  &:nth-child(n + 2) {
    border-left: none;
  }
  &:last-child {
    border-right: none;
  }
}
// .el-scrollbar {
//   background-color: transparent;
// }
.el-cascader-panel {
  border-radius: 5px;
  border: 1px solid #fff;
}
.el-select-dropdown .el-scrollbar {
  border: 1px solid #0283fc;
  //   padding-left: 10px;
  border-radius: 5px;
}
.in-active-path span {
  color: #0283fc;
}
.el-month-table td .cell {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.el-month-table td.current:not(.disabled) .cell {
  color: #d7ef05;
}
.el-date-picker__header--bordered {
  border-bottom-color: #0283da;
}

.el-cascader-node__label {
  font-size: 16px;
}
.el-radio.is-checked + .el-cascader-node__label {
  color: #409eff;
}
.el-scrollbar__view .el-cascader-node > .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -8px;
}
.el-picker-panel__body {
  border-radius: 5px;
  background-color: rgba($color: #2c6d89, $alpha: 0.8);
}
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover,
.el-select-dropdown__item:hover {
  background: #fff !important;
}
.el-select-dropdown__item {
  padding-left: 10px;
}
.el-select-dropdown__item:hover span {
  color: #0283fc;
}
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-cascader-node__label,
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-icon-arrow-right {
  color: #0283fc !important;
  font-weight: bold;
}
.el-cascader-node.is-selectable.in-active-path {
  color: #0283fc !important;
}



</style>
