<template>
  <div class="ecology">
    <div>
      <Breadcrumb :breadData="breadData"></Breadcrumb>
    </div>
    <el-row :gutter="20">
      <el-col :sm="12" :xs="24">
        <div class="clear-water unify-item">
          <h3 class="module-tit">深化碧水行动</h3>
          <ul class="mt12">
            <li v-for="(item, index) in clear_water_info" :key="index">
              <p class="cw-classify">{{ item.classify }}</p>
              <div class="cw-progress">
                <el-progress
                  type="circle"
                  :percentage="100"
                  :stroke-width="12"
                  :show-text="false"
                ></el-progress>
                <p>{{ item.num }}个</p>
              </div>
              <div class="cw-percentage">
                <p class="cw-per-num">{{ item.current_num }}</p>
                <p class="cw-per-text">{{ item.name }}</p>
              </div>
              <div class="cw-compare">
                <p>目标</p>
                <p class="cw-com-per">{{ item.target_num }}</p>
                <p>同比</p>
                <p class="cw-com-desc">上升{{ item.compare_num }}个百分点</p>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :sm="12" :xs="24">
        <div class="air-quality unify-item">
          <h3 class="module-tit">空气质量巩固提升行动</h3>
          <div class="aq-map mt12">
            <img src="../assets/images/sy-map.jpg" alt="" />
            <div class="aq-exponent">
              <p>空气质量指数</p>
              <ul class="aq-list flex between">
                <li v-for="(item, index) in aqList" :key="index">
                  <i :style="{ 'background-color': item.bgc }"></i>
                  <span>{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </div>
          <ul class="aq-desc">
            <li v-for="(item, index) in aq_desc_info" :key="index">
              <p class="aq-desc-name">{{ item.name }}</p>
              <div class="aq-desc-con">
                <div class="aq-desc-tb">
                  <div class="aq-desc-icon">
                    <i class="iconfont" :class="item.icon"></i>
                  </div>
                  <div>
                    <p style="color: #1bd68a">
                      下降{{ Math.abs(item.compare_num) }}个百分点
                    </p>
                    <span>同比</span>
                  </div>
                </div>
                <div class="aq-desc-tb">
                  <div>
                    <p style="color: #1492ff; font-size: 18px">
                      {{ item.current_num }}
                    </p>
                    <span>日均值</span>
                  </div>
                  <div>
                    <p style="color: #1492ff; font-size: 18px">
                      {{ item.target_num }}
                    </p>
                    <span>目标</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="12" :xs="24">
        <div class="no-waste unify-item">
          <h3 class="module-tit">无废城市建设</h3>
          <ul class="nw-con">
            <li
              v-for="(item, index) in no_waste_info"
              :key="index"
              :class="{ 'nw-task-first': index == 0 }"
            >
              <h4 class="nw-task-name">{{ item.name }}</h4>
              <div class="nw-task-num">
                <div class="nw-task-current">
                  <p>{{ item.current_num }}</p>
                  <span>已完成</span>
                </div>
                <div class="nw-task-target">
                  <p>{{ item.target_num }}</p>
                  <span>目标</span>
                </div>
                <div class="nw-task-compare">
                  <p>上升{{ item.compare_num }}个百分点</p>
                  <span>同比</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :sm="12" :xs="24">
        <div class="beautiful-rivers unify-item">
          <h3 class="module-tit">美丽河湖库</h3>
          <ul class="br-con mt12">
            <li v-for="(item, index) in br_info" :key="index">
              <h4>{{ item.name }}</h4>
              <div class="br-task-num flex column acenter">
                <div class="flex acenter between w100 mt12">
                  <div class="br-task-current flex acenter">
                    <div class="br-task-pro">
                      <el-progress
                        type="circle"
                        :percentage="93"
                        :stroke-width="8"
                        :show-text="false"
                      ></el-progress>
                      <i class="iconfont icon-hehu" style="color: #cbebfc"></i>
                    </div>
                    <div>
                      <p style="color: #1492ff; font-size: 18px">
                        {{ item.current_num }}
                      </p>
                      <span>问题整改率</span>
                    </div>
                  </div>
                  <div class="br-task-target flex acenter">
                    <div class="br-task-pro">
                      <el-progress
                        type="circle"
                        :percentage="93"
                        :stroke-width="8"
                        :show-text="false"
                        :color="'#ffc149'"
                      ></el-progress>
                      <i class="iconfont icon-hehu" style="color: #fce8c3"></i>
                    </div>
                    <div>
                      <p style="color: #ffc149; font-size: 18px">
                        {{ item.target_num }}
                      </p>
                      <span>目标</span>
                    </div>
                  </div>
                </div>
                <div class="br-task-compare flex mt12">
                  <i class="iconfont icon-shangsheng"></i>
                  <div>
                    <p style="color: #1bd68a; font-size: 18px">
                      上升{{ item.compare_num }}个百分点
                    </p>
                    <span>环比</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="12" :xs="24">
        <div class="unify-item">
          <h3 class="module-tit mb12">政府工作报告任务落实</h3>
          <Tree :treeData="treeData"></Tree>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from "../components/Breadcrumb.vue";
import Tree from "../components/Tree.vue";
export default {
  name: "ecology",
  components: { Tree , Breadcrumb},
  data() {
    return {
      breadData: {
        page_name: "生态文明",
        annual_target:"暂无数据",
        leading: "青田县环保局",
      },
      aqList: [
        {
          name: "优",
          bgc: "#10D485",
        },
        {
          name: "良",
          bgc: "#189CFF",
        },
        {
          name: "轻度污染",
          bgc: "#2A6FFF",
        },
        {
          name: "中度污染",
          bgc: "#FFA72A",
        },
        {
          name: "重度污染",
          bgc: "#FF842A",
        },
      ],
      clear_water_info: [
        {
          classify: "国考断面",
          num: 2,
          name: "优Ⅲ类",
          current_num: "100%",
          target_num: "100%",
          compare_num: 0.5,
        },
        {
          classify: "省控断面",
          num: 2,
          name: "优Ⅲ类",
          current_num: "100%",
          target_num: "100%",
          compare_num: 0.5,
        },
        {
          classify: "饮用水水源地",
          num: 1,
          name: "优Ⅲ类",
          current_num: "100%",
          target_num: "100%",
          compare_num: 0.5,
        },
      ],
      aq_desc_info: [
        {
          name: "空气优良天数比",
          target_num: "93.3%",
          current_num: "99.3%",
          compare_num: -0.7,
          icon: "icon-kongqiyouliang",
        },
        {
          name: "PM2.5浓度",
          target_num: 36,
          current_num: 22,
          compare_num: -4.3,
          icon: "icon-pm",
        },
      ],
      no_waste_info: [
        {
          name: "新政危险废物年利用处置能力",
          target_num: "30万吨",
          current_num: "20万吨",
          compare_num: 0.5,
        },
        {
          name: "医疗废物收集处置率",
          target_num: "100%",
          current_num: "100%",
          compare_num: 0.5,
        },
        {
          name: "医城镇垃圾分类覆盖面",
          target_num: "100%",
          current_num: "80%",
          compare_num: 0.5,
        },
      ],
      br_info: [
        {
          name: "河湖问题整改",
          target_num: "93.3%",
          current_num: "95.3%",
          compare_num: 0.5,
        },
        {
          name: "河湖问题整改",
          target_num: "93.3%",
          current_num: "95.3%",
          compare_num: 0.5,
        },
      ],
      ecological_creation_info: [
        {
          name: "市级生态文明建设示范市（县）",
          num: "24个",
          icon: "icon-gongyuzhuzhai",
        },
        {
          name: "县市区级生态文明建设示范市（县）",
          num: "61个",
          icon: "icon-chengshi1",
        },
        {
          name: '绿水青山就是"金山银山"实践创新基地',
          num: "24个",
          icon: "icon-shanshui",
        },
      ],
      treeData: [
        {
          name: "深化碧水行动",
          children: [
            {
              name: "新增小微企业园(39.7)",
              status: "正常",
            },
            {
              name: "探索开展“清新田园”建设(39.7)",
              status: "滞后",
            },
            {
              name: "接收外送电(39.7)",
              status: "滞后",
            },
            {
              name: "全省天然气消费量(39.7)",
              status: "正常",
            },
            {
              name: "海铁联运量(39.7)",
              status: "正常",
            },
            {
              name: "淘汰国Ⅲ及以下老旧运营(39.7)",
              status: "正常",
            },
            {
              name: "工业废气治理项目(39.7)",
              status: "正常",
            },
            {
              name: "工业废物治理项目(39.7)",
              status: "正常",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
//公共样式
.w100 {
  width: 100%;
}
.module-tit {
  font-size: 20px;
  padding: 16px 0 0px 12px;
  font-weight: 600;
  position: relative;
}
.module-tit::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 16px;
  width: 4px;
  height: 28px;
  background-color: #1492ff;
}
.unify-item {
  box-sizing: border-box;
  padding: 0 10px 12px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
}
//当前页面样式
.ecology {
  width: calc(100% - 20px);
  margin: 0px auto;
  padding: 20px 0px 0px;
}
.clear-water {
  ul {
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 130px;
      background-color: #fafafa;
      margin-bottom: 20px;
      color: #333;
      .cw-classify {
        width: 20px;
        height: 130px;
        text-align: center;
        background-color: #e1f1ff;
        color: #1492ff;
        display: flex;
        padding: 0 8px;
        align-items: center;
      }
      .cw-progress {
        position: relative;
        >>> .el-progress-circle {
          width: 80px !important;
          height: 80px !important;
        }
        > p {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 18px;
        }
      }
      .cw-percentage {
        .cw-per-num {
          font-size: 20px;
          color: #1492ff;
          font-weight: 600;
          margin-bottom: 8px;
        }
        .cw-per-text {
          font-size: 18px;
        }
      }
      .cw-compare {
        width: 40%;
        padding-left: 10px;
        box-sizing: border-box;
        border-left: 1px solid #eee;
        .cw-com-per {
          color: #1492ff;
          margin: 8px 0 12px;
        }
        .cw-com-desc {
          color: #1bd68a;
          margin: 5px 0;
        }
      }
    }
  }
}
.air-quality {
  .aq-map {
    img {
      width: 100%;
      height: auto;
    }
    .aq-exponent {
      p {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
      }
    }
  }
  .aq-list {
    margin: 10px 0;
    li {
      display: flex;
      align-items: center;
      padding: 8px 0;
      i {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
      }
    }
  }
  .aq-desc {
    margin-top: 12px;
    color: #333;
    li {
      margin-top: 12px;
      background-color: #fafafa;
      .aq-desc-name {
        color: #1492ff;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 2px;
        background-color: #e1f1ff;
      }
      .aq-desc-con {
        padding: 0px 0 10px;
        i {
          color: #1492ff;
          font-size: 24px;
          line-height: 46px;
        }
        .aq-desc-tb {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          padding: 0 12px;
          > div {
            width: 42%;
          }
          .aq-desc-icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background-color: #e7f5ff;
            text-align: center;
          }
        }
      }
    }
  }
}
.no-waste {
  .nw-con {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      padding: 12px 20px;
      background-color: #eefbff;
      width: 100%;
      box-sizing: border-box;
      color: #333;
      margin-top: 12px;
      .nw-task-name {
        font-size: 18px;
        font-weight: 600;
        color: #000;
      }
      .nw-task-num {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 12px 0;
        p {
          font-size: 18px;
          margin: 5px 0;
        }
        .nw-task-current {
          p {
            color: #1492ff;
          }
        }
        .nw-task-target {
          p {
            color: #ffc149;
          }
        }
        .nw-task-compare {
          p {
            color: #1bd68a;
          }
        }
      }
    }
    .nw-task-first {
      width: 100%;
      background-color: #fffcee;
    }
  }
}
.beautiful-rivers {
  .br-con {
    li {
      padding: 12px 20px;
      background-color: #fbfbfb;
      margin-top: 12px;
      color: #333;
      h4 {
        font-weight: 600;
        font-size: 18px;
        color: #000;
      }
      .br-task-num {
        padding: 8px 0 0px;
        >>> .el-progress-circle {
          width: 60px !important;
          height: 60px !important;
        }
        .br-task-pro {
          position: relative;
          margin-right: 8px;
          i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
          }
        }
        .br-task-compare {
          i {
            font-size: 42px;
            color: #1bd68a;
            margin-right: 8px;
          }
        }
      }
    }
  }
}
.ecological-creation {
  .ec-con {
    display: flex;
    justify-content: space-between;
    li {
      width: 30%;
      background-color: #f1f3f5;
      padding: 12px;
      text-align: center;
      color: #333;
      box-sizing: border-box;
      i {
        font-size: 44px;
        color: #1492ff;
      }
    }
  }
}
</style>