<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>
            <div class="div-p-value">
              {{ allNum.peopleNum }}
            </div>
            <div></div>
          </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>
            <div class="div-p-value">{{ allNum.allPipeLength }}</div>
          </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 class="pie-title">巡检任务数量(个)</div>
        <div class="chars-wrapper">
          <div id="myChartpieone"></div>
          <div class="titleTex">
            <div class="titleTex-item">
              <span>已完成巡检</span>
              <span class="b">{{ allNum.typeOne }}</span>
            </div>
            <div class="titleTex-item">
              <span>未完成巡检</span>
              <span class="b">{{ allNum.typeTwo }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pietwo">
        <div class="pie-title">隐患整治数量(个)</div>
        <div class="chars-wrapper">
          <div id="myChartpietwo"></div>

          <div class="titleTex">
            <div class="titleTex-item">
              <span>已完成整治</span>
              <span class="b">{{ allNum.hiddenBookFinish }}</span>
            </div>
            <div class="titleTex-item">
              <span>未完成整治</span>
              <span class="b">{{ allNum.hiddenBookUnFinish }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务完成率 -->
    <div class="leftbar3">
      <div class="item3">
        <!-- <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";
// 引入基本模板
// let echarts = require("echarts/lib/echarts");
// // 引入柱状图组件
// require("echarts/lib/chart/bar");
// // 引入提示框和title组件
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// let echarts = this.$echarts;

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,
        hiddenBookFinish: 0,
        hiddenBookUnFinish: 0,
      },
      enterpriseIds: {
        enterpriseId: "",
      },
      dataAll: {
        congyeNum: 1544,
        guandaoNum: 3658495,
        shigu1: [],
        shigu2: [],
        // shigu3: [932, 901, 198, 489, 158, 358, 345, 675, 901, 934, 1290, 888],
        renwu: [50, 92],
        renwuzong: 142,
        date: [],
      },
      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
      console.log("===================>>>>>>>>>>>>>>>>>>", val);
      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();
        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: "总量",
          subtext: this.allNum.typeOne + this.allNum.typeTwo || "0",
          left: "center",
          top: 25,
          textStyle: {
            color: "#cddbe4",
            fontSize: "16",
          },
          subtextStyle: {
            color: "#cddbe4",
            fontSize: "16",
          },
        },
        tooltip: {
          trigger: "item",
          show: false,
        },
        legend: {
          top: "50%",
          left: "center",
          show: false,
        },
        series: [
          {
            color: ["#35A1FF", "#1EC9E3"],

            name: "Access From",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: "#fff",
              borderWidth: 0,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
            ],
          },
        ],
      });

      pietwo.setOption({
        title: {
          text: "总量",
          subtext: this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish || "0",
          left: "center",
          top: 25,
          textStyle: {
            color: "#cddbe4",
            fontSize: "16",
          },
          subtextStyle: {
            color: "#cddbe4",
            fontSize: "16",
          },
        },
        tooltip: {
          trigger: "item",
          show: false,
        },
        legend: {
          top: "50%",
          left: "center",
          show: false,
        },
        series: [
          {
            color: ["#FEA754", "#D8583E"],

            name: "Access From",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: "#fff",
              borderWidth: 0,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
            ],
          },
        ],
      });
    },
    //折线图
    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: 80%;
  height: 25%;
  padding-top: 10%;
  pointer-events: auto;
}
.leftbar2 {
  width: 80%;
  height: 39%;
  padding-top: 15px;
  pointer-events: auto;
}
.leftbar3 {
  width: 85%;
  height: 32%;
  padding-top: 20px;
  padding-bottom: 35px;
  pointer-events: auto;
}
.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: 25px;
}
.item3 {
  width: 85%;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  margin-left: 5%;
  padding-top: 25px;
  line-height: 10px;
}
.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, #47a0ff, #ffffff00);
  margin-top: 10px;
  margin-right: 50px;
}
.rightline2 {
  width: 92%;
  height: 2px;
  float: right;
  background-image: linear-gradient(to left, #47a0ff, #ffffff00);

  margin-top: 10px;
}
.rightline3 {
  width: 95%;
  height: 2px;
  float: right;
  background-image: linear-gradient(to left, #47a0ff, #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%;
  width: 155px;
  // background: url("../../assets/ranqifirst/div-p.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  text-align: center;
  padding: 7px 0px;
  // color: #0ff;
}
.div-p-value {
  width: 155px;
  height: 77px;
  text-align: center;
  font-family: "arialbd";
  font-size: 35px;
  color: rgb(255, 255, 255);
  -webkit-background-clip: text;
  background: url("~@/assets/firstimage/left-top-img.png") center;
}

.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;
  color: rgb(255, 255, 255);
}
.ltop2 {
  width: 35%;
  display: flex;
  justify-content: space-evenly;
}
.el-left {
  color: rgb(255, 255, 255);
  color: #ad9d66;
  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 {
  flex: 1;
  align-content: center;
  .titleTex-item {
    color: #fff;
    margin-left: 40px;
    margin-bottom: 10px;
    .b {
      margin-left: 40px;
    }
  }
}
.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: 80%;
  height: 40%;
  // float: left;
  margin-top: 30px;
  margin-left: 40px;
  .pie-title {
    color: #fff;
    margin-bottom: 10px;
  }
  .chars-wrapper {
    width: 100%;
    // height: 100%;
    display: flex;
  }
  #myChartpieone {
    width: 100px;
    height: 100px;
  }
}
.pietwo {
  width: 80%;
  height: 40%;
  margin-left: 40px;
  .pie-title {
    color: #fff;
    margin-bottom: 10px;
  }
  .chars-wrapper {
    width: 100%;
    // height: 100%;
    display: flex;
  }
  #myChartpietwo {
    width: 100px;
    height: 100px;
  }
  // float: right;
  // margin-top: 30px;
}
</style>
