<template>
    <div class="MonitoringPointScale">
        <Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
        <div class="boxB" ref="map">
            <div id="map" style="width: 100%; height: 100%" />
        </div>
        <dv-border-box-8 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="boxTop" :reverse="true">
            <div style="height: 100%; display: flex; align-items: center">
                <span>详细数据分析:</span>
                <span style="color: #04f4fb; margin-left: 5%">{{ mapList.areaName }}</span>
            </div>
        </dv-border-box-8>
        <dv-border-box-8 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="boxTop boxCenter" :reverse="true">
            <div
                style="
                    height: 100%;

                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                "
            >
                <div class="information">
                    <span>综合评价:</span>
                    <div
                        :style="`color: ${
                            mapList.data == -1
                                ? '#ccc'
                                : mapList.data >= 1
                                ? mapList.data <= 2
                                    ? '#f91a02'
                                    : mapList.data > 2
                                    ? mapList.data <= 3
                                        ? '#f97a02'
                                        : mapList.data > 3
                                        ? mapList.data <= 4
                                            ? '#02edf9'
                                            : mapList.data > 4
                                            ? mapList.data <= 4.5
                                                ? '#02f9b9'
                                                : mapList.data > 4.5
                                                ? mapList.data <= 5
                                                    ? '#86fb06'
                                                    : ''
                                                : ''
                                            : ''
                                        : ''
                                    : ''
                                : ''
                        }`"
                    >
                        {{
                            mapList.data == -1
                                ? '暂无评价'
                                : mapList.data >= 1
                                ? mapList.data <= 2
                                    ? '极差'
                                    : mapList.data > 2
                                    ? mapList.data <= 3
                                        ? '较差'
                                        : mapList.data > 3
                                        ? mapList.data <= 4
                                            ? '合格'
                                            : mapList.data > 4
                                            ? mapList.data <= 4.5
                                                ? '良好'
                                                : mapList.data > 4.5
                                                ? mapList.data <= 5
                                                    ? '优质'
                                                    : ''
                                                : ''
                                            : ''
                                        : ''
                                    : ''
                                : ''
                        }}
                    </div>
                </div>
                <div class="information">
                    <span>监测点数:</span>
                    <div style="color: #04f4fb">{{ mapList.num }} 个</div>
                </div>
                <div class="information">
                    <span>暂降事件:</span>
                    <div style="color: #04f4fb">{{ mapList.eventCounts }} 次</div>
                </div>
                <div class="information">
                    <span>稳态符合性:</span>
                    <div style="color: #04f4fb">{{ mapList.steadyLoad }} %</div>
                </div>
                <div style="height: 30%" ref="terminal">
                    <span>终端状态:</span>
                    <div id="terminal" style="height: 90%"></div>
                </div>
                <div style="height: 30%" ref="communication">
                    <span ref="titleS">通讯状态:</span>
                    <div id="communication" style="height: 90%"></div>
                </div>
            </div>
        </dv-border-box-8>
        <div class="boxBottom">
            <div class="div" @click="information('暂态事件信息')">
                <div class="divImg">
                    <img src="@/assets/ztsj.gif" alt="" />
                </div>
                <span>暂态事件</span>
                <span class="text" style="color: #c9c42e">{{ total1 > 99 ? '99+' : total1 }}</span>
            </div>
            <div class="div" @click="information('终端异常信息')">
                <div class="divImg">
                    <img src="@/assets/zdyc.gif" alt="" />
                </div>
                <span>终端异常</span>
                <span class="text" style="color: #d3237a">{{ total2 > 99 ? '99+' : total2 }}</span>
            </div>
            <div class="div" @click="information('稳态越限信息')">
                <div class="divImg">
                    <img src="@/assets/wtys.gif" alt="" />
                </div>
                <span>稳态越限</span>
                <span class="text" style="color: #cb3c21">{{ total3 > 99 ? '99+' : total3 }}</span>
            </div>
        </div>

        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            v-if="dialogVisible"
            width="80%"
            :append-to-body="true"
            class="eldialotable"
            style="padding: 10px !important"
            :before-close="beforeClocse"
        >
            <el-table
                stripe
                v-loading="loading"
                :data="tableData"
                height="60vh"
                border
                element-loading-text="数据加载中"
                header-cell-class-name="table_header"
                :header-cell-style="{
                    height: '25px',
                    padding: '0px'
                }"
                :row-style="{ height: '28px', color: '#04d9ff' }"
                :cell-style="{ padding: '0px', color: '#04d9ff' }"
                style="width: 100%"
            >
                <el-table-column align="center" type="index" prop="name" label="序号" width="70">
                    <template scope="scope">
                        <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    v-for="(item, index) in tableHeader"
                    :prop="item.prop"
                    align="center"
                    show-overflow-tooltip
                    :label="item.label"
                    :min-width="item.width"
                    :key="index"
                    :formatter="formatter"
                >
                    <!-- <template slot-scope="scope">
            <span v-if="item.prop == 'amplitude'">{{
              (scope.row[item.prop] * 100).toFixed(2)
            }}</span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template> -->
                </el-table-column>
            </el-table>

            <el-pagination
                align="right"
                style="margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[100, 200, 500, 1000]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
import { getMiddleDown, getMiddleLimitRate, getMiddleTerminal, getAllData } from '@/api/center/DropEvent.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
import 'echarts-gl'
require('echarts/lib/chart/bar.js')
require('echarts/lib/component/tooltip.js')
require('echarts/lib/component/title.js')
export default {
    components: { Timeinterval },
    props: {},
    data() {
        return {
            title: '',
            dialogVisible: false,
            loading: false,
            flag: 0,
            zoom: '', //图表焦点校验
            pageNum: 1,
            pageSize: 100,
            mapList: {},
            chartList: [],
            tableData: [],
            dataList1: [],
            dataList2: [],
            dataList3: [],
            total: 0,
            total1: 0,
            total2: 0,
            total3: 0,
            tableHeader: [],
            myChart1: null,
            myChart2: null,
            myChart3: null,
            timeTicket: null
        }
    },
    created() {},
    mounted() {
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        ;(document.getElementById('map').style.width = this.$refs.map.offsetWidth + 'px'),
            (document.getElementById('map').style.height = this.$refs.map.offsetHeight + 'px')
        document.getElementById('terminal').style.width = this.$refs.terminal.offsetWidth + 'px'
        document.getElementById('terminal').style.height =
            this.$refs.terminal.offsetHeight - this.$refs.titleS.offsetHeight + 'px'
        document.getElementById('communication').style.width = this.$refs.communication.offsetWidth + 'px'
        document.getElementById('communication').style.height =
            this.$refs.communication.offsetHeight - this.$refs.titleS.offsetHeight + 'px'
        this.mapInfo()
        setInterval(() => {
            this.mapInfo()
        }, 60000 * 5)

        this.info()
        setTimeout(() => {
            this.terminal()
            this.communication()
        }, 0)
    },
    methods: {
        mapInfo() {
            //大屏中间所有数据
            let form = {
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                searchBeginTime: this.$refs.Timeinterval.timeValue[0],
                searchEndTime: this.$refs.Timeinterval.timeValue[1]
            }
            getAllData(form).then(res => {
                this.chartList = res.data
                this.mapList = this.chartList[0]
                let str = JSON.parse(window.sessionStorage.getItem('Info')).areaName
                let sta1 = []
                sta1 = str.split('省')
                this.chart('./static/mapjson/' + sta1[0] + '.json')

                //  this.mapList = this.chartList[i];
            })
        },
        async info() {
            let form = {
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                searchBeginTime: this.$refs.Timeinterval.timeValue[0],
                searchEndTime: this.$refs.Timeinterval.timeValue[1],
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }
            if (this.title == '暂态事件信息') {
                //大屏中间暂态
                this.loading = true
                await getMiddleDown(form).then(res => {
                    this.tableData = res.data.list
                    this.total1 = res.data.size
                    this.total = res.data.size
                    this.dialogVisible = true
                    this.loading = false
                    // total
                })
            } else if (this.title == '终端异常信息') {
                //大屏中间终端异常信息
                this.loading = true
                await getMiddleTerminal(form).then(res => {
                    this.tableData = res.data.list
                    this.total2 = res.data.size
                    this.total = res.data.size
                    this.dialogVisible = true
                    this.loading = false
                    // total
                })
            } else if (this.title == '稳态越限信息') {
                //大屏中间稳态越线信息
                this.loading = true
                await getMiddleLimitRate(form).then(res => {
                    this.tableData = res.data.records
                    this.total3 = res.data.total
                    this.total = res.data.total
                    this.dialogVisible = true
                    this.loading = false
                    // total
                })
            } else {
                //大屏中间暂态
                getMiddleDown(form).then(res => {
                    this.total1 = res.data.size
                })
                //大屏中间终端异常信息
                getMiddleTerminal(form).then(res => {
                    this.total2 = res.data.size
                })
                //大屏中间稳态越线信息
                getMiddleLimitRate(form).then(res => {
                    this.total3 = res.data.total
                })
            }
        },
        handleSizeChange(e) {
            this.pageSize = e
            this.info()
        },
        handleCurrentChange(e) {
            this.pageNum = e
            this.info()
        },
        chart(mapList) {
            let _this = this
            let dataList = []
            setTimeout(() => {
                _this.chartList.forEach(item => {
                    dataList.push({
                        name: item.areaName,
                        value: item.data - 0
                    })
                })
            }, 0)
            if (_this.myChart3 != null) {
                _this.myChart3.dispose()
                clearInterval(_this.timeTicket)
            }
            let echarts = require('echarts')
            let domID2 = document.getElementById('map')
            _this.myChart3 = echarts.init(domID2)

            // let maps=await map()
            // console.log(` maps.data`);
            _this.$axios.get(mapList).then(data => {
                echarts.registerMap('', data.data)
                if (!(data.data instanceof Object)) {
                    this.chart('./static/mapjson/全国.json')
                    return
                }
                let option = {
                    //   backgroundColor: '#060303', //地图背景色深蓝
                    tooltip: {
                        trigger: 'item',

                        formatter: function (params) {
                            return params.name
                        }
                    },

                    geo: {
                        show: true,
                        map: '',
                        roam: true,
                        top: mapList == './static/mapjson/全国.json' ? '27%' : '10%',
                        left: '37%',
                        zoom: mapList == './static/mapjson/全国.json' ? 1.5 : 1.2,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 17 //字体大小
                                    // fontWeight: 'bold',
                                }
                            }
                        },

                        itemStyle: {
                            normal: {
                                borderColor: '#06d1e4',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(23, 71, 126, 0)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#18487e' // 100% 处的颜色
                                        }
                                    ],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: '#18487e',
                                // // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            }
                            // emphasis: {
                            //   // areaColor: "#389BB7",
                            //   borderWidth: 0,
                            // },
                        }
                    },

                    legend: {
                        //各标记图例
                        orient: 'vertical',
                        // id: 1,
                        left: '0%',
                        top: '0%',
                        itemWidth: 20,

                        textStyle: {
                            color: '#000', //legend图标颜色  深灰
                            fontSize: 16
                        }
                    },
                    title: {
                        text: '',
                        left: 'left',
                        top: '60',
                        textStyle: {
                            color: '#C09611',
                            size: 20
                        }
                    },

                    visualMap: {
                        type: 'piecewise',
                        right: '30px',
                        bottom: '10px',
                        itemWidth: 27,
                        itemHeight: 15,
                        textStyle: {
                            color: '#07f3e4',
                            fontSize: 14
                        },
                        pieces: [
                            {
                                max: 5,
                                gt: 4.5,
                                label: '优质'
                            },
                            {
                                max: 4.5,
                                gt: 4,
                                label: '良好'
                            },
                            {
                                max: 4,
                                gt: 3,
                                label: '合格'
                            },
                            {
                                max: 3,
                                gt: 2,
                                label: '较差'
                            },
                            {
                                max: 2,
                                min: 1,
                                label: '极差'
                            }
                        ],
                        inRange: {
                            color: ['#f91a02', '#f97a02', '#02edf9', '#02f9b9', '#86fb06']
                        },
                        outOfRange: {
                            color: ['#999999']
                        }
                    },

                    series: [
                        {
                            type: 'map', //图表类型
                            geoIndex: 0,

                            data: dataList //图表的数据
                        }
                    ]
                }
                // let option = {
                //   //   backgroundColor: '#060303', //地图背景色深蓝
                //   tooltip: {
                //     trigger: "item",

                //     formatter: function (params) {
                //       return params.name;
                //     },
                //   },
                //   geo3D: {
                //     map: "china",
                //     regionHeight: 4,
                //     itemStyle: {
                //       color: "#06d1e4",
                //       opacity: 1,
                //       borderWidth: 1,
                //       borderColor: "#fff8e3",
                //     },
                //     emphasis: {
                //       label: {
                //         distance: 0,
                //       },
                //       itemStyle: {
                //         color: "#389BB7",
                //       },
                //     },
                //      label: {
                //     show: true,
                //     textStyle: {
                //         color: '#000', //地图初始化区域字体颜色
                //         fontSize: 16,
                //         opacity: 1,
                //         backgroundColor: 'rgba(0,0,0,0)'
                //         //backgroundColor: 'rgba(53,171,199,0)'
                //     },
                // },
                //     // regions: regions,
                //     boxHeight: 24,
                //     light: {
                //       //主光源
                //       main: {
                //         intensity: 1,
                //         shadow: true,
                //         shadowQuality: "high",
                //         alpha: 40,
                //         beta: 77,
                //       },
                //       //全局环境光
                //       ambient: {
                //         intensity: 0.2,
                //       },
                //     },
                //     viewControl: {
                //       // distance: 70,
                //       minDistance: 65,
                //       maxDistance: 95,
                //       alpha: 60, //x轴转动
                //       beta: 15,
                //       // minAlpha: 25,
                //       // maxAlpha: 70,
                //       // minBeta: 15,
                //       // maxBeta: 15,
                //     },
                //      label: {
                //     show: true,
                //     textStyle: {
                //         color: '#fff', //地图初始化区域字体颜色
                //         fontSize: 16,
                //         opacity: 1,
                //         backgroundColor: 'rgba(0,0,0,0)'
                //         //backgroundColor: 'rgba(53,171,199,0)'
                //     },
                // },
                //   },

                //   toolbox: {
                //     show: true,
                //     top: "25",
                //     feature: {
                //       saveAsImage: {},
                //     },
                //   },

                //   legend: {
                //     //各标记图例
                //     orient: "vertical",
                //     // id: 1,
                //     left: "0%",
                //     top: "0%",
                //     itemWidth: 20,

                //     textStyle: {
                //       color: "#000", //legend图标颜色  深灰
                //       fontSize: 16,
                //     },
                //   },
                //   title: {
                //     text: "",
                //     left: "left",
                //     top: "60",
                //     textStyle: {
                //       color: "#C09611",
                //       size: 20,
                //     },
                //   },

                //   visualMap: {
                //     type: "piecewise",
                //     right: "30px",
                //     top: "center",
                //     itemWidth: 27,
                //     itemHeight: 15,
                //     textStyle: {
                //       color: "#07f3e4",
                //       fontSize: 14,
                //     },
                //     pieces: [
                //       {
                //         max: 5,
                //         gt: 4.5,
                //         label: "优质",
                //       },
                //       {
                //         max: 4.5,
                //         gt: 4,
                //         label: "良好",
                //       },
                //       {
                //         max: 4,
                //         gt: 3,
                //         label: "合格",
                //       },
                //       {
                //         max: 3,
                //         gt: 2,
                //         label: "较差",
                //       },
                //       {
                //         max: 2,
                //         min: 1,
                //         label: "极差",
                //       },
                //     ],
                //     inRange: {
                //       color: ["#f91a02", "#f97a02", "#02edf9", "#02f9b9", "#86fb06"],
                //     },
                //     outOfRange: {
                //       color: ["#999999"],
                //     },
                //   },

                //   series: [
                //     {
                //       type: "bar3D",

                //       coordinateSystem: "geo3D",
                //       geoIndex: 0,
                //       data: dataList, //图表的数据
                //     },
                //   ],
                // };

                _this.myChart3.clear(option)
                option && _this.myChart3.setOption(option)
                window.echartsArr.push(_this.myChart3)
                setTimeout(function () {
                    _this.myChart3.resize()
                    var count = 0

                    var dataLength = option.series[0].data.length
                    _this.timeTicket && clearInterval(_this.timeTicket)
                    _this.timeTicket = setInterval(function () {
                        _this.chartList.forEach(item => {
                            if (item.areaName == option.series[0].data[count % dataLength].name) {
                                _this.mapList = item
                                _this.terminal()
                                _this.communication()
                            }
                        })
                        _this.myChart3.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0
                        })
                        _this.myChart3.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: count % dataLength
                        })
                        _this.myChart3.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: count % dataLength
                        })
                        count++
                    }, 3000)

                    _this.myChart3.on('mouseover', function (params) {
                        _this.chartList.forEach(item => {
                            if (item.areaName == params.name) {
                                _this.mapList = item
                                _this.terminal()
                                _this.communication()
                            }
                        })
                        //  this.mapList = this.chartList[i];
                        clearInterval(_this.timeTicket)
                        _this.myChart3.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0
                        })
                        _this.myChart3.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: params.dataIndex
                        })
                        _this.myChart3.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: params.dataIndex
                        })
                    })
                    _this.myChart3.on('mouseout', function (params) {
                        _this.timeTicket && clearInterval(_this.timeTicket)
                        _this.timeTicket = setInterval(function () {
                            _this.chartList.forEach(item => {
                                if (item.areaName == option.series[0].data[count % dataLength].name) {
                                    _this.mapList = item
                                    _this.terminal()
                                    _this.communication()
                                }
                            })
                            _this.myChart3.dispatchAction({
                                type: 'downplay',
                                seriesIndex: 0
                            })
                            _this.myChart3.dispatchAction({
                                type: 'highlight',
                                seriesIndex: 0,
                                dataIndex: count % dataLength
                            })
                            _this.myChart3.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,
                                dataIndex: count % dataLength
                            })
                            count++
                        }, 3000)
                    })
                }, 0)
                //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
                // _this.myChart3.on("click", function (params) {
                //   //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
                //   //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
                //   // console.log(params.data);

                //   _this.mapList.title = params.data.name;
                // });
            })
        },
        terminal() {
            let _this = this
            let echarts = require('echarts')
            let domID1 = document.getElementById('terminal')
            let color = ['#78d80f', '#CC9900', '#fb0b06']
            let piedata = [
                { value: _this.mapList.running, name: '投运' },
                { value: _this.mapList.hotSpare, name: '热备用' },
                { value: _this.mapList.shutdown, name: '停运' }
            ]
            if (_this.myChart1 != null) {
                _this.myChart1.dispose()
            }
            _this.myChart1 = echarts.init(domID1)

            let option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(8,36,68,.7)',
                    formatter: '{b}: {c}台',
                    textStyle: {
                        color: '#00ffff'
                    }
                },
                legend: {
                    top: '0',
                    left: '0',
                    orient: 'vertical',
                    itemWidth: 10,
                    itemHeight: 7,
                    textStyle: {
                        color: '#fff',
                        rich: {
                            name: {
                                verticalAlign: 'right',
                                align: 'left',
                                fontSize: 8,
                                color: '#fff'
                            }
                        }
                    }
                },
                series: [
                    {
                        type: 'pie',
                        clockWise: false,
                        radius: ['45%', '65%'],
                        center: ['60%', '45%'],
                        label: {
                            normal: {
                                formatter: '{c}台'
                            }
                        },

                        labelLine: {
                            show: true,
                            length: 6,
                            length2: 0
                        },
                        data: piedata.map((item, index) => {
                            item.label = {
                                color: color[index]
                            }
                            return item
                        }),
                        itemStyle: {
                            color: params => {
                                var index = params.dataIndex

                                return color[index]
                            }
                        }
                    }
                ]
            }

            option && _this.myChart1.setOption(option, true)
            window.echartsArr.push(_this.myChart1)
            setTimeout(function () {
                _this.myChart1.resize()
            }, 0)
        },
        communication() {
            let _this = this
            let echarts = require('echarts')
            let domID1 = document.getElementById('communication')
            if (_this.myChart2 != null) {
                _this.myChart2.dispose()
            }
            _this.myChart2 = echarts.init(domID1)
            let trafficWay = [
                {
                    name: '正常',
                    value: _this.mapList.normal
                },
                {
                    name: '中断',
                    value: _this.mapList.breakdown
                }
            ]

            let color = ['#78d80f', '#fb0b06']

            let seriesOption = [
                {
                    name: '',
                    type: 'pie',
                    clockWise: false,
                    radius: ['45%', '65%'],
                    center: ['60%', '45%'],
                    label: {
                        normal: {
                            formatter: '{c}台'
                        }
                    },

                    labelLine: {
                        show: true,
                        length: 6,
                        length2: 0
                    },
                    // data: data,
                    data: trafficWay.map((item, index) => {
                        item.label = {
                            color: color[index]
                        }
                        return item
                    }),
                    itemStyle: {
                        color: params => {
                            var index = params.dataIndex

                            return color[index]
                        }
                    }
                }
            ]
            let option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(8,36,68,.7)',
                    formatter: '{b}: {c}个',
                    textStyle: {
                        color: '#00ffff'
                    }
                },

                color: color,
                legend: {
                    top: '0',
                    left: '0',
                    orient: 'vertical',
                    itemWidth: 10,
                    itemHeight: 7,
                    textStyle: {
                        color: '#fff',
                        rich: {
                            name: {
                                verticalAlign: 'right',
                                align: 'left',
                                fontSize: 8,
                                color: '#fff'
                            }
                        }
                    }
                },
                // graphic: {
                //   elements: [
                //     {
                //       type: "image",
                //       z: 3,
                //       style: {
                //         image: require("@/assets/Yan.png"),
                //         width: 50,
                //         height: 50,
                //       },
                //       left: "center",
                //       top: "center",
                //       position: [100, 100],
                //     },
                //   ],
                // },

                series: seriesOption
            }

            option && _this.myChart2.setOption(option, true)
            window.echartsArr.push(_this.myChart2)
            setTimeout(function () {
                _this.myChart2.resize()
            }, 0)
        },
        // 点击信息弹框
        async information(val) {
            this.title = val
            if (val == '暂态事件信息') {
                this.tableHeader = [
                    // { prop: "province", label: "省份" },
                    // { prop: "city", label: "地市" },
                    { prop: 'name', label: '监测点名称', width: 110 },
                    { prop: 'time', label: '发生时间', width: 180 },
                    { prop: 'duration', label: '持续时间', width: 120 },
                    { prop: 'reason', label: '暂降原因', width: 150 },
                    { prop: 'type', label: '暂降类型', width: 100 },
                    { prop: 'amplitude', label: '暂降幅值(%)', width: 150 }
                ]
                // (this.tableData = this.dataList1);
            } else if (val == '终端异常信息') {
                this.tableHeader = [
                    { prop: 'name', label: '变电站名称', width: 200 },
                    { prop: 'comFlag', label: '通讯状态	', width: 180 },
                    { prop: 'ip', label: '网络参数	', width: 120 },
                    { prop: 'port', label: '端口', width: 150 },
                    { prop: 'proportion', label: '流量占比(%)', width: 100 }
                ]
                // (this.tableData = this.dataList2);
            } else if (val == '稳态越限信息') {
                this.tableHeader = [
                    { prop: 'subName', label: '变电站名称', width: 200 },
                    { prop: 'mname', label: '监测点名称	', width: 180 },
                    { prop: 'count', label: '越限次数		', width: 120 }
                ]
                // (this.tableData = this.dataList3);
            }
            this.info()
        },
        beforeClocse() {
            ;(this.dialogVisible = false), (this.pageNum = 1), (this.pageSize = 100)
        },
        formatter(row, column) {
            if (column.property == 'amplitude') {
                return (row.amplitude * 100).toFixed(2)
            } else if (column.property == 'reason') {
                let title = ''
                dicData('Event_Reason', []).forEach(item => {
                    if (item.id == row.reason) {
                        title = item.name
                    }
                })
                return title
            } else if (column.property == 'type') {
                let title = ''
                dicData('Event_Type', []).forEach(item => {
                    if (item.id == row.type) {
                        title = item.name
                    }
                })
                return title
            } else {
                return row[column.property]
            }
        }
    },

    computed: {},

    watch: {},
    beforeDestroy() {
        for (let i = 1; i < 10000; i++) {
            clearInterval(i)
        }
    }
}
</script>
<style lang="less" scoped>
// @import url("../center/css/commonStyle.less");
// @import url("../center/css/themeMixin.less");
@import url('../css/home.less');
// @import url("../center/css/change.less");
@font-face {
    font-family: sszh;
    src: url('../fonts/sszh.ttf'); /* IE9+ */
}
.MonitoringPointScale {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: electricFont;
    .boxB {
        height: 100%;
        // background-color: rgb(41, 16, 16);
    }
    .boxTop {
        position: absolute;
        top: 3%;
        left: 3%;
        width: 25%;
        height: 7%;
        font-size: 0.7rem;
        padding-left: 1%;
        box-shadow: #279cb1 0px 0px 1px inset !important;
        border: 0px solid rgb(7 216 253) !important;
        background-color: rgb(7 216 253 / 15%);
    }
    .information {
        display: flex;
        align-items: center;
        div {
            flex: 1;
            text-align: center;

            font-size: 1.4rem;
        }
    }
    .boxCenter {
        top: 11%;
        height: 78%;
        font-size: 0.8rem;
        padding-left: 1.5%;
        // padding-right: 2.5%;
    }

    .boxBottom {
        position: absolute;
        top: 90%;
        left: 3%;
        width: 25%;
        height: 7%;
        font-size: 0.28rem;
        padding-left: 1%;
        z-index: 9999;
        display: flex;
        justify-content: space-around;
        .div {
            font-size: 12px;
            position: relative;
            height: 100%;
            cursor: pointer;
            // display: flex;
            // flex-direction: column;
            text-align: center;
            .text {
                position: absolute;
                top: -10%;
                left: 100%;
                font-size: 12px;
            }
            .divImg {
                height: 75%;
                img {
                    // width: 35%;
                    height: 100%;
                    vertical-align: bottom;
                }
            }
        }
    }
}
::v-deep .el-dialog {
    // background-color: transparent;
    border: 1px solid #1697de;
    background-color: rgb(33 57 83 / 60%);
    padding: 10px 10px 10px 10px !important;

    .el-dialog__header {
        // background-color: transparent ;
        background-color: rgb(33 57 83 / 0%);
        border-bottom: 1px solid #1697de;
    }
    .el-dialog__title {
        color:#07d8fd !important;
    }
    ::v-deep dpjcksss .el-dialog__body {
        padding: 10px !important;
    }
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
}
::v-deep .el-table tr,
.el-table th,
.el-table td {
    color: #0690c1;
}
::v-deep .el-table__header th {
    background: #10727d;
    color: #04e8ef !important;
}
::v-deep .el-pagination__total {
    color: #fff;
}
::v-deep .el-pagination__jump {
    color: #fff;
}
/* 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
}
::v-deep .el-table tr,
.el-table th,
.el-table td {
    color: #0b8eb7;
}
::v-deep .el-table__header th {
    color: #04e8ef !important;
    background: #10727d;
}

::v-deep .table_header {
    background-color: #187d8b !important;
}
::v-deep .el-table__header {
    tr,
    th {
        background: #187d8b !important;
    }
}
::v-deep .el-table td {
    background-color: #055d6bcd !important;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--d td {
    background: #65c9c275 !important;
}

::v-deep .el-pagination .btn-next,
.el-pagination .btn-prev {
    background: center center no-repeat rgb(33 57 83 / 60%);

    color: #fff;
}
::v-deep .btn-prev {
    background: center center no-repeat rgb(33 57 83 / 60%) !important;
    color: #fff !important;
}

::v-deep .el-pagination button:disabled {
    color: #fff;
    background-color: rgb(33 57 83 / 60%);
}
::v-deep .el-pager li {
    background-color: rgb(33 57 83 / 60%);
    color: #fff;
}
::v-deep .el-input__inner {
    background-color: rgb(33 57 83 / 60%);
    color: #fff;
}
.el-dialog__body {
    padding: 10px !important;
    max-height: none;
}
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #52b9b39f !important;
}
::v-deep.el-table--striped .el-table__body tr:hover.el-table__row--striped > td {
    background-color: #52b9b39f !important;
}
::v-deep.el-table .el-table__body tr:hover.el-table__row > td {
    background-color: #52b9b39f !important;
}

::v-deep ::-webkit-scrollbar-thumb {
    background: #03b9b99f !important;
}
::v-deep.el-dialog .el-dialog__body {
    max-height: 70vh;
    padding: 10px 10px 10px 10px !important;
    overflow-y: auto;
}
</style>
<style lang="scss" scoped>
::v-deep .dpjcksss .el-dialog .el-dialog__body {
    max-height: 70vh;
    padding: 10px 10px 10px 10px !important;
    overflow-y: auto;
}
.right-top {
    border-style: solid hidden hidden hidden;
    color: rgba(7, 130, 161, 0);
    border: 0.007813rem solid rgba(7, 130, 161, 0);
}
</style>
