<template>
    <el-container class="container">
        <el-header class="header">
            <div class="header-left">
                <!-- <CascaderCompany
                    v-model="companyId"
                    :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: 'chirldren',
                    }"
                    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>
                    <div class="device-statistics-title">
                        <Title :text="'桥梁统计'" />
                        <div>
                            <span style="margin-right: 8px">桥梁总数:</span>
                            <span>{{ bridgeTotal }}</span>
                        </div>
                    </div>
                    <div v-for="i in basicList" :key="i.id">
                        <div class="list">
                            <div
                                class="list-item"
                                v-for="item in i.children"
                                :key="item.id"
                                @mouseover="hanldeOver(item)"
                                @mouseleave="handleLeave"
                                @click="handleClick(item)"
                            >
                                <div
                                    class="img"
                                    :class="isActive(item.id) ? 'img-active' : ''"
                                >
                                    <img
                                        :src="
                                            isActive(item.id) ? item.activeSrc : item.src
                                        "
                                    />
                                </div>
                                <div class="list-item-num">
                                    <p :class="{active: isActive(item.id)}">
                                        {{ item.num || 0 }}
                                    </p>
                                    <span :class="{active: isActive(item.id)}">
                                        {{ item.name }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sideBar" style="height: 30%">
                    <Title :text="'桥梁健康状态'" />
                    <div
                        class="table"
                        v-loading="deviceBasicInfo.loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.5)"
                    >
                        <VueSeamlessScroll
                            :titleList="deviceBasicInfo.titleList"
                            :data="deviceBasicInfo.listData"
                            @handleScollItem="handleScollItem"
                        />
                    </div>
                </div>
                <div class="pieBlock">
                    <div class="device-statistics-title" style="margin-bottom: 10px">
                        <Title :text="'设备统计'" />
                        <div>
                            <span style="margin-right: 8px">设备总数量:</span>
                            <span>{{ deviceInfo.total }}</span>
                            <!-- <p>{{ deviceInfo.total }}个</p> -->
                        </div>
                    </div>

                    <!-- <div class="left-center-title">
                            <span>设备总数量</span>
                            <p>{{ deviceInfo.total }}个</p>
                        </div> -->
                    <div v-for="i in deviceList" :key="i.id">
                        <div class="list">
                            <div
                                class="list-item"
                                v-for="item in i.children"
                                :key="item.id"
                                @mouseover="hanldeOver(item)"
                                @mouseleave="handleLeave"
                                @click="handleClick(item)"
                            >
                                <div
                                    class="img"
                                    :class="isActive(item.id) ? 'img-active' : ''"
                                >
                                    <img
                                        :src="
                                            isActive(item.id) ? item.activeSrc : item.src
                                        "
                                    />
                                </div>
                                <div
                                    class="list-item-num"
                                    :class="{active: isActive(item.id)}"
                                >
                                    <p>
                                        {{ item.num || 0 }}
                                    </p>
                                    <span>
                                        {{ item.name }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="line"></div> -->

                    <div class="equipment">
                        <PieChart
                            :id="'onine-device'"
                            :key_="1"
                            :data="[
                                {
                                    value: deviceInfo.onlineCount,
                                    name: '在线设备',
                                    itemStyle: {color: '#1A8CFF'},
                                },
                                {
                                    value: deviceInfo.offlineCount,
                                    name: '离线设备',
                                    itemStyle: {color: '#55EDB0'},
                                },
                            ]"
                            :config="{
                                color: ['#0283fc', '#e8e8e8'],
                            }"
                            @getDevicesDetail="getDevicesDetail"
                        />
                    </div>
                    <!-- <div class="charts-pie">
                                <PieCharts
                                    :id="'offine-device'"
                                    :data="[
                                        {
                                            value: deviceInfo.offlineCount,
                                            name: '离线设备',
                                        },
                                        {value: deviceInfo.onlineCount, name: ''},
                                    ]"
                                    :config="{
                                        color: ['#ff9a00', '#e8e8e8'],
                                    }"
                                />
                            </div> -->
                </div>
            </div>
            <div class="center">
                <div class="map" id="map"></div>
            </div>
            <div class="right">
                <div class="sideBar">
                    <Title
                        isRightYear
                        :text="'桥梁健康统计'"
                        @changeTime="(val) => changeTime(val, 1)"
                    />
                    <PieCharts
                        :id="'brige-health'"
                        :data="[
                            {value: bridgeAbnormalCount.fatalCount, name: '严重异常'},
                            {value: bridgeAbnormalCount.moderateCount, name: '中等异常'},
                            {value: bridgeAbnormalCount.minorCount, name: '轻微异常'},
                            {value: bridgeAbnormalCount.intactCount, name: '基本完好'},
                        ]"
                        :config="brigeHealthConfig"
                    />
                </div>
                <div class="sideBar">
                    <Title
                        isRightYear
                        :text="'预警事件统计'"
                        @changeTime="(val) => changeTime(val, 2)"
                    />
                    <!-- <BarCharts :data="warningTotal" /> -->
                    <div class="forewarn">
                        <div style="display: flex; justify-content: center">
                            <div class="forewarn-one">
                                <div class="fistLeval">
                                    <div class="forewarn-num">
                                        {{ warningTotal[0] }}
                                    </div>
                                    <div style="font-size: 14px">一级预警</div>
                                    <img
                                        class="forewarn-img1"
                                        src="@/views/bigScreen/img/forewarn_red.png"
                                        alt="一级预警"
                                    />
                                </div>
                                <img
                                    src="@/views/bigScreen/img/redForewan.png"
                                    alt=""
                                    class="forewarn-img img-first"
                                />
                            </div>
                        </div>
                        <div class="forewarn-center">
                            <div class="forewarn-two">
                                <div class="secondLevel">
                                    <div class="forewarn-num">{{ warningTotal[1] }}</div>
                                    <div style="font-size: 14px">二级预警</div>
                                    <img
                                        class="forewarn-img1"
                                        src="@/views/bigScreen/img/forewarn_orange.png"
                                        alt="二级预警"
                                    />
                                </div>
                                <img
                                    src="@/views/bigScreen/img/orangeForewan.png"
                                    class="forewarn-img"
                                    alt=""
                                />
                            </div>

                            <div class="forewarn-three">
                                <div class="thirdLevel">
                                    <div class="forewarn-num">{{ warningTotal[2] }}</div>
                                    <div style="font-size: 14px">三级预警</div>
                                    <img
                                        class="forewarn-img1"
                                        src="@/views/bigScreen/img/forewarn_yellow.png"
                                        alt="三级预警"
                                    />
                                </div>
                                <img
                                    src="@/views/bigScreen/img/yellowForewan.png"
                                    class="forewarn-img"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="forewarn-total">
                            <img
                                src="@/views/bigScreen/img/forewarn-bg.png"
                                alt=""
                                style="width: 200px; heigth: 100px"
                            />
                            <div class="forewarn-total-name">
                                预警总数<span class="forewarn-total-num">{{
                                    warningTotalNumber
                                }}</span
                                >个
                            </div>
                        </div>
                        <!-- <div class="forewarn-num first">{{ warningTotal[0] }}</div>
                        <div class="forewarn-num second">{{ warningTotal[1] }}</div>
                        <div class="forewarn-num third">{{ warningTotal[2] }}</div>
                        <div class="forewarn-num total">{{ warningTotalNumber }}</div> 
                       <div class="forewarn-total-name">
                        <span class="forewarn-total-num">{{
                                warningTotalNumber
                            }}</span
                            >个
                        </div> 

                        <img
                            src="@/views/bigScreen/img/forewarn-bg.png"
                            alt=""
                            style="height: 250px"
                        /> -->
                    </div>
                </div>
                <div class="sideBar">
                    <Title
                        isRightYear
                        :text="'未处置预警事件'"
                        @changeTime="(val) => changeTime(val, 3)"
                    />
                    <div class="table">
                        <VueSeamlessScroll
                            :titleList="untreatedInfo.titleList"
                            :data="untreatedInfo.listData"
                        />
                    </div>
                </div>
            </div>
        </el-main>
        <InfoWindowVue ref="infoDialog" />
        <DetailDialog ref="detailDialog" :listData="deviceDetailData" />
        <deviceDetailDialog ref="deviceDetailDialog"></deviceDetailDialog>
    </el-container>
