<template>
  <!-- <dv-full-screen-container class="app"> -->
  <div id="" class="app">
    <div>
      <transition>
        <Nav v-if="nav" @showbox="nav = false" class="transition-box"/>
      </transition>
    </div>
    <div class="header">
      <dv-decoration-8 class="header-left-decoration"/>
      <dv-decoration-5 class="header-center-decoration"/>
      <dv-decoration-8 class="header-right-decoration" :reverse="true"/>
      <h1 class="echart_title">北京市政法大数据分析平台</h1>
      <div class="time">{{ time }}</div>
      <div class="nav" @click="nav = !nav">
        <img src="../assets/img/nav.png" alt="">
        <span class="text">导航</span>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div>
          <dv-border-box-11 title="政法大数据中心">
          <!-- <p class="echart_title">政法大数据中心<a href="javascript:;">详情></a></p> -->
          <div class="bigData">
            <div>
              <div>
                <p>总数据</p>
                <p><span class="zsj">30,000,000</span>条</p>
              </div>
              <div>
                <p>今日接入数据</p>
                <p><span class="jrsj">15,000</span>条</p>
              </div>
              <div>
                <p>接入数据文件</p>
                <p><span class="jrwj">200</span>条</p>
              </div>
            </div>
            <ul>
              <li>
                <p>接入数据表</p>
                <p><span class="jrsjb">700</span>个</p>
              </li>
              <li>
                <p>委内数据源</p>
                <p><span class="wnsjy">20</span>个</p>
              </li>
              <li>
                <p>外部数据源</p>
                <p><span class="wbsjy">25</span>个</p>
              </li>
              <li>
                <p>服务器节点</p>
                <p><span class="fwqjd">5</span>台</p>
              </li>
            </ul>
          </div>
          </dv-border-box-11>
        </div>
        <ul>
          <li>
            <!-- <p class="echart_title">北京市社会稳定指数趋势<a href="javascript:;">详情></a></p> -->
            <!-- <div class="echarts echarts1" id="echarts1"></div> -->
            <dv-border-box-11 title="北京市社会稳定指数趋势">
              <Echarts :key="echartObjKey" class="echarts echarts1" :echartObj="echartObj1"></Echarts>
            </dv-border-box-11>
          </li>
          <li>
            <dv-border-box-10>
              <div class="echarts echarts23">
                <Echarts :key="echartObjKey" class="echarts2" :echartObj="echartObj2"></Echarts>
                <!-- <div class="echarts2" id="echarts2"></div> -->
                <!-- <div class="echarts3" id="echarts3"></div> -->
                <Echarts :key="echartObjKey" class="echarts3" :echartObj="echartObj3"></Echarts>
              </div>
            </dv-border-box-10>
          </li>
        </ul>
      </div>
      <div class="middle">
        <h1 class="up">
          北京市社会稳定指数
          <dv-digital-flop :config="digitalFlop" class="digitalFlop" style="font-size: 40px"/>
          <!-- <span class="number">
            <i>8</i>
            <i>8</i>
            <i>.</i>
            <i>5</i>
          </span> -->
          <span class="number2">上升12%</span>
        </h1>
        <dv-scroll-board :config="config" style="height: 80px;margin: 20px 0;"/>
        <!-- <div class="shwdzs" style="box-sizing: border-box;position: relative;">
          <ul class="infoList">
            <li>
              <div>
                <img src="../assets/img/redWarning.png" alt="">
                <span class="area">石景山</span>
                <span class="val">78.6</span>
                <span class="detail">连续三个月下降</span>
              </div>
              <div>
                <img src="../assets/img/redWarning.png" alt="">
                <span class="area">海淀</span>
                <span class="val">78.6</span>
                <span class="detail">连续三个月下降</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../assets/img/yellowWarning.png" alt="">
                <span class="area">门头沟</span>
                <span class="val">72.6</span>
                <span class="detail">连续三个月下降</span>
              </div>
              <div>
                <img src="../assets/img/yellowWarning.png" alt="">
                <span class="area">丰台</span>
                <span class="val">72.6</span>
                <span class="detail">连续三个月下降</span>
              </div>
            </li>
          </ul>
        </div> -->

        <dv-border-box-1 style="flex: 1;" :color="['red', 'green']">
            <Echarts :key="echartObjKey" class="echarts echarts7" :echartObj="echartObj7"></Echarts>
          <!-- <div class="echarts7" id="echarts7"></div> -->
        </dv-border-box-1>
        
        <dv-border-box-10 :dur="2" style="margin-top: 20px;height: auto;">
          <div class="table">
            <ul class="table1">
              <li>
                <span>户籍人口数量</span><i>13,686,366人</i>
              </li>
              <li>
                <span>流动人口数量</span><i>7,738,887人</i>
              </li>
              <li>
                <span>重点人数量 (综治维稳)</span><i>1,000人</i>
              </li>
              <li>
                <span>出租房屋数量</span><i>1,266,643间</i>
              </li>
              <li>
                <span>两新组织数量</span><i>1,366个</i>
              </li>
              <li>
                <span>非正常上访数量 (本年)</span><i>200次</i>
              </li>
            </ul>
            <ul class="table2">
              <li>
                <span>案件数量 (治安、刑事 本年)</span><i>3,623件</i>
              </li>
              <li>
                <span>经典案例数量</span><i>200例</i>
              </li>
              <li>
                <span>重点组织数量</span><i>150个</i>
              </li>
              <li>
                <span>敏感案事件数量 (本年)</span><i>187件</i>
              </li>
              <li>
                <span>情报上报数量 (本年)</span><i>139个</i>
              </li>
              <li>
                <span>邪教人员数量</span><i>300人</i>
              </li>
            </ul>
          </div>
        </dv-border-box-10>
      </div>
      <div class="right">
        <div>
          <dv-border-box-11 title="日常办公">
          <!-- <p class="echart_title">日常办公</p> -->
            <ul class="dailyOffice">
              <li>
                <div>
                  <img src="../assets/img/fws.png" alt="">
                </div>
                <div>
                  <p>发文数</p>
                  <p><span class="fws">500</span>件</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/img/sws.png" alt="">
                </div>
                <div>
                  <p>收文数</p>
                  <p><span class="sws">200</span>件</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/img/tzggs.png" alt="">
                </div>
                <div>
                  <p>通知公告数</p>
                  <p><span class="tzggs">500</span>件</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/img/zlkwjs.png" alt="">
                </div>
                <div>
                  <p>资料库文件数</p>
                  <p><span class="zlkwjs">9000</span>件</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/img/nbqktbs.png" alt="">
                </div>
                <div>
                  <p>内部情况通报数</p>
                  <p><span class="nbqktbs">50</span>条</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/img/dykts.png" alt="">
                </div>
                <div>
                  <p>调研课题数</p>
                  <p><span class="dykts">186</span>个</p>
                </div>
              </li>
            </ul>
          </dv-border-box-11>
        </div>
        <ul>
          <li>
            <dv-border-box-11 title="敏感案事件趋势">
            <!-- <p class="echart_title">敏感案事件趋势</p> -->
            <!-- <div class="echarts echarts4" id="echarts4"></div> -->
              <Echarts :key="echartObjKey" class="echarts echarts4" :echartObj="echartObj4"></Echarts>
            </dv-border-box-11>
          </li>
          <li>
            <dv-border-box-11 title="治安、刑事案件趋势">
            <!-- <p class="echart_title">治安、刑事案件趋势</p> -->
            <!-- <div class="echarts echarts5" id="echarts5"></div> -->
              <Echarts :key="echartObjKey" class="echarts echarts5" :echartObj="echartObj5"></Echarts>
            </dv-border-box-11>
          </li>
          <li>
            <dv-border-box-11 title="重点组织数量">
            <!-- <p class="echart_title">重点组织数量</p> -->
            <!-- <div class="echarts echarts6" id="echarts6"></div> -->
              <Echarts :key="echartObjKey" class="echarts echarts6" :echartObj="echartObj6"></Echarts>
            </dv-border-box-11>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- </dv-full-screen-container> -->
