<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: 330px;padding: 20px 0 0 0;">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main2" style="width:450px;height:310px;"></div>
        </div>
      </dv-border-box-12>
        <div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 20px;">
          <div style="width: 100%;height: 38px;text-align: left;font-size: 16px; line-height: 38px;color: #fff;font-weight: 900;background: #013056;opacity: 0.8;"><span style="margin-left: 10px;">预警信息</span></div>
          <el-table :data="$data.tableData" stripe 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 id="pie3" style="width:450px;height: 350px;margin-left: 20px;margin-top: 35px;">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="main3" style="width:450px;height:330px;"></div>
        </div>
    </div>
    
    
</template>

<script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core';
import {BarChart, PieChart, LineChart} 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,
    LineChart,
    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.inPieChart();
  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({
					yAxis: {
						data: getData2,
					},
					series:[{
						data: getData1,
					}]
				})
		    }
		});
		// 绘制图表
		myChart2.setOption({
		    title: {
		        text: '企业危险源数量统计',//主标题
				color: '#fff',
		        // subtext: '柱状图',
				textStyle: {
                color: "#fff",
              }
		    },
		    tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
		    legend: {
		        data:['危险源'],
				textStyle: { //图例文字的样式
                            color: '#fff',
                        }
        },
        grid: {
          bottom:'7%',
          left: 80,
        },
		    xAxis: {
          type: 'value',
          axisLabel: {  
            show:true,
            interval:0,  
            rotate:40  
          } ,
          //X轴白线
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(71, 126, 171, 1)',
              type: 'dashed'
            },
          },
				data: [],
		   },
		    yAxis: {
            type: 'category',
            inverse: true, //倒叙
            axisLabel:{
              show: true,
              formatter:function(value){
                  var texts=value;
                  if(texts.length>5){ // 具体多少字就看自己了
                      texts=texts.substr(0,5)+'...';
                  }
                  return texts;
              },
              rich: {
                flag: {
                  fontSize: 25,
                  padding: 5
                }
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
            },
        },
		    series: [{
		        name: '危险源',
				type: 'bar',
		        // data: [5, 20, 36, 10, 10, 20],
				data: [],
		    }],
		    textStyle: {
                color: "#fff",
                fontSize: 18
            },
		});
	},
  inPieChart(){
		// 基于准备好的dom，初始化echarts实例
		var myChart3 = echarts.init(document.getElementById('main3'));
		// 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({
		// 			yAxis: {
		// 				data: getData2,
		// 			},
		// 			series:[{
		// 				data: getData1,
		// 			}]
		// 		})
		//     }
		// });
		// 绘制图表
		myChart3.setOption({
        title: {
		        text: '隐患和风险控制',//主标题
				color: '#fff',
		        // subtext: '柱状图',
				textStyle: {
                color: "#fff",
              }
		    },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['隐患', '风险控制'],
          textStyle: { //图例文字的样式
                            color: '#fff',
                        }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  
            show:true,
            interval:0,  
            rotate:40  
          } ,
          //X轴白线
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
            },
          },
            data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
            axisPointer: {
              type: 'shadow'
            }
            
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel:{
              show: true,
              rich: {
                flag: {
                  fontSize: 25,
                  padding: 5
                }
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
            },
            splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(71, 126, 171, 1)',
              type: 'dashed'
            },
          },
          },
          {
            type: 'value',
            interval: 5,
          }
        ],
        series: [
          {
            name: '隐患',
            type: 'bar',
            data: [
              400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
            ]
          },
          {
            name: '风险控制',
            type: 'line',
            // symbol:'circle',
            symbolSize:6,
            data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500],
            itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色
								lineStyle:{color:'#00D7FE'} //改变折线颜色
								},
							},
          }
        ]
      })
	}
  }
}
</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 {
      height: 160px;
      border: 0px solid !important;
      background-color: rgb(0, 0, 0,0);
    }
    
body .el-table::before {
    z-index: inherit;
    height: 0px;
}
body .el-table::after {
    width: 0px ;
}
body.el-table::before {
    height: 0px;
}
body.el-table--border {
    border: 0px !important;
}
</style>