<template>
  <div class="region">
    <div class="main">
      <Breadcrumb :breadData="breadData"></Breadcrumb>
    <el-row :gutter="20" class="mt20">
      <el-col :span="12">
        <div class="unify-item box1_l">
          <div class="module-tit">政府工作报告落实情况</div>
          <!-- 饼状图，百分比 -->
          <div id="gzbgChart" style="width: 100%; height: 233px"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="unify-item box1_r">
          <div class="module-tit">重点任务落实</div>
          <!-- 大花园建设 ，山区跨越式发展 -->
          <div class="pdlr20 bdBox">
            <div class="progres">
              <h5>大花园建设</h5>
              <p>
                任务数<span>286</span>已完成<span>218</span
                >
              </p>
              <div class="probar">
                <span>进度</span
                ><el-progress
                  :percentage="Number(((218 / 286) * 100).toFixed(2))"
                  :stroke-width="10"
                  color="#1492ff"
                ></el-progress>
              </div>
            </div>
            <div class="progres">
              <h5>山区跨越式发展</h5>
              <p>
                任务数<span>255</span>已完成<span>198</span>
              </p>
              <div class="probar">
                <span>进度</span
                ><el-progress
                  :percentage="Number(((198 / 255) * 100).toFixed(2))"
                  :stroke-width="10"
                  color="#1492ff"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="unify-item box2">
      <div class="insideBox box2_l">
        <h3 class="module-tit">重点关注区域 - 山区26县</h3>
        <!-- 山区26县 -->
        <h4>产业项目数（个）</h4>
        <div id="sq26x1" style="width: 100%; height: 300px"></div>
        <h4>产业项目完成投资数（亿元）</h4>
        <div id="sq26x2" style="width: 100%; height: 300px"></div>
      </div>
    </div>
    </div>
    
  </div>
</template>

<script>
  let one,two,three;
