123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- <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>
|