</template>

<script>
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 deviceDetailDialog from '@/views/bigScreen/components/deviceDetailDialog.vue' //设备详情弹窗
import Title from './components/Title.vue'
import PieCharts from './components/PieCharts.vue' // 饼图
import BarCharts from './components/BarCharts.vue' // 柱状图
import PieChart from './components/pieChart.vue' //动态饼状图
import VueSeamlessScroll from './components/VueSeamlessScroll.vue' // 表格滚动
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,
        PieCharts,
        PieChart,
        BarCharts,
        VueSeamlessScroll,
        InfoWindowVue,
        DetailDialog,
        deviceDetailDialog,
        CascaderCompany,
    },
    data() {
        return {
            activeBridgeId: '', // 当前选中桥梁
            nowDate: null,
            timer: null,
            year: new Date().getFullYear(),
            mouth: new Date().getMonth(),
            // options: [],
            companyId: ['1419863231459102720'], // 组织id(做为查询参数)
            companyIds: [],
            roadSegmentId: '', // 路段id(做为查询参数)
            issueDate: '', // 时间范围(做为查询参数)
            roadData: [], // 路段列表数据
            active: '', // 当前选中
            prvActive: '', // 点击选中
            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'),
                        },
                    ],
                },
            ],
            deviceList: [
                {
                    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: [], //设备详情列表数据
            isJump: false,
            setHinightId: null,
        }
    },
    created() {
        this.getRoadData()
        this.loadData()
        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)
    },
    methods: {
        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}) {
            let {roadSegmentId, companyIds} = this
            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,
                },
            ]
            if (roadSegmentId) {
                querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    property: 'roadSegmentId',
                    relation: 'AND',
                    value: roadSegmentId,
                })
            }
            if (!roadSegmentId && companyIds && companyIds.length !== 0) {
                querys.push({
                    group: 'main',
                    operation: 'IN',
                    property: 'companyId',
                    relation: 'AND',
                    value: companyIds,
                })
            }
            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()
            // console.log('selectedList----->', selectedList[0])
            // console.log('val----------', val)

            if (val.length == 0) {
                // this.clearRoadLayer()
                this.getRouteMarke()
            } else {
                this.selectedRoadList(selectedList[0])
            }
            if (val && val.length == 4) {
                this.isJump = true
                this.setHinightId = val[1]
            } else {
                this.isJump = false
            }
            if (val && val.length < 4) {
                console.log('跳转', val[1])

                this.jumpTo(val)
            }
            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)
            }
        },
        //设备详情dialog
        getDevicesDetail(val) {
            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,
                })
            }
            params.querys.push({
                group: 'main',
                operation: 'EQUAL',
                property: 'state',
                relation: 'AND',
                value: val,
            })
            // let state=val
            this.$refs.deviceDetailDialog.open(params)
        },
    },
    beforeDestroy: function () {
        if (this.timer) {
            clearInterval(this.timer) //在Vue实例销毁前，清除定时器
        }
    },
}
</script>