</template>
<script>

import Nav from '@/components/nav'
import Echarts from '@/components/echarts'

export default {
  name: 'home',
  data:function(){
    return {
      echartObjKey: "echartObjKey",
      nav: false,
      config:{
        rowNum: 2,
        oddRowBGC: 'rgba(33, 193, 255, 0.1)',
        evenRowBGC: 'rgba(33, 193, 255, 0.2)',
        data: [
          [
            '<img src="'+require('../assets/img/redWarning.png')+'"/>石景山78.6连续三个月下降',
            '<img src="'+require('../assets/img/redWarning.png')+'"/>海淀78.6连续三个月下降'
          ],
          [
            '<img src="'+require('../assets/img/yellowWarning.png')+'"/>门头沟72.6连续三个月下降',
            '<img src="'+require('../assets/img/yellowWarning.png')+'"/>丰台72.6连续三个月下降'
          ],
          [
            '<img src="'+require('../assets/img/yellowWarning.png')+'"/>西城72.6连续三个月下降',
            '<img src="'+require('../assets/img/yellowWarning.png')+'"/>东城72.6连续三个月下降'
          ],
          [
            '<img src="'+require('../assets/img/redWarning.png')+'"/>大兴78.6连续三个月下降',
            '<img src="'+require('../assets/img/redWarning.png')+'"/>房山78.6连续三个月下降'
          ],
        ],
      },
      mainLeft:[],
      mainright:[],
      time: '',
      digitalFlop:{
        number: [0],
        toFixed: 2,
        content: '{nt}',
        style: {
          fontSize: 40,
        }
      },
      echartObj1:{
        color: ['#54e9a0'], //图例颜色
        tooltip: {
          trigger: 'axis',
          position: 'inside',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          extraCssText: 'width:160px;height:auto;'
        },
        legend: {
          top: '10',
          right: '20',
          data: [{ name: '市平均数', icon: 'line', }],
          itemWidth: 10, //图例的宽度
          textStyle: {
            color: '#fff' //图例字体颜色
          },
        },
        grid: {
          top: '30',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02'],
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: { //
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#355184',
              width: 1
            }
          },
        }],
        series: [{
          name: '市平均数',
          type: 'line',
          stack: '总量',
          symbol: 'none', //取消折线点圆圈
          data: [120, 132, 101, 134, 90, 230, 210],
          areaStyle: {
            normal: {
              color: '#1195a5' //修改折线下面区域颜色
            }
          },
          lineStyle: {
            normal: {
              color: '#54e9a0' //修改折线颜色
            }
          }
        }, ]
      },
      echartObj2:{
        color: ['#89cefb', '#ebdd7e', '#f96d5e'], //图例颜色
        title: {
          top: '10',
          text: '重点人分析',
          left: 'center',
          textStyle: {
            "fontSize": 14,
            "color": "#27b3d8"
          }
        },
        tooltip: {

          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          // trigger: 'axis',
          // position: 'inside',
          // axisPointer: {
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // },
          extraCssText: 'width:160px;height:auto;',
        },
        legend: {
          bottom: '10',
          data: ['', '政治重点人', '邪教人员'],
          textStyle: {
            color: '#fff' //字体颜色
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [{
          label: {
            position: 'inner',
          },
          name: '重点人分析',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
          data: [
            // { value: 6000, name: '',},
            { value: 6000, name: '', label: { show: false, fontSize: '8', } },
            { value: 1200, name: '政治重点人' },
            { value: 500, name: '邪教人员' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          // // 设置值域的那指向线
          // labelLine: {
          //   normal: {
          //     // show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
          //   }
          // },
          // // 设置值域的标签
          // label: {
          //   normal: {
          //     position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
          //     // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
          //     // {a}指series.name  {b}指series.data的name
          //     // {c}指series.data的value  {d}%指这一部分占总数的百分比
          //     formatter: '{b}'
          //   }
          // }
        }]
      },
      echartObj3:{
        color: ['#89cefb', '#ebdd7e', '#f96d5e'], //图例颜色
        title: {
          top: '10',
          text: '员额法官、检察官分析',
          left: 'center',
          textStyle: {
            "fontSize": 14,
            "color": "#27b3d8"
          }
        },
        tooltip: {
          extraCssText: 'width:160px;height:auto;',
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          bottom: '10',
          data: ['', '员额检察官', '员额法官'],
          textStyle: {
            color: '#fff' //字体颜色
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [{
          label: {
            position: 'inner',
          },
          name: '员额法官、检察官分析',
          type: 'pie',
          radius: '70%',  
          center: ['50%', '50%'],
          data: [
            { value: 5000, name: '' },
            { value: 2500, name: '员额检察官' },
            { value: 1500, name: '员额法官' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      echartObj4:{
        tooltip: {
          trigger: 'axis',
          position: 'inside',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          extraCssText: 'width:160px;height:auto;'
        },
        legend: {
          top: '10',
          right: '20',
          data: [{ name: '市平均数', icon: 'line', }],
          itemWidth: 10, //图例的宽度
          textStyle: {
            color: '#fff' //图例字体颜色
          },
        },
        grid: {
          top: '30',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02'],
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: { //
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#355184',
              width: 1
            }
          },
        }],
        series: [{
          name: '市平均数',
          type: 'line',
          stack: '总量',
          lineStyle: {
            normal: {
              color: '#57c9fc' //修改折线颜色
            }
          },
          areaStyle: {
            normal: {
              color: '#57c9fc' //修改折线下面区域颜色
            }
          },
          symbol: 'none', //取消折点圆圈
          data: [120, 132, 101, 134, 90, 230, 210]
        }, ]
      },
      echartObj5:{
        color: ['#f35a6c', '#23a78c'], //图例颜色
        tooltip: {
          trigger: 'axis',
          position: 'inside',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          extraCssText: 'width:160px;height:auto;'
        },
        legend: {
          top: '10',
          right: '20',
          data: [
            { name: '刑事案件', icon: 'line', },
            { name: '治安案件', icon: 'line', },
          ],
          itemWidth: 20, //图例的宽度
          textStyle: {
            color: '#fff' //图例字体颜色
          },
        },
        grid: {
          top: '30',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02'],
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: { //
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#355184',
              width: 1
            }
          },
        }],
        series: [{
            name: '刑事案件',
            type: 'line',
            stack: '总量',
            symbol: 'none', //取消折点圆圈
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '治安案件',
            type: 'line',
            stack: '总量',
            symbol: 'none', //取消折点圆圈
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
        ]
      },
      echartObj6:{
        tooltip: {
          trigger: 'axis',
          position: 'inside',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          extraCssText: 'width:160px;height:auto;'
        },
        grid: {
          top: '20',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: ['组党结社', '维权', '公益', '民族宗教', '网格组织', '其他'],
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: { //
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: { //轴线修改
            lineStyle: {
              color: '#2dd4fc', // 颜色
              width: 2 // 粗细
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#2dd4fc'
            }
          }
        }],
        series: [{
          name: '市平均数',
          type: 'bar',
          stack: '总量',
          barWidth: 30, // 柱图宽度
          barMaxWidth: 30, // 最大宽度
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              },
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#0f99bd' },
                  { offset: 1, color: '#013ec5' },
                ]
              )
            },
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        }, ]
      },
      echartObj7:{
        tooltip: {
          trigger: 'item',
          // backgroundColor:"#4169E1",//提示标签背景颜色
          // textStyle:{color:"#fff"}, //提示标签字体颜色
          formatter: function(val) {
            return val.data.name + '<br>人口数量: ' + val.data.value + '万'
          }
        },
        visualMap: {
          type: 'continuous',
          show: false,
          // show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
          // 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
          // min: 0,
          // max: 400, 
          textStyle: {
            fontSize: 14,
            color: '#fff'
          },
          realtime: false,
          calculable: true,
          inRange: {
            // color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] 
            color: ['#3aa8bc', '#decc61', '#f96858', ]
          }
        },
        series: [{
          type: 'map',
          // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
          map: '北京',
          zoom: 1.1,
          selectedmode: "single",
          boxDepth: 90,
          regionHeight: 8,
          // 地图类型
          mapType: 'province',
          // 是否开启鼠标缩放和平移漫游 默认不开启 
          // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
          roam: false,
          // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          top: 20,
          // 图形上的文本标签
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: { color: "#fff" } //省份标签字体颜色
            },
            emphasis: { //对应的鼠标悬浮效果
              show: true,
              textStyle: { color: "#fff" }
            }
          },
          // 地图区域的多边形 图形样式
          itemStyle: {
            // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
            areaColor: '#7B68EE',
            // 描边线宽 为 0 时无描边
            borderWidth: 0.5,
            // 图形的描边颜色 支持的颜色格式同 color
            borderColor: '#000',
            // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
            borderType: 'solid',
            normal: {
              borderWidth: .5, //区域边框宽度
              borderColor: '#fff', //区域边框颜色
              areaColor: "#DCDCDC", //区域颜色
              label: { show: true } // 默认显示地名
            },
            emphasis: { // 高亮状态
              borderWidth: .10,
              borderColor: '#4b0082',
              areaColor: "#f00",
              label: { show: true }
            }
          },
          // 高亮状态
          emphasis: {
            // 文本标签
            label: {
              // 是否显示标签
              show: true,
              // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
              color: '#fff'
            },
            // 图形样式
            itemStyle: {
              // 地图区域的颜色
              areaColor: '#FF6347'
            }
          },
          // 地图系列中的数据内容数组，数组项可以为单个数值
          data: [
            { name: '延庆区', value: 31.4, lng: 115.981186, lat: 40.462706 },
            { name: '怀柔区', value: 38.4, lng: 116.63853, lat: 40.322563 },
            { name: '密云区', value: 47.9, lng: 116.849551, lat: 40.382999 },
            { name: '昌平区', value: 196.3, lng: 116.237832, lat: 40.226854 },
            { name: '顺义区', value: 102, lng: 116.663242, lat: 40.1362 },
            { name: '平谷区', value: 42.3, lng: 117.128025, lat: 40.147115 },
            { name: '门头沟区', value: 30.8, lng: 116.108179, lat: 39.94648 },
            { name: '海淀区', value: 369.4, lng: 116.304872, lat: 39.96553 },
            { name: '石景山区', value: 65.2, lng: 116.229612, lat: 39.912017 },
            { name: '西城区', value: 129.8, lng: 116.372397, lat: 39.918561 },
            { name: '东城区', value: 90.5, lng: 116.42272, lat: 39.934579 },
            { name: '朝阳区', value: 395.5, lng: 116.449767, lat: 39.927254 },
            { name: '通州区', value: 137.8, lng: 116.662928, lat: 39.917001 },
            { name: '大兴区', value: 156.2, lng: 116.348053, lat: 39.732833 },
            { name: '房山区', value: 104.6, lng: 116.149892, lat: 39.755039 },
            { name: '丰台区', value: 232.4, lng: 116.293105, lat: 39.865042 }
          ]
        }]
      },
    }
  },
  props: {
    // config:{}
  },
  components: {
    Nav,
    Echarts,
  },
  mounted: function() {
    this.getTime();
    this.echartsS();
  },
  methods: {
    getTime: function() {
      setInterval(()=> {
        this.time = toDateString(new Date(), 'yyyy年MM月dd日 HH:mm:ss')
      }, 1000)
      var toDateString = function(e, t) {
        var digit = function(e, t) {
          var i = "";
          e = String(e), t = t || 2;
          for (var n = e.length; n < t; n++) i += "0";
          return e < Math.pow(10, t) ? i + (0 | e) : e
        }
        var n = new Date(e || new Date),
          a = [digit(n.getFullYear(), 4), digit(n.getMonth() + 1), digit(n.getDate())],
          o = [digit(n.getHours()), digit(n.getMinutes()), digit(n.getSeconds())];
        return t = t || "yyyy-MM-dd HH:mm:ss", t.replace(/yyyy/g, a[0]).replace(/MM/g, a[1]).replace(/dd/g, a[2]).replace(/HH/g, o[0]).replace(/mm/g, o[1]).replace(/ss/g, o[2])
      }
    },
    echartsS:function(){
      // console.log(Style);
      // console.log(getStyle)
      setTimeout(()=>{
        this.digitalFlop = {
          number: [88.5],
          toFixed: 2,
          content: '{nt}',
          style: {
            fontSize: 40,
          }
        }
      },1000)
    }
  }
}
</script>
<style scoped lang="less">
.app,
#app {
  background: url(../assets/img/body.jpg) no-repeat;
  background-size: 100% 100%;
  min-height: 100%;
  color: #2dd4fc;

  display: flex;
  flex-direction: column;
}

