图表

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -1,17 +1,29 @@
 <template>
     <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick" @tab-remove="removeTab">
 
+
         <el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
-            <div class="list_vector_multi" v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
-                v-if="item_last.filed != 'geom'">
-                <span>{{ item_last.filedZH }}：
-                    {{ item_last.filedZH == '面积' ? item_last.data.toFixed(2) : item_last.data }}</span>
-            </div>
+            <el-table :header-cell-style="{
+                background: 'rgba(10, 25, 38, 0.6)',
+                color: '#66b1ff',
+                fontSize: '14px',
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: '400',
+            }" :data="store.state.query_pick_last_pane.value" style="width: 100%">
+                <el-table-column show-overflow-tooltip="true" prop="filedZH" label="属性" width="140">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip="true" prop="data" label="属性值">
+                </el-table-column>
+            </el-table>
         </el-tab-pane>
 
         <el-tab-pane :closable="item.close" :label="item.name" :name="item.name"
             v-for="(item, index) in store.state.query_pick_pane" :key="index">
-            {{ item.name }}
+            <!-- <pie class="echart" unit="亩" ref="multi_query"></pie> -->
+
+            <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩"
+                @echartClick="(name) => echartClick(name, item.value)" :ref="`echartRef`"></pie>
+
         </el-tab-pane>
 
         <el-tab-pane label="自定义" name="自定义">
@@ -220,26 +232,11 @@ export default {
                 let height = cartographic.height;
                 let heading = viewer.scene.camera.heading;
                 let pitch = viewer.scene.camera.pitch;
-                // that.addSceneFun()
 
                 if (!position) {
                     position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
                 }
 
-                // manager_multi_level_query.entities.add({
-                //     name: "manager_multi_level_query",
-                //     position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
-                //     billboard: {
-                //         // 图像地址，URI或Canvas的属性
-                //         image: "./static/images/overview/go.png",
-                //         height: 34,
-                //         width: 36,
-                //         scale: 1.0,
-                //         zIndex: 2,
-                //         show: true
-                //     },
-
-                // })
 
                 const geojsonPoint = {
                     "type": "Point",
@@ -271,14 +268,14 @@ export default {
                             value: res.data.data[0],
                         };
                     } else {
+                        let res = await GetTabsPane(pane_obj);
+
                         store.state.query_pick_pane.push({
                             name: element.name,
-                            // value: res.data.data[0],
+                            value: res,
                             close: 'closable'
                         });
                     }
-
-
                 }
 
                 // this.highlightResults(longitude, latitude);
@@ -288,6 +285,33 @@ export default {
             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
 
+        },
+        handleClick(tab, event) {
+            console.log('tab: ', tab);
+
+            let index = Number(tab.index) - 1
+            if (tab.closable == true) {
+                store.state.query_pick_pane.forEach((res) => {
+                    if (res.name == tab.name) {
+                        let data = [];
+                        res.value.data.datalist.forEach((res) => {
+                            data.push({
+                                name: res.groupvalue,
+                                value: res.sumvalue
+                            })
+                        })
+                        this.setEchart(data, "vertical", index);
+                    }
+                })
+            }
+
+        },
+        setEchart(data, type, index) {
+            this.$nextTick(() => {
+                let max = index == 0 ? 3 : 10
+                let legend_right = index == 0 ? "2%" : "10%"
+                this.$refs.echartRef[index].setOptions({ data, type, max, legend_right });
+            });
         },
         async highlightResults(longitude, latitude) {
             // 高亮结果
@@ -483,6 +507,38 @@ export default {
 .is-disabled {
     display: inline;
 }
+
+
+/deep/ .el-table tr {
+    background: rgba(10, 25, 38, 0.5) !important;
+}
+
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+    background: rgba(10, 25, 38, 0.5) !important;
+
+    border-bottom: 0px solid #ebeef5;
+}
+
+.el-table {
+    color: #fff;
+    background: rgba(10, 25, 38, 0.5) !important;
+}
+
+/deep/ .el-table__fixed-right::before,
+.el-table__fixed::before {
+    background: rgba(10, 25, 38, 0.9) !important;
+}
+
+/deep/ .el-table__fixed-right-patch {
+    background: rgba(10, 25, 38, 0.9) !important;
+}
+
+/deep/ .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+    background: rgba(10, 25, 38, 0) !important;
+}
 </style>