<style lang="scss" scoped>
@import './css/common.scss';
.container {
    width: 100%;
    height: 100%;
    background: url('./img/bg_.png') no-repeat 0 0;
    background-size: 100% 100%;
}
.el-main {
    background-color: transparent;
    padding: 0 30px;
}
.el-date-editor.el-input {
    margin-right: 0;
    margin-bottom: 0;
}
.list-item-num {
    display: flex;
    flex-direction: column;
}
.brideStatic {
    height: 25%;
}
.device-statistics-title {
    display: grid;
    grid-template-columns: 3fr 1.2fr;
}
.device-statistics-Icon {
    height: 120%;
}
// .pieDevice {
//     border-top: 2px solid #102944;
// }
.pieBlock {
    height: calc(70% - 183px);
    margin-top: 20px;
}
.equipment {
    border-top: 2px solid #102944;
    height: calc(100% - 183px);
}
.forewarn-img {
    // height: 32px;
    // width: 32px;
    height: 120px;
    width: 120px;
}
.forewarn-img1 {
    height: 24px;
    width: 24px;
}
.fistLeval {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 170px;
}
.secondLevel {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 10px;
}
.thirdLevel {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 250px;
}
.forewarn-one,
.forewarn-two,
.forewarn-three {
    // background: url('./img/redForewan.png') no-repeat 0 0;
    // background-image: url('@/views/bigScreen/img/redForewan.png');
    // border: 2px solid #301731;
    // border-radius: 80px;
    // height: 90px;
    // width: 90px;
    // text-align: center;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // flex-direction: column;
}
.forewarn-num {
    font-size: 22px;
    font-weight: bolder;
    // position: absolute;
}
// .first {
//     top: 29px;
//     left: 200px;
// }
// .second {
//     top: 91px;
//     left: 100px;
// }
// .third {
//     top: 98px;
//     left: 305px;

// }
// .total {
//     top: 172px;
//     left: 216px;
// }
.forewarn-total-num {
    font-size: 22px;
    font-weight: bolder;
    margin: 0 10px;
}
.forewarn-name {
    font-size: 14px;
}
.forewarn-total-name {
    font-size: 14px;
    width: 200px;
    text-align: center;
    position: absolute;
    top: -23px;
}
.forewarn-center {
    // padding: 0 30px 0 50px;
    display: flex;
    justify-content: space-between;
    position: relative;
    top: -50px;
}
.forewarn {
    position: relative;
    padding: 0 0 0 40px;
    margin-top: 10px;
}
.forewarn-total {
    position: relative;
    top: -53px;
    left: 95px;
}
// .line {
//     width: 100%;
//     height: 10px;
//     color: #cd1d1d;
// }
</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;
}
/* 地图点位样式 */
.map-point {
    // width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text-box {
    line-height: 20px;
    height: 20px;
    padding: 3px 5px;
}
.icon-box {
    height: 80px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position-x: -6.5px;
    background-position-y: -7px;
    position: relative;
    margin-top: -5px;
}
.icon-bridge {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background-size: cover;
}
@for $i from 1 to 5 {
    .icon-bridge-#{$i} {
        background-image: url('./img/icon-bridge-#{$i}.png');
    }
    .icon-point-#{$i} {
        background-image: url('./img/icon-point-#{$i}.png');
    }
}

.text-box-bg-1 {
    background: #004a59;
    box-shadow: inset 0px 0px 4px 0px #1affd9;
    border: 1px solid #1affd9;
}
.text-box-bg-2 {
    background: #59522d;
    box-shadow: inset 0px 0px 4px 0px #ffea80;
    border: 1px solid #ffea80;
}
.text-box-bg-3 {
    background: #59301b;
    box-shadow: inset 0px 0px 4px 0px #ff884d;
    border: 1px solid #ff884d;
}
.text-box-bg-4 {
    background: #59202b;
    box-shadow: inset 0px 0px 4px 0px #f35675;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #f35675;
}

/* end */
</style>
