建新用地饼图

src/components/mapView/tablePage.vue

@@ -35,7 +35,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="tabs-pagation" v-if="table.data.length && table.total">
+    <div class="tabs-pagation pagination" v-if="table.data.length && table.total">
       <!-- <div class="font" v-if="showTotal">共{{ table.total }}条记录</div> -->
       <!-- <el-pagination class="tabone-pagination" background layout="prev, pager, next" :current-page="pageNum"
             :pager-count="5" :page-size="5" :total="table.total" @current-change="changePage" /> -->

src/views/LandConsolidation/components/list.vue

@@ -32,7 +32,7 @@
       :cloumn="cloumn"
       :table="table"
       :indexed="false"
-      layout="prev, pager,next"
+      layout="total, sizes, prev, next, jumper"
       ref="tableDialogRef"
       @currentChange="searchFun"
     >

src/views/LandConsolidation/components/organize.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="OrganizeCon">
+  <div class="OrganizeCon" v-loading="loading">
     <div class="tdTitle">试点目标</div>
     <div class="echars">
-      <pie unit="亩" class="pie_echart" ref="echartRef0"  @echartClickTitle="(name) => echartClickTitle(name)"></pie>
+      <pie
+        unit="亩"
+        class="pie_echart"
+        ref="echartRef0"
+        @echartClickTitle="(name) => echartClickTitle(name)"
+      ></pie>
     </div>
     <div class="content">
       <div class="item" v-for="(sd, index) in orgnList" :key="index">
@@ -124,14 +129,24 @@
   <script>
 import pie from "@/components/echartsTemplate/pie.vue";
 import { QueryOne, QueryList } from "@/api/cockpitNew";
