//基础设施建设



var myChart31 = echarts.init(document.querySelector(".echart31"))
var myChart32 = echarts.init(document.querySelector(".echart32"))
var myChart33 = echarts.init(document.querySelector(".echart33"))
var myChart34 = echarts.init(document.querySelector(".echart34"))

var echartsYLeft = echarts.init(document.querySelector(".echartsYLeft"))

 $.get("http://118.178.224.202:8024/api/road-c",function(data){

  $("#xujian").html(data.data[0].continue)
  $("#kaigong").html(data.data[0].work)
  $("#jiancheng").html(data.data[0].finish)

  $("#xinzheng").html(data.data[0].increase)
  $("#kgjianshe").html(data.data[0].construction)
  $("#kgtozi").html(data.data[0].invest)
  $("#ysjs").html(data.data[0].construction2)

  var option31 = {
    tooltip: {
      trigger: "item",
      show: true,
      showContent: true,
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    //   itemStyle: {
    //     tooltip: true,
    //   },
    // },
    series: [{
      // name: "Access From",
      type: "pie",
      radius: ["70%", "90%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        // position: "center",
      },
      itemStyle: {
        color: "#3D9DF4",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: data.data[0].finish,
          name: (data.data[0].finish/data.data[0].finish*100).toFixed(0) + "%" ,
          label: {
            position: "center",
            fontSize: 16,
          },
        },
        {
          value: data.data[0].finish-data.data[0].finish,
          // name: "43%",
          itemStyle: {
            color: "#EEEEEE",
          },
          label: {
            position: "center",
            fontSize: 16,
          },
        },
    ],
    }, ],
  }    
  myChart31.setOption(option31)
  var option33 = {
    tooltip: {
      trigger: "item",
      show: true,
      showContent: true,
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    //   itemStyle: {
    //     tooltip: true,
    //   },
    // },
    series: [{
      // name: "Access From",
      type: "pie",
      radius: ["70%", "90%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        // position: "center",
      },
      itemStyle: {
        color: "#3D9DF4",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: data.data[0].increase,
          name: (data.data[0].increase/data.data[0].increase*100).toFixed(0) + "%" ,
          label: {
            position: "center",
            fontSize: 16,
          },
        },
        {
          value: 0,
          // name: "43%",
          itemStyle: {
            color: "#EEEEEE",
          },
          label: {
            position: "center",
            fontSize: 16,
          },
        },
    ],
    }, ],
  }

  var option34 = {
    tooltip: {
      trigger: "item",
      show: true,
      showContent: true,
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    //   itemStyle: {
    //     tooltip: true,
    //   },
    // },
    series: [{
      // name: "Access From",
      type: "pie",
      radius: ["70%", "90%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        // position: "center",
      },
      itemStyle: {
        color: "#3D9DF4",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: data.data[0].invest,
          name: (data.data[0].invest/data.data[0].invest*100).toFixed(0) + "%" ,
          label: {
            position: "center",
            fontSize: 16,
          },
        },
        {
          value: 0,
          // name: "43%",
          itemStyle: {
            color: "#EEEEEE",
          },
          label: {
            position: "center",
            fontSize: 16,
          },
        },
    ],
    }, ],
  }

  var option35 = {
    tooltip: {
      trigger: "item",
      show: true,
      showContent: true,
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    //   itemStyle: {
    //     tooltip: true,
    //   },
    // },
    series: [{
      // name: "Access From",
      type: "pie",
      radius: ["70%", "90%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        // position: "center",
      },
      itemStyle: {
        color: "#3D9DF4",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: data.data[0].construction2,
          name: (data.data[0].construction2/data.data[0].construction2*100).toFixed(0) + "%" ,
          label: {
            position: "center",
            fontSize: 16,
          },
        },
        {
          value: 0,
          // name: "43%",
          itemStyle: {
            color: "#EEEEEE",
          },
          label: {
            position: "center",
            fontSize: 16,
          },
        },
    ],
    }, ],
  }



  myChart32.setOption(option33)

  myChart33.setOption(option34)
  
  myChart34.setOption(option35)


  echartsYLeft.setOption(option31)


 })


