|
|
@@ -5,7 +5,7 @@
|
|
|
<div class="header">
|
|
|
<!-- title -->
|
|
|
<div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png"/>
|
|
|
- <h3 class="title">通榆县乡村振兴监管平台-数字应急-统计分析</h3>
|
|
|
+ <h3 class="title">{{ systemTitle.title }}-{{ systemTitle.subTitle }}-统计分析</h3>
|
|
|
</div>
|
|
|
<div class="bignav">
|
|
|
<img src="@/assets/images/integrated/bigdata-header-nav-left.png"/>
|
|
|
@@ -135,330 +135,343 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import tabbar from './tabbar.vue' //区域切换
|
|
|
- import bigdataSupermap from '@/components/supermap' //超图
|
|
|
-
|
|
|
- //echarts
|
|
|
- import chartEvent from './chart-event.vue' //1 事件、、
|
|
|
- import chartWaterCrane from './chart-waterCrane.vue' //2 水鹤分布、、
|
|
|
- import chartEquipmentType from './chart-equipmentType.vue' //3 公司、、
|
|
|
- import chartFireCause from './chart-fireCause.vue' //4 起火原因、、
|
|
|
- import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5 设备上报数量、、
|
|
|
- import chartEventTrend from './chart-eventTrend.vue' //6 事件趋势、、
|
|
|
- import chartKeyArea from './chart-keyArea.vue' //7 重点区域、、
|
|
|
- import chartWaterIntake from './chart-waterIntake.vue' //8 取水口、、
|
|
|
- import chartWeatherTrends from './chart-weatherTrends.vue' //9 天气趋势、、
|
|
|
- import chartFireFighting from './chart-fireFighting.vue' //10 消防力量分布、、
|
|
|
- import chartFireHydrant from './chart-fireHydrant.vue' //12 消火栓、、
|
|
|
- import chartFullTimeStation from './chart-fullTimeStation.vue' //13 专职站、、
|
|
|
- import chartFoamLiquid from './chart-foamLiquid.vue' //14 泡沫液、、
|
|
|
- import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
|
|
|
-
|
|
|
- import {getRlt} from '@/api/bigdata'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- bigdataSupermap,
|
|
|
- tabbar,
|
|
|
- chartEvent,
|
|
|
- chartWaterCrane,
|
|
|
- chartEquipmentType,
|
|
|
- chartFireCause,
|
|
|
- chartDeviceReportingEvents,
|
|
|
- chartEventTrend,
|
|
|
- chartKeyArea,
|
|
|
- chartWaterIntake,
|
|
|
- chartWeatherTrends,
|
|
|
- chartFireFighting,
|
|
|
- chartFireHydrant,
|
|
|
- chartFullTimeStation,
|
|
|
- chartFoamLiquid,
|
|
|
- chartEquipmentDistribution
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- visited: '',
|
|
|
- navbar: [{
|
|
|
- //应急云图
|
|
|
- path: '/forest',
|
|
|
- name: '应急云图'
|
|
|
+import tabbar from './tabbar.vue' //区域切换
|
|
|
+import bigdataSupermap from '@/components/supermap' //超图
|
|
|
+
|
|
|
+//echarts
|
|
|
+import chartEvent from './chart-event.vue' //1 事件、、
|
|
|
+import chartWaterCrane from './chart-waterCrane.vue' //2 水鹤分布、、
|
|
|
+import chartEquipmentType from './chart-equipmentType.vue' //3 公司、、
|
|
|
+import chartFireCause from './chart-fireCause.vue' //4 起火原因、、
|
|
|
+import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5 设备上报数量、、
|
|
|
+import chartEventTrend from './chart-eventTrend.vue' //6 事件趋势、、
|
|
|
+import chartKeyArea from './chart-keyArea.vue' //7 重点区域、、
|
|
|
+import chartWaterIntake from './chart-waterIntake.vue' //8 取水口、、
|
|
|
+import chartWeatherTrends from './chart-weatherTrends.vue' //9 天气趋势、、
|
|
|
+import chartFireFighting from './chart-fireFighting.vue' //10 消防力量分布、、
|
|
|
+import chartFireHydrant from './chart-fireHydrant.vue' //12 消火栓、、
|
|
|
+import chartFullTimeStation from './chart-fullTimeStation.vue' //13 专职站、、
|
|
|
+import chartFoamLiquid from './chart-foamLiquid.vue' //14 泡沫液、、
|
|
|
+import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
|
|
|
+
|
|
|
+import { getRlt } from '@/api/bigdata'
|
|
|
+import {
|
|
|
+ fontConfig
|
|
|
+} from '@/api/login'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ bigdataSupermap,
|
|
|
+ tabbar,
|
|
|
+ chartEvent,
|
|
|
+ chartWaterCrane,
|
|
|
+ chartEquipmentType,
|
|
|
+ chartFireCause,
|
|
|
+ chartDeviceReportingEvents,
|
|
|
+ chartEventTrend,
|
|
|
+ chartKeyArea,
|
|
|
+ chartWaterIntake,
|
|
|
+ chartWeatherTrends,
|
|
|
+ chartFireFighting,
|
|
|
+ chartFireHydrant,
|
|
|
+ chartFullTimeStation,
|
|
|
+ chartFoamLiquid,
|
|
|
+ chartEquipmentDistribution
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ systemTitle: {
|
|
|
+ title: '', //标题
|
|
|
+ subTitle: ''//副标题
|
|
|
+ },
|
|
|
+ visited: '',
|
|
|
+ navbar: [{
|
|
|
+ //应急云图
|
|
|
+ path: '/forest',
|
|
|
+ name: '应急云图'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //数据中心
|
|
|
+ path: '/datacenter',
|
|
|
+ name: '数据中心'
|
|
|
},
|
|
|
- {
|
|
|
- //数据中心
|
|
|
- path: '/datacenter',
|
|
|
- name: '数据中心'
|
|
|
- },
|
|
|
- {
|
|
|
- //监控中心
|
|
|
- path: '/monitor',
|
|
|
- name: '监控中心'
|
|
|
- },
|
|
|
- {
|
|
|
- //统计分析
|
|
|
- path: '/bigdata',
|
|
|
- name: '统计分析'
|
|
|
- }
|
|
|
-
|
|
|
- ],
|
|
|
- total: 0, //事件总数
|
|
|
- untreated: 0, //事件-未处理
|
|
|
- processing: 0 // 事件-处理中
|
|
|
- }
|
|
|
- },
|
|
|
+ {
|
|
|
+ //监控中心
|
|
|
+ path: '/monitor',
|
|
|
+ name: '监控中心'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //统计分析
|
|
|
+ path: '/bigdata',
|
|
|
+ name: '统计分析'
|
|
|
+ }
|
|
|
|
|
|
- methods: {
|
|
|
- rlt() {
|
|
|
- let that = this
|
|
|
- getRlt().then(resp => {
|
|
|
- setTimeout(() => {
|
|
|
- //事件分布
|
|
|
- that.$refs.bigdataSupermap.loadHeatMap(resp.data)
|
|
|
- }, 5000)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
+ ],
|
|
|
+ total: 0, //事件总数
|
|
|
+ untreated: 0, //事件-未处理
|
|
|
+ processing: 0 // 事件-处理中
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ fontConfig() {
|
|
|
+ fontConfig().then(res => {
|
|
|
+ this.systemTitle.title = res.data.fontTitle;
|
|
|
+ this.systemTitle.subTitle = res.data.subTitle;
|
|
|
+ })
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.rlt()
|
|
|
+ rlt() {
|
|
|
+ let that = this
|
|
|
+ getRlt().then(resp => {
|
|
|
+ setTimeout(() => {
|
|
|
+ //事件分布
|
|
|
+ that.$refs.bigdataSupermap.loadHeatMap(resp.data)
|
|
|
+ }, 5000)
|
|
|
+ })
|
|
|
}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.fontConfig()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.rlt()
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
|
|
|
|
|
|
- .bigdata-con {
|
|
|
- width: -webkit-fit-content;
|
|
|
- height: 100%;
|
|
|
- background: #01020c;
|
|
|
+.bigdata-con {
|
|
|
+ width: -webkit-fit-content;
|
|
|
+ height: 100%;
|
|
|
+ background: #01020c;
|
|
|
+
|
|
|
+ .el-loading-mask {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ height: 3rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .el-loading-mask {
|
|
|
- background: none;
|
|
|
+ .header-left {
|
|
|
+ position: fixed;
|
|
|
+ left: 10px;
|
|
|
+ top: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: $inBlue;
|
|
|
+ font-family: $fontFk;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .header {
|
|
|
- height: 3rem;
|
|
|
+ .bignav {
|
|
|
+ height: 40px;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ border-radius: 5px;
|
|
|
display: flex;
|
|
|
+ justify-content: cetner;
|
|
|
align-items: center;
|
|
|
|
|
|
- .header-left {
|
|
|
- position: fixed;
|
|
|
- left: 10px;
|
|
|
- top: 5px;
|
|
|
+ .bignav-list {
|
|
|
+ background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
|
|
|
+ float: left;
|
|
|
display: flex;
|
|
|
+ justify-content: cetner;
|
|
|
align-items: center;
|
|
|
- color: $inBlue;
|
|
|
- font-family: $fontFk;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- color: #fff;
|
|
|
- font-size: 28px;
|
|
|
- }
|
|
|
+ color: #fff;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 23px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ transform: translateY(0);
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
}
|
|
|
|
|
|
- .bignav {
|
|
|
- height: 40px;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- top: 0;
|
|
|
- z-index: 1000;
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- justify-content: cetner;
|
|
|
- align-items: center;
|
|
|
+ .router-link-active,
|
|
|
+ .bignav-list:hover {
|
|
|
+ filter: brightness(2.3);
|
|
|
+ -webkit-transform: translateY(2px);
|
|
|
+ transform: translateY(2px);
|
|
|
+ color: $inBlueHover;
|
|
|
+ border-bottom: 1px solid $inBlueHover;
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
|
|
|
- .bignav-list {
|
|
|
- background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- justify-content: cetner;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- height: 40px;
|
|
|
- font-size: 12px;
|
|
|
- padding: 0 23px;
|
|
|
- cursor: pointer;
|
|
|
- -webkit-transform: translateY(0);
|
|
|
- transform: translateY(0);
|
|
|
- transition: all 0.3s ease-in-out;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .router-link-active,
|
|
|
- .bignav-list:hover {
|
|
|
- filter: brightness(2.3);
|
|
|
- -webkit-transform: translateY(2px);
|
|
|
- transform: translateY(2px);
|
|
|
- color: $inBlueHover;
|
|
|
- border-bottom: 1px solid $inBlueHover;
|
|
|
- transition: all 0.3s ease-in-out;
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
+ .bigdata-body {
|
|
|
+ margin: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: top;
|
|
|
+ // justify-content: center;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .bigdata-body {
|
|
|
- margin: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: top;
|
|
|
- // justify-content: center;
|
|
|
+ .flex-r {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row !important;
|
|
|
+ align-content: flex-start;
|
|
|
+ justify-content: space-between
|
|
|
+ }
|
|
|
|
|
|
+ .bigdata-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .twins-con {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
|
|
|
- .flex-r {
|
|
|
- display: flex;
|
|
|
- flex-direction: row !important;
|
|
|
- align-content: flex-start;
|
|
|
- justify-content: space-between
|
|
|
+ .b-49 {
|
|
|
+ width: 49% !important;
|
|
|
}
|
|
|
|
|
|
- .bigdata-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- flex-wrap: wrap;
|
|
|
+ .b-con {
|
|
|
+ width: 100%;
|
|
|
+ height: 28.5vh;
|
|
|
|
|
|
- .twins-con {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
+ box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
|
|
|
+ -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
|
|
|
|
|
|
- .b-49 {
|
|
|
- width: 49% !important;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ .b-tit {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #00ceec;
|
|
|
+ margin-left: 5px;
|
|
|
+ text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
|
|
|
+ -0 -0 10px rgba($color: #41fff8, $alpha: .9);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .b-con {
|
|
|
+ .twins {
|
|
|
width: 100%;
|
|
|
- height: 28.5vh;
|
|
|
-
|
|
|
- box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
|
|
|
- -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- .b-tit {
|
|
|
+ .count {
|
|
|
width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ position: absolute;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 15px;
|
|
|
- color: #00ceec;
|
|
|
- margin-left: 5px;
|
|
|
- text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
|
|
|
- -0 -0 10px rgba($color: #41fff8, $alpha: .9);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .twins {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
+ left: 1rem;
|
|
|
+ top: 9px;
|
|
|
+ z-index: 100;
|
|
|
|
|
|
- .count {
|
|
|
- width: 100%;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- position: absolute;
|
|
|
+ .count-z {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- left: 1rem;
|
|
|
- top: 9px;
|
|
|
- z-index: 100;
|
|
|
-
|
|
|
- .count-z {
|
|
|
- display: flex;
|
|
|
- margin: 0 .5rem;
|
|
|
-
|
|
|
- span {
|
|
|
- margin-left: .4rem;
|
|
|
- font-size: 1rem;
|
|
|
- color: #2ee0fb !important;
|
|
|
- font-weight: bolder;
|
|
|
- }
|
|
|
+ margin: 0 .5rem;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: .4rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ color: #2ee0fb !important;
|
|
|
+ font-weight: bolder;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- .tall {
|
|
|
- height: 59vh !important;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .taller {
|
|
|
- height: 89.5vh !important;
|
|
|
- }
|
|
|
+ .tall {
|
|
|
+ height: 59vh !important;
|
|
|
+ }
|
|
|
|
|
|
- .three {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
+ .taller {
|
|
|
+ height: 89.5vh !important;
|
|
|
+ }
|
|
|
|
|
|
- .el-row {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .three {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
|
|
|
+ .el-row {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .bigdata-map {
|
|
|
- width: 100%;
|
|
|
- height: 59vh;
|
|
|
- position: relative;
|
|
|
- background: #00101f;
|
|
|
|
|
|
- .event-count {
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bolder;
|
|
|
- padding: 10px;
|
|
|
- background-color: #000000;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- z-index: 1000;
|
|
|
+ .bigdata-map {
|
|
|
+ width: 100%;
|
|
|
+ height: 59vh;
|
|
|
+ position: relative;
|
|
|
+ background: #00101f;
|
|
|
+
|
|
|
+ .event-count {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bolder;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #000000;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ z-index: 1000;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- color: #d50000;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #d50000;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
- .wid-li-1 {
|
|
|
- width: 396px;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .wid-li-2 {
|
|
|
- width: 760px;
|
|
|
- }
|
|
|
+ .wid-li-1 {
|
|
|
+ width: 396px;
|
|
|
+ }
|
|
|
|
|
|
- .wid-li-3 {
|
|
|
- width: 850px;
|
|
|
- }
|
|
|
+ .wid-li-2 {
|
|
|
+ width: 760px;
|
|
|
+ }
|
|
|
|
|
|
- .wid-li-4 {
|
|
|
- width: 304px;
|
|
|
- }
|
|
|
+ .wid-li-3 {
|
|
|
+ width: 850px;
|
|
|
+ }
|
|
|
|
|
|
- .mg-b-20 {
|
|
|
- margin-bottom: 2vh;
|
|
|
- }
|
|
|
+ .wid-li-4 {
|
|
|
+ width: 304px;
|
|
|
+ }
|
|
|
|
|
|
- .m-l-15 {
|
|
|
- margin-left: .5%;
|
|
|
- }
|
|
|
+ .mg-b-20 {
|
|
|
+ margin-bottom: 2vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m-l-15 {
|
|
|
+ margin-left: .5%;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