.v-enter,
.v-leave-to{
  opacity: 0;
  transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active{
  transition: all 0.5s ease;
  // animation: bounce-in 1.5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.header {
  // background: url(../assets/img/head.png) no-repeat;
  height: 76px;
  position: relative;
  color: #fff;

  display: flex;
  justify-content: space-between;
  .header-left-decoration,
  .header-center-decoration,
  .header-right-decoration{
    width: 20%;
  }
  .header-center-decoration{
    width: 50%;
  }
  h1.title{
    position: absolute;
    top: 8px;
    width: 100%;
    font-size: 26px;
    text-align: center;
  }
  .nav {
    cursor: pointer;
    position: absolute;
    top: 46px;
    left: 0;
    width: 90px;
    height: 40px;
    padding: 0 0 0 40px;
    box-sizing: border-box;
    line-height: 40px;
    border: 1px solid #15659c;
    border-left: 0;
    background: #081562;
    border-radius: 0 40px 40px 0;
    font-size: 16px;
    color: #fff;
    img {
      position: absolute;
      top: 12px;
      left: 14px;
    }
  }
  .time {
    position: absolute;
    right: 20px;
    bottom: 5px;
  }
}

.main {
  display: flex;
  flex: 1;
  .left,
  .right {
    display: flex;
    flex-direction: column;
    // width: 560px;
    width: 30%;
    padding: 0 14px;
    overflow: hidden;
    .title {
      font-size: 14px;
      color: #2dd4fc;
      padding-left: 18px;
      height: 24px;
      line-height: 24px;
      background: url(../assets/img/title.png) no-repeat;
      margin-bottom: 5px;

      a {
        color: #d5d8de;
        font-size: 8px;
        float: right;
      }
    }
  }
  .left{
    ul{
      flex: 1;
      li{
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        height: 50%;
      }
      &>li:nth-child(1){
        padding-bottom: 10px;
      }
    }
  }
  .right {
    &>ul{
      flex: 1;
      &>li{
        box-sizing: border-box;
        height: 33.33%;
        position: relative;
      }
    }
  }



  .middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    h1 {
      .digitalFlop{
        display: inline-block;
        width: 110px;
        height: 38px;
        position: absolute;
        font-weight: 600;
        font-size: 32px;
      }
      text-align: center;
      font-size: 16px;
      line-height: 38px;
      height: 38px;
      span.number {
        font-size: 0;
        color: #a0f5ff;
        font-weight: 600;
        i {
          font-size: 32px;
          display: inline-block;
          width: 28px;
          height: 38px;
          background: url(../assets/img/sy_04.png) no-repeat;
          margin-right: 8px;
        }
      }
      .number2 {
        padding-left: 110px;
        color: #fff;
        font-size: 14px;
        position: relative;
        &:after {
          content: "";
          display: block;
          width: 15px;
          height: 18px;
          position: absolute;
          top: 0;
          right: -18px;
        }
      }
      &.up {
        .number2:after {
          background: url(../assets/img/up.png) no-repeat;
        }
      }
      &.down {
        .number2:after {
          background: url(../assets/img/down.png) no-repeat;
        }
      }
    }

    .shwdzs {
      border-top: 1px dashed #15659c;
      border-bottom: 1px dashed #15659c;

      li {
        border-bottom: 1px dashed #15659c;

        display: flex;
        flex-wrap: wrap;
        background: rgba(33, 193, 255, 0.1);

        div {
          width: 50%;
          height: 26px;
          line-height: 26px;
          padding: 0 16px;
          box-sizing: border-box;
        }
      }
    }


    .table {
      // background: url(../assets/img/sy_03.png) no-repeat;
      // background-size: 100% 100%;
      height: 100%;
      display: flex;
      padding: 8px 13px;
      font-size: 8px;
      height: 184px;
      box-sizing: border-box;
      ul {
        width: 50%;
        height: 100%;
        li {
          // height: 18px;
          height: 16.66%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          border-top: 2px solid #153672;
          background: #1d6fb2;
          position: relative;
          span,
          i {
            padding: 0 5px;
            display: table-cell;
            vertical-align: middle;
          }
          span {
            width: 88px;
          }
          i {
            background: #195599;
            color: #dfd071;
            // flex: 1;
            // line-height: 18px;
            border-left: 2px solid #153672;
            // height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 90px;
            right: 0;
          }

          &:nth-child(1) {
            border-top: 0;
          }
        }
      }

      .table1 {
        padding-right: 3px;
      }

      .table2 {
        padding-left: 3px;
      }
    }
  }

  // 政法大数据中心
  .bigData {
    // background: url(../assets/img/sy_03.png) no-repeat;
    // background-size: 100% 100%;
    
    margin-bottom: 14px;
    color: #d5d6d8;

    &>div {
      display: flex;
      justify-content: space-between;

      &>div {
        // min-width: 100px;
        min-width: 66px;
        background: url(../assets/img/sy_01.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 5px;
        padding: 16px 6px 8px 6px;

        p {
          font-size: 8px;

          span {
            font-size: 24px;
          }
        }
      }

      &>div:nth-child(1) {
        padding-left: 20px;
        flex: 1;
      }

      &>div:nth-child(3) {
        margin-right: 0;
      }
    }

    &>ul {
      display: flex;
      justify-content: space-between;
      background: url(../assets/img/sy_01.png) no-repeat;
      background-size: 100% 100%;
      padding: 12px;
      padding-left: 20px;
      margin-top: 3px;

      p {
        font-size: 8px;

        span {
          font-size: 24px;
        }
      }
    }
  }

  // 日常办公
  .dailyOffice {
    background-size: 100% 100%;
    color: #d5d6d8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 8px 20px;
    padding-top: 60px;
    li {
      width: 33%;
      display: flex;
      margin-bottom: 3px;
      img {
        margin-right: 3px;
        width: 30px;
        // height: 30px;
        // width: 100%;
        // height: 100%;
      }
      p {
        font-size: 8px;
        line-height: 1em;
        span {
          padding-top: 5px;
          line-height: 1.4em;
          font-size: 16px;
        }
      }
    }
  }
}


.zsj {
  color: #57c9fc;
}

.jrsj {
  color: #e9d76e;
}

.jrwj {
  color: #f89c40;
}

.jrsjb {
  color: #2ae29e;
}

.wnsjy {
  color: #57c9fc;
}

.wbsjy {
  color: #5bf0f0;
}

.fwqjd {
  color: #f35a6c;
}

.echarts{
  // background: url(../assets/img/sy_03.png) no-repeat;
  // background-size: 100% 100%;
  height: 100%;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0px;
    left: 0;
}
.echarts23 {
  display: flex;
  .echarts2,
  .echarts3{
    width: 49%;
    display: inline-block;
    height: 100%;
  }
}
/* 标题 */
.bigData,
.echarts1,
.dailyOffice,
.echarts4,
.echarts5,
.echarts6{
  padding-top: 34px;
  box-sizing: border-box;
}
.dv-border-svg-container .dv-border-box-11-title {
    font-weight: 700;
    fill: #8cacf9;
}
</style>