<template style="">
    
    <div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;">
      <!-- <dv-border-box-1> -->
        <div class="pie-div">
            <div style="width:100%;height: 30px;text-align: center;">
                <span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span>
            </div>
            <div style="width: 50%;height: 180px;float: left;text-align: center;"> 
              <div class="qiyezc">
                <img src="@/assets/mark/qiyezc.png" alt="" style="width: 180px;height: 180px;">
                <div style="position: absolute;width: 100%; height: 100%;top: 0;text-align: center;color: #fff;font-size: 1.2rem;font-weight: 500;">
                  <p>注册数量</p>
                  <span id="span1" style="font-size: 1.5rem;">{{$data.enterpriseRegNum}}个</span>
                </div>
                  
              </div>
                
            </div>
            <div style="width: 50%;height: 180px;float: right;text-align: center;">
              <div class="qiyesh">
                  <img src="@/assets/mark/qiyesh.png" alt="" style="width: 180px;height: 180px;">
                  <div style="position: absolute;width: 100%; height: 100%;top: 0;text-align: center;color: #fff;font-size: 1.2rem;font-weight: 500;">
                    <p>审核数量</p>
                    <span id="span2" style="font-size: 1.5rem;" >{{$data.enterpriseCheckIngNum}}个</span>
                  </div>
                  
              </div>
                
            </div>
        </div>
      <!-- </dv-border-box-1> -->
      <dv-border-box-12>
        <div id="pie2" style="width:450px;height: 370px;padding: 20px 0 0 0;">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main2" style="width:450px;height:340px;"></div>
        </div>
      </dv-border-box-12>
        <div class="div-table" style="width:480px;height: 380px;margin-top: 20px;">
          <div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div>
          <el-table :data="$data.tableData" stripe height="220" border :header-cell-style="{background:'#02285a',color:'#fff',}">
            <el-table-column prop="unitName" label="企业名称" width="110"></el-table-column>
            <el-table-column prop="alarmInfo" label="预警信息" width="110">
              <template slot-scope="scope">
                <font class="dg">{{scope.row.alarmInfo}}</font>
              </template>
            </el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="100"></el-table-column>
            <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
          </el-table>
        </div>
    </div>
    
    
</template>

<script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
import dataV from '@jiaminghi/data-view';

Vue.use(dataV);
echarts.use(
  [
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    PieChart,
    LegendComponent,
    DatasetComponent,
    CanvasRenderer
  ]
);
// let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
// require('echarts/lib/chart/pie')
// 引入提示框和title组件
// require('echarts/lib/component/legend')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
import METHOD from "@/utils/methods";

import VueEllipseProgress from 'vue-ellipse-progress';
// Vue.prototype.$echarts = echarts;
Vue.use(VueEllipseProgress);

export default {
  data(){
    return{
      tableData:[],
      enterpriseRegNum:"",
      enterpriseCheckIngNum:""
    }
    
  },
  created(){
    this.getTableData();
  },
  mounted(){
	this.drawPieChart();
  this.getStatiData()
  },
  methods:{
    getTableData() {
      let that = this;
      that.loading = true;
      METHOD.axiosPost(
        that, 
      `/alarmInfo/getAlarmInfoList`,{}, 
      function(res) {
        if (res.code == 0) {
         that.$data.tableData = res.data.pageData;
        }
      });
    },
    getStatiData() {
      let that = this;
      METHOD.axiosPost(
        that,
        `/dataStatistics/managerDataStatistics`,
        { cityId: "", countyId: "", provinceId: "" },
        function (res) {
          if (res.code == 0) {
            that.$data.enterpriseRegNum = res.data.enterpriseRegNum;
            that.$data.enterpriseCheckIngNum = res.data.enterpriseCheckIngNum;
          }
        }
      )
    },
  deleteRow(index, rows) {
      rows.splice(index, 1);
  },
    //初始化数据
	drawPieChart(){
		// 基于准备好的dom，初始化echarts实例
		var myChart2 = echarts.init(document.getElementById('main2'));
		let that=this;
		var getData1 = [];
		var getData2 = [];
		METHOD.axiosGet(
		  this,
		  `/enterpriseGoods/getNumberByEnterprise`,
		  function(res) {
		    if (res.code === 0) {
				//先进行赋值
				for(let i=0; i<res.data.result.length; i++) {
					var obj = new Object();
					var arr = new Object();
					// obj = res.data.result[i].number;
					// arr = res.data.result[i].type;
					obj = res.data.result[i].number;
					arr = res.data.result[i].name;
					getData1[i] = obj;
					getData2[i] = arr;
				}
				myChart2.setOption({
					xAxis: {
						data: getData2,
					},
					series:[{
						data: getData1,
					}]
				})
		    }
		});
		// 绘制图表
		myChart2.setOption({
		    title: {
		        text: '企业危险源数量统计',//主标题
				color: '#fff',
		        // subtext: '柱状图',
				textStyle: {
                color: "#fff",
              }
		    },
		    tooltip: {},
		    legend: {
		        data:['危险源'],
				textStyle: { //图例文字的样式
                            color: '#fff',
                        }
		    },
		    xAxis: {
				axisLabel: {  
				   interval:0,  
				   rotate:40  
				} ,
				data: [],
		   },
		    yAxis: {},
		    series: [{
		        name: '危险源',
				type: 'bar',
		        // data: [5, 20, 36, 10, 10, 20],
				data: [],
		    }],
		    textStyle: {
                color: "#fff",
                fontSize: 18
            },
		});
	}
  }
}
</script>
<style>
.pie-div{
        width: 100%;
        height: 210px;
    }
  .qiyezc{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .qiyesh{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .pie-div p{
    margin-top: 55px;
  }
  .pie #pie2 {
    /* border: 1px #000000 solid; */
    margin-left: 20px;
    margin-top: 30px !important;
}
	.el-main .el-tabs .el-tabs__content{
		/* height: 100%; */
		padding: 0px !important;
	}
    .pie .div-table .el-table tr >td {
      background-color: #0b356d !important;
      color: #fff;
      border: 1px solid #2e6099;
      height: 50px;
      padding: 4px 0 !important;
    }
    .pie .div-table .el-table tr >th {
      border: 1px solid #2e6099;
    }
    .pie .div-table .el-table tr:hover >td {
      background-color: #2c5794 !important;
    }
    .pie .div-table .el-table--border, .el-table--group {
      border: 1px solid #2e6099 !important;
    }
</style>