+const color = [
+  "#6172D3",
+  "#F5A539",
+  "#FED969",
+  "#469AE3",
+  "#F97A3C",
+  "#2FD9F2",
+  "#A9DB32",
+  "#6151F1",
+];
 export default {
   props: {},
   data() {
     return {
+      loading: false,
       tab: 0,
       imgs: {
         loc: require("../../../../static/images/overview/icon_yrkkg.png"),
-
         zd1: require("../../../../static/images/overview/icon_yrkkg.png"),
       },
       orgnList: [
@@ -160,10 +175,10 @@ export default {
     pie,
   },
   mounted() {
-    this.initEcharts();
+    // this.initEcharts();
   },
   methods: {
-    echartClickTitle(name){
+    echartClickTitle(name) {
       // console.log(name,'-------------------------');
     },
     changeData(name, updata) {
@@ -174,9 +189,10 @@ export default {
       this.getData();
     },
     getData() {
-      this.$emit("updateParent", "loading", true);
+      this.loading = true;
       this.Getzzlx();
       this.GetOverview();
+      this.GetjxydList();
       this.Getjxyd();
     },
 
@@ -202,7 +218,7 @@ export default {
         id: this.region,
       }).then((res) => {
         this.sdata = res.data.length ? res.data[0] : {};
-        this.$emit("updateParent", "loading", false);
+        this.loading = false;
       });
     },
     Getjxyd() {
@@ -211,7 +227,25 @@ export default {
         id: this.region,
       }).then((res) => {
         this.jxyddata = res.data || {};
-        this.$emit("updateParent", "loading", false);
+        this.loading = false;
+      });
+    },
+    GetjxydList() {
+      QueryList({
+        jscType: "qytuzz_sdzl_ydzlqk_jxyd",
+        id: this.region,
+      }).then((res) => {
+        res.data.forEach((yd, index) => {
+          yd.name = yd.key;
+          yd.label = { color: color[index] };
+        });
+        this.initEcharts({
+          toolTip: true,
+          title: "用地占比",
+          unit: "公顷",
+          data: res.data,
+        });
+        this.loading = false;
       });
     },
     changeCharts(e) {},
@@ -220,41 +254,32 @@ export default {
         this.$refs[`echartRef${id}`].setOptions(data);
       });
     },
-    initEcharts() {
+    initEcharts(payload) {
+      console.log(payload);
       this.myChart = echarts.init(this.$refs.second_pie);
-      const payload = {
-        id: "left-center-1",
-        title: "年龄占比",
-        toolTip: true,
-        data: {
-          total: "4.38",
-          data: ["0.59", "0", "3.02", "0.55", "0.22"],
-          x: ["占用草地", "占用耕地", "占用林地", "占用园地", "占用其他农用地"],
-        },
-      };
+      // const payload = {
+      //   id: "left-center-1",
+      //   title: "年龄占比",
+      //   toolTip: true,
+      //   data: {
+      //     total: "4.38",
+      //     data: ["0.59", "0", "3.02", "0.55", "0.22"],
+      //     x: ["占用草地", "占用耕地", "占用林地", "占用园地", "占用其他农用地"],
+      //   },
+      // };
 
-      let data = [];
+      // let data = [];
 
-      const color = [
-        "#6172D3",
-        "#F5A539",
-        "#FED969",
-        "#469AE3",
-        "#F97A3C",
-        "#2FD9F2",
-        "#A9DB32",
-        "#6151F1",
-      ];
-      payload.data.x.forEach((item, index) => {
-        data.push({
-          value: payload.data.data[index],
-          name: item,
-          label: { color: color[index] },
-        });
-      });
+      // payload.data.x.forEach((item, index) => {
+      //   data.push({
+      //     value: payload.data.data[index],
+      //     name: item,
+      //     label: { color: color[index] },
+      //   });
+      // });
 
-      const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
-      let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
+      // const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
+      // let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
       let option = {
         backgroundColor: "transparent",
         grid: {
@@ -265,7 +290,7 @@ export default {
           containLabel: true,
         },
         tooltip: {
-          show: tooltip,
+          show: true,
           backgroundColor: "rgba(9, 30, 60, 0.6)",
           extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
           borderWidth: 0,
@@ -300,7 +325,7 @@ export default {
         },
         series: [
           {
-            name: payload.title,
+            name: "",
             type: "pie",
             radius: ["55%", "75%"],
             minAngle: 8,
@@ -336,10 +361,15 @@ export default {
                 },
               },
             },
-            data,
+            data: [],
           },
         ],
       };
+      option.tooltip = payload.toolTip || true;
+      option.series[0].name = payload.title;
+      option.series[0].label.formatter = `{b}\n{a|{c}${payload.unit}}`;
+      option.series[0].data = payload.data;
+
       this.myChart.setOption(option);
     },
   },

src/views/LandConsolidation/index.vue

@@ -257,6 +257,9 @@ export default {
   height: 758px !important;
   top: 70px !important;
 }
+.el-select-dropdown {
+  background-color: rgba(4, 28, 50, 1) !important;
+}
 </style>
 <style lang="scss">
 .LandConsolidation {
@@ -321,6 +324,5 @@ export default {
     }
   }
 }
-
 @import "../complianceAnalysis/ghzc.scss";
 </style>

src/views/cockpit/datePicker.scss

@@ -63,6 +63,11 @@
   border-radius: 6px;
 }
 
+.el-picker-panel__icon-btn,
+.el-date-picker__header-label {
+  color: #fff;
+}
+
 .el-time-spinner__item {
   color: #fff;
 

src/views/complianceAnalysis/ghzc.scss

@@ -253,6 +253,8 @@
         }
     }
 
+
+
     .el-collapse-item__header {
         color: #fff;
         /* 修改标题颜色 */
@@ -482,7 +484,8 @@
 .box-sizing {
     box-sizing: border-box;
 }
-.el-button{
+
+.el-button {
     background: #0f7ac8;
     border: none;
     border-radius: 0;
@@ -545,26 +548,32 @@
     //     margin-left: 30px;
     // }
 }
-.pagination{
-    .el-pagination__sizes{
+
+.pagination {
+    .el-pagination__sizes {
         color: #fff;
     }
+
     .el-select .el-input.is-focus .el-input__inner {
         border-color: #409EFF;
     }
-    .el-input__inner{
+
+    .el-input__inner {
         background-color: rgba(75, 185, 250, 0.2);
         border: 1px solid #409EFF;
     }
+
     .el-pagination button:disabled {
         color: #fff;
         background-color: rgba(75, 185, 250, 0.2);
         cursor: not-allowed;
     }
-    .el-pager li{
+
+    .el-pager li {
         background: rgba(75, 185, 250, 0.2);
     }
-    .el-pagination__jump{
+
+    .el-pagination__jump {
         color: #fff;
     }
 }