测试文件
This commit is contained in:
Wjl
42
portal/h5/jichu/1.css
Normal file
42
portal/h5/jichu/1.css
Normal file
@@ -0,0 +1,42 @@
|
||||
.jichu {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 20px;
|
||||
visibility: hidden;
|
||||
background: #ffffff;
|
||||
width: 83.5%;
|
||||
height: 720px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.jichu h3 {
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
padding-left: 20px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
.jichu .top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 600px;
|
||||
}
|
||||
.jichu .top > div {
|
||||
box-shadow: 0 0 1px 1px #e1e1e1;
|
||||
width: 24%;
|
||||
}
|
||||
.jichu .top > div > :nth-child(2) > :nth-child(1) {
|
||||
padding-left: 20px;
|
||||
height: 90px;
|
||||
}
|
||||
.jichu .top > div > :nth-child(2) > :nth-child(1) span {
|
||||
margin-right: 10px;
|
||||
padding: 20px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.jichu .top > div > :nth-child(2) > :nth-child(1) b {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.jichu .top > div div[class^="echart"] {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
432
portal/h5/jichu/1.js
Normal file
432
portal/h5/jichu/1.js
Normal file
@@ -0,0 +1,432 @@
|
||||
|
||||
//基础设施建设
|
||||
|
||||
|
||||
|
||||
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')
|
||||
}
|
||||
48
portal/h5/jichu/1.less
Normal file
48
portal/h5/jichu/1.less
Normal file
@@ -0,0 +1,48 @@
|
||||
.jichu {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 20px;
|
||||
visibility: hidden;
|
||||
background: #ffffff;
|
||||
width: 83.5%;
|
||||
height: 720px;
|
||||
padding: 10px 20px;
|
||||
|
||||
h3 {
|
||||
text-align: left;
|
||||
|
||||
padding: 20px;
|
||||
padding-left: 20px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 600px;
|
||||
> div {
|
||||
box-shadow: 0 0 1px 1px #e1e1e1;
|
||||
width: 24%;
|
||||
> :nth-child(2) {
|
||||
> :nth-child(1) {
|
||||
padding-left: 20px;
|
||||
height: 90px;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
padding: 20px 0;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
b {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class^="echart"] {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user