<template>
  <div class="left-wrapper">
    <!-- 基本信息 -->
    <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: 15px;
        width: 100%;
        margin-left: 10px;
        display: flex;
        justify-content: space-around;
      "
    >
      <div style="width: 40%; text-align: center; color: #339cc9">
        <div class="div-p" @click="$router.push('/regulation/supervise')">
          从业人员数
        </div>
        <div
          style="
            font-family: 'arialbd';
            font-size: 25px;
            margin-left: 20px;
            background-image: -webkit-linear-gradient(bottom, #f0c41b, #e4dbb7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
        >
          {{ allNum.peopleNum }}
        </div>
      </div>
      <div style="width: 40%; text-align: center; color: #339cc9">
        <div class="div-p" @click="$router.push('/regulation/pipe')">
          管道长度(m)
        </div>
        <div
          style="
            font-family: 'arialbd';
            margin-left: 20px;
            font-size: 25px;
            background-image: -webkit-linear-gradient(bottom, #f86742, #f0c41b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
        >
          {{ allNum.allPipeLength }}
        </div>
      </div>
    </div>

    <!-- 安全监管 -->
    <div>
      <div class="item1" style="margin-top: 10px">
        <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: 200px"></div>

    <!-- 任务完成率 -->
    <div>
      <div class="item1" style="margin-top: 25px">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span
          style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
          @click="$router.push('/operationMonitor/workOrder')"
          >任务完成率</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="pieone">
      <div
        id="myChartpieone"
        :style="{ width: '150px', height: '250px' }"
      ></div>
      <div class="titleTex">
        <div>
          <span :style="{ color: '#00ffff' }">
            ● 已完成:{{ allNum.typeOne }}</span
          >
          <span :style="{ color: '#0099ff' }">
            ● 未完成:{{ allNum.typeTwo }}</span
          >
        </div>
      </div>
    </div>
    <div class="pietwo">
      <div
        id="myChartpietwo"
        :style="{ width: '150px', height: '250px' }"
      ></div>

      <div class="titleTex">
        <div>
          <span :style="{ color: '#00ffff' }"> ● 已完成:0</span>
          <span :style="{ color: '#0099ff' }"> ● 未完成:0</span>
        </div>
      </div>
    </div>

    <!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->

    <!-- <div class="div-el">
        <div class="el-left">入户安检</div>
        <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeOne*100"></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="allNum.typeTwo*100" 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="allNum.typeThree*100" 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="allNum.typeFor*100" status="exception"></el-progress>
      </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");
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.drawLine(this.datanow);
    //this.getNum(null)
  },

  methods: {
    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();
        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: 20,
          textStyle: {
            color: "#00ffff",
            fontSize: "16",
          },
        },
        grid: {
          bottom: "7%",
          containLabel: true,
        },
        tooltip: {
          show: false,

          trigger: "item",
        },
        series: [
          {
            name: "任务概况",
            type: "pie",
            radius: "55%",
            center: ["50%", "58%"],
            data: [
              {
                value: this.allNum.typeTwo,
                name: "未完成",
                itemStyle: { color: "#09f", fontSize: "10px" },
              },
              {
                value: this.allNum.typeOne,
                name: "已完成",
                itemStyle: { color: "#00ffff", fontSize: "10px" },
              },
            ],
            labelLine: {
              length: 25,
              length2: 25,
            },
            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: 10,
                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)",
              },
            },
          },
        ],
      });
      pietwo.setOption({
        title: {
          text: "隐患整治数(个) : 0",
          left: "center",
          top: 20,
          textStyle: {
            color: "#00ffff",
            fontSize: "16",
          },
        },
        grid: {
          bottom: "7%",
          containLabel: true,
        },
        tooltip: {
          show: false,
          trigger: "item",
        },
        series: [
          {
            name: "任务概况",
            type: "pie",
            radius: "55%",
            center: ["50%", "58%"],
            data: [
              {
                value: 0,
                name: "未完成",
                itemStyle: { color: "#09f" },
              },
              {
                value: 0,
                name: "已完成",
                itemStyle: { color: "#00ffff" },
              },
            ],
            labelLine: {
              length: 25,
              length2: 25,
            },
            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: "#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)",
              },
            },
          },
        ],
      });
    },
    //折线图
    drawLine(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main1"));
      // 绘制图表
      myChart.setOption({
        legend: {
          top: 20,
          textStyle: {
            color: "#cddbe4",
            fontSize: "11px",
          },
        },

        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" },
                ]),
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* @font-face {
  font-family: 'arialbd';
} */
.left-wrapper {
  width: 100%;
  overflow: hidden;
}
.item1 {
  width: 95%;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  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: 0.6;
    transform: scale(0.8);
  }

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

@keyframes vabDot {
  0% {
    opacity: 0.6;
    transform: scale(0.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%;
  font-size: 9px;
  cursor: pointer;
}

.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;
}
.titleTex {
  width: 100%;
  height: 20px;
  margin-top: 0px;
  font-size: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px 30px;
  position: relative;
  > div {
    position: absolute;
    top: -10px;
  }
}
.pieone {
  width: 50%;
  height: 50%;
  float: left;
}
.pietwo {
  width: 50%;
  height: 50%;
  float: right;
}
</style>
