|
@@ -1,6 +1,9 @@
|
|
|
<template>
|
|
|
- <div class="dkxq_Container">
|
|
|
- {{ title }}
|
|
|
+ <div class="dkxq_Container" v-if="isDateilsShow">
|
|
|
+ <div class="sm-panel-header">
|
|
|
+ <span>{{ title }}</span>
|
|
|
+ <span class="closeBtn" @click="close">×</span>
|
|
|
+ </div>
|
|
|
<pie
|
|
|
v-if="title == '现状信息'"
|
|
|
:class="`echart`"
|
|
@@ -8,18 +11,60 @@
|
|
|
@echartClick="echartClick"
|
|
|
:ref="`echartRef`"
|
|
|
></pie>
|
|
|
+ <div
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
+ class="loadingDiv"
|
|
|
+ v-if="title == '规划信息'"
|
|
|
+ >
|
|
|
+ <el-collapse
|
|
|
+ v-for="(value, index_item) in collapseList"
|
|
|
+ :key="index_item"
|
|
|
+ @change="handleChange"
|
|
|
+ >
|
|
|
+ <el-collapse-item
|
|
|
+ :title="'地块' + (index_item + 1)"
|
|
|
+ name="1"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="list_vector_multi"
|
|
|
+ v-for="(value_field, index_field) in value"
|
|
|
+ :key="index_field"
|
|
|
+ @click="go(value)"
|
|
|
+ v-if="value_field.filed != 'geom'"
|
|
|
+ >
|
|
|
+ <!-- v-if="value_field.filed != 'geom'" -->
|
|
|
+ <div class="filed_box">
|
|
|
+ {{ value_field.filedZH }}
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ <div class="filed_box">
|
|
|
+ {{ value_field.data }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import pie from "@/components/echartsTemplate/pie.vue";
|
|
|
import { AddHgxfxV1 } from "@/api/ghss/hgxfx.js";
|
|
|
+import { GetTableData } from "@/api/cockpitNew";
|
|
|
+// 使用
|
|
|
export default {
|
|
|
components: { pie },
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
title: "",
|
|
|
+ itemObj: {},
|
|
|
+ collapseList: [],
|
|
|
+ loading: true,
|
|
|
+ isDateilsShow:false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -57,10 +102,47 @@ export default {
|
|
|
setEchart(data, type) {
|
|
|
console.log("res.data", this.$refs.echartRef);
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.echartRef.setOptions({ data, type });
|
|
|
+ this.$refs.echartRef.setOptions({
|
|
|
+ data,
|
|
|
+ type,
|
|
|
+ max: 6,
|
|
|
+ legend_right: "20%",
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
echartClick(name) {},
|
|
|
+
|
|
|
+ getCollapseList() {
|
|
|
+ this.loading = true
|
|
|
+ this.collapseList = []
|
|
|
+ function cutStringFromFirstSemiColon(str) {
|
|
|
+ var index = str.indexOf(";"); // 获取第一个分号的索引
|
|
|
+ if (index !== -1) {
|
|
|
+ return str.substring(index + 1); // 从分号开始截取到字符串末尾
|
|
|
+ }
|
|
|
+ return str; // 如果没有找到分号,返回原字符串
|
|
|
+ }
|
|
|
+
|
|
|
+ var resultString = cutStringFromFirstSemiColon(this.itemObj.geom);
|
|
|
+ // console.log(wkt,'wktwkt');
|
|
|
+ let obj = {
|
|
|
+ wkt: resultString,
|
|
|
+ id: "dd699f839bc04969ae2dc2e1964d0ad1",
|
|
|
+ };
|
|
|
+ GetTableData(obj).then((res) => {
|
|
|
+ let tempArr = res.data.child;
|
|
|
+
|
|
|
+ tempArr.forEach((item) => {
|
|
|
+ if (item.dataname == "权属") {
|
|
|
+ this.collapseList = item.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.loading = false
|
|
|
+ });
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.isDateilsShow = false
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {},
|
|
|
computed: {},
|
|
@@ -69,7 +151,7 @@ export default {
|
|
|
|
|
|
<style lang="scss">
|
|
|
.dkxq_Container {
|
|
|
- width: 430px;
|
|
|
+ width: 19rem;
|
|
|
height: 600px;
|
|
|
background-color: pink;
|
|
|
position: fixed;
|
|
@@ -87,8 +169,34 @@ export default {
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
.echart {
|
|
|
- width: 400px;
|
|
|
+ width: 19rem;
|
|
|
height: 450px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.list_vector_multi {
|
|
|
+ background-image: url("/static/images/ghzc/内容框.png");
|
|
|
+
|
|
|
+ width: 18rem;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0.1rem 0rem 0.1rem 0rem;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+
|
|
|
+ // border-bottom:1px solid #CCC ;
|
|
|
+}
|
|
|
+
|
|
|
+.list_vector_multi:last-child {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+}
|
|
|
+.filed_box {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.loadingDiv{
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ height: calc(100% - 36px);
|
|
|
+}
|
|
|
</style>
|