real3d-portalsite/src/components/Query/clickQuery/CockpitVector.vue

<template>
  <div class="CockpitVectorBox">
    <span class="clearBtn" @click="cockpit">
      <i class="iconfont iconSize el-icon-thumb" style="margin-top: 0px"></i>
      图斑详情查询
    </span>
    <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="
          baseData.filter(
            (item) =>
              item.name !== 'id' &&
              item.name !== 'geom' &&
              item.name !== 'type' &&
              item.name !== 'create_time' &&
              item.name !== 'val1' &&
              item.name !== 'val2' &&
              item.name !== 'xmmc' &&
              item.name !== 'zlmj' &&
              item.name !== 'tzje' &&
              item.name !== 'dataid' &&
              item.name !== 'did'
          )
        "
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip="true"
          prop="name"
          label="属性"
          width="140"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip="true"
          prop="value"
          label="属性值"
        >
        </el-table-column>
      </el-table>
      <div
        id="seaTransferCharts"
        ref="echartsRef"
        v-if="store.state.vectordataid"
      ></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
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";
import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
let pick_entity = null;
export default {
  components: {},
  props: {
    baseData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      restaurants: [],
      state: "",
      timeout: null,
      pick_entity: null,
      dataid: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {
    vectordataid() {
      return store.state.vectordataid;
    },
    viewer_flag() {
      return store.state.viewer_flag;
    },
  },
  //监控data中的数据变化
  watch: {
    vectordataid: {
      immediate: true,
      handler(newValue) {
        this.dataid = newValue;
        if (newValue)
          this.$nextTick(() => {
            this.initChart();
          });
      },
    },
    viewer_flag(newVal) {
      if (newVal) {
        // viewer.dataSources.removeAll();
        store.state.vectordataid = 0;
      }
    },
  },
  //方法集合
  methods: {
    cockpit() {
      //驾驶舱矢量数据点选查询
      pick_cockpit_vector.init_handler();
    },
    build_data(geojson) {
      geojson.coordinates.forEach((res) => {
        const twoDArray = res[0];
        const oneDArray = twoDArray.reduce(
          (accumulator, currentValue) => accumulator.concat(currentValue),
          []
        );

        pick_entity.entities.add({
          polygon: {
            // 获取指定属性（positions，holes（图形内需要挖空的区域））
            hierarchy: {
              positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
            },
            // 边框
            outline: true,
            // 边框颜色
            outlineColor: Cesium.Color.RED,
            // 边框尺寸
            outlineWidth: 2,
            // 填充的颜色，withAlpha透明度
            material: Cesium.Color.GREEN.withAlpha(0),
            // 是否被提供的材质填充
            fill: true,
            // 恒定高度
            height: 1.1,
            // 显示在距相机的距离处的属性，多少区间内是可以显示的
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
            // 是否显示
            show: true,
            // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
            zIndex: 10,
          },
        });

        // 注意：polygon首尾坐标要一致
        var polygon = turf.polygon([twoDArray]);

        var centroid = turf.centroid(polygon).geometry.coordinates;

        viewer.camera.flyTo({
          duration: 1,

          destination: Cesium.Cartesian3.fromDegrees(
            centroid[0],
            centroid[1],
            3000
          ),
          // destination: {
          //     x: -6283267.004204832,
          //     y: 28123682.896774407,
          //     z: 23709669.98539126
          // },
          orientation: {
            heading: 6.149339593573709,
            pitch: -1.539825618847483,
            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: this.dataid == 0 ? store.state.vectordataid : this.dataid,
      };
      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() {}, //生命周期 - 挂载之前
  mounted() {
    const that = this;
    this.$nextTick(() => {
      pick_entity = new Cesium.CustomDataSource("pick_entity");
      viewer.dataSources.add(pick_entity);
    }); //生命周期 - 挂在完成
  }, //生命周期 - 挂在完成
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroy() {}, //生命周期 - 销毁完成
  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  scoped lang="scss">
.CockpitVectorBox {
  // color: #198ec0;
  position: absolute;
  top: 6rem;
  width: 100%;
  height: 100%;
  .clearBtn {
    cursor: pointer;
    background-color: #3f94f53f;
    border: 1px solid #3f93f5;
    color: #b6e0ff;
    padding: 5px 15px;
    display: inline-block;
    margin: 10px 0;

    &:hover {
      font-weight: bold;
    }
  }
}

.list_vector {
  background-image: url("/static/images/ghzc/内容框.png");

  width: 20rem;
  border-top: 1px solid #ccc;
  font-size: 14px;
  padding: 1rem;
  // border-bottom:1px solid #CCC ;
}

.list_vector:last-child {
  border-bottom: 1px solid #ccc;
}

.cockpit_vector {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  // z-index: -1;
}

/deep/.el-input__inner:focus {
  border: 1px solid #1fb1ef;
}

/deep/.el-input__inner {
  border: 1px solid #1fb1ef;
  background: rgba(0, 80, 111, 0.8);
  border-radius: 18px;
  height: 30px;
  color: white;
  line-height: 30px;
  // background: #ffffff3b;
}

/deep/.el-input__icon {
  line-height: 30px;
  border-radius: 0 18px 18px 0;
  cursor: pointer;
}

/deep/.el-input__suffix {
  background: #1fb1ef;
  right: 1px;
  padding: 0 5px;
  border-radius: 0 18px 18px 0;
  opacity: 0.8;
  color: #fff;
}

/deep/ .el-autocomplete-suggestion {
  margin-top: 8px;
  border-radius: 6px;
  border: 1px solid #198ec0;
  background: rgba(0, 80, 111, 0.6);
  color: rgba(25, 142, 192, 1);

  .popper__arrow {
    top: -8px;
    border-bottom-color: rgba(31, 177, 239, 1);
  }

  .popper__arrow::after {
    border-bottom-color: rgba(0, 80, 111, 0.9);
  }

  .el-autocomplete-suggestion__wrap {
    padding: 2px;
  }
}

/deep/ .el-autocomplete-suggestion li {
  color: #ffffff;
}

/deep/ .el-autocomplete-suggestion li:hover {
  background-color: rgba(8, 162, 223, 0.8);
  border-radius: 6px;
}

.list_vector_multi {
  background-image: url("/static/images/ghzc/内容框.png");

  width: 20rem;
  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;
}

.list_vector_multi:last-child {
  border-bottom: 1px solid #ccc;
}

/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;
}
#seaTransferCharts {
  width: 100%;
  height: 13rem;
  background-color: rgba(10, 25, 38, 0.9) !important;
}
</style>