<template>
    <div class="main">
            <div class="mintop">
                <p class="c3 bold1 fs24 b">基本情况</p>
                <div class="topcon flex between mt12">
                    <div class="flex1">
                        <div class="bgedf c149 h50 flex jcenter acenter fs20 b">生态农业</div>
                        <div class="h90 bgf78 mt12 p20 column between">
                            <p class="fs18 b">生猪保供 (万头)</p>
                            <div class="flex">
                                <div class="w50">
                                    <span>任务数</span>
                                    <span class="c149 ml20 b">1,218</span>
                                </div>
                                <div class="w50">
                                    <span class="ml20">完成数</span>
                                    <span class=" c149 ml20 b">568</span>
                                </div>
                            </div>
                            <div class="flex acenter prog">
                                <span class="mr20">进度</span>
                                <el-progress :percentage="56" class="w80" :stroke-width="10"></el-progress>
                            </div>
                        </div>
                        <div class="h90 bgf78 mt12 p20 column between">
                            <p class="fs18 b">粮食自给 (万亩)</p>
                            <div class="flex">
                                <div class="w50">
                                    <span>任务数</span>
                                    <span class="ml20 c149 b">1,218</span>
                                </div>
                                <div class="w50">
                                    <span class="ml20">完成数</span>
                                    <span class="ml20 c149 b">568</span>
                                </div>
                            </div>
                            <div class="flex acenter prog">
                                <span class="mr20">进度</span>
                                <el-progress :percentage="56" class="w80" :stroke-width="10"></el-progress>
                            </div>
                        </div>
                    </div>
                    <div class="flex1 ml12 mr12">
                        <div class="bgf0f c15b h50 flex jcenter acenter fs20 b">花园乡村</div>
                        <div class="h90 bgf78 mt12 p20 column between">
                            <p class="fs18 b">花园乡村数 (个)</p>
                            <div class="flex">
                                <div class="w50">
                                    <span>任务数</span>
                                    <span class="c15b ml20 b">1,234</span>
                                </div>
                                <div class="w50">
                                    <span class="ml20">完成数</span>
                                    <span class="c15b ml20 b">568</span>
                                </div>
                            </div>
                            <div class="flex acenter flog">
                                <span class="mr20">进度</span>
                                <el-progress :percentage="56" color="#15be50" class="w80" :stroke-width="10">
                                </el-progress>
                            </div>
                        </div>
                        <div class="h90 bgf78 mt12 p20 column between">
                            <p class="fs18 b">村集体经济 (万元)</p>
                            <div>
                                <div class="flex">
                                    <!-- w60 -->
                                    <div class=" flex2">
                                        <!-- w80 -->
                                        <div class="w73">
                                            <p>村集体经济总收入</p>
                                            <p class="b c15b mt12  textCenter">9,999</p>
                                        </div>
                                    </div>
                                    <div class="textCenter flex1">
                                        <p>同比增长</p>
                                        <p class="b c15b mt12">999</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex1">
                        <div class="bgff5 cff8 h50 flex jcenter acenter fs20 b">共同富裕</div>
                        <div class="h90 bgf78 mt12 p20 column between">
                            <p class="fs18 b">低收入农民收入 (万元)</p>
                            <div class="flex">
                                <p class="w65">家庭人均可支配收入</p>
                                <p class="cff8 b">32,745</p>
                            </div>
                            <div class="flex">
                                <p class="w65">收入增幅</p>
                                <p class="cff8 b">5%</p>
                            </div>
                        </div>
                        <div class="h90 bgf78 mt12 p20 column between">
                            <p class="fs18 b">农民收入 (万元)</p>
                            <div class="flex">
                                <p class="w65">农民人均可支配收入</p>
                                <p class="cff8 b">122,745</p>
                            </div>
                            <div class="flex">
                                <p class="w65">收入增幅</p>
                                <p class="cff8 b">10%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mincen mt20">
                <p class="c3 bold1 fs24 b">分析预警</p>
                <div class="flex between mt12">
                    <div class="mr20 w50">
                        <div class="flex acenter">
                            <div class="s_line bg149 mr12"></div>
                            <div class="b fs18">任务完成情况</div>
                        </div>
                        <div class="flex around acenter">
                            <div id="biao" style="height:170px;width: 170px;" class="flex"></div>
                            <div class="flex column jcenter textCenter">
                                <p class="b">总任务</p>
                                <p class="mt12 c149 b">711</p>
                            </div>
                            <div class="flex column jcenter">
                                <div class="flex acenter jcenter">
                                    <div class="bg15b icon14 mr20"></div>
                                    <div class="icon110 flex between acenter"><span class="c9">完成</span><span class="c0 b c6">458</span><span class="c9">
                                            项</span></div>
                                </div>
                                <div class="flex acenter mt30">
                                    <div class="bgff6 icon14 mr20"></div>
                                    <div class="icon110 flex between acenter"><span class="c9">预警</span><span class="c0 b c6">75</span><span class="c9">
                                            项</span></div>
                                </div>
                                <div class="flex acenter mt30">
                                    <div class="bg149 icon14 mr20"></div>
                                    <div class="icon110 flex between acenter"><span class="c9">滞后</span><span class="c0 b c6">183</span><span class="c9">
                                            项</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w50">
                        <div class="flex acenter">
                            <div class="s_line bg149 mr12"></div>
                            <div class="b fs18">低收农户返贫</div>
                        </div>
                        <div class="flex around mr30">
                            <div class=" textCenter mt40 w30">
                                <p class="b">共返贫</p>
                                <p class="c149 mt30 b">71</p>
                            </div>
                            <div class="xian flex wrap">
                                <div class="icon140 flex between ml40 mt40">
                                    <span class="c9">遂昌县</span>
                                    <span class="b c6">22</span>
                                    <span class="c9">户</span>
                                </div>
                                <div class="icon140 flex between ml40 mt40">
                                    <span class="c9">庆元县</span>
                                    <span class="b c6">10</span>
                                    <span class="c9">户</span>
                                </div>
                                <div class="icon140 flex between ml40 mt40">
                                    <span class="c9">云和县</span>
                                    <span class="b c6">31</span>
                                    <span class="c9">户</span>
                                </div>
                                <div class="icon140 flex between ml40 mt40">
                                    <span class="c9">松阳县</span>
                                    <span class="b c6">8</span>
                                    <span class="c9">户</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="minfot mt20">
                <p class="c3 bold1 fs24 b">搬迁计划人数及进度</p>
                <div>
                    <div class="flex year">
                        <div class="icon160"></div>
                        <div class="flex around acenter year mt20">
                            <div class="borderR bgff5 cff8 b">2019</div>
                            <div class="borderR bgedf c149 b">2020</div>
                            <div class="borderR bgf0f c15b b">2021</div>
                        </div>
                    </div>
                    <el-table :data="tableData" stripe
                        :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
                        :row-class-name="tabRowClassName">
                        <el-table-column prop="area" label="地区" width="140">
                            <template  slot-scope="scope">
                                <span style="font-weight: 600;">{{scope.row.area}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num1" label="人数">
                        </el-table-column>
                        <el-table-column prop="progress1" label="进度">
                            <template  slot-scope="scope">
                                <span style="color: #ff6b00">{{scope.row.progress1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num2" label="人数">
                        </el-table-column>
                        <el-table-column prop="progress2" label="进度">
                            <template  slot-scope="scope">
                                <span style="color: #149cff">{{scope.row.progress2}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num3" label="人数">
                        </el-table-column>
                        <el-table-column prop="progress3" label="进度" class="c15b">
                            <template  slot-scope="scope">
                                <span style="color: #15be50">{{scope.row.progress3}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

</template>

<script>
  let one,two,three,four;
export default {
  data() {
    return {
 uname: 'yht',
                topinfo: [],
                tableData: [{
                    area: '庆元',
                    num1: 2158,
                    progress1: '63%',
                    num2: 3209,
                    progress2: '74%',
                    num3: 4085,
                    progress3: '86%'
                },
                {
                    area: '景宁',
                    num1: 2284,
                    progress1: '73%',
                    num2: 2498,
                    progress2: '84%',
                    num3: 3098,
                    progress3: '96%'
                },
                {
                    area: '龙泉',
                    num1: 3077,
                    progress1: '64%',
                    num2: 3658,
                    progress2: '74%',
                    num3: 4361,
                    progress3: '85%'
                },
                {
                    area: '丽水',
                    num1: 28253,
                    progress1: '62%',
                    num2: 36501,
                    progress2: '73%',
                    num3: 30733,
                    progress3: '83%'
                }]
    };
  },
  mounted() {

    let _this =this;
    this.init();
    window.onresize = () => {
        return (() => {
          _this.init();
        })();
    };
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  methods: {
    tabRowClassName({ row, rowIndex }) {
        let index = rowIndex + 1;
        if (index % 2 == 0) {
            return 'warning-row'
        }
    },
    init() {
      if (one != null && one != "" && one != undefined) {
          one.dispose();//销毁
      }
      one = this.$echarts.init(document.getElementById("biao"));
      one.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '40%',
                right: '0',
                width: '10px'
            },
            color: ['#15be50', '#ff6b00', '#149cff'],
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 458 },
                        { value: 75 },
                        { value: 183 }
                    ]
                }
            ]
        });
    },
   },
};

