|
|
@@ -1,183 +0,0 @@
|
|
|
-<template>
|
|
|
- <borderTemplate titleName="生态修复" class="stxf">
|
|
|
- <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-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="stacontent">
|
|
|
- <div class="item" v-for="(sd, index) in sdlist[tab]" :key="index">
|
|
|
- <div class="itembg"></div>
|
|
|
- <div class="text">{{ sd.name }}</div>
|
|
|
- <span>{{ sdata[tab][sd.prop] || 0 }}</span>
|
|
|
- {{ sd.unit }}
|
|
|
- </div>
|
|
|
- </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 },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- options: [
|
|
|
- { value: "tdxf", label: "土地综合整治" },
|
|
|
- { value: "ssxf", label: "山水工程" },
|
|
|
- { value: "haxf", label: "海岸线保护" }
|
|
|
- ],
|
|
|
- tab: "tdxf",
|
|
|
- paramdatas: {},
|
|
|
- sdlist: {
|
|
|
- tdxf: [
|
|
|
- { name: "综合整治项目", prop: "xzqhdm_number", unit: "个" },
|
|
|
- { name: "土地整治面积", prop: "zlmj", unit: "公顷" },
|
|
|
- { name: "总投资", prop: "tzje", unit: "万元" }
|
|
|
- ],
|
|
|
- ssxf: [
|
|
|
- { name: "综合整治项目", prop: "xzqhdm_number", unit: "个" },
|
|
|
- { name: "土地整治面积", prop: "zlmj", unit: "公顷" },
|
|
|
- { name: "总投资", prop: "tzje", unit: "万元" }
|
|
|
- ],
|
|
|
- haxf: [
|
|
|
- { name: "海岸线长度", prop: "xzqhdm_number", unit: "千米" },
|
|
|
- { name: "自然岸线保有率", prop: "zlmj", unit: "%" },
|
|
|
- { name: "海岸线整治修复项目", prop: "tzje", unit: "个" }
|
|
|
- ]
|
|
|
- },
|
|
|
- sdata: { tdxf: {}, ssxf: {}, haxf: {} },
|
|
|
- eData: {
|
|
|
- xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
|
|
|
- yData: [
|
|
|
- [10, 10, 10, 10],
|
|
|
- [10, 10, 30, 10],
|
|
|
- [10, 10, 10, 40]
|
|
|
- ],
|
|
|
- legend: [""]
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控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.xData = ["农用地", "建设用地", "生态修复", "历史文化保护"];
|
|
|
- this.eData.yData = [
|
|
|
- [10, 10, 10, 10],
|
|
|
- [10, 10, 30, 10],
|
|
|
- [10, 10, 10, 40]
|
|
|
- ];
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.echartRef.setOptions(this.eData);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- GetQueryOne(datas) {
|
|
|
- let params = {
|
|
|
- ...datas,
|
|
|
- jscType: `jsc_stxf_ztgh_${this.tab}` //"jsc_stxf_ztgh_ssxf"
|
|
|
- };
|
|
|
- QueryOne(params).then(res => {
|
|
|
- this.sdata[this.tab] = res.data || {};
|
|
|
- });
|
|
|
- },
|
|
|
- GetQueryList(datas) {
|
|
|
- this.eData.xData = [];
|
|
|
- this.eData.yData = [];
|
|
|
- let params = {
|
|
|
- ...datas,
|
|
|
- jscType: `jsc_stxf_ywlx_${this.tab}` // "jsc_stxf_ywlx_ssxf"
|
|
|
- };
|
|
|
- QueryList(params).then(res => {
|
|
|
- res.data.forEach(edata => {
|
|
|
- this.eData.xData.push(edata.jd_type);
|
|
|
- this.eData.yData.push([edata.xzqhdm_number, edata.zlmj, edata.tzje]);
|
|
|
- });
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.echartRef.setOptions(this.eData);
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {}
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.stxf {
|
|
|
- top: calc(33.3% + 20px) !important;
|
|
|
- .stacontent {
|
|
|
- width: 100%;
|
|
|
- height: 44px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.item {
|
|
|
- width: calc(100% / 3); //112px;
|
|
|
- height: 44px;
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- .itembg {
|
|
|
- width: 112px;
|
|
|
- height: 34px;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- background: no-repeat;
|
|
|
- background-image: url("/static/images/overview/Tab.png");
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 14px;
|
|
|
- color: #bcd3e5;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 18px;
|
|
|
- color: #64daff;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
-}
|
|
|
-#stxf_echart {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 44px);
|
|
|
- position: relative;
|
|
|
- // left: -28%;
|
|
|
- // top: 7%;
|
|
|
-}
|
|
|
-</style>
|
