|
|
@@ -1,18 +1,24 @@
|
|
|
<template>
|
|
|
<borderTemplate titleName="耕地保护" class="gdbh">
|
|
|
<div class="content">
|
|
|
- <div class="item" v-for="(sd, i) in sdlist" :key="i">
|
|
|
- <div class="icon" :class="`icongdbh${i}`"></div>
|
|
|
- <div class="text">
|
|
|
- <p>{{ sd.name }}</p>
|
|
|
- <span class="sdvalue">{{ sdata[sd.prop] || 0 }}</span>
|
|
|
- <!-- <span class="unit">{{ sd.unit }}</span> -->
|
|
|
- <span class="unit">平分千米</span>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div class="selectTab">
|
|
|
+ <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <pie3d id="gdbh_echart" unit="km²" ref="echartRef"></pie3d>
|
|
|
+ <pie3d id="gdbh_echart_gdlr" unit="" ref="gdbh_echart_gdlr"></pie3d>
|
|
|
+ <pie3d id="gdbh_echart_gdlc" unit="" ref="gdbh_echart_gdlc"></pie3d>
|
|
|
+ <div class="legend_gdlx">
|
|
|
+ <div class="gdbh_echart_gdlr_legend">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="gdbh_echart_gdlc_legend">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</borderTemplate>
|
|
|
</template>
|
|
|
|
|
|
@@ -27,11 +33,12 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
sdata: {},
|
|
|
- sdlist: [
|
|
|
- { name: "高标准农田", prop: "gzl_yjjbntmj", unit: "km²" }, //耕地保有量
|
|
|
- { name: "补充耕地项目", prop: "xzqhdm_number", unit: "个" },
|
|
|
- { name: "永久基本农田", prop: "yjjbntmj", unit: "km²" },
|
|
|
- { name: "补充耕地面积", prop: "mj", unit: "km²" },
|
|
|
+ tab: '耕地现状',
|
|
|
+ options: [
|
|
|
+ { value: "gdlx", label: "耕地流向" },
|
|
|
+ { value: "gdxz", label: "耕地现状" },
|
|
|
+ { value: "zbph", label: "占补平衡" },
|
|
|
+
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
@@ -78,14 +85,30 @@ export default {
|
|
|
});
|
|
|
} else {
|
|
|
optionsData = [
|
|
|
- { name: "水田", value: 0 },
|
|
|
- { name: "水浇地", value: 0 },
|
|
|
- { name: "旱地", value: 0 },
|
|
|
+ { name: "土地复垦", value: 0 },
|
|
|
+ { name: "异地购买", value: 0 },
|
|
|
+ { name: "补充耕地", value: 0 },
|
|
|
+ { name: "增减挂", value: 0 },
|
|
|
+
|
|
|
];
|
|
|
}
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.echartRef.setOptions(optionsData, 1 / 100000);
|
|
|
+ this.$refs.gdbh_echart_gdlr.setOptions([
|
|
|
+ { name: "土地复垦", value: 12 },
|
|
|
+ { name: "异地购买", value: 21 },
|
|
|
+ { name: "补充耕地", value: 54 },
|
|
|
+ { name: "增减挂", value: 22 },
|
|
|
+
|
|
|
+ ]);
|
|
|
+ this.$refs.gdbh_echart_gdlc.setOptions([
|
|
|
+ { name: "林地", value: 22 },
|
|
|
+ { name: "草地", value: 5 },
|
|
|
+ { name: "交通用地", value: 13 },
|
|
|
+ { name: "其他", value: 43 },
|
|
|
+
|
|
|
+ ]);
|
|
|
+
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
@@ -161,13 +184,12 @@ export default {
|
|
|
// color: #bcd3e5;
|
|
|
// line-height: 24px;
|
|
|
|
|
|
-
|
|
|
font-kerning: normal;
|
|
|
- font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
|
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
|
|
|
font-weight: 700;
|
|
|
font-style: normal;
|
|
|
font-size: 14px;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.sdvalue {
|
|
|
@@ -178,11 +200,10 @@ export default {
|
|
|
// color: #68F4FB;
|
|
|
// line-height: 16px;
|
|
|
|
|
|
-
|
|
|
- font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
|
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
|
|
|
font-weight: 700;
|
|
|
font-style: normal;
|
|
|
- color: #68F4FB;
|
|
|
+ color: #68f4fb;
|
|
|
}
|
|
|
|
|
|
.unit {
|
|
|
@@ -201,11 +222,96 @@ export default {
|
|
|
width: 50px;
|
|
|
}
|
|
|
|
|
|
- #gdbh_echart {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 100px);
|
|
|
- // position: relative;
|
|
|
- // top: 110px;
|
|
|
+ #gdbh_echart_gdlr {
|
|
|
+
|
|
|
+ width: 17rem;
|
|
|
+ height: 10rem;
|
|
|
+ position: fixed;
|
|
|
+ top: 6rem;
|
|
|
+ left: 96rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ #gdbh_echart_gdlc {
|
|
|
+ width: 17rem;
|
|
|
+ height: 10rem;
|
|
|
+ position: fixed;
|
|
|
+ top: 6rem;
|
|
|
+ left: 108rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.legend_gdlx {
|
|
|
+ margin-top: 2rem;
|
|
|
+ width: 25rem;
|
|
|
+ height: 4rem;
|
|
|
+
|
|
|
+ .gdbh_echart_gdlr_legend {
|
|
|
+ height: 4rem;
|
|
|
+ width: 12rem;
|
|
|
+ background: no-repeat;
|
|
|
+
|
|
|
+ background-image: url("/static/images/overview/gdbh_echart_gdlr_legend.png");
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gdbh_echart_gdlc_legend {
|
|
|
+ height: 4rem;
|
|
|
+ width: 12rem;
|
|
|
+ background: no-repeat;
|
|
|
+
|
|
|
+ background-image: url("/static/images/overview/gdbh_echart_gdlc_legend.png");
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ margin-top: 1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.selectTab {
|
|
|
+ position: fixed;
|
|
|
+ left: 109rem;
|
|
|
+ bottom: 51rem;
|
|
|
+
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ // padding-right: 30px;
|
|
|
+ width: 128px !important;
|
|
|
+ height: 24px !important;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 22px;
|
|
|
+ padding-right: 0px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #bcd3e5;
|
|
|
+ border: none;
|
|
|
+ background: url("/static/images/overview/selectBg.png") no-repeat !important;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__icon {
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__suffix {
|
|
|
+ right: -2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__list {
|
|
|
+ color: #bcd3e5 !important;
|
|
|
+ background: linear-gradient(180deg,
|
|
|
+ rgba(3, 115, 177, 0) 11%,
|
|
|
+ rgba(3, 115, 177, 0.48) 100%);
|
|
|
+ border-image: linear-gradient(360deg,
|
|
|
+ rgba(75, 185, 250, 0.2),
|
|
|
+ rgba(75, 185, 250, 0.05)) 1 1 !important;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__item.hover,
|
|
|
+ .el-select-dropdown__item:hover {
|
|
|
+ background-color: rgba(87, 163, 226, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__item {
|
|
|
+ color: #ecf6ff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
zpf
