<template>
  <div class="leftb">

    <!-- 基本信息 -->
    <div class="item2">
      <!-- <span class="dot">
        <span class="dot-inner"></span>
      </span> -->

      <!-- <div class="fong-div"></div>
      <div class="fong-div" style="margin-left: 3px;"></div>
      <div class="fong-div" style="margin-left: 3px;"></div> -->
      <span style="letter-spacing :1px;color:#fff;float: right;margin-right: 50px;"> 基本信息 </span>
      <div class="rightline1"></div>
    </div>
    <div class="leftbar1">
        <div class="left-top">
          <div class="ltop1">
            <!-- <img src="../../assets/second1/btn-1.png" alt=""> -->
            <div style="width: 100%;text-align: center;color: #fff;margin-left: 10px;">
              <div class="div-p" @click="$router.push('/regulation/supervise')">从业人员数(人)</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;">{{allNum.peopleNum}}</span>
            </div>
          </div>
          <!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> -->
          <div class="ltop2">
            <!-- <img src="../../assets/second1/btn-2.png" alt=""> -->
            <div style="width: 100%;text-align: center;color: #fff;margin-left: 10px;">
              <div class="div-p" @click="$router.push('/regulation/pipe')">管道长度(m)</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;">{{allNum.allPipeLength}}</span>
            </div>
          </div>

        </div>
      </div>



    <!-- 安全监管 -->
    <div class="leftbar2">

      <div class="item1">
        <!-- <div class="fong-div"></div>
        <div class="fong-div" style="margin-left: 3px;"></div>
        <div class="fong-div" style="margin-left: 3px;"></div> -->
        <span style="letter-spacing :1px;color:#fff;float: right;"> 巡检巡查 </span>
        <!-- <img src="../../assets/second1/ti-bg.png" alt=""> -->
        <div class="rightline2"></div>
      </div>
      <div class="pieone">
        <div id="myChartpieone" :style="{width: '100%', height: '100%'}"></div>
        <div class="titleTex">
          <div :style="{color: '#5470c6'}"> ● 已完成:{{allNum.typeOne}}</div>
          <div :style="{color: '#fa8167'}"> ● 未完成:{{allNum.typeTwo}}</div>
        </div>
      </div>
      <div class="pietwo">
        <div id="myChartpietwo" :style="{width: '100%', height: '100%'}"></div>
        <div class="titleTex">
        <div :style="{color: '#5470c6'}"> ● 已完成:0</div>
        <div :style="{color: '#fa8167'}"> ● 未完成:0</div>
        </div>
      </div>

    </div>



    <!-- 任务完成率 -->

    <div class="leftbar3">
      <div class="item1">
        <!-- <div class="fong-div"></div>
        <div class="fong-div" style="margin-left: 3px;"></div>
        <div class="fong-div" style="margin-left: 3px;"></div> -->
        <span style="letter-spacing: 1px; color: #fff; float: right">
          气量监管
        </span>
        <!-- <img src="../../assets/second1/ti-bg.png" alt=""> -->
        <div class="rightline3"></div>
      </div>
      <div
        class="echarts-one"
        style="width: 100%; height: 95%; margin-left: 10px"
      >
        <div id="main1" style="width: 100%; height: 100%"></div>
      </div>
    </div>

  </div>
</template>

