<!--  -->
<template>
  <div class="index">
    <div class="main">
      <div class="minHeader shadow">
        <Breadcrumb :breadData="breadData"></Breadcrumb>
        <!-- <div class="card__header flex between acenter">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }"
              >产业发展</el-breadcrumb-item
            >
          </el-breadcrumb>
          <div class="flex acenter">
            <i class="el-icon-office-building mr12"></i>
            <p class="c3">牵头单位: {{myCityName}}发展和改革局</p>
          </div>
        </div>
        <div class="flex acenter pl20 pr20 pb12">
          <img src="../assets/images/target.png" class="icon28" />
          <div class="flex acenter">
            <div class="flex acenter eltxtx">
              <span class="c3 c149 fs18">年度目标</span>
              <div class="cline"></div>
            </div>
            <div class="c3">暂无数据</div>
          </div>
        </div> -->
      </div>
      <div class="tabtits">
        <el-row :gutter="10">
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7580"
              >
                数字经济
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7581"
              >
                新进制造业
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7582"
              >
                现代服务业
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7583"
              >
                标志性产业链
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7584"
              >
                产品融合
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7585"
              >
                产业平台
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7586"
              >
                龙头企业
              </div>
            </el-tooltip>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6">
            <el-tooltip
              class="item"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <div
                class="grid-content bg-purple textCenter c9 bg1"
                aria-describedby="el-tooltip-7587"
              >
                更多
              </div>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
      <div class="mt20">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="minTop shadow">
              <div class="card__header">
                <p class="tieaft">规上工业增加值变动趋势</p>
              </div>
              <div class="zhan mt12">
                <div id="main1" style="max-width: 100%; height: 280px"></div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="minTop shadow">
              <div class="card__header">
                <p class="tieaft">本县规上工业增加值(2021年1-4月)</p>
              </div>
              <div class="zhan mt12">
                <div id="main2" style="max-width: 100%; height: 280px"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mt20">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="minTop shadow">
              <div class="card__header">
                <p class="tieaft">区县规上工业增加值(2021年1-4月)</p>
              </div>
              <div class="zhan mt12">
                <div id="main3" style="max-width: 100%; height: 280px"></div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="minTop shadow">
              <div class="card__header">
                <p class="tieaft">区县规上工业利润(2021年1-4月)</p>
              </div>
              <div class="zhan mt12">
                <div id="main4" style="max-width: 100%; height: 280px"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
  components: {
    Breadcrumb
  },
  data() {
    return {
      breadData: {
        page_name: "产业发展",
        annual_target:
          "暂无数据",
        leading: "青田县发展和改革局",
      },
      myCityName:'青田县'
    };
  },
  mounted() {
    this.initCharts1();
    this.initCharts2();
    this.initCharts3();
    this.initCharts4();
    window.parent.postMessage(document.body.scrollHeight, '*');
    window.onresize = () => {
      return (() => {   
        window.parent.postMessage(document.body.scrollHeight, '*');
      })();
    };

    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  //方法集合
  methods: {
    initCharts1() {
      var chartDom = document.getElementById("main1");
      var myChart1 = this.$echarts.init(chartDom);
      var option;

      option = {
        color: ["#1492FF", "#65DCAA"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["云和", "丽水"],
          left: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2020年1-4月",
            "2020年1-5月",
            "2020年1-6月",
            "2020年1-7月",
            "2020年1-8月",
            "2021年1-9月",
            "2021年1-10月",
            "2021年1-11月",
            "2021年1-12月",
            "2021年1-2月",
            "2021年1-3月",
            "2021年1-4月",
          ],
          axisLabel: {
            textStyle: {
              color: "#333", //坐标值得具体的颜色
              fontSize: 12,
            },
            width: 50,
            overflow: "break",
            interval: 1,
          },
        },
        yAxis: {
          type: "value",
          min: -10,
          max: 70,
          splitNumber: 8,
          name: "%",
          nameLocation: "end",
        },
        series: [
          {
            name: "云和",
            type: "line",
            data: [
              -4.78, -1.3, 0.3, 0.52, 1.83, 3, 3.91, 4.8, 5.39, 49.4, 34.1,
              27.5,
            ],
          },
          {
            name: "丽水",
            type: "line",
            data: [
              -7.84, -3.5, -2.16, -1.95, -0.36, 1.2, 2.3, 3.42, 4.45, 63.35,
              40.9, 33.3,
            ],
          },
        ],
      };

      option && myChart1.setOption(option);
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },
    initCharts2() {
      var chartDom = document.getElementById("main2");
      var myChart2 = this.$echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月"],
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 60,
          splitNumber: 6,
          name: "%",
          nameLocation: "end",
        },
        grid: {
          top:'10%',
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        series: [
          {
            data: [27.9, 26.4, 54.5, 37.9],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              // 图形的形状
              normal: {
                color: function (params) {
                  if (params.value > 36.67) {
                    return "#00E0A6";
                  } else {
                    return "#FC5C5C";
                  }
                },
              },
            },
            markLine: {
              itemStyle: {
                normal: {
                  color: "#FA8565",
                },
              },
              data: [
                {
                  silent: true,
                  type: "average",
                  name: "平均值",
                  label: {
                    formatter: "平均值 36.67",
                    position: "middle",
                    textStyle: {
                      color: "#Fa8565",
                      fontSize: 16,
                    },
                  },
                },
              ],
            },
          }
        ],
      };

      option && myChart2.setOption(option);
      window.addEventListener("resize", () => {
        myChart2.resize();
      });
    },
    initCharts3() {
      var chartDom = document.getElementById("main3");
      var myChart3 = this.$echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁县", "龙泉市"],
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 60,
          splitNumber: 6,
          name: "%",
          nameLocation: "end",
        },
        grid: {
          top:'10%',
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        series: [
          {
            data: [27.9, 26.4, 54.5, 37.9, 15.5, 50.4, 27, 25.5, 23.6],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              // 图形的形状
              normal: {
                color: function (params) {
                  if (params.value > 32.08) {
                    return "#00E0A6";
                  } else {
                    return "#FC5C5C";
                  }
                },
              },
            },
            markLine: {
              itemStyle: {
                normal: {
                  color: "#FA8565",
                },
              },
              data: [
                {
                  silent: true,
                  type: "average",
                  name: "平均值",
                  label: {
                    formatter: "平均值 32.08",
                    position: "middle",
                    textStyle: {
                      color: "#Fa8565",
                      fontSize: 16,
                    },
                  },
                },
              ],
            },
          }
        ],
      };

      option && myChart3.setOption(option);
      window.addEventListener("resize", () => {
        myChart3.resize();
      });
    },
    initCharts4() {
      var chartDom = document.getElementById("main4");
      var myChart4 = this.$echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁县", "龙泉市"],
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 210,
          splitNumber: 7,
          name: "%",
          nameLocation: "end",
        },
        grid: {
          top:'10%',
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        series: [
          {
            data: [69.5, 180.7, 56.7, 125.1, 78.4, 41.2, 37.9, 138.1, 199.1],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
            },
            itemStyle: {
              // 图形的形状
              normal: {
                color: function (params) {
                  if (params.value > 102.97) {
                    return "#00E0A6";
                  } else {
                    return "#FC5C5C";
                  }
                },
              },
            },
            markLine: {
              itemStyle: {
                normal: {
                  color: "#FA8565",
                },
              },
              data: [
                {
                  silent: true,
                  type: "average",
                  name: "平均值",
                  label: {
                    formatter: "平均值 102.97",
                    position: "middle",
                    textStyle: {
                      color: "#Fa8565",
                      fontSize: 16,
                    },
                  },
                },
              ],
            },
          }
        ],
      };

      option && myChart4.setOption(option);
      window.addEventListener("resize", () => {
        myChart4.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  background: #efefef !important;
}
@media screen and(min-width:1200px) {
  #app {
    width: 1200px;
    background: #efefef !important;
  }
  .main {
    width: 1200px !important;
  }
}
.main {
  width: 100%;
  margin: 0px auto;
  padding: 20px 0;
}
.index {
  background: #efefef;
}
.minHeader,
.tabtits {
  width: calc(100% - 20px);
  box-sizing: border-box;
  border-radius: 4px;
}
.minHeader {
  background: #fff;
  margin: 0px auto 0;
}
.tabtits {
  background-color: #eff2f5;
  padding: 10px 20px 20px;
  margin: 20px auto 0;
}
.minTop {
  width: calc(100% - 20px);
  box-sizing: border-box;
  border-radius: 4px;
  margin: 0px auto 0;
  background: #fff;
}

.card__header {
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
}
.el-icon-s-marketing {
  color: rgb(54, 153, 247);
  font-size: 18px;
}

.cline {
  width: 2px;
  height: 18px;
  background: #1492ff;
  margin: 0 8px;
}
.icon28 {
  width: 28px;
  height: 28px;
}
.c149 {
  color: #1492ff;
}
.bg1 {
  background-color: #f9fbfd;
  padding: 5px 10px;
  margin-top: 12px;
}
.tieaft {
  font-size: 20px;
  padding: 5px 0 12px 12px;
  font-weight: 600;
  position: relative;
}
.tieaft::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 5px;
  width: 4px;
  height: 28px;
  background-color: #1492ff;
}
.zhan {
  height: 280px;
  padding: 0 20px 20px 20px;
}
.mt12 {
    margin-top: 12px;
}
.mt20 {
    margin-top: 20px;
}
</style>
<style>
.el-breadcrumb__inner.is-link {
  font-weight: 700 !important;
  color: #333333 !important;
}
.el-breadcrumb__inner {
  font-size: 16px !important;
}
.el-tooltip__popper {
  color: #333 !important;
  background: #fff !important;
  font-size: 16px !important;
  padding: 8px 10px !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #fff !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #fff !important;
}
</style>