Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/components/Query/clickQuery/CockpitVector.vue

@@ -1,42 +1,62 @@
 <template>
   <div class="CockpitVectorBox">
-
     <div class="cockpit_vector">
-
-      <el-table :header-cell-style="{
-        background: 'rgba(10, 25, 38, 0.6)',
-        color: '#66b1ff',
-        fontSize: '14px',
-        fontFamily: 'Microsoft YaHei',
-        fontWeight: '400',
-      }"
-        :data="store.state.vectorData.filter(item => item.name !== 'id' && item.name !== 'geom' && item.name !== 'type' && item.name !== 'create_time' && item.name !== 'val1' && item.name !== 'val2')"
-        style="width: 100%">
-
-        <el-table-column show-overflow-tooltip="true" prop="name" label="属性" width="90">
+      <el-table
+        :header-cell-style="{
+          background: 'rgba(10, 25, 38, 0.6)',
+          color: '#66b1ff',
+          fontSize: '14px',
+          fontFamily: 'Microsoft YaHei',
+          fontWeight: '400',
+        }"
+        :data="
+          store.state.vectorData.filter(
+            (item) =>
+              item.name !== 'id' &&
+              item.name !== 'geom' &&
+              item.name !== 'type' &&
+              item.name !== 'create_time' &&
+              item.name !== 'val1' &&
+              item.name !== 'val2'
+          )
+        "
+        style="width: 100%"
+      >
+        <el-table-column
+          show-overflow-tooltip="true"
+          prop="name"
+          label="属性"
+          width="90"
+        >
         </el-table-column>
-        <el-table-column show-overflow-tooltip="true" prop="value" label="属性值">
+        <el-table-column
+          show-overflow-tooltip="true"
+          prop="value"
+          label="属性值"
+        >
         </el-table-column>
       </el-table>
+      <div id="seaTransferCharts" ref="echartsRef"></div>
     </div>
   </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import { QueryList } from '@/api/cockpitNew'
+import { QueryList } from "@/api/cockpitNew";
 import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
