假数据

src/components/echartsTemplate/pie.vue

@@ -39,7 +39,7 @@ let option = {
   legend: {
     type: "scroll",
     orient: "vertical",
-    right: "5%",
+    right: "0",
     top: "center",
     data: [],
     icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
@@ -183,7 +183,7 @@ export default {
         };
         // dataAll += item.value;
       });
-
+      option.legend.top = dataList.length > 4 ? "10%" : "center";
       option.legend.formatter = function (name) {
         const sItem = dataList.find((item) =>
           `${item.name}`.includes(`${name}`)

src/components/mapView/range.vue

@@ -102,6 +102,7 @@ export default {
       }
       const formdata = new FormData();
       formdata.append("file", file.raw);
+      this.addPolygon();
       ShapeUpload(formdata).then((res) => {
         if (res.success) {
           var layer = myMap.addGeoJson("common_layer", res.data.geojson);
@@ -136,6 +137,25 @@ export default {
         }
       });
     },
+    // 加载GeoJSON数据
+    addPolygon() {
+      // let geojson = CX_geojeson;
+      let polygon = Cesium.GeoJsonDataSource.load(
+        // "static/data/effectJson/lineback_1.json" //
+         "/static/data/ghss/CX_4326.geojson"
+      );
+      polygon.then(function (dataSource) {
+        // 将数据源添加到Cesium Viewer
+        viewer.dataSources.add(dataSource);
+
+        // 可以获取实体并进行操作
+        var entities = dataSource.entities.values;
+        for (var i = 0; i < entities.length; i++) {
+          var entity = entities[i];
+          // 你可以在这里设置实体的属性，例如位置、颜色等
+        }
+      });
+    },
     //绘制
     drawMap() {
       if (!window.handlerPolygon) {

src/views/complianceAnalysis/components/hgxsc.vue

@@ -63,6 +63,7 @@
 import { Add, GetScx, UpdateScx } from "@/api/ghss/hgxfx.js";
 import { ElMessage, ElMessageBox } from "element-ui";
 import range from "@/components/mapview/range.vue"; ///mapview/range
+import hgxfx from "../../../../static/data/ghss/data.js";
 export default {
   components: {
     range,

src/views/complianceAnalysis/components/scjg.vue

@@ -1,18 +1,13 @@
 <template>
   <div class="scjg">
     <div>
-      <div>
-        <span>项目名称：{{}}</span>
-        <el-button
-          type="primary"
-          size="mini"
-          class="downloadBtn"
-          @click="download"
-        >
+      <div class="downloadDiv">
+        <span>项目名称：{{ ruleForm.name }}</span>
+        <el-button type="primary" size="mini" @click="download">
           导出报告
         </el-button>
       </div>
-      <div>分析面积：{{}}平方米</div>
+      <div>分析面积：{{ ruleForm.xzmj }}平方米</div>
     </div>
 
     <div v-for="(eitem, i) in echarts" :key="i" class="echars">
@@ -21,7 +16,7 @@
         <div
           class="eicon"
           :class="eitem.iseyes ? 'eyes' : 'close_eyes'"
-          @click="eitem.iseyes = !eitem.iseyes"
+          @click="eyesChaneg(i)"
         ></div>
         <div
           class="eicon"
@@ -38,6 +33,7 @@
 
 <script>
 import pie from "@/components/echartsTemplate/pie.vue";
+import hgxfx from "../../../../static/data/ghss/data.js";
 export default {
   components: { pie },
   props: {
@@ -57,62 +53,43 @@ export default {
         { label: "详细规划分析", iseyes: false, isshow: false },
       ],
       ruleForm: {
+        name: "",
         xzmj: "",
         fileList: [],
       },
     };
   },
   mounted() {
+    this.ruleForm.name = hgxfx.name;
+    this.ruleForm.xzmj = hgxfx.xzmj;
     this.setEchart1();
     this.setEchart2();
     this.setEchart3();
     this.setEchart4();
   },
   methods: {
+    eyesChaneg(i) {
+      this.echarts[i].iseyes = !this.echarts[i].iseyes;
+      emit("eyesChaneg");
+    },
     setEchart1() {
-      let datalist = [
-        { name: "水田", value: 0 },
-        { name: "农村宅基地", value: 0 },
-        { name: "农村道路", value: 0 },
-      ];
       this.$nextTick(() => {
-        this.$refs.echartRef[0].setOptions(datalist);
+        this.$refs.echartRef[0].setOptions(hgxfx.xzfxlist);
       });
     },
     setEchart2() {
-      let datalist = [
-        { name: "永久基本农田", value: 591045.95 },
-        { name: "城镇开发边界", value: 1721437.42 },
-        { name: "生态保护红线", value: 76682.07 },
-      ];
       this.$nextTick(() => {
-        this.$refs.echartRef[1].setOptions(datalist);
+        this.$refs.echartRef[1].setOptions(hgxfx.sxfxlist);
       });
     },
     setEchart3() {
-      let datalist = [
-        { name: "水田", value: 0 },
-        { name: "水浇地", value: 0 },
-        { name: "旱地", value: 0 },
-      ];
       this.$nextTick(() => {
-        this.$refs.echartRef[2].setOptions(datalist);
+        this.$refs.echartRef[2].setOptions(hgxfx.tdlylist);
       });
     },
     setEchart4() {
-      let datalist = [
-        { name: "非建设用地", value: 971793.04 },
-        { name: "居住用地", value: 325406.88 },
-        { name: "公共管理与公共服务用地", value: 505086.24 },
-        { name: "商业服务业设施用地", value: 203988.66 },
-        { name: "道路与交通设施用地", value: 1155874.98 },
-        { name: "公用设施用地", value: 9664.96 },
-        { name: "绿地与广场用地", value: 110350.76 },
-        { name: "城市建设用地	", value: 64312.92 },
-        { name: "留白用地	", value: 120247.82 },
-      ];
       this.$nextTick(() => {
-        this.$refs.echartRef[3].setOptions(datalist);
+        this.$refs.echartRef[3].setOptions(hgxfx.xxghlist);
       });
     },
 
@@ -139,12 +116,14 @@ export default {
 <style lang="scss" scoped>
 .scjg {
   height: 100%;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   line-height: 40px;
-  .downloadBtn {
-    position: absolute;
-    right: 0px;
-    top: 15px;
+  .downloadDiv {
+    span {
+      width: calc(100% - 100px);
+      display: inline-block;
+    }
   }
 
   .echars {

static/data/ghss/CX_4326.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "CX_4326",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4546" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 340933.315870367572643, 2025290.877866380847991 ], [ 342710.417257539578713, 2025637.356753187719733 ], [ 342906.010177508345805, 2024072.613393413834274 ], [ 340905.374024658871349, 2024039.083178562112153 ], [ 340933.315870367572643, 2025290.877866380847991 ] ] ] ] } }
+]
+}

static/data/ghss/data.js

@@ -0,0 +1,37 @@
+
+var data = {
+    name: '',
+    // 面积
+    xzmj: 2674309.92,
+    // 现状分析
+    xzfxlist: [
+        { name: "水田", value: 0 },
+        { name: "农村宅基地", value: 0 },
+        { name: "农村道路", value: 0 },
+    ],
+    // 三线分析
+    sxfxlist: [
+        { name: "永久基本农田", value: 591045.95 },
+        { name: "城镇开发边界", value: 1721437.42 },
+        { name: "生态保护红线", value: 76682.07 },
+    ],
+    //土地利用规划分析
+    tdlylist: [
+        { name: "水田", value: 0 },
+        { name: "农村宅基地", value: 0 },
+        { name: "农村道路", value: 0 },
+    ],
+    // 详细规划分析
+    xxghlist: [
+        { name: "非建设用地", value: 971793.04 },
+        { name: "居住用地", value: 325406.88 },
+        { name: "公共管理与公共服务用地", value: 505086.24 },
+        { name: "商业服务业设施用地", value: 203988.66 },
+        { name: "道路与交通设施用地", value: 1155874.98 },
+        { name: "公用设施用地", value: 9664.96 },
+        { name: "绿地与广场用地", value: 110350.76 },
+        { name: "城市建设用地	", value: 64312.92 },
+        { name: "留白用地	", value: 120247.82 },
+    ]
+};
+export default data;