</script>

<style lang="scss" scoped>
@media screen and (min-width:1000px)and (max-width: 1200px) {
    .main {
        width: 100%;
        background-color: #f2f3f5;
        /* width: 1200px; */
        margin: 0px auto;
        padding: 30px 0;
    }
    .mintop, .mincen, .minfot {
        width: 96%;
        /* width: 1160px; */
        border-radius: 4px;
        padding: 20px;
        background: #fff;
    }
    /* table {
        width: 100% !important;
    } */
    .xian {
        width: 78%;
    }
    .xian div{
        width: 110px;
        margin-right: 12px;
    }
}
@media screen and (min-width: 1200px) {
    .main {
        background-color: #f2f3f5;
        width: 1200px;
        margin: 0px auto;
        padding: 30px 0;
    }
    .mintop {
        width: 1160px;
        border-radius: 4px;
        padding: 20px;
        background: #fff;
    }
    .mincen {
        width: 1160px;
        border-radius: 4px;
        padding: 20px;
        background: #fff;
    }
    .minfot {
        width: 1160px;
        border-radius: 4px;
        padding: 20px;
        background: #fff;
    }
}
.main {
    background-color: #f2f3f5;
    /* width: 1200px; */
    margin: 0px auto;
    padding: 30px 0;
}
.mintop {
    /* width: 1160px; */
    border-radius: 4px;
    padding: 20px;
    background: #fff;
}
.mincen {
    /* width: 1160px; */
    border-radius: 4px;
    padding: 20px;
    background: #fff;
}
.minfot {
    /* width: 1160px; */
    border-radius: 4px;
    padding: 20px;
    background: #fff;
}
.p20 {
    padding: 20px;
}
.h50 {
    height: 50px;
}
.h140 {
    height: 140px;
}
.h90 {
    height: 90px;
}
.icon210 {
    width: 210px;
}
.icon400 {
    width: 400px;
}
.icon140 {
    width: 140px;
}
.icon160 {
    width: 160px;
}
.icon110 {
    width: 110px;
}
.s_line {
    width: 8px;
    height: 25px;
    border-radius: 5px;
}
.year {
    width: 100%;
}
.borderR {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
}
.el-table .warning-row {
    background: #edf4ff !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #edf4ff !important;
}

.prog .el-progress__text {
    color: #149cff;
    font-size: 14px !important;
}
.flog .el-progress__text {
    color: #15be50;
    font-size: 14px !important;
}
.el-table th.is-leaf {
    border: none !important;
}
.w30 {
    width: 30%;
}
.w50 {
    width: 50%;
}
.w65 {
    width: 65%;
}
.w60 {
    width: 60%;
}
.w70 {
    width: 70%;
}
.w73 {
    width: 73%;
}
.w80 {
    width: 80%;
}

</style>
