<!--  -->
<template>
  <div class="index">
    <div class="main">
      <div class="minHeader shadow">
        <Breadcrumb :breadData="breadData"></Breadcrumb>
      </div>
      <div class="mt20 minTop shadow">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="">
              <div class="card__header flex between acenter">
                <p class="tieaft">重点关注</p>
                <div class="flex acenter">
                  <div class="c149">查看更多</div>
                  <i class="el-icon-arrow-right c149"></i>
                </div>
              </div>
              <div class="card__headers">
                <div class="c149">· 新引进项目进展情况</div>
                <div class="mt12 flex between acenter">
                  <el-select v-model="value" placeholder="2021年">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <div class="flex acenter">
                    <div class="flex acenter">
                      <div class="icon15 bg15b"></div>
                      <div class="c6">已落地</div>
                    </div>
                    <div class="flex acenter">
                      <div class="icon15 bg149"></div>
                      <div class="c6">在建</div>
                    </div>
                    <div class="flex acenter">
                      <div class="icon15 bgffc"></div>
                      <div class="c6">投资</div>
                    </div>
                    <div class="flex acenter">
                      <div class="icon15 bgff5"></div>
                      <div class="c6">税收总额</div>
                    </div>
                  </div>
                </div>
                <div>
                  <div id="main" style="max-width: 100%; height: 280px"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="">
              <div class="card__header flex between acenter">
                <p class="tieaft">工作动态</p>
                <div class="flex acenter">
                  <div class="c149">查看更多</div>
                  <i class="el-icon-arrow-right c149"></i>
                </div>
              </div>
              <div class="card__headers">
                <div class="flex acenter">
                  <img src="../assets/images/zheng.png" alt="" />
                  <div class="ml20 b c3 fs18">
                    2月23日, 市四届人大六次会议召开
                  </div>
                </div>
                <div class="mt12 text">
                  报告在回顾2020年工作时指出:
                  丽水经济开发区新增储备工业发展空间3万亩，新引进重大招商项目114个，总投资131.4亿
                  元，已入园项目中世界500强1个、中国500强3个、央企2个上市公司7个。新引进总部经济项目25个，落地数字经济项目18
                  个，国家经开区排名从158位跃升至80位。
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="">
              <div class="card__header flex between acenter">
                <p class="tieaft">任务进行时</p>
              </div>
              <div class="card__headers">
                <div class="mb20">
                  <div class="flex between acenter">
                    <p class="c149">· 招商引资</p>
                    <div class="flex acenter">
                      <div class="c149">查看更多</div>
                      <i class="el-icon-arrow-right c149"></i>
                    </div>
                  </div>
                  <div class="flex lab around acenter mt12 b">
                    <div>大项目 (110个) : 22个</div>
                    <div class="lines"></div>
                    <div>实际到资 (189亿元) : 35亿元</div>
                  </div>
                </div>
                <div class="mb20">
                  <div class="flex between acenter">
                    <p class="c149">· 招才引智</p>
                    <div class="flex acenter">
                      <div class="c149">查看更多</div>
                      <i class="el-icon-arrow-right c149"></i>
                    </div>
                  </div>
                  <div class="mt12">
                    <el-row :gutter="12">
                      <el-col :xs="24" :sm="12" :md="12" :lg="12">
                        <div class="item">领导引才 (次) : 10</div>
                      </el-col>
                      <el-col :xs="24" :sm="12" :md="12" :lg="12">
                        <div class="item">引才活动 (次) : 8</div>
                      </el-col>
                      <el-col :xs="24" :sm="12" :md="12" :lg="12">
                        <div class="item">项目对接 (个) : 242</div>
                      </el-col>
                      <el-col :xs="24" :sm="12" :md="12" :lg="12">
                        <div class="item">人才平台 (个) : 7</div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12">
            <div class="">
              <div class="card__header flex between acenter">
                <p class="tieaft">引进人才</p>
                <div class="flex acenter">
                  <div class="c149">查看更多</div>
                  <i class="el-icon-arrow-right c149"></i>
                </div>
              </div>
              <div class="mt12 card__headers">
                <el-row :gutter="12">
                  <el-col :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="items">
                        <div>新引进 (留丽)</div>
                        <div>高校毕业生</div>
                        <div class="cff5 b mt8">2140人</div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="items">
                        <div>新引进 (留丽)</div>
                        <div>博士</div>
                        <div class="cff5 b mt8">30人</div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="items">
                        <div>新招收</div>
                        <div>博士后研究人员</div>
                        <div class="cff5 b mt8">27人</div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="items">
                        <div>新引进</div>
                        <div>硕士</div>
                        <div class="cff5 b mt8">147人</div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="items">
                        <div>新引进</div>
                        <div>外国专家智力</div>
                        <div class="cff5 b mt8">172人</div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="8">
                    <div class="items">
                        <div>新遴选</div>
                        <div>"绿谷精英"</div>
                        <div class="cff5 b mt8">724人</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
  components: {
    Breadcrumb,
  },
  data() {
    return {
      myCityName: "青田县",
      breadData: {
        page_name: "双招双引",
        annual_target: "暂无数据",
        leading: "青田县招商局",
      },
      options: [
        {
          value: "2021年",
          label: "2021年",
        },
        {
          value: "2020年",
          label: "2020年",
        },
      ],
      value: "",
    };
  },
  mounted() {
    this.initCharts1();
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  //方法集合
  methods: {
    initCharts1() {
      var chartDom = document.getElementById("main");
      var myChart1 = this.$echarts.init(chartDom);
      var option;

      option = {
        color: ["#ffc000", "#15be50", "#1492ff", "#ff5151"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "丽水",
              "莲都",
              "青田",
              "龙泉",
              "云和",
              "遂昌",
              "庆元",
              "景宁",
              "松阳",
              "缙云",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "个",
            min: 0,
            max: 50,
            interval: 10,
          },
          {
            type: "value",
            name: "亿元",
            min: 0,
            max: 100000,
            interval: 20000,
          },
        ],
        series: [
          {
            name: "投资",
            type: "bar",
            stack: "进展",
            emphasis: {
              focus: "series",
            },
            data: [20, 10, 12, 10, 10, 10, 10, 10, 10, 10],
          },
          {
            name: "已落地",
            type: "bar",
            stack: "进展",
            emphasis: {
              focus: "series",
            },
            data: [10, 20, 18, 20, 5, 15, 5, 2, 2, 5],
          },
          {
            name: "在建",
            type: "bar",
            stack: "进展",
            emphasis: {
              focus: "series",
            },
            data: [12, 15, 5, 12, 10, 8, 23, 6, 11, 15],
          },
          {
            data: [
              90000, 100000, 85000, 92000, 55000, 72000, 90000, 60000, 65000,
              80000,
            ],
            type: "line",
            yAxisIndex: 1,
          },
        ],
      };

      option && myChart1.setOption(option);
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  background: #efefef !important;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}
@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 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
}
.card__headers {
  padding: 0px 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;
}
.icon15 {
  width: 14px;
  height: 14px;
  margin: 2px 5px 0 10px;
}
.c149 {
  color: #1492ff;
}
.bg149 {
  background: #1492ff;
}
.bg15b {
  background: #15be50;
}
.bgffc {
  background: #ffc000;
}
.bgff5 {
  background: #ff5151;
}
.cff5 {
  color: #ff5151;
}
.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: 9px;
  width: 2px;
  height: 20px;
  background-color: #1492ff;
}
.zhan {
  height: 280px;
  padding: 0 20px 20px 20px;
}
.mt12 {
  margin-top: 12px;
}
.mb12 {
  margin-bottom: 12px;
}
.mt8 {
    margin-top: 8px;
}
.mt20 {
  margin-top: 20px;
}
.text {
  // text-align-last:justify;
  line-height: 33px;
  font-size: 18px;
  color: #666;
}
.lab {
  border-radius: 4px;
  background: #1492ff;
  color: #fff;
  padding: 10px 0;
}
.item {
  border-radius: 4px;
  background: #f2f3f5;
  color: #333;
  padding: 10px 0;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.items {
  border-radius: 4px;
  background: #FFEBEB;
  color: #333;
  padding: 15px 0;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lines {
  width: 1px;
  height: 25px;
  background: #43a8ff;
}
</style>
<style>
.el-breadcrumb__inner.is-link {
  font-weight: 400 !important;
  color: #333333 !important;
}
.el-breadcrumb__inner {
  font-size: 16px !important;
}
.el-input__inner {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 40px;
  background: #ecf3ff;
  color: #1492ff;
  outline: none;
  border: none;
}
.el-input__icon {
  line-height: 30px;
}
.el-icon-arrow-up:before {
  color: #1492ff;
}
.el-input__inner::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #1492ff;
}
.el-input__inner:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #1492ff;
}
</style>