/* 无数据显示 */
var option32 = {
  tooltip: {
    trigger: "item",
    show: true,
    showContent: true,
  },
  // legend: {
  //   top: "5%",
  //   left: "center",
  //   itemStyle: {
  //     tooltip: true,
  //   },
  // },
  series: [{
    // name: "Access From",
    type: "pie",
    radius: ["70%", "90%"],
    avoidLabelOverlap: false,
    label: {
      show: true,
      // position: "center",
    },
    itemStyle: {
      color: "#d7d7d7",
    },
    emphasis: {
      label: {
        show: true,
        fontSize: "40",
        fontWeight: "bold",
      },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
    labelLine: {
      show: false,
    },
    data: [{
      value: 0,
      name: "0%",
      label: {
        position: "center",
        fontSize: 18,
      },
    }, ],
  }, ],
}







var C2echartsYLeft = echarts.init(document.querySelector(".C2echartsYLeft"))
C2echartsYLeft.setOption(option32)

$(function(){
  jiazai()
  yewu()
})

/* 两个点击事件 */
$("#yearmb").click(function(){
  $("#yearmb").attr("class",'ndmb truedcdb' )  
  $("#ducha").attr("class",'dcdb truendmb')
  
  jiazai()
})

$("#ducha").click(function(){
  $("#ducha").attr("class",'ndmb  truendmb')
  $("#yearmb").attr("class",'dcdb truedcdb')
  jiazai2()
})


function jiazai(){
  let tabehtml = ""
  tabehtml +=  '<tr>'+
  '<td>开展未来社区创建工作</td>'+
  '<td>城市跟新和区域发展处</td>'+
  '<td><div class="zhengchangBu"> <div class="zhengchangBuDiv">  <img style="width: 20px;height: 20px;"  src="./image/正常.svg" alt="">正常</div></div> '+
  '</td>'+
  '</tr>'+
  '<tr>'+
  '<td>全面推进城镇老旧小区改造</td>'+
  '<td>物业和房屋管理处</td>'+
  '<td><div class="zhengchangBu"> <div class="zhengchangBuDiv">  <img style="width: 20px;height: 20px;"  src="./image/正常.svg" alt="">正常</div></div> '+
  '</td>'+
  '</tr>'+
  '<tr>'+
  '<td>省级美丽宜居示范村建设</td>'+
  '<td>村镇建设处</td>'+
  '<td><div class="zhengchangBu"> <div class="zhengchangBuDiv">  <img style="width: 20px;height: 20px;"  src="./image/正常.svg" alt="">正常</div></div> '+
  '</td>'+
  '</tr>'+
  '<tr>'+
  '<td>新建改造污水管网</td>'+
  '<td>村镇建设处</td>'+
  '<td> <div class="zhengchangBu"> <div class="zhengchangBuDiv">  <img style="width: 20px;height: 20px;"  src="./image/正常.svg" alt="">正常</div></div> '+
  '</td>'+'</tr>'
  $(".tableListAll tbody").html(tabehtml)
}

function jiazai2(){
  let tabehtml = ""
  tabehtml += 
  '<tr><td colspan=3 style="text-align:center"> 暂无数据</td></tr>';

  $(".tableListAll tbody").html(tabehtml)
}

$("#yewu").click(function(){
  yewu()
})
$("#renwu").click(function(){
  renwu()
})



function yewu(){
  $("#yewu").attr("class",'trueRenwu')
  $("#renwu").attr("class",'fasleRenwu')
  $("#echartTitleMsg").css("display",'block')
  $("#echartTitleNone").css("display",'none')
}
function  renwu(){
  $("#renwu").attr("class",'trueRenwu')
  $("#yewu").attr("class",'fasleRenwu')
  $("#echartTitleNone").css("display",'block')
  $("#echartTitleMsg").css("display",'none')
}