<template>
|
<div class="equipment">
|
<div class="title">
|
<span>特种设备</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="content">
|
<!-- <div class="btn_box">
|
<el-select v-model="value" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
<el-select v-model="value" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
<el-button icon="el-icon-search">查询</el-button>
|
</div> -->
|
<div class="details">
|
<div class="left">
|
<div class="title">全市定检率</div>
|
<div class="details_box" id="details_pie"></div>
|
<div class="details_box" id="details_PC"></div>
|
</div>
|
<div class="right">
|
<div class="title">
|
设备总数: <i>{{ val1 }}</i>
|
</div>
|
<div class="details_box">
|
<div class="list">
|
<div class="ico"></div>
|
<span>压力管道</span>
|
<i>{{ val2 }}</i>
|
</div>
|
|
<div class="list">
|
<div class="ico"></div>
|
<span>压力容器</span>
|
<i>{{ val3 }}</i>
|
</div>
|
<div class="list">
|
<div class="ico"></div>
|
<span>锅炉</span>
|
<i>{{ val4 }}</i>
|
</div>
|
<div class="list">
|
<div class="ico"></div>
|
<span>客运索道</span>
|
<i>{{ val5 }}</i>
|
</div>
|
<div class="list">
|
<div class="ico"></div>
|
<span>起重机械</span>
|
<i>{{ val6 }}</i>
|
</div>
|
<div class="list">
|
<div class="ico"></div>
|
<span>电梯</span>
|
<i>{{ val7 }}</i>
|
</div>
|
<div class="list">
|
<div class="ico"></div>
|
<span>大型游乐设施</span>
|
<i>{{ val8 }}</i>
|
</div>
|
<div class="list">
|
<div class="ico"></div>
|
<span>场（厂）专用机动车辆</span>
|
<i>{{ val9 }}</i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
options: [
|
{
|
value: "选项1",
|
label: "黄金糕",
|
},
|
{
|
value: "选项2",
|
label: "双皮奶",
|
},
|
{
|
value: "选项3",
|
label: "蚵仔煎",
|
},
|
{
|
value: "选项4",
|
label: "龙须面",
|
},
|
{
|
value: "选项5",
|
label: "北京烤鸭",
|
},
|
],
|
value: "",
|
val1: null,
|
val2: null,
|
val3: null,
|
val4: null,
|
val5: null,
|
val6: null,
|
val7: null,
|
val8: null,
|
val9: null,
|
val10: null,
|
};
|
},
|
//方法集合
|
methods: {
|
async drawLine() {
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/specialeq/specialeq/queryall"
|
);
|
var valueData = dt.result;
|
var data = [];
|
for (var i in valueData) {
|
if (valueData[i].name == "全市定检率") {
|
data.push({
|
name: "装备制造",
|
value: parseFloat(valueData[i].value),
|
});
|
} else 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 == "客运索道") {
|
this.val5 = valueData[i].value;
|
} else if (valueData[i].name == "起重机械") {
|
this.val6 = valueData[i].value;
|
} else if (valueData[i].name == "电梯") {
|
this.val7 = valueData[i].value;
|
} else if (valueData[i].name == "大型游乐设施") {
|
this.val8 = valueData[i].value;
|
} else if (valueData[i].name == "场（厂）专用机动车辆") {
|
this.val9 = valueData[i].value;
|
}
|
}
|
|
let Chart = this.$echarts.init(document.getElementById("details_pie"));
|
let ChartOne = this.$echarts.init(document.getElementById("details_PC"));
|
var titleArr = [],
|
seriesArr = [];
|
var colors = [["#00FF9B", "#dfeaff"]];
|
data.forEach(function (item, index) {
|
seriesArr.push({
|
name: item.name,
|
type: "pie",
|
clockWise: false,
|
radius: [100, 110],
|
itemStyle: {
|
normal: {
|
color: colors[index][0],
|
shadowColor: colors[index][0],
|
shadowBlur: 0,
|
label: {
|
show: false,
|
},
|
labelLine: {
|
show: false,
|
},
|
},
|
},
|
hoverAnimation: false,
|
center: ["50%", "50%"],
|
data: [
|
{
|
value: item.value,
|
label: {
|
normal: {
|
formatter: function (params) {
|
return params.value + "%";
|
},
|
position: "center",
|
show: true,
|
textStyle: {
|
fontSize: "30",
|
fontWeight: "bold",
|
color: "#fff",
|
},
|
},
|
},
|
},
|
{
|
value: 100 - item.value,
|
name: "invisible",
|
itemStyle: {
|
normal: {
|
color: colors[index][1],
|
},
|
emphasis: {
|
color: colors[index][1],
|
},
|
},
|
},
|
],
|
});
|
});
|
|
let option = {
|
backgroundColor: "#113A78",
|
title: titleArr,
|
series: seriesArr,
|
};
|
let optionONE = {
|
title: titleArr,
|
series: seriesArr,
|
};
|
// 绘制图表
|
Chart.setOption(option);
|
ChartOne.setOption(optionONE);
|
},
|
},
|
mounted() {
|
this.drawLine();
|
},
|
created() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.equipment {
|
overflow: hidden;
|
height: 50%;
|
background: rgba(8, 32, 58, 0.7);
|
box-sizing: border-box;
|
.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 {
|
.btn_box {
|
padding-top: 66px;
|
display: flex;
|
align-items: center;
|
.el-select {
|
margin-right: 22px;
|
}
|
.el-button {
|
width: 194px;
|
height: 96px;
|
font-size: 48px;
|
font-weight: 400;
|
color: #ffffff;
|
// border-radius: 10px;
|
background: rgba(0, 186, 255, 0.26);
|
}
|
}
|
.details {
|
padding-top: 47px;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.left {
|
width: 29%;
|
.title {
|
width: 100%;
|
height: 152px;
|
background: rgba(4, 141, 43, 0.5);
|
font-size: 68px;
|
font-weight: bold;
|
color: #eff7ff;
|
text-align: center;
|
line-height: 152px;
|
}
|
.details_box {
|
height: 788px;
|
width: 100%;
|
}
|
#details_PC {
|
display: none;
|
}
|
}
|
.right {
|
width: 69%;
|
.title {
|
margin-bottom: 32px;
|
width: 100%;
|
height: 152px;
|
background: rgba(110, 148, 247, 0.5);
|
font-size: 68px;
|
font-weight: bold;
|
color: #eff7ff;
|
text-align: center;
|
line-height: 152px;
|
i {
|
color: #fedc85;
|
}
|
}
|
.details_box {
|
height: 788px;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.list {
|
width: 49%;
|
height: 120px;
|
background: url("../../../assets/img/设备.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
.ico {
|
width: 58px;
|
height: 62px;
|
background: url("../../../assets/img/压力管道.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
margin-right: 64px;
|
margin-left: 30px;
|
}
|
span {
|
font-size: 58px;
|
font-weight: 500;
|
color: #feffff;
|
}
|
i {
|
margin-right: 58px;
|
margin-left: auto;
|
font-size: 63px;
|
font-weight: 400;
|
font-style: italic;
|
color: #ffee98;
|
}
|
}
|
.list:nth-child(2) {
|
.ico {
|
background: url("../../../assets/img/压力容器.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.list:nth-child(3) {
|
.ico {
|
background: url("../../../assets/img/锅炉.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
.list:nth-child(4) {
|
.ico {
|
background: url("../../../assets/img/客运索道.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.list:nth-child(5) {
|
.ico {
|
background: url("../../../assets/img/塔吊.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
.list:nth-child(6) {
|
.ico {
|
background: url("../../../assets/img/消防电梯.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.list:nth-child(7) {
|
width: 100%;
|
background: url("../../../assets/img/设备 拷贝 7.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
.ico {
|
background: url("../../../assets/img/游乐设施.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.list:nth-child(8) {
|
width: 100%;
|
background: url("../../../assets/img/设备 拷贝 7.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
.ico {
|
width: 58px;
|
height: 62px;
|
background: url("../../../assets/img/机动车辆保险.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
.content /deep/.el-select {
|
// position: absolute;
|
// top: 60px;
|
// right: 60px;
|
background-color: #053469;
|
width: 412px;
|
height: 96px;
|
.el-input {
|
background-color: #053469;
|
width: 100%;
|
height: 100%;
|
.el-input__inner {
|
background-color: #053469;
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
font-size: 40px;
|
}
|
.el-input__suffix {
|
padding-right: 28px;
|
}
|
}
|
.selectFrom {
|
height: auto;
|
|
.el-select-dropdown__item {
|
font-size: 40px !important;
|
// padding: 80px 0 !important;
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
}
|
}
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.equipment {
|
height: auto;
|
overflow: visible;
|
background: transparent;
|
.content {
|
.btn_box {
|
display: none;
|
.el-button {
|
width: calc(194px * 2);
|
font-size: 48px;
|
font-weight: 400;
|
color: #ffffff;
|
// border-radius: 10px;
|
background: rgba(0, 186, 255, 0.26);
|
}
|
}
|
.details {
|
.left {
|
width: 100%;
|
#details_pie {
|
display: none;
|
}
|
#details_PC {
|
display: block;
|
}
|
.title {
|
height: calc(152px * 2);
|
|
line-height: calc(152px * 2);
|
background: none;
|
}
|
.details_box {
|
height: calc(788px * 2);
|
}
|
}
|
.right {
|
width: 100%;
|
margin-top: 10%;
|
.title {
|
height: calc(152px * 2);
|
|
line-height: calc(152px * 2);
|
}
|
.details_box {
|
height: calc(788px * 2);
|
|
.list {
|
height: calc(120px * 2);
|
|
.ico {
|
width: calc(58px * 2);
|
height: calc(62px * 2);
|
margin-right: calc(64px * 2);
|
margin-left: calc(30px * 5);
|
}
|
i {
|
margin-right: calc(58px * 2);
|
}
|
}
|
}
|
}
|
}
|
}
|
.content /deep/.el-select {
|
width: calc(412px * 2);
|
}
|
}
|
}
|
</style>
|