<script>
  import { selectWorkOrderNum } from "@/api/operationMonitor/order";

  import {
    getQLJG,
    getSGSL,
    getYHZZ,
    getYHTJ,
  } from "@/api/bigWindow/charsData.js";

  export default {
    data () {
      return {
          allNum:{},
        zeroNum:{
          allPipeLength: 0,
          peopleNum: 0,
          typeFor: 0,
          typeOne: 0,
          typeThree: 0,
          typeTwo: 0
        },
        enterpriseIds:{
          enterpriseId:""
        },
          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.getNum(null)
      this.getLineChats();
      },

    methods: {
    // 两个接口实现一个line统计图这个是改数据
    async getLineChats() {
      // getSGSL,getYHZZ

      /*await getSGSL().then((res) => {
        console.log("aaa", res);
        this.datanow.date = res.data.map((item) => item.date).reverse();
        this.datanow.shigu1 = res.data.map((item) => item.count).reverse();
      });
      await getYHZZ().then((res) => {
        console.log("bbb", res);
        this.datanow.shigu2 = res.data.map((item) => item.count).reverse();
      });*/
      await getQLJG().then((res) => {
        console.log("CCC", res);
        this.datanow.date = res.data.map((item) => item.date).reverse();
        this.datanow.shigu1 = res.data.map((item) => item.count).reverse();
        this.datanow.shigu2 = res.data.map((item) => item.count1).reverse();
        this.datanow.shigu3 = res.data.map((item) => item.count2).reverse();
        this.datanow.shigu4 = res.data.map((item) => item.count3).reverse();
      });
      this.drawLine(this.datanow);
    },
        choice(val){
            // if(index==0){
            //     this.datanow = this.dataAll;
            //     this.drawLine(this.datanow);
            //     this.getNum(index);
            // }else
              this.getNum(val);
            // if(index==1){
            //     this.datanow = this.dataone;
            //     this.drawLine(this.datanow);
            // }else if(index==2){
            //     this.datanow = this.datatwo;
            //     this.drawLine(this.datanow);
            // }else if(index==3){
            //     this.datanow = this.datathree;
            //     this.drawLine(this.datanow);
            // }
        },
      getNum( val){

        if(val!=null && val!=''){
          this.enterpriseIds.enterpriseId = val.toString();
          if(!this.enterpriseIds.enterpriseId) return
          selectWorkOrderNum (this.enterpriseIds).then(response => {
              console.log(response);
            this.allNum=response.data;
            this.initdata();
          });
        }else {
          this.allNum = this.zeroNum;
          this.initdata();
        }

      },
      initdata(){
          // 基于准备好的dom,初始化echarts实例
          //console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
          let pieone = this.$echarts.init(document.getElementById('myChartpieone'));
          let pietwo = this.$echarts.init(document.getElementById('myChartpietwo'));
          // 绘制图表
          pieone.setOption({
              title: {
                  text: '巡检任务数(个) : '+ (this.allNum.typeOne+this.allNum.typeTwo),
                  left: 'center',
                  top :0,
                  textStyle:{
                      color: "#cddbe4",
                      fontSize: "16"
                  }
              },
              grid: {
                bottom: "7%",
                containLabel: true,
              },
            tooltip: {
              trigger: 'item',
            },
            series: [
              {
                name: '任务概况',
                type: 'pie',
                radius: '55%',
                center: ['50%','58%'],
                data: [
                  {
                    value: this.allNum.typeTwo,
                    name: '未完成',
                    itemStyle: { color: '#fa8167' }
                },
                  {
                    value: this.allNum.typeOne,
                      name: '已完成' ,
                    itemStyle: { color: '#5470c6' }
                  },
                ],
                labelLine:{
                        length:20,
                        length2:50,
                    },
                  label:{
                    color:'#fff',
                      fontSize: 14,
                      // formatter:"{b}\n\n",
                      // padding:[0,-55],
                      normal: {
                        show: false,
                        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: "#cddbe4",
                                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)'
                  }
                },
                labelLine: {
                  show: false
                },
              }
            ]
          });
          pietwo.setOption({
              title: {
                  text: '隐患整治数(个) : 0',
                  left: 'center',
                  top :0,
                  textStyle:{
                      color: "#cddbe4",
                      fontSize: "16"
                  }
              },
              grid: {
                bottom: "7%",
                containLabel: true,
              },
            tooltip: {
              trigger: 'item',
            },
            series: [
              {
                name: '任务概况',
                type: 'pie',
                radius: '55%',
                center: ['50%','58%'],
                data: [
                  {
                    value: 0,
                    name: '未完成',
                    itemStyle: { color: '#fa8167' }
                },
                  {
                    value: 0,
                      name: '已完成' ,
                    itemStyle: { color: '#5470c6' }
                  },
                ],
                labelLine:{
                        length:20,
                        length2:50,
                    },
                  label:{
                    color:'#fff',
                      fontSize: 14,
                      // formatter:"{b}\n\n",
                      // padding:[0,-55],
                      normal: {
                        show: false,
                        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: "#cddbe4",
                                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)'
                  }
                },
                labelLine: {
                  show: false
                },
              }
            ]
          });
      },
      //折线图
    //折线图
    drawLine(data) {
      // 基于准备好的dom,初始化echarts实例
      let myChart = this.$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",
            },
          },
          axisLabel: {
            show: true,
            interval: 0, //使x轴文字显示全
            rotate:10,
            fontSize:10
          },
          axisTick: {
            //去掉坐标轴刻线
            show: false,
          },
          type: "category",
          data: data.date,
        },
        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: "#d630dc" },
                  { offset: 1, color: "#91cc7500" },
                ]),
              },
            },
          },
          {
            data: data.shigu4,
            type: "line",
            smooth: true,
            name: "储存量",
            areaStyle: {
              normal: {
                // 渐变填充色(线条下半部分)
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#f38e0d" },
                  { 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" },
          //       ]),
          //     },
          //   },
          // },
        ],
      });
    },
  },
};
</script>


