<template>

    <div style="height: 100%">
        <div>
            <div class="item1" style="margin-top: 60px;">
              <span class="dot">
                <span class="dot-inner"></span>
              </span>
              <span>用户安全监控设备</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="divfen" style="width: 100%;height: 30%;">
            <div class ="divall" style="width: 50%">
                <div class="titleTex">属地巡查</div>
                <div class="titleTex divfen" style="height: 50px;margin-top: 0px">
                    <div class="numdiv">{{datanow.xunchaAllOne1}}</div>
                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne2}}</div>
                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne3}}</div>
                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllOne4}}</div>
                </div>
                <div id="main21" style="height: 50%;width: 100%"></div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
                    ● 巡查次数:{{datanow.xunoneevery1}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #f0c41b">
                    ● 发现问题数:{{datanow.xunoneevery2}}
                </div>
            </div>
            <div style="width:14px;height: 100%;color: white;font-size: 13px;margin-top: 150px;">
                <div style="width: 100%;height: 10px;background: #188df0"></div>
                已整改
                <div style="width: 100%;height: 10px;background: #f0c41b;margin-top: 15px;"></div>
                未整改
            </div>
            <div class="divall" style="width: 50%" >
                <div class="titleTex">行业检查</div>
                <div class="titleTex divfen" style="height: 50px;margin-top: 0px">
                    <div class="numdiv">{{datanow.xunchaAllTwo1}}</div>
                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo2}}</div>
                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo3}}</div>
                    <div class="numdiv" style="margin-left: 5px">{{datanow.xunchaAllTwo4}}</div>
                </div>
                <div id="main22" style="height: 50%;width: 100%"></div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
                    ● 巡查次数：{{datanow.xuntwoevery1}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #f0c41b">
                    ● 发现问题数：{{datanow.xuntwoevery2}}
                </div>
            </div>
        </div>
        <div class="echarts-one" style="margin-top: 10px;width: 430px;margin-left: 10px;">
            <div>
              <div class="item1">
                <span class="dot">
                  <span class="dot-inner"></span>
                </span>
                <span>资源统计</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="myChartone" :style="{width: '420px', height: '250px'}"></div>
          </div>
        <div>
            <div class="item1">
              <span class="dot">
                <span class="dot-inner"></span>
              </span>
              <span>投诉统计</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="divfen" style="width: 100%;height: 280px;margin-top: 10px">
            <div style="width: 50%;height: 100%">
                <div id="main31" style="width: 100%;height: 66%"></div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;">
                    ● 已处理：{{datanow.tousuevery1}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ff4040">
                    ● 未处理：{{datanow.tousuevery2}}
                </div>
            </div>
            <div style="width: 50%;height: 100%">
                <div id="main32" style="width: 100%;height: 66%"></div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #0000ff">
                    ● 在线数量：{{datanow.deviceevery1}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ffff00">
                    ● 离线数量：{{datanow.deviceevery2}}
                </div>
                <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 10px;color: #ff4040">
                    ● 报警数量：{{datanow.deviceevery3}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入基本模板
    import * as echarts from 'echarts';
    export default {
        data () {
            return {
                dataall:{
                    xunchaAllOne1: 1,
                    xunchaAllOne2: 3,
                    xunchaAllOne3: 8,
                    xunchaAllOne4: 3,
                    xunchaAllTwo1: 2,
                    xunchaAllTwo2: 2,
                    xunchaAllTwo3: 2,
                    xunchaAllTwo4: 6,
                    xunList1:[
                        { value: 678,name: '30.4%' },
                        { value: 1548,name: '69.6%' }
                    ],
                    xunList11:[
                        { value: 1048 },
                        { value: 335}
                    ],
                    xunoneevery1:1048,
                    xunoneevery2:355,
                    xunList2:[
                        { value: 678,name: '28.5%' },
                        { value: 1548,name: '71.5%' }
                    ],
                    xunList22:[
                        { value: 1048 },
                        { value: 335}
                    ],
                    xuntwoevery1:1674,
                    xuntwoevery2:552,
                    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],
                    tousu:[{ value: 1048, name: '已处理' },
                        { value: 255, name: '未处理' }
                    ],
                    tousuNum:1303,
                    tousuevery1:1048,
                    tousuevery2:255,
                    divice:[
                        { value: 31, name: '在线数量' },
                        { value: 19, name: '离线数量' },
                        { value: 1, name: '报警数量' }
                    ],
                    deviceNum:51,
                    deviceevery1:31,
                    deviceevery2:19,
                    deviceevery3:1,
                    zhuzhuang:[16,13,27,2]
                },
                dataone:{
                    xunchaAllOne1: 0,
                    xunchaAllOne2: 3,
                    xunchaAllOne3: 8,
                    xunchaAllOne4: 3,
                    xunchaAllTwo1: 0,
                    xunchaAllTwo2: 7,
                    xunchaAllTwo3: 2,
                    xunchaAllTwo4: 6,
                    xunList1:[
                        { value: 224,name: '32.3%' },
                        { value: 641,name: '67.7%' }
                    ],
                    xunList11:[
                        { value: 338 },
                        { value: 112}
                    ],
                    xunoneevery1:335,
                    xunoneevery2:141,
                    xunList2:[
                        { value: 224,name: '29.1%' },
                        { value: 544,name: '78.9%' }
                    ],
                    xunList22:[
                        { value: 354 },
                        { value: 111}
                    ],
                    xuntwoevery1:511,
                    xuntwoevery2:199,
                    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],
                    tousu:[{ value: 322, name: '已处理' },
                        { value: 181, name: '未处理' }
                    ],
                    tousuNum:503,
                    tousuevery1:322,
                    tousuevery2:181,
                    divice:[
                        { value: 11, name: '在线数量' },
                        { value: 8, name: '离线数量' },
                        { value: 1, name: '报警数量' }
                    ],
                    deviceNum:21,
                    deviceevery1:11,
                    deviceevery2:8,
                    deviceevery3:1,
                    zhuzhuang:[8,3,11,1]
                },
                datatwo:{
                    xunchaAllOne1: 0,
                    xunchaAllOne2: 4,
                    xunchaAllOne3: 2,
                    xunchaAllOne4: 1,
                    xunchaAllTwo1: 0,
                    xunchaAllTwo2: 6,
                    xunchaAllTwo3: 7,
                    xunchaAllTwo4: 5,
                    xunList1:[
                        { value: 224,name: '30.4%' },
                        { value: 400,name: '69.6%' }
                    ],
                    xunList11:[
                        { value: 212 },
                        { value: 209}
                    ],
                    xunoneevery1:335,
                    xunoneevery2:141,
                    xunList2:[
                        { value: 224,name: '28.5%' },
                        { value: 300,name: '71.5%' }
                    ],
                    xunList22:[
                        { value: 475 },
                        { value: 200}
                    ],
                    xuntwoevery1:475,
                    xuntwoevery2:200,
                    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],
                    tousu:[{ value: 344, name: '已处理' },
                        { value: 121, name: '未处理' }
                    ],
                    tousuNum:322,
                    tousuevery1:211,
                    tousuevery2:111,
                    divice:[
                        { value: 2, name: '在线数量' },
                        { value: 4, name: '离线数量' },
                        { value: 0, name: '报警数量' }
                    ],
                    deviceNum:6,
                    deviceevery1:2,
                    deviceevery2:4,
                    deviceevery3:0,
                    zhuzhuang:[2,5,7,1]
                },
                datathree:{
                    xunchaAllOne1: 0,
                    xunchaAllOne2: 5,
                    xunchaAllOne3: 7,
                    xunchaAllOne4: 9,
                    xunchaAllTwo1: 0,
                    xunchaAllTwo2: 8,
                    xunchaAllTwo3: 8,
                    xunchaAllTwo4: 9,
                    xunList1:[
                        { value: 124,name: '30.4%' },
                        { value: 400,name: '69.6%' }
                    ],
                    xunList11:[
                        { value: 212 },
                        { value: 309}
                    ],
                    xunoneevery1:335,
                    xunoneevery2:141,
                    xunList2:[
                        { value: 224,name: '28.5%' },
                        { value: 300,name: '71.5%' }
                    ],
                    xunList22:[
                        { value: 475 },
                        { value: 200}
                    ],
                    xuntwoevery1:475,
                    xuntwoevery2:200,
                    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],
                    tousu:[{ value: 124, name: '已处理' },
                        { value: 111, name: '未处理' }
                    ],
                    tousuNum:335,
                    tousuevery1:124,
                    tousuevery2:111,
                    divice:[
                        { value: 12, name: '在线数量' },
                        { value: 6, name: '离线数量' },
                        { value: 0, name: '报警数量' }
                    ],
                    deviceNum:24,
                    deviceevery1:12,
                    deviceevery2:6,
                    deviceevery3:0,
                    zhuzhuang:[6,5,9,0]
                },
                datanow:{}
            };
        },
        mounted(){
            this.datanow = this.dataall;
            this.drawLine(this.datanow);
            this.drawLine2(this.datanow);
            this.drawLine3(this.datanow);
        },
        methods: {
            choice(index){
                console.log("===="+index)
                if(index==0){
                    this.datanow = this.dataall;
                    this.drawLine(this.datanow);
                    this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }else
                if(index==1){
                    this.datanow = this.dataone;
                    this.drawLine(this.datanow);
                    this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }else if(index==2){
                    this.datanow = this.datatwo;
                    this.drawLine(this.datanow);
                    this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }else if(index==3){
                    this.datanow = this.datathree;
                    this.drawLine(this.datanow);
                    this.drawLine2(this.datanow);
                    this.drawLine3(this.datanow);
                }
            },
            drawLine(data){
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById('myChartone'))
          // 绘制图表
          myChart1.setOption({
              tooltip: {
                  trigger: "item"
              },
              grid: {
                  top: "15%",
                  left: "8%",
                  right: "12%",
                  bottom: "15%",
                  containLabel: true
              },
              xAxis: {
                  data: ["阀井","调压箱","场站","监控"],
                  type: 'category',
                  // data: category,
                  splitLine: {show: false},
                  axisLine: {
                      show: true,
                      lineStyle:{
                          color: '#bbb6b6'
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  offset: 10,
                  nameTextStyle: {
                      fontSize: 15
                  }
              },
               yAxis: {
                  type: 'value',
                  axisLine: {
                      show: true,
                      lineStyle:{
                          color: '#bbb6b6'
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: true,
                      lineStyle:{
                          type:'dashed',
                          color: '#464646'
                      }
                  }
              },
              series: [
                  {
                      name: "资源数量统计",
                      type: "bar",
                      showSymbol: false,
                      hoverAnimation: false,
                      data: data.zhuzhuang,
                      barWidth: 10, //柱图宽度
                      // barCategoryGap:'60%',
                      itemStyle: { //左面
                      normal: {
                          color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: '#49bbbb' },
                              //   { offset: 0.5, color: '#188df0' },
                              { offset: 1, color: '#188df0' }
                              ]),
                          barBorderRadius:[4,0,0,100],
                      }
                      }
                  },{
                      name:'资源数量统计',
                      tooltip:{
                      show:true
                      },
                      type: 'bar',
                      barWidth:10,
                      // barCategoryGap:'60%',
                      itemStyle:{       //右面
                          normal:{
                              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              { offset: 0, color: '#49bbbb' },
                              //   { offset: 0.5, color: '#188df0' },
                              { offset: 1, color: '#188df0' }
                              ]),
                          borderWidth:0.1,
                          barBorderRadius:[0,5,100,0]
                          }
                      },
                      data: data.zhuzhuang,
                      barGap:0
                  },{
                      name:'b',
                      tooltip:{
                      show:false
                      },
                      type: 'pictorialBar',
                      itemStyle: {  //顶部
                          normal: {
                          color:function(params) {
                          let colorList = ["#48D9F5"];
                          return colorList[0];
                          },
                          borderColor:'#000',
                          borderWidth:0.1,
                          label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: { //数值样式
                              color :'#bbb6b6',
                              fontSize: 14,
                              fontFamily:'微软雅黑',
                          },
                          offset:[0,-2]
                          }
                      }
                      },
                      symbol: 'diamond',
                      symbolSize: ['20.5','13'],
                      symbolOffset:[0,'-38%'],
                      symbolPosition: 'end',
                      data: data.zhuzhuang,
                      z:3
                  },{
                      name:'d',
                      tooltip:{
                      show:false
                      },
                      type: 'pictorialBar',
                      itemStyle: {  //底部
                          normal: {
                          color:function(params) {
                          let colorList = ["#48D9F5"];
                          return colorList[0];
                          },
                          borderColor:'#000',
                          borderWidth:0.1,
                          label: {
                          show: false, //开启显示
                          position: 'top', //在上方显示
                          textStyle: { //数值样式
                              color :'#bbb6b6',
                              fontSize: 14,
                              fontFamily:'微软雅黑',
                          },
                          offset:[0,-2]
                          }
                      }
                      },
                      symbol: 'diamond',
                      symbolSize: ['20.5','17'],
                      symbolOffset:[0,'2.5'],
                      symbolPosition: 'start',
                      data: data.zhuzhuang,
                      z:0
                  }
              ]
          });
      },
            drawLine2(data){
                // 基于准备好的dom，初始化echarts实例
                let myChart2 = echarts.init(document.getElementById('main21'));
                let myChart22 = echarts.init(document.getElementById('main22'));
                // 绘制图表
                myChart2.setOption({
                    // tooltip: {
                    //     trigger: 'item',
                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                    // },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '55%'],
                            label: {
                                position: 'inner',
                                fontSize: 14
                            },
                            labelLine: {
                                show: false
                            },
                            data:data.xunList1,
                            color:['#f0c41b','#188df0']
                        },
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['70%', '80%'],
                            label: {
                                position: 'inner',
                                fontSize: 14
                            },
                            center: ['50%', '50%'],
                            data:data.xunList11,
                            color:['#00ffff','#f0c41b']
                        }
                    ]
                });
                myChart22.setOption({
                    // tooltip: {
                    //     trigger: 'item',
                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                    // },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '55%'],
                            label: {
                                position: 'inner',
                                fontSize: 14
                            },
                            labelLine: {
                                show: false
                            },
                            data: data.xunList2,
                            color:['#f0c41b','#188df0']
                        },
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['70%', '80%'],
                            label: {
                                position: 'inner',
                                fontSize: 14
                            },
                            center: ['50%', '50%'],
                            data:data.xunList22,
                            color:['#00ffff','#f0c41b']
                        }
                    ]
                });
            },
            drawLine3(data){
                // 基于准备好的dom，初始化echarts实例
                let myChart31 = echarts.init(document.getElementById('main31'))
                let myChart32 = echarts.init(document.getElementById('main32'))
                // 绘制图表
                myChart31.setOption({
                    title: {
                        text: '投诉统计:'+data.tousuNum,
                        left: 'center',
                        textStyle: {
                            color: "#0ff"
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '投诉统计',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['50%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data.tousu,
                            color:["#00ffff","#FF4040"]
                        }
                    ]
                });
                myChart32.setOption({
                    title: {
                        text: '设备数量:'+data.deviceNum,
                        left: 'center',
                        textStyle: {
                            color: "#0ff"
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '设备概况',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['50%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:data.divice,
                            color:["#188df0","#ffff00","#FF4040"]
                        }
                    ]
                });
            }
        }
    }
</script>

<style>
.titleTex{
    height: 30px;
    width: 100%;
    color: aqua;
    text-align: center;
    line-height: 30px;
    margin-top: 10px;
}
.divall{
    height: 100%;
    width: 100%;
}
.divfen{
    display:flex;
    justify-content:center;
    align-items:center;
}
.numdiv{
    background: #47aed5;
    color: white;
    width: 27px;
    font-size: 30px;
}
.item1{
    width: 90%;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 10px;
    margin-top: 10px;
    font-weight: 700;
    font-style: italic;
    margin-left: 10px;
    background-image: linear-gradient(to left, #121a22, 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)
        }
    }
</style>
