|
|
@@ -1,261 +0,0 @@
|
|
|
-<template>
|
|
|
- <div v-show="flag">
|
|
|
- <datePicker @deteChange="deteChange"></datePicker>
|
|
|
- <ser-center></ser-center>
|
|
|
- <JSYD />
|
|
|
- <TDSC />
|
|
|
- <HYSY ref="hysy_ref" />
|
|
|
- <TDSY />
|
|
|
- <GDBH />
|
|
|
- <STXF />
|
|
|
- <WPJG />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
-import serCenter from './cockpitNew1/serCenter';
|
|
|
-import JSYD from './cockpitNew1/jsyd';
|
|
|
-import TDSC from './cockpitNew1/tdsc';
|
|
|
-import HYSY from './cockpitNew1/hysy';
|
|
|
-import TDSY from './cockpitNew1/tdsy';
|
|
|
-import GDBH from './cockpitNew1/gdbh';
|
|
|
-import STXF from './cockpitNew1/stxf';
|
|
|
-import WPJG from './cockpitNew1/wpjg';
|
|
|
-import datePicker from './cockpitNew1/datePicker.vue';
|
|
|
-import xzqh from "../../static/data/460200_full.json";
|
|
|
-import SerCenter from './cockpitNew1/serCenter.vue';
|
|
|
-
|
|
|
-import { cockpitInfo } from '@/api/cockpit'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: { serCenter, JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- flag: true,
|
|
|
- xzqh_color_click: "rgba(46, 177, 251, 0.6)",
|
|
|
- xzqh_color: "rgba(10, 95, 152, 0.5)",
|
|
|
- };
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {
|
|
|
- switch() {
|
|
|
- console.log("switch", "asdasd");
|
|
|
-
|
|
|
- this.flag = !this.flag;
|
|
|
-
|
|
|
- },
|
|
|
- deteChange(date) {
|
|
|
-
|
|
|
- },
|
|
|
- async hysyq(address) {
|
|
|
- // 选中xzqh查询
|
|
|
- let obj = {
|
|
|
- beginTime: '20240101',
|
|
|
- endTime: '20240501',
|
|
|
- jscType: 'jsc_hysyq_ztsh',
|
|
|
- id: address
|
|
|
- };
|
|
|
- let data = await cockpitInfo(obj);
|
|
|
-
|
|
|
- let obg_text = {
|
|
|
- xzqhdm_number: data.data[0].xzqhdm_number,
|
|
|
- zhmj: data.data[0].zhmj,
|
|
|
-
|
|
|
- }
|
|
|
- console.log(obg_text, "obg_echart");
|
|
|
-
|
|
|
- store.setCockpitHysyText(obg_text);
|
|
|
-
|
|
|
- // 图表数据
|
|
|
- let obj_echart = {
|
|
|
- beginTime: '20240101',
|
|
|
- endTime: '20240501',
|
|
|
- jscType: 'jsc_hysyq_yelx',
|
|
|
- id: address
|
|
|
- };
|
|
|
- let data_echart = await cockpitInfo(obj_echart);
|
|
|
-
|
|
|
- let obg_echart = {
|
|
|
- x: data_echart.data.map(item => item.yhlx_name),
|
|
|
- bar: data_echart.data.map(item => item.zhmj)
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- store.setCockpitHysyEchart(obg_echart);
|
|
|
-
|
|
|
-
|
|
|
- this.$refs.hysy_ref["getRenKou"]();
|
|
|
-
|
|
|
- // getRenKou();
|
|
|
-
|
|
|
- console.log(address, "address");
|
|
|
- },
|
|
|
- async pick_xzqh() {
|
|
|
- const that = this;
|
|
|
- const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
- handler.setInputAction(async event => {
|
|
|
- let pickObj = viewer.scene.pick(event.position);
|
|
|
- var position = viewer.scene.pickPosition(event.position);
|
|
|
-
|
|
|
- if (!position)//点击到地球之外
|
|
|
- return false;
|
|
|
- var cartographic = Cesium.Cartographic.fromCartesian(position);
|
|
|
-
|
|
|
-
|
|
|
- let longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
- let latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
- let height = cartographic.height;
|
|
|
- let heading = viewer.scene.camera.heading;
|
|
|
- let pitch = viewer.scene.camera.pitch;
|
|
|
- if (!pickObj)//未获取实体
|
|
|
- return false;
|
|
|
- // console.log(longitude, latitude, height);
|
|
|
- if (!pickObj) {
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- if (!position) {
|
|
|
- position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- if (Cesium.defined(pickObj)) {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity
|
|
|
-
|
|
|
- if (pickObj.id.properties.hasProperty('name')) {
|
|
|
- const name = pickObj.id.properties.name.getValue();
|
|
|
- const address = pickObj.id.properties.adcode.getValue();
|
|
|
- const center = pickObj.id.properties.centroid.getValue();
|
|
|
-
|
|
|
- // 选中状态
|
|
|
- pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
|
|
|
- pickObj.id.polygon.extrudedHeight = 850;
|
|
|
-
|
|
|
- // 恢复其他状态
|
|
|
- viewer.entities.values.forEach((res) => {
|
|
|
-
|
|
|
- if (res.properties.name._value != name) {
|
|
|
- // console.log(res.properties.name._value, "其他的");
|
|
|
- // console.log(res);
|
|
|
- res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
|
|
|
- res.polygon.extrudedHeight = 450;
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- // 驾驶舱海域使用权
|
|
|
- that.hysyq(address);
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- } else {
|
|
|
- }
|
|
|
-
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- },
|
|
|
- init_xzqh() {
|
|
|
- const that = this;
|
|
|
- xzqh.features.forEach((res) => {
|
|
|
-
|
|
|
- const twoDArray = res.geometry.coordinates[0][0];
|
|
|
- const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
-
|
|
|
- console.log();
|
|
|
-
|
|
|
- viewer.entities.add({
|
|
|
- position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
|
|
|
- text: res.properties.name,
|
|
|
- label: {
|
|
|
- scale: 1.5,
|
|
|
- font: "bolder 16px sans-serif",
|
|
|
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
- text: res.properties.name,//图标名称
|
|
|
- fillColor: Cesium.Color.fromCssColorString("#ffffff"),
|
|
|
- pixelOffset: new Cesium.Cartesian2(5, -15),
|
|
|
- zIndex: 3,
|
|
|
- },
|
|
|
- billboard: {
|
|
|
- // 图像地址，URI或Canvas的属性
|
|
|
- image: "./static/images/overview/htq-f.png",
|
|
|
- height: 60,
|
|
|
- // 宽度（以像素为单位）
|
|
|
- width: 150,
|
|
|
- // 相对于坐标的垂直位置
|
|
|
- // verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
- // // 相对于坐标的水平位置
|
|
|
- // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
- scale: 1.0,
|
|
|
- zIndex: 2,
|
|
|
-
|
|
|
- show: true
|
|
|
- },
|
|
|
- properties: {
|
|
|
- 'type': "cockpit",
|
|
|
- 'name': res.properties.name,
|
|
|
- 'centroid': res.properties.centroid,
|
|
|
- 'adcode': res.properties.adcode,
|
|
|
- },
|
|
|
- polygon: {
|
|
|
- zIndex: 1,
|
|
|
- hierarchy: {
|
|
|
- positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
- },
|
|
|
- outline: false,
|
|
|
- material: Cesium.Color.fromCssColorString(that.xzqh_color),
|
|
|
- height: 100,
|
|
|
- extrudedHeight: 450,
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- beforeCreate() { }, //生命周期 - 创建之前
|
|
|
- created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- beforeMount() { }, //生命周期 - 挂载之前
|
|
|
- async mounted() {
|
|
|
-
|
|
|
- // let obj = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_yelx', id: '46' };
|
|
|
- // let data = await cockpitInfo(obj);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // let obj1 = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_ztsh', id: '46' }
|
|
|
- // let data1 = await cockpitInfo(obj1);
|
|
|
-
|
|
|
- // console.log(data, "asda");
|
|
|
- // console.log(data1, "asda");
|
|
|
- // 三亚行政区划加载
|
|
|
-
|
|
|
-
|
|
|
- this.$nextTick((res) => {
|
|
|
- this.pick_xzqh();
|
|
|
- this.init_xzqh()
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- }, //生命周期 - 挂在完成
|
|
|
- beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
- updated() { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
- destroy() { },//生命周期 - 销毁完成
|
|
|
- activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
- deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped></style>
|
zpf