diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/static/config/highConsequence.json b/static/config/highConsequence.json index 297cc4e..4a0dd3f 100644 --- a/static/config/highConsequence.json +++ b/static/config/highConsequence.json @@ -18,7 +18,7 @@ "高后果区长度": "0.2", "行政区域": "古县岳阳真五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县城燃输气门站", "户数": null, "机构名称": "古县站", @@ -45,7 +45,7 @@ "高后果区长度": "0.2", "行政区域": "山西省临汾市古县岳阳镇", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县国新正泰焦炉煤气厂区，1座变电站", "户数": null, "机构名称": "古县站", @@ -72,7 +72,7 @@ "高后果区长度": "3.5", "行政区域": "临汾市安泽县桃曲村", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管道两侧200m内人口户数约为170户（常住人口约500人），以及一个住宅小区（目前住户约为130户,260人），一个桃曲村小学，学校人数约35人。", "户数": null, "机构名称": "安泽站", @@ -99,7 +99,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "一级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座；", "户数": null, "机构名称": "临汾首站", @@ -126,7 +126,7 @@ "高后果区长度": "1.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "临汾首站--临侯线JP1+400m，管道邻近村庄建设，管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座，管道两侧200日范围内人口约100户（约350人），一座仓储库房（20人）。", "户数": null, "机构名称": "临汾首站", @@ -153,7 +153,7 @@ "高后果区长度": "2.3", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "该管段约2.3公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧10m内约有民户15户（50人），管道一侧40m内有1个幼儿园（370人），管道一侧10m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室", "户数": null, "机构名称": "临汾首站", @@ -180,7 +180,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区段店乡千伏村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约1.6公里经过山西省临汾市侯马市高村乡东高村，管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "临汾首站", @@ -207,7 +207,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市尧都区县底镇埝下村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西省临汾市尧都区段店乡埝下村，管道两侧200米范围内人口约有130户（约500人）", "户数": null, "机构名称": "临汾首站", @@ -234,7 +234,7 @@ "高后果区长度": "1.7", "行政区域": "临汾市洪洞县", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管线两侧200米范围内有，2个住宅小区，人数分别为930户，192户；另外包含有2座学校（丽都学校1500人），（山头中学300人）；其余村庄零散170余户，该区域共有人数约5676余人。1处停产的烟花爆竹厂、秦璧工业园区。", "户数": null, "机构名称": "洪洞站", @@ -261,7 +261,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区刘村镇上涧北村-东宜村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区刘村镇上涧北村、东宜村、青城村，管线两侧200米范围内有一个汽修厂（停车场）、一所养老院（约40人）、一座学校（约100人）、一座超市，沿线村庄200m范围内人口约有180户（约700人），总人口数量约为1000人，另有尚未建成的毛坯住宅楼", "户数": "120", "机构名称": "临汾首站", @@ -288,7 +288,7 @@ "高后果区长度": "4.4", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约4.4公里经过山西省临汾市尧都区金殿镇桑湾村、金殿村、城居村、新凤村、坛地村、东靳北村，管线两侧200米范围内途经六个村庄、有金殿镇镇政府、一所卫生院、一所派出所、一座庙宇、一个废铁站、一座加油站、一座晋南钢铁LNG加气站，金殿镇主街道每逢农历初二、初五、初八会闹集市，主街道伴有大量商户，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有800户（约3000人），总人口数量粗略计为3500人，管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -315,7 +315,7 @@ "高后果区长度": "1.8", "行政区域": "山西省临汾市古县岳阳镇五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道两侧200米范围有1个村庄，人口约有25户（约60人），1座古县城燃输气门站，1个核桃加工厂，1个古县肉联厂及1个生态园。", "户数": null, "机构名称": "古县站", @@ -369,7 +369,7 @@ "高后果区长度": "0.3", "行政区域": "山西省临汾市洪洞县大槐树镇辛堡村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "洪长JP0-JP0+300m，管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": null, "机构名称": "洪洞站", @@ -423,7 +423,7 @@ "高后果区长度": "0.45", "行政区域": "襄汾县陶寺乡东坡沟村", "地区级别": "二级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.45公里经过山西省临汾市襄汾县陶寺乡东坡沟村，管线两侧200米范围内有一座襄汾万盛源门站（2人），管道距离东坡沟村较近，两侧200m范围内人口户数约为50户（常住人口约60人）", "户数": null, "机构名称": "襄汾站", @@ -450,7 +450,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.5公里经过山西省临汾市襄汾县陶寺乡陶寺村，管线两侧200米范围内有一座加油站（5人），人口户数约为30户（常驻人口约50人），一个水泥厂（20人）、一个保温棉厂（暂停）陶寺村主街道每逢农历初二、初五、初八会闹集市(逢集200—300人），主街道伴有大量商户", "户数": "20", "机构名称": "襄汾站", @@ -477,7 +477,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西临汾市襄汾县西贾乡西李村田地，管道西侧200米范围内有一座襄汾万盛源加气站、一所学校（约800人）、一个汽修厂、一个运输公司及临夏线省道两侧的商户，沿线200m范围内人口粗略排查约有30户（常住人口约120人，流动人口居多），总人口数量粗略计为1000人，管道主要从加气站、商户背后田地铺设，人口流动量大。", "户数": null, "机构名称": "临汾线路科", @@ -504,7 +504,7 @@ "高后果区长度": "2.7", "行政区域": "山西省霍州市大张镇西张村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有村庄、小区住户，人口户数约为2700户（常住人口约6000人），1所大张镇中心幼儿园师生约300人。", "户数": "150", "机构名称": "霍州站", @@ -531,7 +531,7 @@ "高后果区长度": "0.9", "行政区域": "临汾市洪洞县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": "20", "机构名称": "洪洞站", @@ -558,7 +558,7 @@ "高后果区长度": "0.6", "行政区域": "山西省侯马市高村乡东高村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -585,7 +585,7 @@ "高后果区长度": "2.2", "行政区域": "临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约2.2公里经过山西省临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区，管线两侧200米范围内途经三个村庄、有规模集中的1个商业小区共19栋楼（住户约400户）、一座教堂、一座变电站，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有200户（新西村约有住户200户），管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -612,7 +612,7 @@ "高后果区长度": "0.6", "行政区域": "临汾市侯马市", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -639,7 +639,7 @@ "高后果区长度": "0.7", "行政区域": "临汾市襄汾县", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.7公里经过山西省临汾市襄汾县汾城镇东关村，管线两侧200米范围内有一所初级中学，沿线200m范围内人口粗略排查约500人，管道主要从学校东侧田地铺设。", "户数": null, "机构名称": "临汾线路科", @@ -666,7 +666,7 @@ "高后果区长度": "3.2", "行政区域": "临汾市霍州市", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有1个下乐坪村庄，人口户数约为600户（常住人口约400人），1所博翔中学（师生400人），1处牛场，，1个工业园区（目前人数不超过300人）1文化活动广场（在建中），1小区（300户，常住人口约200人未住满），1国家电网厂区。", "户数": null, "机构名称": "霍州站", @@ -693,7 +693,7 @@ "高后果区长度": "1.8", "行政区域": "山西临汾市襄汾县古城镇董村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "经过实地勘察，该管段约1.8公里经过山西省临汾市襄汾县古城镇董村、东街村，此处有公司阀室一座（古城阀室）、阀室及所经管道位于襄汾万盛源门站内，两侧200米范围内有一座焦化厂（含高岭土厂共300人左右），一所驾校，沿线200m范围内人口排查约有40户（常住人口约150人），管道主要从农村田地、高岭土厂厂区后侧斜穿通过。", "户数": null, "机构名称": "临汾线路科", @@ -720,7 +720,7 @@ "高后果区长度": "2.4", "行政区域": "临汾市安泽县边寨村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过安泽县良马乡边寨村，管道两侧200米内人口户数约为250户（常住人口约600人）。", "户数": "250", "机构名称": "安泽站", @@ -747,7 +747,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市洪洞县明姜镇圣王村", "地区级别": "一级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇圣王村，管道经过的一级地区；管道两侧200m内有洪洞恒富华润输气门站，周边无住户。", "户数": null, "机构名称": "洪洞站", @@ -774,7 +774,7 @@ "高后果区长度": "1.3", "行政区域": "临汾市洪洞县明姜镇后河头村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇后河头村，管道两侧200m内有村庄，周边约173户，此地区共有人数692人。", "户数": "100", "机构名称": "洪洞站", @@ -801,7 +801,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧60m内约有民户15户（50人），管道一侧100m内有1个幼儿园（370人），管道一侧100m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室。", "户数": null, "机构名称": "临汾首站", diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/static/config/highConsequence.json b/static/config/highConsequence.json index 297cc4e..4a0dd3f 100644 --- a/static/config/highConsequence.json +++ b/static/config/highConsequence.json @@ -18,7 +18,7 @@ "高后果区长度": "0.2", "行政区域": "古县岳阳真五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县城燃输气门站", "户数": null, "机构名称": "古县站", @@ -45,7 +45,7 @@ "高后果区长度": "0.2", "行政区域": "山西省临汾市古县岳阳镇", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县国新正泰焦炉煤气厂区，1座变电站", "户数": null, "机构名称": "古县站", @@ -72,7 +72,7 @@ "高后果区长度": "3.5", "行政区域": "临汾市安泽县桃曲村", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管道两侧200m内人口户数约为170户（常住人口约500人），以及一个住宅小区（目前住户约为130户,260人），一个桃曲村小学，学校人数约35人。", "户数": null, "机构名称": "安泽站", @@ -99,7 +99,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "一级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座；", "户数": null, "机构名称": "临汾首站", @@ -126,7 +126,7 @@ "高后果区长度": "1.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "临汾首站--临侯线JP1+400m，管道邻近村庄建设，管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座，管道两侧200日范围内人口约100户（约350人），一座仓储库房（20人）。", "户数": null, "机构名称": "临汾首站", @@ -153,7 +153,7 @@ "高后果区长度": "2.3", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "该管段约2.3公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧10m内约有民户15户（50人），管道一侧40m内有1个幼儿园（370人），管道一侧10m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室", "户数": null, "机构名称": "临汾首站", @@ -180,7 +180,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区段店乡千伏村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约1.6公里经过山西省临汾市侯马市高村乡东高村，管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "临汾首站", @@ -207,7 +207,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市尧都区县底镇埝下村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西省临汾市尧都区段店乡埝下村，管道两侧200米范围内人口约有130户（约500人）", "户数": null, "机构名称": "临汾首站", @@ -234,7 +234,7 @@ "高后果区长度": "1.7", "行政区域": "临汾市洪洞县", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管线两侧200米范围内有，2个住宅小区，人数分别为930户，192户；另外包含有2座学校（丽都学校1500人），（山头中学300人）；其余村庄零散170余户，该区域共有人数约5676余人。1处停产的烟花爆竹厂、秦璧工业园区。", "户数": null, "机构名称": "洪洞站", @@ -261,7 +261,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区刘村镇上涧北村-东宜村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区刘村镇上涧北村、东宜村、青城村，管线两侧200米范围内有一个汽修厂（停车场）、一所养老院（约40人）、一座学校（约100人）、一座超市，沿线村庄200m范围内人口约有180户（约700人），总人口数量约为1000人，另有尚未建成的毛坯住宅楼", "户数": "120", "机构名称": "临汾首站", @@ -288,7 +288,7 @@ "高后果区长度": "4.4", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约4.4公里经过山西省临汾市尧都区金殿镇桑湾村、金殿村、城居村、新凤村、坛地村、东靳北村，管线两侧200米范围内途经六个村庄、有金殿镇镇政府、一所卫生院、一所派出所、一座庙宇、一个废铁站、一座加油站、一座晋南钢铁LNG加气站，金殿镇主街道每逢农历初二、初五、初八会闹集市，主街道伴有大量商户，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有800户（约3000人），总人口数量粗略计为3500人，管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -315,7 +315,7 @@ "高后果区长度": "1.8", "行政区域": "山西省临汾市古县岳阳镇五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道两侧200米范围有1个村庄，人口约有25户（约60人），1座古县城燃输气门站，1个核桃加工厂，1个古县肉联厂及1个生态园。", "户数": null, "机构名称": "古县站", @@ -369,7 +369,7 @@ "高后果区长度": "0.3", "行政区域": "山西省临汾市洪洞县大槐树镇辛堡村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "洪长JP0-JP0+300m，管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": null, "机构名称": "洪洞站", @@ -423,7 +423,7 @@ "高后果区长度": "0.45", "行政区域": "襄汾县陶寺乡东坡沟村", "地区级别": "二级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.45公里经过山西省临汾市襄汾县陶寺乡东坡沟村，管线两侧200米范围内有一座襄汾万盛源门站（2人），管道距离东坡沟村较近，两侧200m范围内人口户数约为50户（常住人口约60人）", "户数": null, "机构名称": "襄汾站", @@ -450,7 +450,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.5公里经过山西省临汾市襄汾县陶寺乡陶寺村，管线两侧200米范围内有一座加油站（5人），人口户数约为30户（常驻人口约50人），一个水泥厂（20人）、一个保温棉厂（暂停）陶寺村主街道每逢农历初二、初五、初八会闹集市(逢集200—300人），主街道伴有大量商户", "户数": "20", "机构名称": "襄汾站", @@ -477,7 +477,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西临汾市襄汾县西贾乡西李村田地，管道西侧200米范围内有一座襄汾万盛源加气站、一所学校（约800人）、一个汽修厂、一个运输公司及临夏线省道两侧的商户，沿线200m范围内人口粗略排查约有30户（常住人口约120人，流动人口居多），总人口数量粗略计为1000人，管道主要从加气站、商户背后田地铺设，人口流动量大。", "户数": null, "机构名称": "临汾线路科", @@ -504,7 +504,7 @@ "高后果区长度": "2.7", "行政区域": "山西省霍州市大张镇西张村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有村庄、小区住户，人口户数约为2700户（常住人口约6000人），1所大张镇中心幼儿园师生约300人。", "户数": "150", "机构名称": "霍州站", @@ -531,7 +531,7 @@ "高后果区长度": "0.9", "行政区域": "临汾市洪洞县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": "20", "机构名称": "洪洞站", @@ -558,7 +558,7 @@ "高后果区长度": "0.6", "行政区域": "山西省侯马市高村乡东高村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -585,7 +585,7 @@ "高后果区长度": "2.2", "行政区域": "临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约2.2公里经过山西省临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区，管线两侧200米范围内途经三个村庄、有规模集中的1个商业小区共19栋楼（住户约400户）、一座教堂、一座变电站，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有200户（新西村约有住户200户），管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -612,7 +612,7 @@ "高后果区长度": "0.6", "行政区域": "临汾市侯马市", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -639,7 +639,7 @@ "高后果区长度": "0.7", "行政区域": "临汾市襄汾县", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.7公里经过山西省临汾市襄汾县汾城镇东关村，管线两侧200米范围内有一所初级中学，沿线200m范围内人口粗略排查约500人，管道主要从学校东侧田地铺设。", "户数": null, "机构名称": "临汾线路科", @@ -666,7 +666,7 @@ "高后果区长度": "3.2", "行政区域": "临汾市霍州市", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有1个下乐坪村庄，人口户数约为600户（常住人口约400人），1所博翔中学（师生400人），1处牛场，，1个工业园区（目前人数不超过300人）1文化活动广场（在建中），1小区（300户，常住人口约200人未住满），1国家电网厂区。", "户数": null, "机构名称": "霍州站", @@ -693,7 +693,7 @@ "高后果区长度": "1.8", "行政区域": "山西临汾市襄汾县古城镇董村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "经过实地勘察，该管段约1.8公里经过山西省临汾市襄汾县古城镇董村、东街村，此处有公司阀室一座（古城阀室）、阀室及所经管道位于襄汾万盛源门站内，两侧200米范围内有一座焦化厂（含高岭土厂共300人左右），一所驾校，沿线200m范围内人口排查约有40户（常住人口约150人），管道主要从农村田地、高岭土厂厂区后侧斜穿通过。", "户数": null, "机构名称": "临汾线路科", @@ -720,7 +720,7 @@ "高后果区长度": "2.4", "行政区域": "临汾市安泽县边寨村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过安泽县良马乡边寨村，管道两侧200米内人口户数约为250户（常住人口约600人）。", "户数": "250", "机构名称": "安泽站", @@ -747,7 +747,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市洪洞县明姜镇圣王村", "地区级别": "一级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇圣王村，管道经过的一级地区；管道两侧200m内有洪洞恒富华润输气门站，周边无住户。", "户数": null, "机构名称": "洪洞站", @@ -774,7 +774,7 @@ "高后果区长度": "1.3", "行政区域": "临汾市洪洞县明姜镇后河头村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇后河头村，管道两侧200m内有村庄，周边约173户，此地区共有人数692人。", "户数": "100", "机构名称": "洪洞站", @@ -801,7 +801,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧60m内约有民户15户（50人），管道一侧100m内有1个幼儿园（370人），管道一侧100m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室。", "户数": null, "机构名称": "临汾首站", diff --git a/static/gltf/images/0_04.jpg b/static/gltf/images/0_04.jpg new file mode 100644 index 0000000..e76e636 --- /dev/null +++ b/static/gltf/images/0_04.jpg Binary files differ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/static/config/highConsequence.json b/static/config/highConsequence.json index 297cc4e..4a0dd3f 100644 --- a/static/config/highConsequence.json +++ b/static/config/highConsequence.json @@ -18,7 +18,7 @@ "高后果区长度": "0.2", "行政区域": "古县岳阳真五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县城燃输气门站", "户数": null, "机构名称": "古县站", @@ -45,7 +45,7 @@ "高后果区长度": "0.2", "行政区域": "山西省临汾市古县岳阳镇", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县国新正泰焦炉煤气厂区，1座变电站", "户数": null, "机构名称": "古县站", @@ -72,7 +72,7 @@ "高后果区长度": "3.5", "行政区域": "临汾市安泽县桃曲村", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管道两侧200m内人口户数约为170户（常住人口约500人），以及一个住宅小区（目前住户约为130户,260人），一个桃曲村小学，学校人数约35人。", "户数": null, "机构名称": "安泽站", @@ -99,7 +99,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "一级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座；", "户数": null, "机构名称": "临汾首站", @@ -126,7 +126,7 @@ "高后果区长度": "1.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "临汾首站--临侯线JP1+400m，管道邻近村庄建设，管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座，管道两侧200日范围内人口约100户（约350人），一座仓储库房（20人）。", "户数": null, "机构名称": "临汾首站", @@ -153,7 +153,7 @@ "高后果区长度": "2.3", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "该管段约2.3公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧10m内约有民户15户（50人），管道一侧40m内有1个幼儿园（370人），管道一侧10m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室", "户数": null, "机构名称": "临汾首站", @@ -180,7 +180,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区段店乡千伏村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约1.6公里经过山西省临汾市侯马市高村乡东高村，管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "临汾首站", @@ -207,7 +207,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市尧都区县底镇埝下村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西省临汾市尧都区段店乡埝下村，管道两侧200米范围内人口约有130户（约500人）", "户数": null, "机构名称": "临汾首站", @@ -234,7 +234,7 @@ "高后果区长度": "1.7", "行政区域": "临汾市洪洞县", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管线两侧200米范围内有，2个住宅小区，人数分别为930户，192户；另外包含有2座学校（丽都学校1500人），（山头中学300人）；其余村庄零散170余户，该区域共有人数约5676余人。1处停产的烟花爆竹厂、秦璧工业园区。", "户数": null, "机构名称": "洪洞站", @@ -261,7 +261,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区刘村镇上涧北村-东宜村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区刘村镇上涧北村、东宜村、青城村，管线两侧200米范围内有一个汽修厂（停车场）、一所养老院（约40人）、一座学校（约100人）、一座超市，沿线村庄200m范围内人口约有180户（约700人），总人口数量约为1000人，另有尚未建成的毛坯住宅楼", "户数": "120", "机构名称": "临汾首站", @@ -288,7 +288,7 @@ "高后果区长度": "4.4", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约4.4公里经过山西省临汾市尧都区金殿镇桑湾村、金殿村、城居村、新凤村、坛地村、东靳北村，管线两侧200米范围内途经六个村庄、有金殿镇镇政府、一所卫生院、一所派出所、一座庙宇、一个废铁站、一座加油站、一座晋南钢铁LNG加气站，金殿镇主街道每逢农历初二、初五、初八会闹集市，主街道伴有大量商户，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有800户（约3000人），总人口数量粗略计为3500人，管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -315,7 +315,7 @@ "高后果区长度": "1.8", "行政区域": "山西省临汾市古县岳阳镇五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道两侧200米范围有1个村庄，人口约有25户（约60人），1座古县城燃输气门站，1个核桃加工厂，1个古县肉联厂及1个生态园。", "户数": null, "机构名称": "古县站", @@ -369,7 +369,7 @@ "高后果区长度": "0.3", "行政区域": "山西省临汾市洪洞县大槐树镇辛堡村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "洪长JP0-JP0+300m，管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": null, "机构名称": "洪洞站", @@ -423,7 +423,7 @@ "高后果区长度": "0.45", "行政区域": "襄汾县陶寺乡东坡沟村", "地区级别": "二级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.45公里经过山西省临汾市襄汾县陶寺乡东坡沟村，管线两侧200米范围内有一座襄汾万盛源门站（2人），管道距离东坡沟村较近，两侧200m范围内人口户数约为50户（常住人口约60人）", "户数": null, "机构名称": "襄汾站", @@ -450,7 +450,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.5公里经过山西省临汾市襄汾县陶寺乡陶寺村，管线两侧200米范围内有一座加油站（5人），人口户数约为30户（常驻人口约50人），一个水泥厂（20人）、一个保温棉厂（暂停）陶寺村主街道每逢农历初二、初五、初八会闹集市(逢集200—300人），主街道伴有大量商户", "户数": "20", "机构名称": "襄汾站", @@ -477,7 +477,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西临汾市襄汾县西贾乡西李村田地，管道西侧200米范围内有一座襄汾万盛源加气站、一所学校（约800人）、一个汽修厂、一个运输公司及临夏线省道两侧的商户，沿线200m范围内人口粗略排查约有30户（常住人口约120人，流动人口居多），总人口数量粗略计为1000人，管道主要从加气站、商户背后田地铺设，人口流动量大。", "户数": null, "机构名称": "临汾线路科", @@ -504,7 +504,7 @@ "高后果区长度": "2.7", "行政区域": "山西省霍州市大张镇西张村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有村庄、小区住户，人口户数约为2700户（常住人口约6000人），1所大张镇中心幼儿园师生约300人。", "户数": "150", "机构名称": "霍州站", @@ -531,7 +531,7 @@ "高后果区长度": "0.9", "行政区域": "临汾市洪洞县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": "20", "机构名称": "洪洞站", @@ -558,7 +558,7 @@ "高后果区长度": "0.6", "行政区域": "山西省侯马市高村乡东高村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -585,7 +585,7 @@ "高后果区长度": "2.2", "行政区域": "临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约2.2公里经过山西省临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区，管线两侧200米范围内途经三个村庄、有规模集中的1个商业小区共19栋楼（住户约400户）、一座教堂、一座变电站，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有200户（新西村约有住户200户），管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -612,7 +612,7 @@ "高后果区长度": "0.6", "行政区域": "临汾市侯马市", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -639,7 +639,7 @@ "高后果区长度": "0.7", "行政区域": "临汾市襄汾县", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.7公里经过山西省临汾市襄汾县汾城镇东关村，管线两侧200米范围内有一所初级中学，沿线200m范围内人口粗略排查约500人，管道主要从学校东侧田地铺设。", "户数": null, "机构名称": "临汾线路科", @@ -666,7 +666,7 @@ "高后果区长度": "3.2", "行政区域": "临汾市霍州市", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有1个下乐坪村庄，人口户数约为600户（常住人口约400人），1所博翔中学（师生400人），1处牛场，，1个工业园区（目前人数不超过300人）1文化活动广场（在建中），1小区（300户，常住人口约200人未住满），1国家电网厂区。", "户数": null, "机构名称": "霍州站", @@ -693,7 +693,7 @@ "高后果区长度": "1.8", "行政区域": "山西临汾市襄汾县古城镇董村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "经过实地勘察，该管段约1.8公里经过山西省临汾市襄汾县古城镇董村、东街村，此处有公司阀室一座（古城阀室）、阀室及所经管道位于襄汾万盛源门站内，两侧200米范围内有一座焦化厂（含高岭土厂共300人左右），一所驾校，沿线200m范围内人口排查约有40户（常住人口约150人），管道主要从农村田地、高岭土厂厂区后侧斜穿通过。", "户数": null, "机构名称": "临汾线路科", @@ -720,7 +720,7 @@ "高后果区长度": "2.4", "行政区域": "临汾市安泽县边寨村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过安泽县良马乡边寨村，管道两侧200米内人口户数约为250户（常住人口约600人）。", "户数": "250", "机构名称": "安泽站", @@ -747,7 +747,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市洪洞县明姜镇圣王村", "地区级别": "一级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇圣王村，管道经过的一级地区；管道两侧200m内有洪洞恒富华润输气门站，周边无住户。", "户数": null, "机构名称": "洪洞站", @@ -774,7 +774,7 @@ "高后果区长度": "1.3", "行政区域": "临汾市洪洞县明姜镇后河头村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇后河头村，管道两侧200m内有村庄，周边约173户，此地区共有人数692人。", "户数": "100", "机构名称": "洪洞站", @@ -801,7 +801,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧60m内约有民户15户（50人），管道一侧100m内有1个幼儿园（370人），管道一侧100m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室。", "户数": null, "机构名称": "临汾首站", diff --git a/static/gltf/images/0_04.jpg b/static/gltf/images/0_04.jpg new file mode 100644 index 0000000..e76e636 --- /dev/null +++ b/static/gltf/images/0_04.jpg Binary files differ diff --git a/static/gltf/images/1_05.jpg b/static/gltf/images/1_05.jpg new file mode 100644 index 0000000..e7f5569 --- /dev/null +++ b/static/gltf/images/1_05.jpg Binary files differ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/static/config/highConsequence.json b/static/config/highConsequence.json index 297cc4e..4a0dd3f 100644 --- a/static/config/highConsequence.json +++ b/static/config/highConsequence.json @@ -18,7 +18,7 @@ "高后果区长度": "0.2", "行政区域": "古县岳阳真五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县城燃输气门站", "户数": null, "机构名称": "古县站", @@ -45,7 +45,7 @@ "高后果区长度": "0.2", "行政区域": "山西省临汾市古县岳阳镇", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县国新正泰焦炉煤气厂区，1座变电站", "户数": null, "机构名称": "古县站", @@ -72,7 +72,7 @@ "高后果区长度": "3.5", "行政区域": "临汾市安泽县桃曲村", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管道两侧200m内人口户数约为170户（常住人口约500人），以及一个住宅小区（目前住户约为130户,260人），一个桃曲村小学，学校人数约35人。", "户数": null, "机构名称": "安泽站", @@ -99,7 +99,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "一级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座；", "户数": null, "机构名称": "临汾首站", @@ -126,7 +126,7 @@ "高后果区长度": "1.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "临汾首站--临侯线JP1+400m，管道邻近村庄建设，管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座，管道两侧200日范围内人口约100户（约350人），一座仓储库房（20人）。", "户数": null, "机构名称": "临汾首站", @@ -153,7 +153,7 @@ "高后果区长度": "2.3", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "该管段约2.3公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧10m内约有民户15户（50人），管道一侧40m内有1个幼儿园（370人），管道一侧10m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室", "户数": null, "机构名称": "临汾首站", @@ -180,7 +180,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区段店乡千伏村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约1.6公里经过山西省临汾市侯马市高村乡东高村，管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "临汾首站", @@ -207,7 +207,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市尧都区县底镇埝下村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西省临汾市尧都区段店乡埝下村，管道两侧200米范围内人口约有130户（约500人）", "户数": null, "机构名称": "临汾首站", @@ -234,7 +234,7 @@ "高后果区长度": "1.7", "行政区域": "临汾市洪洞县", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管线两侧200米范围内有，2个住宅小区，人数分别为930户，192户；另外包含有2座学校（丽都学校1500人），（山头中学300人）；其余村庄零散170余户，该区域共有人数约5676余人。1处停产的烟花爆竹厂、秦璧工业园区。", "户数": null, "机构名称": "洪洞站", @@ -261,7 +261,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区刘村镇上涧北村-东宜村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区刘村镇上涧北村、东宜村、青城村，管线两侧200米范围内有一个汽修厂（停车场）、一所养老院（约40人）、一座学校（约100人）、一座超市，沿线村庄200m范围内人口约有180户（约700人），总人口数量约为1000人，另有尚未建成的毛坯住宅楼", "户数": "120", "机构名称": "临汾首站", @@ -288,7 +288,7 @@ "高后果区长度": "4.4", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约4.4公里经过山西省临汾市尧都区金殿镇桑湾村、金殿村、城居村、新凤村、坛地村、东靳北村，管线两侧200米范围内途经六个村庄、有金殿镇镇政府、一所卫生院、一所派出所、一座庙宇、一个废铁站、一座加油站、一座晋南钢铁LNG加气站，金殿镇主街道每逢农历初二、初五、初八会闹集市，主街道伴有大量商户，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有800户（约3000人），总人口数量粗略计为3500人，管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -315,7 +315,7 @@ "高后果区长度": "1.8", "行政区域": "山西省临汾市古县岳阳镇五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道两侧200米范围有1个村庄，人口约有25户（约60人），1座古县城燃输气门站，1个核桃加工厂，1个古县肉联厂及1个生态园。", "户数": null, "机构名称": "古县站", @@ -369,7 +369,7 @@ "高后果区长度": "0.3", "行政区域": "山西省临汾市洪洞县大槐树镇辛堡村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "洪长JP0-JP0+300m，管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": null, "机构名称": "洪洞站", @@ -423,7 +423,7 @@ "高后果区长度": "0.45", "行政区域": "襄汾县陶寺乡东坡沟村", "地区级别": "二级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.45公里经过山西省临汾市襄汾县陶寺乡东坡沟村，管线两侧200米范围内有一座襄汾万盛源门站（2人），管道距离东坡沟村较近，两侧200m范围内人口户数约为50户（常住人口约60人）", "户数": null, "机构名称": "襄汾站", @@ -450,7 +450,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.5公里经过山西省临汾市襄汾县陶寺乡陶寺村，管线两侧200米范围内有一座加油站（5人），人口户数约为30户（常驻人口约50人），一个水泥厂（20人）、一个保温棉厂（暂停）陶寺村主街道每逢农历初二、初五、初八会闹集市(逢集200—300人），主街道伴有大量商户", "户数": "20", "机构名称": "襄汾站", @@ -477,7 +477,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西临汾市襄汾县西贾乡西李村田地，管道西侧200米范围内有一座襄汾万盛源加气站、一所学校（约800人）、一个汽修厂、一个运输公司及临夏线省道两侧的商户，沿线200m范围内人口粗略排查约有30户（常住人口约120人，流动人口居多），总人口数量粗略计为1000人，管道主要从加气站、商户背后田地铺设，人口流动量大。", "户数": null, "机构名称": "临汾线路科", @@ -504,7 +504,7 @@ "高后果区长度": "2.7", "行政区域": "山西省霍州市大张镇西张村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有村庄、小区住户，人口户数约为2700户（常住人口约6000人），1所大张镇中心幼儿园师生约300人。", "户数": "150", "机构名称": "霍州站", @@ -531,7 +531,7 @@ "高后果区长度": "0.9", "行政区域": "临汾市洪洞县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": "20", "机构名称": "洪洞站", @@ -558,7 +558,7 @@ "高后果区长度": "0.6", "行政区域": "山西省侯马市高村乡东高村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -585,7 +585,7 @@ "高后果区长度": "2.2", "行政区域": "临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约2.2公里经过山西省临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区，管线两侧200米范围内途经三个村庄、有规模集中的1个商业小区共19栋楼（住户约400户）、一座教堂、一座变电站，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有200户（新西村约有住户200户），管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -612,7 +612,7 @@ "高后果区长度": "0.6", "行政区域": "临汾市侯马市", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -639,7 +639,7 @@ "高后果区长度": "0.7", "行政区域": "临汾市襄汾县", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.7公里经过山西省临汾市襄汾县汾城镇东关村，管线两侧200米范围内有一所初级中学，沿线200m范围内人口粗略排查约500人，管道主要从学校东侧田地铺设。", "户数": null, "机构名称": "临汾线路科", @@ -666,7 +666,7 @@ "高后果区长度": "3.2", "行政区域": "临汾市霍州市", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有1个下乐坪村庄，人口户数约为600户（常住人口约400人），1所博翔中学（师生400人），1处牛场，，1个工业园区（目前人数不超过300人）1文化活动广场（在建中），1小区（300户，常住人口约200人未住满），1国家电网厂区。", "户数": null, "机构名称": "霍州站", @@ -693,7 +693,7 @@ "高后果区长度": "1.8", "行政区域": "山西临汾市襄汾县古城镇董村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "经过实地勘察，该管段约1.8公里经过山西省临汾市襄汾县古城镇董村、东街村，此处有公司阀室一座（古城阀室）、阀室及所经管道位于襄汾万盛源门站内，两侧200米范围内有一座焦化厂（含高岭土厂共300人左右），一所驾校，沿线200m范围内人口排查约有40户（常住人口约150人），管道主要从农村田地、高岭土厂厂区后侧斜穿通过。", "户数": null, "机构名称": "临汾线路科", @@ -720,7 +720,7 @@ "高后果区长度": "2.4", "行政区域": "临汾市安泽县边寨村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过安泽县良马乡边寨村，管道两侧200米内人口户数约为250户（常住人口约600人）。", "户数": "250", "机构名称": "安泽站", @@ -747,7 +747,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市洪洞县明姜镇圣王村", "地区级别": "一级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇圣王村，管道经过的一级地区；管道两侧200m内有洪洞恒富华润输气门站，周边无住户。", "户数": null, "机构名称": "洪洞站", @@ -774,7 +774,7 @@ "高后果区长度": "1.3", "行政区域": "临汾市洪洞县明姜镇后河头村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇后河头村，管道两侧200m内有村庄，周边约173户，此地区共有人数692人。", "户数": "100", "机构名称": "洪洞站", @@ -801,7 +801,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧60m内约有民户15户（50人），管道一侧100m内有1个幼儿园（370人），管道一侧100m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室。", "户数": null, "机构名称": "临汾首站", diff --git a/static/gltf/images/0_04.jpg b/static/gltf/images/0_04.jpg new file mode 100644 index 0000000..e76e636 --- /dev/null +++ b/static/gltf/images/0_04.jpg Binary files differ diff --git a/static/gltf/images/1_05.jpg b/static/gltf/images/1_05.jpg new file mode 100644 index 0000000..e7f5569 --- /dev/null +++ b/static/gltf/images/1_05.jpg Binary files differ diff --git a/static/gltf/images/2_06.jpg b/static/gltf/images/2_06.jpg new file mode 100644 index 0000000..9de780e --- /dev/null +++ b/static/gltf/images/2_06.jpg Binary files differ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/static/config/highConsequence.json b/static/config/highConsequence.json index 297cc4e..4a0dd3f 100644 --- a/static/config/highConsequence.json +++ b/static/config/highConsequence.json @@ -18,7 +18,7 @@ "高后果区长度": "0.2", "行政区域": "古县岳阳真五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县城燃输气门站", "户数": null, "机构名称": "古县站", @@ -45,7 +45,7 @@ "高后果区长度": "0.2", "行政区域": "山西省临汾市古县岳阳镇", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县国新正泰焦炉煤气厂区，1座变电站", "户数": null, "机构名称": "古县站", @@ -72,7 +72,7 @@ "高后果区长度": "3.5", "行政区域": "临汾市安泽县桃曲村", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管道两侧200m内人口户数约为170户（常住人口约500人），以及一个住宅小区（目前住户约为130户,260人），一个桃曲村小学，学校人数约35人。", "户数": null, "机构名称": "安泽站", @@ -99,7 +99,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "一级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座；", "户数": null, "机构名称": "临汾首站", @@ -126,7 +126,7 @@ "高后果区长度": "1.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "临汾首站--临侯线JP1+400m，管道邻近村庄建设，管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座，管道两侧200日范围内人口约100户（约350人），一座仓储库房（20人）。", "户数": null, "机构名称": "临汾首站", @@ -153,7 +153,7 @@ "高后果区长度": "2.3", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "该管段约2.3公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧10m内约有民户15户（50人），管道一侧40m内有1个幼儿园（370人），管道一侧10m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室", "户数": null, "机构名称": "临汾首站", @@ -180,7 +180,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区段店乡千伏村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约1.6公里经过山西省临汾市侯马市高村乡东高村，管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "临汾首站", @@ -207,7 +207,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市尧都区县底镇埝下村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西省临汾市尧都区段店乡埝下村，管道两侧200米范围内人口约有130户（约500人）", "户数": null, "机构名称": "临汾首站", @@ -234,7 +234,7 @@ "高后果区长度": "1.7", "行政区域": "临汾市洪洞县", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管线两侧200米范围内有，2个住宅小区，人数分别为930户，192户；另外包含有2座学校（丽都学校1500人），（山头中学300人）；其余村庄零散170余户，该区域共有人数约5676余人。1处停产的烟花爆竹厂、秦璧工业园区。", "户数": null, "机构名称": "洪洞站", @@ -261,7 +261,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区刘村镇上涧北村-东宜村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区刘村镇上涧北村、东宜村、青城村，管线两侧200米范围内有一个汽修厂（停车场）、一所养老院（约40人）、一座学校（约100人）、一座超市，沿线村庄200m范围内人口约有180户（约700人），总人口数量约为1000人，另有尚未建成的毛坯住宅楼", "户数": "120", "机构名称": "临汾首站", @@ -288,7 +288,7 @@ "高后果区长度": "4.4", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约4.4公里经过山西省临汾市尧都区金殿镇桑湾村、金殿村、城居村、新凤村、坛地村、东靳北村，管线两侧200米范围内途经六个村庄、有金殿镇镇政府、一所卫生院、一所派出所、一座庙宇、一个废铁站、一座加油站、一座晋南钢铁LNG加气站，金殿镇主街道每逢农历初二、初五、初八会闹集市，主街道伴有大量商户，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有800户（约3000人），总人口数量粗略计为3500人，管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -315,7 +315,7 @@ "高后果区长度": "1.8", "行政区域": "山西省临汾市古县岳阳镇五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道两侧200米范围有1个村庄，人口约有25户（约60人），1座古县城燃输气门站，1个核桃加工厂，1个古县肉联厂及1个生态园。", "户数": null, "机构名称": "古县站", @@ -369,7 +369,7 @@ "高后果区长度": "0.3", "行政区域": "山西省临汾市洪洞县大槐树镇辛堡村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "洪长JP0-JP0+300m，管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": null, "机构名称": "洪洞站", @@ -423,7 +423,7 @@ "高后果区长度": "0.45", "行政区域": "襄汾县陶寺乡东坡沟村", "地区级别": "二级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.45公里经过山西省临汾市襄汾县陶寺乡东坡沟村，管线两侧200米范围内有一座襄汾万盛源门站（2人），管道距离东坡沟村较近，两侧200m范围内人口户数约为50户（常住人口约60人）", "户数": null, "机构名称": "襄汾站", @@ -450,7 +450,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.5公里经过山西省临汾市襄汾县陶寺乡陶寺村，管线两侧200米范围内有一座加油站（5人），人口户数约为30户（常驻人口约50人），一个水泥厂（20人）、一个保温棉厂（暂停）陶寺村主街道每逢农历初二、初五、初八会闹集市(逢集200—300人），主街道伴有大量商户", "户数": "20", "机构名称": "襄汾站", @@ -477,7 +477,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西临汾市襄汾县西贾乡西李村田地，管道西侧200米范围内有一座襄汾万盛源加气站、一所学校（约800人）、一个汽修厂、一个运输公司及临夏线省道两侧的商户，沿线200m范围内人口粗略排查约有30户（常住人口约120人，流动人口居多），总人口数量粗略计为1000人，管道主要从加气站、商户背后田地铺设，人口流动量大。", "户数": null, "机构名称": "临汾线路科", @@ -504,7 +504,7 @@ "高后果区长度": "2.7", "行政区域": "山西省霍州市大张镇西张村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有村庄、小区住户，人口户数约为2700户（常住人口约6000人），1所大张镇中心幼儿园师生约300人。", "户数": "150", "机构名称": "霍州站", @@ -531,7 +531,7 @@ "高后果区长度": "0.9", "行政区域": "临汾市洪洞县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": "20", "机构名称": "洪洞站", @@ -558,7 +558,7 @@ "高后果区长度": "0.6", "行政区域": "山西省侯马市高村乡东高村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -585,7 +585,7 @@ "高后果区长度": "2.2", "行政区域": "临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约2.2公里经过山西省临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区，管线两侧200米范围内途经三个村庄、有规模集中的1个商业小区共19栋楼（住户约400户）、一座教堂、一座变电站，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有200户（新西村约有住户200户），管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -612,7 +612,7 @@ "高后果区长度": "0.6", "行政区域": "临汾市侯马市", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -639,7 +639,7 @@ "高后果区长度": "0.7", "行政区域": "临汾市襄汾县", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.7公里经过山西省临汾市襄汾县汾城镇东关村，管线两侧200米范围内有一所初级中学，沿线200m范围内人口粗略排查约500人，管道主要从学校东侧田地铺设。", "户数": null, "机构名称": "临汾线路科", @@ -666,7 +666,7 @@ "高后果区长度": "3.2", "行政区域": "临汾市霍州市", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有1个下乐坪村庄，人口户数约为600户（常住人口约400人），1所博翔中学（师生400人），1处牛场，，1个工业园区（目前人数不超过300人）1文化活动广场（在建中），1小区（300户，常住人口约200人未住满），1国家电网厂区。", "户数": null, "机构名称": "霍州站", @@ -693,7 +693,7 @@ "高后果区长度": "1.8", "行政区域": "山西临汾市襄汾县古城镇董村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "经过实地勘察，该管段约1.8公里经过山西省临汾市襄汾县古城镇董村、东街村，此处有公司阀室一座（古城阀室）、阀室及所经管道位于襄汾万盛源门站内，两侧200米范围内有一座焦化厂（含高岭土厂共300人左右），一所驾校，沿线200m范围内人口排查约有40户（常住人口约150人），管道主要从农村田地、高岭土厂厂区后侧斜穿通过。", "户数": null, "机构名称": "临汾线路科", @@ -720,7 +720,7 @@ "高后果区长度": "2.4", "行政区域": "临汾市安泽县边寨村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过安泽县良马乡边寨村，管道两侧200米内人口户数约为250户（常住人口约600人）。", "户数": "250", "机构名称": "安泽站", @@ -747,7 +747,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市洪洞县明姜镇圣王村", "地区级别": "一级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇圣王村，管道经过的一级地区；管道两侧200m内有洪洞恒富华润输气门站，周边无住户。", "户数": null, "机构名称": "洪洞站", @@ -774,7 +774,7 @@ "高后果区长度": "1.3", "行政区域": "临汾市洪洞县明姜镇后河头村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇后河头村，管道两侧200m内有村庄，周边约173户，此地区共有人数692人。", "户数": "100", "机构名称": "洪洞站", @@ -801,7 +801,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧60m内约有民户15户（50人），管道一侧100m内有1个幼儿园（370人），管道一侧100m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室。", "户数": null, "机构名称": "临汾首站", diff --git a/static/gltf/images/0_04.jpg b/static/gltf/images/0_04.jpg new file mode 100644 index 0000000..e76e636 --- /dev/null +++ b/static/gltf/images/0_04.jpg Binary files differ diff --git a/static/gltf/images/1_05.jpg b/static/gltf/images/1_05.jpg new file mode 100644 index 0000000..e7f5569 --- /dev/null +++ b/static/gltf/images/1_05.jpg Binary files differ diff --git a/static/gltf/images/2_06.jpg b/static/gltf/images/2_06.jpg new file mode 100644 index 0000000..9de780e --- /dev/null +++ b/static/gltf/images/2_06.jpg Binary files differ diff --git a/static/gltf/images/3_07.jpg b/static/gltf/images/3_07.jpg new file mode 100644 index 0000000..29b534c --- /dev/null +++ b/static/gltf/images/3_07.jpg Binary files differ diff --git a/src/assets/button_images/board-box1.png b/src/assets/button_images/board-box1.png new file mode 100644 index 0000000..1f4d1e6 --- /dev/null +++ b/src/assets/button_images/board-box1.png Binary files differ diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue index 5c5fae8..94c1f3a 100644 --- a/src/components/Map/MarsMap.vue +++ b/src/components/Map/MarsMap.vue @@ -119,6 +119,7 @@ outlineWidth: 3, // 边框宽度 fill: true, // 是否填充 width: 5, // 宽度 + clampToGround: true, label: { // 面中心点，显示文字的配置 text: '{name}', // 对应的属性名称 diff --git a/src/components/SelectTool/components/selectButton.vue b/src/components/SelectTool/components/selectButton.vue index e124bfd..5b89a96 100644 --- a/src/components/SelectTool/components/selectButton.vue +++ b/src/components/SelectTool/components/selectButton.vue @@ -1,18 +1,67 @@ diff --git a/src/components/SelectTool/selectArea.vue b/src/components/SelectTool/selectArea.vue index c64d5ec..a96dd8f 100644 --- a/src/components/SelectTool/selectArea.vue +++ b/src/components/SelectTool/selectArea.vue @@ -7,7 +7,7 @@
{{ title }}
- +
@@ -17,7 +17,15 @@ export default { name: 'SelectArea', components: { SelectTitle }, + model: { + prop: 'value', + event: 'change' + }, props: { + value: { + type: String, + default: '' + }, // 选中值 title: { type: String, default: '' @@ -34,6 +42,21 @@ ] } }// 按钮组 + }, + data() { + return { + select: '' + } + }, + mounted() { + this.select = this.value + }, + methods: { + change(value) { + console.log(value) + this.select = value + this.$emit('change', value) + } } } @@ -74,6 +97,9 @@ outline: -webkit-focus-ring-color auto 0px; background-color:#0e8bff; } + .check{ + background-color:#0e8bff; + } } } diff --git a/src/components/panelBoard/panelBoard.vue b/src/components/panelBoard/panelBoard.vue new file mode 100644 index 0000000..3e22582 --- /dev/null +++ b/src/components/panelBoard/panelBoard.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/icons/svg/alarm-well.svg b/src/icons/svg/alarm-well.svg deleted file mode 100644 index 60f639c..0000000 --- a/src/icons/svg/alarm-well.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/svg/icon-bar.svg b/src/icons/svg/icon-bar.svg new file mode 100644 index 0000000..889e171 --- /dev/null +++ b/src/icons/svg/icon-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-car.svg b/src/icons/svg/icon-car.svg deleted file mode 100644 index 50f7700..0000000 --- a/src/icons/svg/icon-car.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/icon-heat.svg b/src/icons/svg/icon-heat.svg new file mode 100644 index 0000000..4b7e54b --- /dev/null +++ b/src/icons/svg/icon-heat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-station.svg b/src/icons/svg/icon-station.svg new file mode 100644 index 0000000..4d231f1 --- /dev/null +++ b/src/icons/svg/icon-station.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9b8fa4d..4314420 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,10 +53,22 @@ hidden: true }, { + path: '/full/highConsequence', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } + }, + { path: '/full/mapLayer', name: 'MapLayer', component: () => import('@/views/maps/mapOverview'), - meta: { title: '基础地图1', icon: '' } + meta: { title: '测试大屏', icon: '' } + }, + { + path: '/full/mapLayer', + name: 'MapLayer', + component: () => import('@/views/maps/highConsequenceArea'), + meta: { title: '高后果区', icon: '' } }, // 九宫格 { path: '/dashboard', component: () => import('@/views/dashboard/index'), hidden: true } diff --git a/src/styles/popup.scss b/src/styles/popup.scss index c7f87c3..2d695de 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -18,7 +18,7 @@ .divpoint .area { position: relative; - min-width: 180px; + min-width: 200px; } .divpoint .b-t { @@ -80,7 +80,7 @@ .divpoint .label-wrap { padding-left: 12px; color: #fff; - font-size: 16px; + font-size: 20px; white-space: nowrap; overflow: hidden; } @@ -116,7 +116,7 @@ } .divpoint .data-value { - font-size: 14px; + font-size: 18px; } .divpoint .label-num { @@ -145,7 +145,7 @@ z-index: -1; padding: 2px 4px; color: #fff; - font-size: 14px; + font-size: 18px; background-color: #333; border-radius: 3px; opacity: 0; diff --git a/src/utils/dateutils.js b/src/utils/dateutils.js index d8b6266..41ec560 100644 --- a/src/utils/dateutils.js +++ b/src/utils/dateutils.js @@ -32,6 +32,54 @@ return new Date(now).Format(fmt) } +export function getTimes(str){ + var now = new Date() // 当前日期 + var nowDayOfWeek = now.getDay() // 今天本周的第几天 + var nowDay = now.getDate() // 当前日 + var nowMonth = now.getMonth() // 当前月 + var nowYear = now.getFullYear() // 当前年 + nowYear += (nowYear < 2000) ? 1900 : 0 + var day = nowDayOfWeek || 7 + let result = {beginDate:'',endDate:''} + switch (str) { + case '本日': + result = { + beginDate: new Date(new Date(now.toLocaleDateString()).getTime()), + endDate: new Date(new Date(now.toLocaleDateString()).getTime()+24*60*60*1000-1) + } + break + case '本周': + result = { + beginDate: new Date(now.getFullYear(), nowMonth, nowDay + 1 - day), + endDate: new Date(now.getFullYear(), nowMonth, nowDay + 7 - day,23,59,59) + } + break + case '本月': + const day = getMonthDays(nowYear, nowMonth) + result = { + beginDate: new Date(nowYear, nowMonth, 1), + endDate: new Date(nowYear, nowMonth, day ,23,59,59) + } + break + case '本年': + result = { + beginDate: new Date(nowYear, 1, 1), + endDate: new Date(nowYear, 11, 31,23,59,59) + } + break + } + console.log(result) + return result +} + +// 获取某年某月有多少天 +export function getMonthDays(nowYear,nowMonth) { + var monthStartDate = new Date(nowYear, nowMonth, 1); + var monthEndDate = new Date(nowYear, nowMonth + 1, 1); + var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24); + return days; +} + // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) diff --git a/src/views/maps/components/btnsTool/hqaTool.vue b/src/views/maps/components/btnsTool/hqaTool.vue new file mode 100644 index 0000000..587191a --- /dev/null +++ b/src/views/maps/components/btnsTool/hqaTool.vue @@ -0,0 +1,30 @@ + + + + + + diff --git a/src/views/maps/components/selectAll.vue b/src/views/maps/components/selectAll.vue index 5cd7843..959b7d8 100644 --- a/src/views/maps/components/selectAll.vue +++ b/src/views/maps/components/selectAll.vue @@ -5,10 +5,10 @@ --> @@ -19,6 +19,12 @@ components: { SelectArea }, data() { return { + currentSelect: { + area: '全部', + time: '全部', + people: '全部', + level: '全部' + }, areaBtns: [ { name: '全部', value: '' }, { name: '临汾', value: 'lf' }, @@ -39,17 +45,25 @@ peopleBtns: [ { name: '全部', value: '' }, { name: '10-100', value: '10' }, - { name: '100-150', value: '100' }, - { name: '150-200', value: '150' }, + { name: '101-150', value: '100' }, + { name: '151-200', value: '150' }, { name: '200以上', value: '200' } ], // 人数按钮 levelBtns: [ { name: '全部', value: '' }, - { name: 'Ⅰ', value: '1' }, - { name: 'Ⅱ', value: '2' }, - { name: 'Ⅲ', value: '3' } + { name: 'I级', value: '1' }, + { name: 'II级', value: '2' }, + { name: 'III级', value: '3' } ] // 人数按钮 } + }, + watch: { + currentSelect: { // 深度监听选区变化并传递给上级 + handler(newval, oldval) { + this.$emit('change', this.currentSelect) + }, + deep: true + } } } diff --git a/src/views/maps/highConsequenceArea.vue b/src/views/maps/highConsequenceArea.vue new file mode 100644 index 0000000..328a1e3 --- /dev/null +++ b/src/views/maps/highConsequenceArea.vue @@ -0,0 +1,358 @@ + + + + + + + + diff --git a/src/views/maps/mapOverview.vue b/src/views/maps/mapOverview.vue index ddb58f9..e258556 100644 --- a/src/views/maps/mapOverview.vue +++ b/src/views/maps/mapOverview.vue @@ -5,19 +5,23 @@ - +
- 全省高后果区 + {{ boardData.name | boardNameFilter }}
- 77 + {{ boardData.value }}
+
+ + +
航天二院203所
@@ -30,13 +34,25 @@ import Weather from '@/components/weather/weather' import Clock from '@/components/clock/Clock' import SelectAll from './components/selectAll' +import SelectButton from '@/components/SelectTool/components/selectButton' +import { getTimes } from '@/utils/dateutils' export default { name: 'Index', components: { SelectAll, Weather, Clock, - Map + Map, + SelectButton + }, + filters: { + boardNameFilter(val) { + if (val === '全部' || val === '') { + return '全省高后果区' + } else { + return val + '区域高后果区' + } + } }, data() { @@ -45,6 +61,12 @@ configUrl: 'static/config/config.json', alpha: 100, // 透明度 underground: null, // ？ + heatShow: true, + stationShow: true, + boardData: { + name: '全部', + value: 196 + }, // 统计版展示数据 manageStations: [ { 'x': 112.73874, 'y': 37.693689, 'z': 0, 'name': '晋中管理处' }, { 'x': 111.121552, 'y': 37.5245, 'z': 0, 'name': '吕梁管理处' }, @@ -55,7 +77,7 @@ { 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' }, { 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' } ], - highConsequence: [ + highConsequenceStation: [ { x: 112.73874, y: 37.693689, id: 0, name: '晋中管理处', count: 158 }, { x: 111.121552, y: 37.5245, id: 0, name: '吕梁管理处', count: 10 }, { x: 112.929902, y: 39.622888, id: 0, name: '同朔管理处', count: 44 }, @@ -65,11 +87,12 @@ { x: 113.038394, y: 35.850111, id: 0, name: '长晋管理处', count: 11 }, { x: 111.491467, y: 36.064572, id: 0, name: '临汾管理处', count: 30 } ], + highConsequence: [], stationLayer: null, // 管理站图层 - hqaLayer: null // 高后果区热力图 + hqaLayer: null, // 高后果区热力图 + graphicLayer: null // 管理站标签图层 } }, - methods: { // 地图构造完成回调 onMapload(map) { @@ -78,40 +101,36 @@ // 背景透明 this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0) this.map._viewer.scene.globe.baseColor.alpha = 0 - // this.addPipe() - // 创建entity图层 - const graphicLayer = new this.mars3d.layer.GraphicLayer() - map.addLayer(graphicLayer) this.addHighConsequenceArea() // 添加管理处 - this.addStation(graphicLayer) + this.addStation() + this.addStationDiv() // this.addLine() // this.addProvinceWall(graphicLayer) // this.addProvinceLine(graphicLayer) - // 开启炫光 - // var bloomEffect = new this.mars3d.effect.BloomEffect() - // map.addEffect(bloomEffect) // this.addGraphic_05(graphicLayer) }, // 高后果区热力图 addHighConsequenceArea() { const { mars3d } = this axios.get('static/config/highConsequence.json').then((res) => { + res = res.data if (res.code === 200) { - this.highConsequence = res.data - debugger + // 过滤掉经度为null的 + this.highConsequence = res.data.filter(item => item['经度'] !== null) + this.boardData.value = this.highConsequence.length const hqaLayer = new mars3d.layer.HeatLayer({ positions: this.highConsequence.map(item => { - return { lng: item['经度'], lat: item['纬度'], value: 30 } + return { lng: item['经度'], lat: item['纬度'], value: 1 } }), heatStyle: { - radius: 50, // 半径 - blur: 0.85 // 模糊因子 + radius: 30, // 半径 + blur: 1 // 模糊因子 }, // 以下为矩形矢量对象的样式参数 style: { - opacity: 1.0, + opacity: 0.8, clampToGround: true }, redrawZoom: true, @@ -123,14 +142,14 @@ }) }, // 管理处 - addStation(graphicLayer) { + addStation() { const { mars3d } = this const stationLayer = new mars3d.layer.ModelLayer({ name: '管理处', url: './static/gltf/house02.gltf', // url: './static/gltf/qwe.gltf', style: { - scale: 10, + scale: 20, heading: 0, minimumPixelSize: 30, clampToGround: true @@ -141,38 +160,78 @@ }) this.stationLayer = stationLayer this.map.addLayer(stationLayer) - - // for (const station of this.manageStations) { - // console.log(station.name) - // var primitive = new mars3d.graphic.ModelPrimitive({ - // position: [station.x, station.y, station.z], - // style: { - // url: './static/gltf/house02.gltf', - // scale: 10, // 比例 - // minimumPixelSize: 50, // 最近像素大小，不考虑缩放 - // heading: 0, - // label: { - // text: station.name, - // font_size: 18, - // color: '#ffffff', - // pixelOffsetY: -50, - // distanceDisplayCondition: true, - // distanceDisplayCondition_far: 500000, - // distanceDisplayCondition_near: 0 - // } - // } - // }) - // graphicLayer.addGraphic(primitive) - // } }, - + // 选框发生变化 + selectChange({ area, people, time, level }) { + area = area === '全部' ? '' : area + time = time === '全部' ? '' : time + level = level === '全部' ? '' : level + // 获取人数范围 + let min = 0 + let max = 100000 + switch (people) { + case '10-100': + min = 10 + max = 100 + break + case '101-150': + min = 101 + max = 150 + break + case '151-200': + min = 151 + max = 200 + break + case '200以上': + min = 200 + break + } + // 解析时间 + let beginTime = '' + let endTime = '' + if (time) { + const result = getTimes(time) + beginTime = result.beginDate + endTime = result.endDate + } + this.boardData.name = area + // 查询数据 + let count = 0 + debugger + for (const hca of this.highConsequence) { + let flag = true // 标记是否合格 + const real_people = parseInt(hca['户数'] === null ? '1' : hca['户数']) + // 比较区域 + if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) { + flag = false + } + // 比较人数 + if (real_people && (real_people > max || real_people < min)) { + flag = false + } + // 比较时间 + if (time) { + const real_date = new Date(hca['识别时间']) + if (real_date && (real_date < beginTime || real_date > endTime)) { + flag = false + } + } + // 比较级别 + if (level && hca['高后果区级别'] && hca['高后果区级别'] === level) { + flag = false + } + if (flag) { + count++ + } + } + this.boardData.value = count + }, addProvinceWall(graphicLayer) { const { mars3d, Cesium } = this axios.get('static/geojson/140000_single.json').then((res) => { if (res.status === 200) { const feature = res.data.features[0] var coordinates = feature.geometry.coordinates[0] - debugger var graphic = new mars3d.graphic.WallEntity({ positions: coordinates, style: { @@ -220,12 +279,16 @@ }) }, // 自定义的弹窗 - addGraphic_05(graphicLayer) { + addStationDiv() { const { Cesium, mars3d } = this - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(111.031145, 36.948563, -2100), - style: { - html: `
+ const graphicLayer = new mars3d.layer.GraphicLayer() + this.graphicLayer = graphicLayer + this.map.addLayer(graphicLayer) + for (const station of this.highConsequenceStation) { + var graphic = new mars3d.graphic.DivGraphic({ + position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 100), + style: { + html: `
@@ -235,39 +298,59 @@
-
燃气管线
+
${station.name}
-
管径：
-
1200mm +
高后果区数量：
+
${station.count}个
-
材质：
-
3pe +
经度：
+
${station.x}
-
压力等级：
-
中 +
纬度：
+
${station.y}
-
-
铺设年代：
-
2000年 -
-
`, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 100000, 0.1), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = true // 打开测试点，与DIV点进行对比位置调整css + `, + // anchor: [0, 0], + horizontalOrigin: Cesium.HorizontalOrigin.LEFT, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 + scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND + }, + pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 + }) + graphicLayer.addGraphic(graphic) + graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css + } + }, + // 是否显示热力图 + showHeat(show) { + // 现在正在显示 + if (show) { // 移除 + this.heatShow = false + this.map.removeLayer(this.hqaLayer, true) + } else { + this.heatShow = true + this.addHighConsequenceArea() + } + }, + showStation(show) { + // 现在正在显示 + if (show) { // 移除 + this.stationShow = false + this.map.removeLayer(this.stationLayer, true) + this.map.removeLayer(this.graphicLayer, true) + } else { + this.stationShow = true + this.addStation() + this.addStationDiv() + } } } } @@ -276,20 +359,30 @@ diff --git a/static/config/highConsequence.json b/static/config/highConsequence.json index 297cc4e..4a0dd3f 100644 --- a/static/config/highConsequence.json +++ b/static/config/highConsequence.json @@ -18,7 +18,7 @@ "高后果区长度": "0.2", "行政区域": "古县岳阳真五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县城燃输气门站", "户数": null, "机构名称": "古县站", @@ -45,7 +45,7 @@ "高后果区长度": "0.2", "行政区域": "山西省临汾市古县岳阳镇", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200米范围有1座古县国新正泰焦炉煤气厂区，1座变电站", "户数": null, "机构名称": "古县站", @@ -72,7 +72,7 @@ "高后果区长度": "3.5", "行政区域": "临汾市安泽县桃曲村", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管道两侧200m内人口户数约为170户（常住人口约500人），以及一个住宅小区（目前住户约为130户,260人），一个桃曲村小学，学校人数约35人。", "户数": null, "机构名称": "安泽站", @@ -99,7 +99,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "一级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座；", "户数": null, "机构名称": "临汾首站", @@ -126,7 +126,7 @@ "高后果区长度": "1.4", "行政区域": "山西省临汾市尧都区屯里镇沟上村、西芦村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "临汾首站--临侯线JP1+400m，管道邻近村庄建设，管线两侧200米范围内有临汾城燃加气站一座（现已停业，留守办公人员约20人），有中国石油西气东输临汾站及西气东输92#阀室一座，管道两侧200日范围内人口约100户（约350人），一座仓储库房（20人）。", "户数": null, "机构名称": "临汾首站", @@ -153,7 +153,7 @@ "高后果区长度": "2.3", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "该管段约2.3公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧10m内约有民户15户（50人），管道一侧40m内有1个幼儿园（370人），管道一侧10m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室", "户数": null, "机构名称": "临汾首站", @@ -180,7 +180,7 @@ "高后果区长度": "0.4", "行政区域": "山西省临汾市尧都区段店乡千伏村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约1.6公里经过山西省临汾市侯马市高村乡东高村，管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "临汾首站", @@ -207,7 +207,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市尧都区县底镇埝下村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西省临汾市尧都区段店乡埝下村，管道两侧200米范围内人口约有130户（约500人）", "户数": null, "机构名称": "临汾首站", @@ -234,7 +234,7 @@ "高后果区长度": "1.7", "行政区域": "临汾市洪洞县", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II", "高后果区特征描述": "管线两侧200米范围内有，2个住宅小区，人数分别为930户，192户；另外包含有2座学校（丽都学校1500人），（山头中学300人）；其余村庄零散170余户，该区域共有人数约5676余人。1处停产的烟花爆竹厂、秦璧工业园区。", "户数": null, "机构名称": "洪洞站", @@ -261,7 +261,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区刘村镇上涧北村-东宜村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区刘村镇上涧北村、东宜村、青城村，管线两侧200米范围内有一个汽修厂（停车场）、一所养老院（约40人）、一座学校（约100人）、一座超市，沿线村庄200m范围内人口约有180户（约700人），总人口数量约为1000人，另有尚未建成的毛坯住宅楼", "户数": "120", "机构名称": "临汾首站", @@ -288,7 +288,7 @@ "高后果区长度": "4.4", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约4.4公里经过山西省临汾市尧都区金殿镇桑湾村、金殿村、城居村、新凤村、坛地村、东靳北村，管线两侧200米范围内途经六个村庄、有金殿镇镇政府、一所卫生院、一所派出所、一座庙宇、一个废铁站、一座加油站、一座晋南钢铁LNG加气站，金殿镇主街道每逢农历初二、初五、初八会闹集市，主街道伴有大量商户，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有800户（约3000人），总人口数量粗略计为3500人，管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -315,7 +315,7 @@ "高后果区长度": "1.8", "行政区域": "山西省临汾市古县岳阳镇五马村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道两侧200米范围有1个村庄，人口约有25户（约60人），1座古县城燃输气门站，1个核桃加工厂，1个古县肉联厂及1个生态园。", "户数": null, "机构名称": "古县站", @@ -369,7 +369,7 @@ "高后果区长度": "0.3", "行政区域": "山西省临汾市洪洞县大槐树镇辛堡村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "洪长JP0-JP0+300m，管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": null, "机构名称": "洪洞站", @@ -423,7 +423,7 @@ "高后果区长度": "0.45", "行政区域": "襄汾县陶寺乡东坡沟村", "地区级别": "二级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.45公里经过山西省临汾市襄汾县陶寺乡东坡沟村，管线两侧200米范围内有一座襄汾万盛源门站（2人），管道距离东坡沟村较近，两侧200m范围内人口户数约为50户（常住人口约60人）", "户数": null, "机构名称": "襄汾站", @@ -450,7 +450,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.5公里经过山西省临汾市襄汾县陶寺乡陶寺村，管线两侧200米范围内有一座加油站（5人），人口户数约为30户（常驻人口约50人），一个水泥厂（20人）、一个保温棉厂（暂停）陶寺村主街道每逢农历初二、初五、初八会闹集市(逢集200—300人），主街道伴有大量商户", "户数": "20", "机构名称": "襄汾站", @@ -477,7 +477,7 @@ "高后果区长度": "0.8", "行政区域": "临汾市襄汾县", "地区级别": "二级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约0.8公里经过山西临汾市襄汾县西贾乡西李村田地，管道西侧200米范围内有一座襄汾万盛源加气站、一所学校（约800人）、一个汽修厂、一个运输公司及临夏线省道两侧的商户，沿线200m范围内人口粗略排查约有30户（常住人口约120人，流动人口居多），总人口数量粗略计为1000人，管道主要从加气站、商户背后田地铺设，人口流动量大。", "户数": null, "机构名称": "临汾线路科", @@ -504,7 +504,7 @@ "高后果区长度": "2.7", "行政区域": "山西省霍州市大张镇西张村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有村庄、小区住户，人口户数约为2700户（常住人口约6000人），1所大张镇中心幼儿园师生约300人。", "户数": "150", "机构名称": "霍州站", @@ -531,7 +531,7 @@ "高后果区长度": "0.9", "行政区域": "临汾市洪洞县", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管道经过山西省临汾市洪洞县大槐树镇辛堡村；管道两侧200m内有一座汽车客运站，属于人口密集场所，每天客运站出行乘客约500人，此地区常驻人口100人，洪洞输气站场围墙南侧有下游用户洪洞华润加气站1座。", "户数": "20", "机构名称": "洪洞站", @@ -558,7 +558,7 @@ "高后果区长度": "0.6", "行政区域": "山西省侯马市高村乡东高村", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -585,7 +585,7 @@ "高后果区长度": "2.2", "行政区域": "临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约2.2公里经过山西省临汾市尧都区土门镇新西村、刘村镇嘉泉村、汾河办事处栖凤社区，管线两侧200米范围内途经三个村庄、有规模集中的1个商业小区共19栋楼（住户约400户）、一座教堂、一座变电站，沿线农村民户聚集较多，沿线200m范围内人口粗略排查约有200户（新西村约有住户200户），管道主要从农村民居背后田地铺设，人口聚集量大。", "户数": null, "机构名称": "临汾首站", @@ -612,7 +612,7 @@ "高后果区长度": "0.6", "行政区域": "临汾市侯马市", "地区级别": "二级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "管线两侧200米范围内有一座侯马益通门站及益通加气站（10人），两侧200m范围内人口约30人", "户数": null, "机构名称": "侯马站", @@ -639,7 +639,7 @@ "高后果区长度": "0.7", "行政区域": "临汾市襄汾县", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "该管段约0.7公里经过山西省临汾市襄汾县汾城镇东关村，管线两侧200米范围内有一所初级中学，沿线200m范围内人口粗略排查约500人，管道主要从学校东侧田地铺设。", "户数": null, "机构名称": "临汾线路科", @@ -666,7 +666,7 @@ "高后果区长度": "3.2", "行政区域": "临汾市霍州市", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "管道两侧200m内有1个下乐坪村庄，人口户数约为600户（常住人口约400人），1所博翔中学（师生400人），1处牛场，，1个工业园区（目前人数不超过300人）1文化活动广场（在建中），1小区（300户，常住人口约200人未住满），1国家电网厂区。", "户数": null, "机构名称": "霍州站", @@ -693,7 +693,7 @@ "高后果区长度": "1.8", "行政区域": "山西临汾市襄汾县古城镇董村", "地区级别": "三级地区", - "高后果区级别": "高II级", + "高后果区级别": "II级级", "高后果区特征描述": "经过实地勘察，该管段约1.8公里经过山西省临汾市襄汾县古城镇董村、东街村，此处有公司阀室一座（古城阀室）、阀室及所经管道位于襄汾万盛源门站内，两侧200米范围内有一座焦化厂（含高岭土厂共300人左右），一所驾校，沿线200m范围内人口排查约有40户（常住人口约150人），管道主要从农村田地、高岭土厂厂区后侧斜穿通过。", "户数": null, "机构名称": "临汾线路科", @@ -720,7 +720,7 @@ "高后果区长度": "2.4", "行政区域": "临汾市安泽县边寨村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过安泽县良马乡边寨村，管道两侧200米内人口户数约为250户（常住人口约600人）。", "户数": "250", "机构名称": "安泽站", @@ -747,7 +747,7 @@ "高后果区长度": "0.5", "行政区域": "临汾市洪洞县明姜镇圣王村", "地区级别": "一级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇圣王村，管道经过的一级地区；管道两侧200m内有洪洞恒富华润输气门站，周边无住户。", "户数": null, "机构名称": "洪洞站", @@ -774,7 +774,7 @@ "高后果区长度": "1.3", "行政区域": "临汾市洪洞县明姜镇后河头村", "地区级别": "三级地区", - "高后果区级别": "高Ⅱ", + "高后果区级别": "II级", "高后果区特征描述": "管道经过山西省临汾市洪洞县明姜镇后河头村，管道两侧200m内有村庄，周边约173户，此地区共有人数692人。", "户数": "100", "机构名称": "洪洞站", @@ -801,7 +801,7 @@ "高后果区长度": "2.65", "行政区域": "临汾市尧都区", "地区级别": "三级地区", - "高后果区级别": "高II", + "高后果区级别": "II级", "高后果区特征描述": "该管段约2.65公里经过山西省临汾市尧都区屯里镇沟上村、西芦村、东芦村、韩村，管道两侧200m内有4个村庄，3个住宅小区，目前实际入住人口数约为200户（600人），管道一侧60m内约有民户15户（50人），管道一侧100m内有1个幼儿园（370人），管道一侧100m有1座中石油西气东输输气站，临汾城燃加气站一座（现已停业，留守办公人员约20人），中国石油西气东输临汾站92号阀室。", "户数": null, "机构名称": "临汾首站", diff --git a/static/gltf/images/0_04.jpg b/static/gltf/images/0_04.jpg new file mode 100644 index 0000000..e76e636 --- /dev/null +++ b/static/gltf/images/0_04.jpg Binary files differ diff --git a/static/gltf/images/1_05.jpg b/static/gltf/images/1_05.jpg new file mode 100644 index 0000000..e7f5569 --- /dev/null +++ b/static/gltf/images/1_05.jpg Binary files differ diff --git a/static/gltf/images/2_06.jpg b/static/gltf/images/2_06.jpg new file mode 100644 index 0000000..9de780e --- /dev/null +++ b/static/gltf/images/2_06.jpg Binary files differ diff --git a/static/gltf/images/3_07.jpg b/static/gltf/images/3_07.jpg new file mode 100644 index 0000000..29b534c --- /dev/null +++ b/static/gltf/images/3_07.jpg Binary files differ diff --git a/static/gltf/images/4_08.jpg b/static/gltf/images/4_08.jpg new file mode 100644 index 0000000..523eca6 --- /dev/null +++ b/static/gltf/images/4_08.jpg Binary files differ