暂存

src/views/cockpitNew1/stxf copy.vue

@@ -0,0 +1,183 @@
+<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>