+import * as echarts from "echarts";
+import { name } from "file-loader";
 let pick_entity = null;
 export default {
   components: {},
   data() {
     return {
       restaurants: [],
-      state: '',
+      state: "",
       timeout: null,
       pick_entity: null,
-
     };
   },
   //监听属性 类似于data概念
@@ -48,7 +68,10 @@ export default {
     build_data(geojson) {
       geojson.coordinates.forEach((res) => {
         const twoDArray = res[0];
-        const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+        const oneDArray = twoDArray.reduce(
+          (accumulator, currentValue) => accumulator.concat(currentValue),
+          []
+        );
 
         pick_entity.entities.add({
           polygon: {
@@ -73,8 +96,8 @@ export default {
             // 是否显示
             show: true,
             // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
-            zIndex: 10
-          }
+            zIndex: 10,
+          },
         });
 
         // 注意：polygon首尾坐标要一致
@@ -85,7 +108,11 @@ export default {
         viewer.camera.flyTo({
           duration: 1,
 
-          destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
+          destination: Cesium.Cartesian3.fromDegrees(
+            centroid[0],
+            centroid[1],
+            3000
+          ),
           // destination: {
           //     x: -6283267.004204832,
           //     y: 28123682.896774407,
@@ -94,31 +121,178 @@ export default {
           orientation: {
             heading: 6.149339593573709,
             pitch: -1.539825618847483,
-            roll: 0
+            roll: 0,
           },
         });
-
-
-      })
+      });
+    },
+    async initChart(params) {
+      const chartDom = this.$refs.echartsRef;
+      let myChart = echarts.init(chartDom);
+      let obj = {
+        jscType: "jsc_hysyq_yhlx_zbmx_cx",
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+        id: params ? params.id : "4602",
+        val0: params ? params.dataid : "3",
+      };
+      let res = await QueryList(obj);
+      const data = [];
+      var total = 0
+      res.data.forEach((item, index) => {
+        data.push({
+          name: item["用海类型"],
+          value: item["宗海面积(公顷)"],
+        });
+        total += Number(item["宗海面积(公顷)"])
+      });
+      const color = [
+        "#3591FF",
+        "#2040B8",
+        "#3EF6D1",
+        "#0082CE",
+        "#42DEED",
+        "#C1CC77",
+        "#00AB51",
+        "#31B571",
+        "#3351E3",
+      ];
+      const legendData = data.map((item, index) => {
+        const tag = index % 6;
+        return {
+          name: item.name,
+          itemStyle: {
+            color: color[tag] || "",
+          },
+          textStyle: {
+            rich: {
+              title: {
+                color: "#CDCEDA",
+                fontSize: 14,
+                width: 70,
+                fontWeight: "bold",
+              },
+              p: {
+                fontSize: 14,
+                width: 55,
+                color: "#02D0C5",
+                shadowColor: "#000",
+                inactiveColor: "#000",
+                fontWeight: "bold",
+              },
+            },
+          },
+        };
+      });
+      let option = {
+        //你的代码
+        backgroundColor:'transparent',
+        legend: {
+          // type: 'scroll',
+          show: true,
+          // orient: "vertical",
+          bottom: 0,
+          // top: "center",
+          itemGap: 5,
+          borderRadius: 5,
+          itemWidth: 10,
+          icon: "circle",
+          // itemHeight: 10,
+          data: legendData,
+          formatter: function (name) {
+            const name1 = name.length > 5 ? `${name.substring(0, 4)}...` : name;
+            const value = data.filter((item) => item.name === name)[0].value;
+            // const proportion = data.filter((item) => item.name === name)[0].proportion;
+            return `{title|${name1}}  {p|${value}公顷}`;
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(13,5,30,.6)",
+          borderWidth: 1,
+          borderColor: "#32A1FF",
+          padding: 5,
+          textStyle: {
+            color: "#fff",
+          },
+          formatter: (data) => {
+            const { name = "", value = "" } = data.data || {};
+            const name1 =
+              name.length > 10
+                ? `${name.substring(0, 10)} <br /> ${name.substring(
+                    10,
+                    name.length
+                  )}`
+                : name;
+            return `${name1} ${value}公顷`;
+          },
+        },
+        title: {
+          // text: `{a|${total.toFixed(2)}}`+"{b|公顷}",
+          text: `{a|${total.toFixed(2)}}`,
+          textStyle: {
+            rich: {
+              a: {
+                color: "#fff",
+                fontSize: 18,
+                align: "35%",
+              },
+              b: {
+                fontSize: 14,
+                color: "#fff",
+                // fontWeight: "bold",
+                align: "35%",
+              },
+            },
+          },
+          x: "35%",
+          y: "35%",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["40%", "60%"],
+            center: ["45%", "40%"],
+            startAngle: 90,
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: "rgba(0, 103, 255, 0.2)",
+              shadowOffsetX: -5,
+              shadowOffsetY: 5,
+
+              color: function (params) {
+                return color[params.dataIndex % 6];
+              },
+            },
+            label: {
+              show: false,
+            },
+            labelLine: {},
+            data: data,
+          },
+        ],
+      };
+      myChart.setOption(option);
     },
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() { }, //生命周期 - 挂载之前
+  beforeCreate() {}, //生命周期 - 创建之前
+  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() {}, //生命周期 - 挂载之前
   mounted() {
     const that = this;
     this.$nextTick(() => {
-
       pick_entity = new Cesium.CustomDataSource("pick_entity");
       viewer.dataSources.add(pick_entity);
     }); //生命周期 - 挂在完成
+    this.initChart();
   }, //生命周期 - 挂在完成
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroy() { },//生命周期 - 销毁完成
-  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroy() {}, //生命周期 - 销毁完成
+  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
 <style  scoped lang="scss">
@@ -126,20 +300,18 @@ export default {
   // color: #198ec0;
 }
 
-
 .list_vector {
   background-image: url("/static/images/ghzc/内容框.png");
 
   width: 20rem;
-  border-top: 1px solid #CCC;
+  border-top: 1px solid #ccc;
   font-size: 14px;
   padding: 1rem;
   // border-bottom:1px solid #CCC ;
 }
 
 .list_vector:last-child {
-
-  border-bottom: 1px solid #CCC;
+  border-bottom: 1px solid #ccc;
 }
 
 .cockpit_vector {
@@ -181,7 +353,6 @@ export default {
   color: #fff;
 }
 
-
 /deep/ .el-autocomplete-suggestion {
   margin-top: 8px;
   border-radius: 6px;
@@ -212,24 +383,21 @@ export default {
   border-radius: 6px;
 }
 
-
 .list_vector_multi {
   background-image: url("/static/images/ghzc/内容框.png");
 
   width: 20rem;
-  border-top: 1px solid #CCC;
+  border-top: 1px solid #ccc;
   font-size: 14px;
   padding: 0.5rem 0rem 0.5rem 0rem;
-  border-left: 1px solid #CCC;
-  border-right: 1px solid #CCC;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
 }
 
 .list_vector_multi:last-child {
-
-  border-bottom: 1px solid #CCC;
+  border-bottom: 1px solid #ccc;
 }
 
-
 /deep/ .el-table tr {
   background: rgba(10, 25, 38, 0.5) !important;
 }
@@ -238,10 +406,9 @@ export default {
 .el-table th.el-table__cell.is-leaf {
   background: rgba(10, 25, 38, 0.5) !important;
 
-  border-bottom: 0px solid #EBEEF5;
+  border-bottom: 0px solid #ebeef5;
 }
 
-
 .el-table {
   color: #fff;
   background: rgba(10, 25, 38, 0.5) !important;
@@ -249,14 +416,11 @@ export default {
 
 /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,
@@ -264,4 +428,9 @@ export default {
 .el-table::before {
   background: rgba(10, 25, 38, 0) !important;
 }
+#seaTransferCharts {
+  width: 100%;
+  height: 13rem;
+  background-color: rgba(10, 25, 38, 0.9) !important;
+}
 </style>

src/views/cockpit/tdsy.vue

@@ -106,7 +106,7 @@
             <div class="icon">
               <div class="icon_zxkg"></div>
             </div>
-            <div class="text_hy cursor" @click="draw_vector_hysyq">
+            <div class="text_hy cursor" @click="SeaTransfer">
               <p class="p_hy">完成出让项目</p>
               <span class="span_hy">{{ wcccxm }}</span>个
               <i style="pointer-events:all" :class="{ 'el-icon-view': true }"></i>
@@ -1184,8 +1184,30 @@ export default {
       });
       this.vector_data = data.data;
     },
-    draw_vector_hysyq() {
-
+     SeaTransfer(){
+      console.log("多喝水撒大华三路");
+      store.setViewerFlagb(false);
+      store.setToolBarShow(false);
+      store.setXzqh_flag(false);
+      store.setCockpit_vector({
+        title: "海域使用权完成供应项目",
+        tableData: [],
+        tablejscType: "jsc_hysyq_zbmx",
+        columns: [
+          "项目名称",
+          "海域使用权人",
+          "用海性质",
+          "用海类型",
+          "占用岸线(米)",
+          "宗海面积(公顷)",
+          "使用金缴纳方式",
+          "海域使用金缴纳金额(元)",
+          "市政府批复/合同签订时间(元)",
+          "用海起始时间",
+          "用海终止时间",
+          "确权方式",
+        ],
+      });
     }
   },
   mounted() {