<template>
|
<div class="evaluate">
|
<div class="title">
|
<span>农村改厕</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="content">
|
<div class="content1">
|
<div class="content11" id="content11"></div>
|
<div class="content12">
|
<table>
|
<tr>
|
<td class="td1">
|
三格式<br />
|
<span>{{ dataArr6 }}</span>
|
</td>
|
</tr>
|
<tr>
|
<td class="td1">
|
一体化<br />
|
<span>{{ dataArr7 }}</span>
|
</td>
|
</tr>
|
<tr>
|
<td class="td1">
|
双翁氏<br />
|
<span>{{ dataArr8 }}</span>
|
</td>
|
</tr>
|
<tr>
|
<td class="td1">
|
总数<br />
|
<span>{{ dataArr9 }}</span>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="content2">
|
<div class="top">
|
<div class="top0">管护中转站信息</div>
|
<div class="top1">
|
<div class="top11">
|
<div class="top111">
|
<div class="top1110"></div>
|
<div class="top1111">司机</div>
|
<div class="top1112" v-for="(item, i) in dataArr1" :key="i">
|
<div>{{ item }}</div>
|
</div>
|
<div class="top1113">件</div>
|
<div class="top1114"></div>
|
</div>
|
<div class="top112">
|
<div class="top1110"></div>
|
<div class="top1111">车辆</div>
|
<div class="top1112" v-for="(item, i) in dataArr2" :key="i">
|
<div>{{ item }}</div>
|
</div>
|
<div class="top1113">件</div>
|
<div class="top1114"></div>
|
</div>
|
</div>
|
</div>
|
<div class="top2">
|
<div class="top221">
|
<div class="top1110"></div>
|
<div class="top1111">维修</div>
|
<div class="top1112" v-for="(item, i) in dataArr3" :key="i">
|
<div>{{ item }}</div>
|
</div>
|
<div class="top1113">条</div>
|
<div class="top1114"></div>
|
</div>
|
</div>
|
<div class="top1">
|
<div class="top11">
|
<div class="top311">
|
<div class="top1110"></div>
|
<div class="top1111">管护站</div>
|
<div class="top1112" v-for="(item, i) in dataArr4" :key="i">
|
<div>{{ item }}</div>
|
</div>
|
<div class="top1113">件</div>
|
<div class="top1114"></div>
|
</div>
|
<div class="top312">
|
<div class="top1110"></div>
|
<div class="top1111">中转站</div>
|
<div class="top1112" v-for="(item, i) in dataArr5" :key="i">
|
<div>{{ item }}</div>
|
</div>
|
<div class="top1113">件</div>
|
<div class="top1114"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="content3">
|
<div class="content3Title">实时报抽数据</div>
|
<table>
|
<tr v-for="(item, i) in dataTable" :key="i">
|
<td class="ctd1">{{ i + 1 }}</td>
|
<td class="ctd2">
|
<span>{{ item.village }}</span
|
><br />
|
{{ item.person }}：{{ item.phone }}
|
</td>
|
<td class="ctd3">
|
<button>{{ item.status }}</button>
|
<p>{{ item.createTime }}</p>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div class="content4">
|
<div class="content3Title">实时报修数据</div>
|
<table>
|
<tr v-for="(item, i) in dataTable1" :key="i">
|
<td class="ctd1">{{ i + 1 }}</td>
|
<td class="ctd2">
|
<span>{{ item.village }}</span
|
><br />
|
{{ item.person }}：{{ item.phone }}
|
</td>
|
<td class="ctd3">
|
<button>{{ item.status }}</button>
|
<p>{{ item.createTime }}</p>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
chartOption1: {},
|
dataArr1: [],
|
dataArr2: [],
|
dataArr3: [],
|
dataArr4: [],
|
dataArr5: [],
|
dataArr6: "",
|
dataArr7: "",
|
dataArr8: "",
|
dataArr9: "",
|
|
dataTable: [],
|
dataTable1: [],
|
};
|
},
|
//方法集合
|
methods: {
|
async getData() {
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/ghzzz/ghzzz/queryall"
|
);
|
dt.result.forEach((e) => {
|
if (e.name == "司机") {
|
this.dataArr1 = this.dataLength(e.value);
|
} else if (e.name == "车辆") {
|
this.dataArr2 = this.dataLength(e.value);
|
} else if (e.name == "维修") {
|
this.dataArr3 = this.dataLength(e.value);
|
} else if (e.name == "管护站") {
|
this.dataArr4 = this.dataLength(e.value);
|
} else if (e.name == "中转站") {
|
this.dataArr5 = this.dataLength(e.value);
|
} else if (e.name == "三格式") {
|
this.dataArr6 = e.value;
|
} else if (e.name == "一体化") {
|
this.dataArr7 = e.value;
|
} else if (e.name == "双翁氏") {
|
this.dataArr8 = e.value;
|
} else if (e.name == "总数") {
|
this.dataArr9 = e.value;
|
}
|
});
|
const { data: dt1 } = await this.$http.get(
|
"/jeecg-boot/realcheck/realcheck/queryall"
|
);
|
this.dataTable = dt1.result;
|
const { data: dt2 } = await this.$http.get(
|
"/jeecg-boot/repair/repair/queryall"
|
);
|
this.dataTable1 = dt2.result;
|
},
|
//字符串切割
|
dataLength(parm) {
|
var dataAll = [];
|
for (var i = 0; i < parm.length; i++) {
|
dataAll.push(parm.substring(i, i + 1));
|
}
|
return dataAll;
|
},
|
|
async draw() {
|
const { data: dt } = await this.$http.get("/jeecg-boot/wc/wc/queryall");
|
this.GetChart1(dt.result);
|
},
|
|
GetChart1(val) {
|
let year = [];
|
let value = [];
|
val.forEach((element) => {
|
year.push(element.year);
|
value.push(element.num);
|
});
|
let ChartOption = this.$echarts.init(
|
document.getElementById("content11")
|
);
|
this.chartOption1 = {
|
title: {
|
text: "改厕信息",
|
left: "center",
|
top: "5%",
|
textStyle: {
|
align: "center",
|
color: "#FFFFFF",
|
fontSize: 20,
|
},
|
},
|
grid: {
|
top: "20%",
|
left: "3%",
|
right: "3%",
|
bottom: "8%",
|
containLabel: true,
|
},
|
xAxis: [
|
{
|
type: "category",
|
boundaryGap: false,
|
axisLine: {
|
//坐标轴轴线相关设置。数学上的x轴
|
show: true,
|
lineStyle: {
|
color: "#233e64",
|
},
|
},
|
axisLabel: {
|
//坐标轴刻度标签的相关设置
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
axisTick: {
|
show: false,
|
},
|
data: year,
|
},
|
],
|
yAxis: [
|
{
|
type: "value",
|
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: "#233e64",
|
},
|
},
|
axisLine: {
|
show: false,
|
},
|
axisLabel: {
|
textStyle: {
|
color: "#FFF",
|
},
|
},
|
},
|
],
|
series: [
|
{
|
name: "异常流量",
|
type: "line",
|
smooth: true, //是否平滑曲线显示
|
symbolSize: 0,
|
|
lineStyle: {
|
normal: {
|
color: "#3deaff", // 线条颜色
|
},
|
},
|
areaStyle: {
|
//区域填充样式
|
normal: {
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
color: new this.$echarts.graphic.LinearGradient(
|
0,
|
0,
|
0,
|
1,
|
[
|
{
|
offset: 0,
|
color: "rgba(61,234,255, 0.9)",
|
},
|
{
|
offset: 0.7,
|
color: "rgba(61,234,255, 0)",
|
},
|
],
|
false
|
),
|
|
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
},
|
},
|
data: value,
|
},
|
],
|
};
|
ChartOption.setOption(this.chartOption1);
|
},
|
},
|
mounted() {
|
this.draw();
|
},
|
created() {
|
this.getData();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped="scoped">
|
.evaluate {
|
height: 49%;
|
width: 100%;
|
margin-top: 1%;
|
background: rgba(8, 32, 58, 0.7);
|
overflow: hidden;
|
.title {
|
width: 100%;
|
position: relative;
|
|
img {
|
width: 100%;
|
}
|
|
span {
|
font-size: 78px;
|
font-weight: 400;
|
color: #ffe86b;
|
background: linear-gradient(0deg, #bce7ff 0%, #69efff 98.6572265625%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
}
|
}
|
}
|
|
.content {
|
height: 90%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
|
.content1 {
|
width: 49.5%;
|
height: 50%;
|
display: none;
|
}
|
.content2 {
|
width: 100%;
|
height: 50%;
|
}
|
.content3 {
|
width: 49.5%;
|
height: 50%;
|
}
|
.content4 {
|
width: 49.5%;
|
height: 50%;
|
}
|
|
.content11,
|
#content11 {
|
width: 70%;
|
height: 100%;
|
}
|
|
.content12 {
|
width: 30%;
|
height: 100%;
|
}
|
|
.content12 table {
|
margin: auto;
|
height: 100%;
|
width: 90%;
|
border-spacing: 0px 50px;
|
}
|
.td1 {
|
background-image: url(../../../assets/img/管护中站标题.png);
|
background-size: 100% 100%;
|
font-size: 20px;
|
color: #ffffff;
|
text-align: center;
|
span {
|
color: orange;
|
}
|
}
|
|
.top {
|
height: 100%;
|
width: 100%;
|
|
.top0 {
|
height: 15%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 59px;
|
color: #ffffff;
|
}
|
|
.top1 {
|
height: 25%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.top11 {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
.top111 {
|
background-image: url(../../../assets/img/司机.png);
|
}
|
|
.top112 {
|
background-image: url(../../../assets/img/垃圾车.png);
|
}
|
|
.top311 {
|
background-image: url(../../../assets/img/管护站.png);
|
}
|
|
.top312 {
|
background-image: url(../../../assets/img/中转站.png);
|
}
|
|
.top111,
|
.top112,
|
.top311,
|
.top312 {
|
height: 80%;
|
width: 49%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
font-size: 30px;
|
color: #ffffff;
|
}
|
}
|
}
|
|
.top2 {
|
height: 28%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.top221 {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
color: #ffffff;
|
height: 80%;
|
width: 49%;
|
font-size: 30px;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-image: url(../../../assets/img/维修.png);
|
}
|
}
|
}
|
|
.top1110 {
|
width: 18%;
|
}
|
|
.top1111 {
|
width: 40%;
|
}
|
|
.top1112 {
|
background-color: #053f55;
|
width: 80px;
|
height: 60%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #ffff00;
|
}
|
|
.top1114 {
|
width: 5%;
|
}
|
|
.content3Title {
|
height: 10%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 50px;
|
color: #ffffff;
|
}
|
.content3 table {
|
height: 90%;
|
width: 98%;
|
margin: auto;
|
color: #ffffff;
|
border: solid 1px #154a6d;
|
text-align: center;
|
tr:nth-of-type(odd) {
|
background-color: #202e3b;
|
}
|
tr:nth-of-type(even) {
|
background-color: #08213c;
|
}
|
}
|
.content4 table {
|
height: 90%;
|
width: 98%;
|
margin: auto;
|
color: #ffffff;
|
border: solid 1px #154a6d;
|
text-align: center;
|
tr:nth-of-type(odd) {
|
background-color: #202e3b;
|
}
|
tr:nth-of-type(even) {
|
background-color: #08213c;
|
}
|
}
|
.ctd1 {
|
font-size: 30px;
|
width: 10%;
|
}
|
.ctd2 {
|
width: 60%;
|
font-size: 30px;
|
span {
|
font-size: 40px;
|
}
|
}
|
.content3 .ctd3 {
|
width: 35%;
|
font-size: 30px;
|
button {
|
margin-left: 50%;
|
width: 30%;
|
height: 50%;
|
border-radius: 30%;
|
background-color: #ffd649;
|
font-size: 30px;
|
}
|
}
|
.content4 .ctd3 {
|
width: 35%;
|
font-size: 30px;
|
button {
|
margin-left: 50%;
|
width: 30%;
|
height: 50%;
|
border-radius: 30%;
|
background-color: #f95a22;
|
font-size: 30px;
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.evaluate {
|
height: 2400px;
|
overflow: visible;
|
background: transparent;
|
margin: 0;
|
}
|
}
|
</style>
|
