测试文件
This commit is contained in:
Wjl
39
portal/Digitalgovernment/town/h5/cunzhen/1.css
Normal file
39
portal/Digitalgovernment/town/h5/cunzhen/1.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.cunzhen {
|
||||
flex-direction: column;
|
||||
}
|
||||
.cunzhentitle {
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
|
||||
margin: 0;
|
||||
padding: 10px 0px;
|
||||
|
||||
/* border-bottom: 1px #e1e1e1 solid; */
|
||||
color: #686b73;
|
||||
}
|
||||
.cunzhen .cunzhencontent {
|
||||
width: 90%;
|
||||
padding-bottom: 15px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
border-bottom: 1px #e1e1e1 solid;
|
||||
}
|
||||
.cunzhen .echart71 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.cunzhen .echart72 {
|
||||
width: 100%;
|
||||
height: 1200px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.cunzhen .echart73 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.cunzhen .echart74 {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
395
portal/Digitalgovernment/town/h5/cunzhen/1.js
Normal file
395
portal/Digitalgovernment/town/h5/cunzhen/1.js
Normal file
@@ -0,0 +1,395 @@
|
||||
// 新建改造污水配套管网公里数
|
||||
// Area:地区 Aim：目标值 Actual: 实际值
|
||||
var myChart71 = echarts.init(document.querySelector(".echart71"))
|
||||
var myChart72 = echarts.init(document.querySelector(".echart72"))
|
||||
var sewagepipe = "http://118.178.224.202:8024/api/sewage-pipe"
|
||||
$.get(sewagepipe, function (data) {
|
||||
var d = []
|
||||
d = data.data
|
||||
let arryArea = []
|
||||
let arryAim = []
|
||||
let arryActual = []
|
||||
let countAim = 0
|
||||
let countActual = 0
|
||||
d.forEach(function (item) {
|
||||
arryArea.push(item.area)
|
||||
arryAim.push(item.aim)
|
||||
arryActual.push(item.actual)
|
||||
countAim += item.aim
|
||||
countActual += item.actual
|
||||
})
|
||||
$("#countaim1").empty().append(countAim)
|
||||
let rate = countAim == 0 ? 0 : Number((countActual / countAim) * 100)
|
||||
let other = Number(100 - rate)
|
||||
let rate_percent = rate.toFixed(1) + "%"
|
||||
let other_percent = other.toFixed(1) + "%"
|
||||
let ratedata = [
|
||||
{
|
||||
value: rate,
|
||||
name: rate_percent,
|
||||
label: {
|
||||
position: "center",
|
||||
fontSize: 18,
|
||||
color: "#FE6900",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#FE6900",
|
||||
},
|
||||
},
|
||||
{
|
||||
value: other,
|
||||
name: other_percent,
|
||||
itemStyle: {
|
||||
color: "#EFEFEF",
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
var option71 = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: false,
|
||||
showContent: true,
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["70%", "90%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
// position: "center",
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ratedata,
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart71.setOption(option71)
|
||||
|
||||
var option72 = {
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemWidth: 15,
|
||||
itemHeight:10,
|
||||
top: 5,
|
||||
left: 0,
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: "#6e7178",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
confine: true,
|
||||
formatter: "{b}" + " " + "{a0}" + ": " + "{c0}" + " " + "{a1}" + ": " + "{c1}",
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: 0,
|
||||
top: 50,
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: {
|
||||
type: "category",
|
||||
// max : 15,
|
||||
// min : 0,
|
||||
// splitNumber : 1,
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
align: "left",
|
||||
verticalAlign: "bottom",
|
||||
lineHeight: 70,
|
||||
margin: -0,
|
||||
fontSize: 14,
|
||||
color: "#6e7178",
|
||||
},
|
||||
// tick是刻度，tickeline刻度线，axis是轴，
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisTickLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
data: arryArea,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "left",
|
||||
align: "right",
|
||||
offset: [$(".echart62").width(), -13],
|
||||
|
||||
formatter: "{c}公里",
|
||||
fontSize: 14,
|
||||
color: "#6e7178",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "目标值",
|
||||
type: "bar",
|
||||
barWidth: 10, //柱图宽度
|
||||
|
||||
itemStyle: {
|
||||
color: "#3388FF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
showBackground: {
|
||||
show: true,
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "#E6F1FF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
// data: [16, 4.3, 10, 8.2, 5, 29.5, 10, 15.4, 25, 15.6, 1, 10],
|
||||
data: arryAim,
|
||||
},
|
||||
{
|
||||
name: "实际值",
|
||||
type: "bar",
|
||||
barWidth: 10, //柱图宽度
|
||||
|
||||
itemStyle: {
|
||||
color: "#3BA272",
|
||||
borderRadius: 5,
|
||||
},
|
||||
showBackground: {
|
||||
show: true,
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "#E6F1FF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
// data: [16, 4.3, 10, 8.2, 5, 29.5, 10, 15.4, 25, 15.6, 1, 10],
|
||||
data: arryActual,
|
||||
barGap: "250%",
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart72.setOption(option72)
|
||||
})
|
||||
|
||||
// 农村生活污水处理设施标准化运维
|
||||
// Area:地区 Aim：目标值 Actual: 实际值
|
||||
var myChart73 = echarts.init(document.querySelector(".echart73"))
|
||||
var myChart74 = echarts.init(document.querySelector(".echart74"))
|
||||
var sewagetreatment = "http://118.178.224.202:8024/api/sewage-treatment"
|
||||
$.get(sewagetreatment, function (data) {
|
||||
var d = []
|
||||
d = data.data
|
||||
let arryArea = []
|
||||
let arryAim = []
|
||||
let arryActual = []
|
||||
let countAim = 0
|
||||
let countActual = 0
|
||||
d.forEach(function (item) {
|
||||
arryArea.push(item.area)
|
||||
arryAim.push(item.aim)
|
||||
arryActual.push(item.actual)
|
||||
countAim += item.aim
|
||||
countActual += item.actual
|
||||
})
|
||||
$("#countaim2").empty().append(countAim)
|
||||
let rate = countAim == 0 ? 0 : Number((countActual / countAim) * 100)
|
||||
let other = Number(100 - rate)
|
||||
let rate_percent = rate.toFixed(1) + "%"
|
||||
let other_percent = other.toFixed(1) + "%"
|
||||
let ratedata = [
|
||||
{
|
||||
value: rate,
|
||||
name: rate_percent,
|
||||
label: {
|
||||
position: "center",
|
||||
fontSize: 18,
|
||||
color: "#31C463",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#31C463",
|
||||
},
|
||||
},
|
||||
{
|
||||
value: other,
|
||||
name: other_percent,
|
||||
itemStyle: {
|
||||
color: "#EFEFEF",
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
var option73 = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: false,
|
||||
showContent: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70%", "90%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
// position: "center",
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ratedata,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart73.setOption(option73)
|
||||
|
||||
var option74 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
confine: true,
|
||||
// formatter: "{b}" + "{a1}" + ": " + "{c0}",
|
||||
formatter: "{b}" + " " + "{a0}" + ": " + "{c0}" + " " + "{a1}" + ": " + "{c1}",
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemWidth: 15,
|
||||
itemHeight:10,
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: "#6e7178",
|
||||
},
|
||||
top: 0,
|
||||
left: 0,
|
||||
|
||||
// left: "left",
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: 0,
|
||||
top: 40,
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
|
||||
// },],
|
||||
yAxis: {
|
||||
type: "category",
|
||||
|
||||
axisLabel: {
|
||||
align: "left",
|
||||
verticalAlign: "bottom",
|
||||
lineHeight: 60,
|
||||
margin: -0,
|
||||
fontSize: 14,
|
||||
color: "#6e7178",
|
||||
},
|
||||
// tick是刻度，tickeline刻度线，axis是轴，
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisTickLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
data: arryArea,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "left",
|
||||
align: "right",
|
||||
offset: [$(".echart62").width(), -13],
|
||||
formatter: "{c}个",
|
||||
fontSize: 14,
|
||||
color: "#6e7178",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "实际值",
|
||||
type: "bar",
|
||||
// stack: true,
|
||||
barWidth: 10, //柱图宽度
|
||||
|
||||
itemStyle: {
|
||||
color: "#3388FF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
showBackground: {
|
||||
show: true,
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "#E6F1FF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
// data: [65, 61, 21, 18, 86, 165, 330, 320, 145, 49],
|
||||
data: arryActual,
|
||||
},
|
||||
{
|
||||
name: "目标值",
|
||||
type: "bar",
|
||||
barWidth: 10, //柱图宽度
|
||||
|
||||
itemStyle: {
|
||||
color: "#3BA272",
|
||||
borderRadius: 5,
|
||||
},
|
||||
showBackground: {
|
||||
show: true,
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "#E6F1FF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
// stack: true,
|
||||
// data: [65, 61, 21, 18, 86, 165, 330, 320, 145, 49],
|
||||
data: arryAim,
|
||||
barGap: "250%",
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart74.setOption(option74)
|
||||
})
|
||||
57
portal/Digitalgovernment/town/h5/cunzhen/1.less
Normal file
57
portal/Digitalgovernment/town/h5/cunzhen/1.less
Normal file
@@ -0,0 +1,57 @@
|
||||
.cunzhen {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 20px;
|
||||
visibility: hidden;
|
||||
// display: none;
|
||||
background: #ffffff;
|
||||
height: 720px;
|
||||
width: 83.5%;
|
||||
padding: 10px 20px 20px;
|
||||
h3 {
|
||||
text-align: left;
|
||||
|
||||
padding: 10px 20px;
|
||||
padding-left: 20px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
b {
|
||||
margin: 0 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
> div {
|
||||
box-shadow: 0 0 1px 1px #e1e1e1;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.left {
|
||||
width: 40%;
|
||||
> :nth-child(1) {
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 60%;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user