<template>
|
<div class="transport">
|
<div class="title">
|
<span>农产品检查</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="content">
|
<div class="left">
|
<div class="Summary">
|
<p class="title">检验合格率</p>
|
<p class="msg">99.81%</p>
|
</div>
|
<div class="Summary">
|
<p class="title">检测覆盖率</p>
|
<p class="msg">48%</p>
|
</div>
|
<div class="Summary">
|
<p class="title">种植面积</p>
|
<p class="msg">{{ val3 }}</p>
|
</div>
|
<div class="Summary">
|
<p class="title">合格证开具</p>
|
<p class="msg">{{ val4 }}</p>
|
</div>
|
</div>
|
<div class="right">
|
<div class="top" id="earlyWarning"></div>
|
<div class="bottom">
|
<div class="top_label">
|
<div class="label">
|
<div class="label_leftbox"></div>
|
<div class="label_rightbox">
|
<p class="top_title">{{ val5 }}</p>
|
<div class="border"></div>
|
<p class="bottom_title">监管任务</p>
|
</div>
|
</div>
|
<div class="label">
|
<div class="label_leftbox"></div>
|
<div class="label_rightbox">
|
<p class="top_title">{{ val6 }}</p>
|
<div class="border"></div>
|
<p class="bottom_title">主体监管</p>
|
</div>
|
</div>
|
</div>
|
<div class="bottom_label">
|
<div class="label">
|
<div class="label_leftbox"></div>
|
<div class="label_rightbox">
|
<p class="top_title">{{ val7 }}</p>
|
<div class="border"></div>
|
<p class="bottom_title">农资卷监管</p>
|
</div>
|
</div>
|
<div class="label">
|
<div class="label_leftbox"></div>
|
<div class="label_rightbox">
|
<p class="top_title">{{ val8 }}</p>
|
<div class="border"></div>
|
<p class="bottom_title">农产品监管</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
val1: null,
|
val2: null,
|
val3: null,
|
val4: null,
|
val5: null,
|
val6: null,
|
val7: null,
|
val8: null,
|
};
|
},
|
//方法集合
|
methods: {
|
async drawLine() {
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/transport_danger/transportDanger/queryall"
|
);
|
var valueData = dt.result;
|
var valArray = [];
|
for (var i in valueData) {
|
if (valueData[i].name == "本地经营") {
|
this.val1 = valueData[i].value + "辆";
|
} else if (valueData[i].name == "本地在外经营") {
|
this.val2 = valueData[i].value + "辆";
|
} else if (valueData[i].name == "外地牌照在寿光经营") {
|
this.val3 = valueData[i].value + "辆";
|
} else if (valueData[i].name == "过镜车辆") {
|
this.val4 = valueData[i].value + "辆";
|
} else if (valueData[i].name == "偏离路线") {
|
valArray.push(valueData[i]);
|
} else if (valueData[i].name == "停车预警") {
|
valArray.push(valueData[i]);
|
} else if (valueData[i].name == "超速预警") {
|
valArray.push(valueData[i]);
|
} else if (valueData[i].name == "其他") {
|
valArray.push(valueData[i]);
|
} else if (valueData[i].name == "偏离路线1") {
|
this.val5 = valueData[i].value;
|
} else if (valueData[i].name == "停车预警1") {
|
this.val6 = valueData[i].value;
|
} else if (valueData[i].name == "超速预警1") {
|
this.val7 = valueData[i].value;
|
} else if (valueData[i].name == "其他1") {
|
this.val8 = valueData[i].value;
|
}
|
}
|
// 基于准备好的dom，初始化echarts实例
|
var value1 = [];
|
var value2 = [];
|
for (var i in valArray) {
|
var value = valArray[i].value;
|
var str;
|
if (value.indexOf("%") != -1) {
|
str = value.slice(0, value.length - 1);
|
} else {
|
str = value;
|
}
|
value1.push(str);
|
value2.push(valArray[i].name);
|
}
|
|
let Chart = this.$echarts.init(document.getElementById("earlyWarning"));
|
var data = value1;
|
var className = value2;
|
var colorList = ["#0089FF", "#00AEFF", "#00DAFF", "#FFE900"];
|
var defaultData = [100, 100, 100, 100];
|
let option = {
|
title: {
|
top: "0%",
|
text: "今日预警统计",
|
left: "center",
|
textStyle: {
|
color: "#fff",
|
fontSize: 25,
|
},
|
},
|
grid: {
|
left: "5%",
|
right: "5%",
|
bottom: "0%",
|
top: "15%",
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "none",
|
},
|
formatter: function (params) {
|
return (
|
params[0].name +
|
"<br/>" +
|
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
// params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
|
params[0].seriesName +
|
" : " +
|
params[0].value
|
);
|
},
|
},
|
// backgroundColor: "rgb(20,28,52)",
|
xAxis: {
|
show: false,
|
type: "value",
|
},
|
yAxis: [
|
{
|
type: "category",
|
inverse: true,
|
axisLabel: {
|
show: false,
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
splitLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
data: className,
|
},
|
{
|
type: "category",
|
inverse: true,
|
axisTick: "none",
|
axisLine: "none",
|
show: true,
|
axisLabel: {
|
textStyle: {
|
color: "#ffffff",
|
fontSize: "12",
|
},
|
formatter: function (value) {
|
return value + " %";
|
},
|
},
|
data: data,
|
},
|
],
|
series: [
|
{
|
name: "完成率",
|
type: "bar",
|
zlevel: 1,
|
itemStyle: {
|
normal: {
|
barBorderRadius: 0,
|
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
// offset: 0,
|
// color: 'rgb(57,89,255,1)'
|
// }, {
|
// offset: 1,
|
// color: 'rgb(46,200,207,1)'
|
// }]),
|
color: (params) => {
|
return colorList[params.dataIndex];
|
},
|
},
|
},
|
barWidth: 20,
|
data: data,
|
label: {
|
normal: {
|
color: "#fff",
|
show: true,
|
position: [0, "-24px"],
|
textStyle: {
|
fontSize: 16,
|
},
|
formatter: function (a, b) {
|
return a.name;
|
},
|
},
|
},
|
},
|
{
|
name: "背景",
|
type: "bar",
|
barWidth: 20,
|
barGap: "-100%",
|
data: defaultData,
|
itemStyle: {
|
normal: {
|
color: "#1B375E",
|
barBorderRadius: 0,
|
},
|
},
|
},
|
],
|
};
|
|
// 绘制图表
|
Chart.setOption(option);
|
},
|
},
|
mounted() {
|
this.drawLine();
|
},
|
created() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.transport {
|
overflow: hidden;
|
height: 49%;
|
padding-top: 40px;
|
box-sizing: border-box;
|
background: rgba(8, 32, 58, 0.7);
|
.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 {
|
padding-top: 84px;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.left {
|
width: 59%;
|
height: 954px;
|
background: url("../../../assets/img/组 6.png") no-repeat center;
|
background-size: 100% 100%;
|
position: relative;
|
.Summary {
|
position: absolute;
|
text-align: center;
|
left: 130px;
|
top: 57px;
|
.title {
|
font-size: 36px;
|
font-weight: 400;
|
color: #ffffff;
|
text-align: center;
|
}
|
.msg {
|
font-size: 42px;
|
font-weight: bold;
|
color: #fedc85;
|
text-align: center;
|
}
|
}
|
.Summary:nth-child(2) {
|
left: 966px;
|
top: 57px;
|
}
|
.Summary:nth-child(3) {
|
left: 144px;
|
top: 810px;
|
}
|
.Summary:nth-child(4) {
|
left: 985px;
|
top: 810px;
|
}
|
}
|
.right {
|
width: 39%;
|
height: 954px;
|
.top {
|
width: 100%;
|
height: 50%;
|
}
|
.bottom {
|
width: 100%;
|
height: 50%;
|
padding-top: 98px;
|
.top_label {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.label {
|
width: 49%;
|
display: flex;
|
align-items: center;
|
.label_leftbox {
|
width: 167px;
|
height: 140px;
|
background: url("../../../assets/img/组 4(3).png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
.label_rightbox {
|
.top_title {
|
font-size: 56px;
|
font-family: Arial;
|
font-weight: bold;
|
color: #0089ff;
|
}
|
.bottom_title {
|
font-size: 34px;
|
font-weight: normal;
|
color: #fefefe;
|
}
|
.border {
|
width: 192px;
|
height: 15px;
|
background: url("../../../assets/img/形状 1(3).png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
.label:nth-child(2) {
|
.label_leftbox {
|
background: url("../../../assets/img/组 4(1).png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
.label_rightbox {
|
.top_title {
|
color: #00aeff;
|
}
|
.border {
|
background: url("../../../assets/img/形状 1(1).png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
.bottom_label {
|
padding-top: 90px;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.label {
|
width: 49%;
|
display: flex;
|
align-items: center;
|
.label_leftbox {
|
width: 167px;
|
height: 140px;
|
background: url("../../../assets/img/组 4.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.label_rightbox {
|
.top_title {
|
font-size: 56px;
|
font-family: Arial;
|
font-weight: bold;
|
color: #00daff;
|
}
|
.bottom_title {
|
font-size: 34px;
|
font-weight: normal;
|
color: #fefefe;
|
}
|
.border {
|
width: 192px;
|
height: 15px;
|
background: url("../../../assets/img/形状 1.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
.label:nth-child(2) {
|
.label_leftbox {
|
background: url("../../../assets/img/组 4(2).png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
.label_rightbox {
|
.top_title {
|
color: #ffe900;
|
}
|
.border {
|
background: url("../../../assets/img/形状 1(2).png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.transport {
|
height: auto;
|
overflow: visible;
|
padding-top: 40px;
|
background: transparent;
|
.content {
|
.left {
|
width: 100%;
|
height: calc(954px * 2);
|
.Summary {
|
left: calc(130px * 4);
|
top: calc(57px * 2);
|
}
|
.Summary:nth-child(2) {
|
left: calc(1025px * 3.4);
|
top: calc(57px * 2);
|
}
|
.Summary:nth-child(3) {
|
left: calc(130px * 2.5);
|
top: calc(810px * 2);
|
}
|
.Summary:nth-child(4) {
|
left: calc(1025px * 3.5);
|
top: calc(810px * 2);
|
}
|
}
|
.right {
|
width: 100%;
|
height: calc(954px * 2.8);
|
.top {
|
width: 100%;
|
height: 60%;
|
}
|
.bottom {
|
padding-left: 200px;
|
height: 40%;
|
.top_label {
|
.label {
|
.label_leftbox {
|
width: calc(167px * 2.5);
|
height: calc(140px * 2.5);
|
}
|
.label_rightbox {
|
.border {
|
width: calc(192px * 2.5);
|
height: calc(15px * 2.5);
|
}
|
}
|
}
|
}
|
.bottom_label {
|
.label {
|
.label_leftbox {
|
width: calc(167px * 2.5);
|
height: calc(140px * 2.5);
|
}
|
.label_rightbox {
|
.border {
|
width: calc(192px * 2.5);
|
height: calc(15px * 2.5);
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