import Breadcrumb from "../components/Breadcrumb.vue";
let _myCityName='青田县';
let _myCity="青田";
export default {
  components: { Breadcrumb },
  data() {
    return {
     myCity:_myCity,
      myCityName:_myCityName,
      breadData: {
        page_name: "区域协调发展",
        annual_target: "暂无数据",
        leading: _myCityName+"发展和改革局",
      },
      region_idx: "0",
      region_tabs: ["热点关注", "工作动态", "任务进展"],
    };
  },
  mounted() {
    this.initGzbgChart();
    this.initSq26x1Chart();
    this.initSq26x2Chart();
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
    // let _this =this;
    // window.onresize = () => {
    //     return (() => {
    //       _this.initGzbgChart();
    //       _this.initSq26x1Chart();
    //       _this.initSq26x2Chart();
    //     })();
    // };
  },
 methods: {
    initGzbgChart() {
      if (one != null && one != "" && one != undefined) {
        one.dispose();//销毁
      }
      one = this.$echarts.init(
        document.getElementById("gzbgChart")
      );
      one.setOption({
        tooltip: {
          trigger: "item",
        },
        color: ["#71C8FF", "#FC5C5C"],
        series: [
          {
            type: "pie",
            radius: "70%",
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              fontSize: 14,
              formatter: "{b}{v|\n{d}%}",
              rich: {
                v: {
                  color: "#1492ff",
                  fontSize: 14,
                },
              },
            },
            data: [
              { value: 128, name: "已完成工作" },
              { value: 39, name: "未完成工作" },
            ],
          },
        ],
      });
      window.addEventListener("resize", () => {
        one.resize();
      });
    },
    initSq26x1Chart() {
      if (two != null && two != "" && two != undefined) {
        two.dispose();//销毁
      }
      two = this.$echarts.init(document.getElementById("sq26x1"));
      two.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["累计完成数", "目标值"],
          // textStyle: {
          //   fontSize: 14
          // }
        },
        color: ["#1492FF", "#6dd933"],
        grid: {
          show: false,
          top: "60",
          bottom: "120",
          right: "60",
          left: "60",
        },
        xAxis: [
          {
            type: "category",
            data: [
              "杭州-淳安县",
              "温州-永嘉县",
              "温州-苍南县",
              "温州-平阳县",
              "温州-文成县",
              "温州-泰顺县",
              "金华-磐安县",
              "金华-武义县",
              "衢州-柯城区",
              "衢州-衢江区",
              "衢州-江山市",
              "衢州-龙游县",
              "衢州-常山县",
              "衢州-开化县",
              "台州-天台县",
              "台州-仙居县",
              "台州-三门县",
              "丽水-莲都区",
              "丽水-龙泉市",
              "丽水-遂昌县",
              "丽水-松阳县",
              "丽水-青田县",
              "丽水-云和县",
              "丽水-庆元县",
              "丽水-缙云县",
              "丽水-景宁县",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              show: true, //坐标轴标签
              color: "#666",
              fontSize: 14,
              // interval: 0,
              formatter: (value) => {
                return value.split("").join("\n");
              },
            },
          },
        ],
        //设置两个y轴，左边显示数量，右边显示概率
        yAxis: [
          {
            type: "value",
            name: "累计完成数",
            nameTextStyle: {
              color: "#333",
              fontSize: 14,
              lineHeight: 40,
            },
            show: true,
            interval: 50,
          },
          {
            type: "value",
            name: "目标值",
            show: false,
            interval: 10,
          },
        ],
        //每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
        series: [
          {
            name: "累计完成数",
            type: "bar",
            data: [
              175, 165, 135, 166, 145, 155, 156, 142, 178, 169, 124, 136, 142,
              150, 135, 105, 100, 124, 145, 132, 107, 156, 156, 154, 167, 124,
            ],
            barWidth: "50%",
            label: {
              show: false, // 柱子顶部的数值
              position: "top",
              fontSize: 12,
              color: "#333",
            },
            itemStyle: {
              normal: {
                color: (p) => {
                  let indexs = []; // 存放未达标值
                  let mbzData = [
                    95, 165, 185, 166, 145, 155, 156, 142, 138, 169, 170, 136,
                    142, 150, 125, 175, 100, 124, 145, 132, 167, 156, 156, 154,
                    167, 124,
                  ];
                  mbzData.forEach((ele, index) => {
                    if (p.dataIndex == index && p.value < ele) {
                      indexs.push(index);
                    }
                  });
                  if (indexs.includes(p.dataIndex)) {
                    return "#d40000";
                  } else {
                    return "#1492FF";
                  }
                },
              },
            },
          },
          {
            name: "目标值",
            type: "line",
            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: [
              95, 165, 185, 166, 145, 155, 156, 142, 138, 169, 170, 136, 142,
              150, 125, 175, 100, 124, 145, 132, 167, 156, 156, 154, 167, 124,
            ],
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#6dd933",
              },
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        two.resize();
      });
    },
    initSq26x2Chart() {
      if (three != null && three != "" && three != undefined) {
        three.dispose();//销毁
      }
      three = this.$echarts.init(document.getElementById("sq26x2"));
      three.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["累计完成数", "目标值"],
        },
        color: ["#1492FF", "#6dd933"],

        grid: {
          show: false,
          top: "30",
          bottom: "120",
          right: "60",
          left: "60",
        },
        xAxis: [
          {
            type: "category",
            data: [
              "杭州-淳安县",
              "温州-永嘉县",
              "温州-苍南县",
              "温州-平阳县",
              "温州-文成县",
              "温州-泰顺县",
              "金华-磐安县",
              "金华-武义县",
              "衢州-柯城区",
              "衢州-衢江区",
              "衢州-江山市",
              "衢州-龙游县",
              "衢州-常山县",
              "衢州-开化县",
              "台州-天台县",
              "台州-仙居县",
              "台州-三门县",
              "丽水-莲都区",
              "丽水-龙泉市",
              "丽水-遂昌县",
              "丽水-松阳县",
              "丽水-青田县",
              "丽水-云和县",
              "丽水-庆元县",
              "丽水-缙云县",
              "丽水-景宁县",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              show: true, //坐标轴标签
              color: "#666",
              fontSize: 14,
              // interval: 0,
              formatter: (value) => {
                return value.split("").join("\n");
              },
            },
          },
        ],
        //设置两个y轴，左边显示数量，右边显示概率
        yAxis: [
          {
            type: "value",
            name: "累计完成数",
            show: true,
            interval: 50,
          },
          {
            type: "value",
            name: "目标值",
            show: false,
            interval: 10,
          },
        ],
        //每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
        series: [
          {
            name: "累计完成数",
            type: "bar",
            data: [
              8, 4.5, 5, 5.6, 4.5, 3.5, 7, 2.8, 4.5, 5, 7, 5.5, 2, 5, 4, 5, 7,
              5, 5, 6, 5, 3.7, 4.4, 3.4, 2, 4,
            ],
            barWidth: "50%",
            label: {
              show: false, // 柱子顶部的数值
              position: "top",
              fontSize: 12,
              color: "#333",
            },
            itemStyle: {
              normal: {
                color: (p) => {
                  let indexs = []; // 存放未达标值
                  let mbzData = [
                    7, 5, 5, 6, 4, 5, 6, 2, 5, 5, 5, 6, 2, 5, 6, 5, 6, 4, 3, 2,
                    3, 3, 4, 4, 2, 4,
                  ];
                  mbzData.forEach((ele, index) => {
                    if (p.dataIndex == index && p.value < ele) {
                      indexs.push(index);
                    }
                  });
                  if (indexs.includes(p.dataIndex)) {
                    return "#d40000";
                  } else {
                    return "#1492FF";
                  }
                },
              },
            },
          },
          {
            name: "目标值",
            type: "line",
            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: [
              7, 5, 5, 6, 4, 5, 6, 2, 5, 5, 5, 6, 2, 5, 6, 5, 6, 4, 3, 2, 3, 3,
              4, 4, 2, 4,
            ],
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#6dd933",
              },
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        three.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and(min-width:1200px) {
  #app {
    width: 1200px;
    background: #efefef !important;
  }
  .main {
    width: 1200px !important;
  }
}
@media screen and(max-width:1200px) {
  .main {
    width: calc(100% - 40px);
  }
}
.main {
 
  margin: 0px auto;
  padding: 20px 0px;
}
.region {
  .box1_r {
    box-sizing: border-box;
    .progres {
      text-align: left;
      margin-bottom: 30px;
      h5 {
        font-size: 16px;
      }
      & > p {
        padding: 10px 0;
        & > span {
          margin: 0 5px;
          font-size: 18px;
          color: #1492ff;
        }
      }
      .probar {
        display: flex;
        align-items: center;
        justify-content: left;
        .el-progress {
          display: flex;
          align-items: baseline;
          width: 88%;
          .el-progress-bar {
            width: 90%;
            margin-left: 20px;
          }
        }
      }
    }
  }
  .box2_l {
    width: 100%;
    .ctitle {
      padding: 0 0 20px 20px;
      font-weight: 700;
    }
    h4{
      font-size: 18px;
      font-weight: normal;
      margin: 12px 0;
    }
  }
}
</style>
