<template>
  <div> 
    <div>
      <div class="item1">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span style="letter-spacing :3px;color:#cddbe4">基本信息</span>
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
      </div>
  </div>
    <div class="left-top" style="margin-top: 40px;width: 430px;margin-left: 10px;display: flex;justify-content: space-around;">
      <div style="width: 40%;text-align: center;color: #339CC9;">
        <div class="div-p">从业人员数</div>
        <span style="font-family: 'arialbd';font-size: 35px;background-image:-webkit-linear-gradient(bottom,#f0c41b,#e4dbb7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;  ">{{datanow.congyeNum}}</span>
      </div>
      <div style="width: 40%;text-align: center;color: #339CC9;">
        <div class="div-p">管道长度(m)</div>
        <span style="font-family: 'arialbd';font-size: 35px;background-image:-webkit-linear-gradient(bottom,#f86742,#f0c41b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;  ">{{datanow.guandaoNum}}</span>
      </div>
    </div>
    
    <div>
      <div class="item1" style="margin-top: 30px;">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span style="letter-spacing :3px;color:#cddbe4">安全监管</span>
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
      </div>
  </div>
  <div id="main1" style="width: 100%;height: 280px;"></div>
    <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;">
      <div>
        <div class="item1">
          <span class="dot">
            <span class="dot-inner"></span>
          </span>
          <span style="letter-spacing :3px;color:#cddbe4">任务完成率</span>
          <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
          <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
          <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
        </div>
      </div>
      <!-- <div id="myCharttwo" :style="{width: '450px', height: '270px'}"></div>
      <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 15px;">
        ● 已完成数量:{{datanow.renwu[1]}}
      </div>
      <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 15px;color: #0099ff">
        ● 未成数量:{{datanow.renwu[0]}}
      </div> -->
      <div class="div-el">
        <div class="el-left">入户安检</div>
        <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="63"></el-progress>
      </div>
      <div class="div-el">
        <div class="el-left">巡查</div>
        <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="50" status="success"></el-progress>
      </div>
      <div class="div-el">
        <div class="el-left">报警巡查</div>
        <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="80" status="warning"></el-progress>
      </div>
      <div class="div-el">
        <div class="el-left">其他</div>
        <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  export default {
    data () {
    　　return {
          dataAll:{
              congyeNum:1544,
              guandaoNum:3658495,
              shigu1:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290],
              shigu2:[452, 786, 456, 732, 458, 165, 198,489, 158, 358, 345, 675],
              shigu3:[ 932, 901, 198,489, 158, 358, 345, 675,  901, 934, 1290, 888],
              renwu:[50,92],
              renwuzong:142
          },
          dataone:{
              congyeNum:521,
              guandaoNum:1254848,
              shigu1:[223, 44, 332, 321, 458, 456, 653,122, 345, 133, 421, 123],
              shigu2:[123, 234, 456, 567, 235, 12,89, 158, 158, 145, 175,224],
              shigu3:[ 432, 301, 108,189, 18, 158, 145, 175,  401, 334, 590, 388],
              renwu:[4,27],
              renwuzong:31
          },
          datatwo:{
              congyeNum:488,
              guandaoNum:1244495,
              shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
              shigu2:[432, 301, 456, 567, 235, 12, 145, 175,  401, 334, 590, 388],
              shigu3:[ 123, 234, 108,189, 18, 158, 123, 234, 456, 567, 235, 12],
              renwu:[8,25],
              renwuzong:33
          },
          datathree:{
              congyeNum:535,
              guandaoNum:1189492,
              shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
              shigu2:[432, 301, 456, 567, 456, 653,122, 175,  401, 334, 590, 388],
              shigu3:[ 334, 590, 388, 133, 456, 123, 234, 653,122, 345, 133],
              renwu:[38,40],
              renwuzong:78
          },
          datanow:{
              renwu:[0,0]
          }
      };
    　},
     mounted(){
        this.datanow = this.dataAll;
        this.drawLine(this.datanow);
        this.initdata(this.datanow);
      },
    methods: {
        choice(index){
            console.log("-----"+index)
            if(index==0){
                this.datanow = this.dataAll;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }else
            if(index==1){
                this.datanow = this.dataone;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }else if(index==2){
                this.datanow = this.datatwo;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }else if(index==3){
                this.datanow = this.datathree;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }
        },
      drawLine(data){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main1'))
                // 绘制图表
                myChart.setOption({
                    legend: {
                        top:20,
                        textStyle:{
                            color:"#cddbe4"
                        },
                    },
                    
                    grid: {  
                            left: '5%',  
                            right: '7%',  
                            bottom: '4%', 
                            containLabel: true  
                        },
                    xAxis: {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#bbb6b6',
                            },
                        },
                        axisTick: {           //去掉坐标轴刻线
                            show: false
                        },
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12']
                    },
                    yAxis: {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#bbb6b6'
                            },
                        },
                        splitLine: {
                            show:true,
                            lineStyle:{
                                type:"dashed",
                                color:"#bbb6b6"
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:"事故数量",
                            data: data.shigu1,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                    // 渐变填充色（线条下半部分）
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#5470c6" },
                                        { offset: 1, color: "#5470c600" }
                                    ])
                                }
                            }
                        },
                        {
                            data: data.shigu2,
                            type: 'line',
                            smooth: true,
                            name:"隐患整治数",
                            areaStyle: {
                                normal: {
                                    // 渐变填充色（线条下半部分）
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#91cc75" },
                                        { offset: 1, color: "#91cc7500" }
                                    ])
                                }
                            }
                        },
                        {
                            data: data.shigu3,
                            type: 'line',
                            smooth: true,
                            name:"预警数量",
                            areaStyle: {
                                normal: {
                                    // 渐变填充色（线条下半部分）
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#e7bc5e" },
                                        { offset: 1, color: "#e7bc5e00" }
                                    ])
                                }
                            }
                        }
                    ]
                });
            },
      initdata(data){
          // 基于准备好的dom，初始化echarts实例
          //console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
          let myChart2 = this.$echarts.init(document.getElementById('myCharttwo'))
          // 绘制图表
          myChart2.setOption({
              title: {
                  text: '任务总数量:'+data.renwuzong,
                  left: 'center',
                  top :20,
                  textStyle:{
                      color: "#00ffff"
                  }
              },
            tooltip: {
              trigger: 'item',
            },
            series: [
              {
                name: '任务概况',
                type: 'pie',
                radius: '60%',
                center: ['50%','58%'],
                data: [
                  { 
                    value: data.renwu[0],
                    name: '未完成',
                    itemStyle: { color: '#09f' }
                },
                  { 
                    value: data.renwu[1],
                      name: '已完成' ,
                    itemStyle: { color: '#00ffff' }
                  },
                ],
                labelLine:{
                        length:20,
                        length2:50,
                    },
                  label:{
                    color:'#fff',
                      fontSize: 14,
                      // formatter:"{b}\n\n",
                      // padding:[0,-55],
                      normal: {
                        show: true,
                        position: 'outer',
                        // formatter: '{d}%, {c} \n\n',
                        //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
                        formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
                        // formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
                        borderWidth: 20,
                        borderRadius: 4,
                        padding: [0, -55],
                        rich: {
                            a_set: {
                                color: "#fff",
                                lineHeight: 20,
                                align: "center",
                                padding: [55, -40, -15, -40],
                            },
                            b_set:{
                                color: "auto",
                            },
                        }
                      }
                  },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
      },




    }
  }
</script>

<style lang="scss" scoped>
  
/* @font-face {
  font-family: 'arialbd';
} */
.item1{
    width: 95%;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 10px;
    font-weight: 700;
    font-style: italic;
    margin-left: 10px;
    background-image: linear-gradient(to left, #112238, rgb(49 151 195 / 70%) 50%, #112238);
}
.dot {
        display: inline-block;
        position: relative;
        width: 10px;
        height: 10px;
        background: rgb(30, 185, 190);
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 2px;
    }

    .dot-inner {
        background: #44d7dc;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-animation: vabDot 1.2s ease-in-out infinite;
        animation: vabDot 1.2s ease-in-out infinite;
    }

    @-webkit-keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }

    @keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }
.div-p{
  width: 60%;
  height: 35px;
  line-height: 35px;
  margin-left: 20%;
  margin-bottom: 20px;
  background: url('../../assets/mapImages/div-p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.div-el{
  margin-top: 30px;
  width: 100%;
  height: 18px;
}
.el-left{
  color: #96a4ad;
  width: 20%;
  height: 100%;
  float: left;
  font-size: 14px;
  text-align: right;
}
::v-deep .el-progress {
  width: 65%;float: left;
  margin-left: 25px;
}
::v-deep .el-progress-bar__outer {
    height: 6px;
    border-radius: 0px;
    background-color: #1e506e80;
    background: linear-gradient(to left,#123456,#112238);
}
::v-deep .el-progress-bar__inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    /* background-color: #198EF0; */
    background: linear-gradient(to left,#198EF0,#112238);
    text-align: right;
    border-radius: 0px 5px 5px 0px;
    line-height: 1;
    white-space: nowrap;
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
::v-deep .el-progress.is-success .el-progress-bar__inner {
    /* background-color: #00FFFF; */
    background: linear-gradient(to left,#00FFFF,#112238);
}
::v-deep .el-progress.is-warning .el-progress-bar__inner {
    background-color: #198EF0;
    background: linear-gradient(to left,#198EF0,#112238);
}
::v-deep .el-progress.is-exception .el-progress-bar__inner {
    /* background-color: #00FFFF; */
    background: linear-gradient(to left,#00FFFF,#112238);
}
::v-deep .el-progress-bar__innerText {
    color: #1e516f;
}
</style>