<style lang="scss" scoped>

/* @font-face {
  font-family: 'arialbd';
} */
.leftb{
  width: 98%;
  height: 100%;
  margin-left: 2%;
}
.leftbar1{
  width: 85%;
  height: 20%;
  padding-top: 10%;
}
.leftbar2{
    width: 80%;
    height: 39%;
    padding-top: 15px;
}
.leftbar3{
  width: 85%;
  height: 32%;
  padding-top: 15px;
  padding-bottom: 35px;
}
.item1{
    width: 85%;
    height: 30px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 5%;
    padding-top: 10px;
    line-height: 10px;
    // margin-top: 10px;
}
.item1 img{
  width: 100%;
}
.item2{
    width: 85%;
    height: 30px;
    font-size: 16px;
    font-weight: 700;
    margin-left: 5%;
    margin-top: 40px;
}
.fong-div{
  width: 4px;
  height: 10px;
  background-image: linear-gradient(to bottom,rgb(122, 247, 247), #057E8C);
  float: left;
  margin-top: 10px;
}
.rightline1{
  width: 85%;
  height: 2px;
  float: right;
  background-image: linear-gradient(to left,  #3BFAFA, #ffffff00);
  margin-top: 10px;
  margin-right: 50px;
}
.rightline2{
  width: 92%;
  height: 2px;
  float: right;
  background-image: linear-gradient(to left,  #3BFAFA, #ffffff00);
  margin-top: 10px;
}
.rightline3{
  width: 95%;
  height: 2px;
  float: right;
  background-image: linear-gradient(to left,  #3BFAFA, #ffffff00);
  margin-top: 10px;
}
/* .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: 100%;
  background: url('../../assets/ranqifirst/div-p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  padding: 7px 0px;
  color: #0ff;
}

.div-el{
  margin-top: 30px;
  width: 100%;
  height: 18px;
}
.left-top{
  display: flex;
  justify-content: space-evenly;
}
.ltop1{
  width: 35%;
  display: flex;
  justify-content: space-evenly;
}
.ltop2{
  width: 35%;
  display: flex;
  justify-content: space-evenly;
}
.el-left{
  color: #96a4ad;
  width: 20%;
  height: 100%;
  float: left;
  font-size: 14px;
  text-align: right;
}

/* ::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;
} */
.titleTex{
  width: 100%;
  height: 20px;
  margin-top: 0px;
  text-align: center;
  /* font-size: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center; */
  padding: 0px 30px;
}
.leftyj {
  margin-top: 10px;
  width: 420px;
  margin-left: 10px;
}
.yj{
  padding: 0px 10px;
}
.yujing{
  width: 33%;
  float: left;
  text-align: center;
  margin-top: 45px;
}
.yujingtop{
  margin: 5px 0;
  text-align: center;
}
.yujingbottom{
  color: #cddbe4;
  margin-left: 10px;
  line-height: 35px;
  padding: 10px 0 0 0;
}
.pieone{
  width: 50%;
  height: 60%;
  float: left;
  margin-top: 30px;
}
.pietwo{
  width: 50%;
  height: 60%;
  float: right;
  margin-top: 30px;
}

</style>