|
@@ -3,23 +3,12 @@
|
|
|
<template v-slot:title>
|
|
|
<!-- #content="row" -->
|
|
|
<div class="selectTab">
|
|
|
- <el-select
|
|
|
- v-model="tab"
|
|
|
- placeholder="请选择"
|
|
|
- :popper-append-to-body="false"
|
|
|
- @change="changeCharts"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
+ <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="changeCharts">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="time1" v-if="tab == 'ssxf'">2023-2025年</div>
|
|
|
<div class="stacontent">
|
|
|
<div class="item" v-for="(sd, index) in sdlist[tab]" :key="index">
|
|
|
<div class="itembg"></div>
|
|
@@ -28,27 +17,24 @@
|
|
|
{{ sd.unit }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="time2" v-if="tab == 'ssxf'">截止2024年5月</div>
|
|
|
- <Bar3d id="stxf_echart" ref="echartRef"></Bar3d>
|
|
|
+
|
|
|
</borderTemplate>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
|
|
import borderTemplate from "./borderTemplate.vue";
|
|
|
-import Bar3d from "../../components/echartsTemplate/3dBar.vue";
|
|
|
import { QueryOne, QueryList } from "../../api/cockpitNew";
|
|
|
|
|
|
export default {
|
|
|
- components: { borderTemplate, Bar3d },
|
|
|
+ components: { borderTemplate },
|
|
|
data() {
|
|
|
return {
|
|
|
options: [
|
|
|
- { value: "tdxf", label: "土地综合整治" },
|
|
|
+ { value: "tdzz", label: "土地整治" },
|
|
|
{ value: "ssxf", label: "山水工程" },
|
|
|
- { value: "haxf", label: "海岸线保护" },
|
|
|
],
|
|
|
- tab: "ssxf",
|
|
|
+ tab: "tdzz",
|
|
|
paramdatas: {},
|
|
|
sdlist: {
|
|
|
tdxf: [
|
|
@@ -84,30 +70,7 @@ export default {
|
|
|
//监控data中的数据变化
|
|
|
watch: {},
|
|
|
methods: {
|
|
|
- changeCharts() {
|
|
|
- this.setData(this.paramdatas);
|
|
|
- },
|
|
|
- // //第二个图表
|
|
|
- setData(datas) {
|
|
|
- this.paramdatas = datas;
|
|
|
- if (this.tab == "ssxf") {
|
|
|
- this.GetQueryOne(datas);
|
|
|
- this.GetQueryList(datas);
|
|
|
- } else {
|
|
|
- this.sdata.tdxf = { xzqhdm_number: 100, zlmj: 0, tzje: 20 };
|
|
|
- this.sdata.haxf = { xzqhdm_number: 40, zlmj: 30, tzje: 3 };
|
|
|
- this.eData.gridbottom = "10%";
|
|
|
- this.eData.xData = ["农用地", "建设用地", "生态修复", "历史文化保护"];
|
|
|
- this.eData.yData = [
|
|
|
- [10, 10, 10],
|
|
|
- [10, 10, 30],
|
|
|
- [10, 10, 10],
|
|
|
- ];
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.echartRef.setOptions(this.eData);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
+
|
|
|
GetQueryOne(datas) {
|
|
|
let params = {
|
|
|
...datas,
|
|
@@ -136,12 +99,13 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() { },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.stxf {
|
|
|
- top: 33.3% !important;
|
|
|
+ top: 33.3% !important;
|
|
|
+
|
|
|
.stacontent {
|
|
|
width: 100%;
|
|
|
height: 44px;
|
|
@@ -155,6 +119,7 @@ export default {
|
|
|
height: 44px;
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
+
|
|
|
.itembg {
|
|
|
width: 112px;
|
|
|
height: 34px;
|
|
@@ -164,6 +129,7 @@ export default {
|
|
|
background: no-repeat;
|
|
|
background-image: url("/static/images/overview/Tab.png");
|
|
|
}
|
|
|
+
|
|
|
.text {
|
|
|
font-weight: bold;
|
|
|
font-size: 14px;
|
|
@@ -177,18 +143,6 @@ export default {
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
}
|
|
|
-#stxf_echart {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 44px);
|
|
|
- position: relative;
|
|
|
- // left: -28%;
|
|
|
- // top: 7%;
|
|
|
-}
|
|
|
-.time1,
|
|
|
-.time2 {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- color: #bcd3e5;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
</style>
|