Project_yhfu/src/views/bigdata/bigdata.vue

<!--一体化首页-->
<template>
	<div class="bigdata-con">
		<!-- 头部B -->
		<div class="header">
			<!-- title -->
			<router-link class="header-left"  to="/integrated/index"  exact><img class="logo" src="@/assets/images/integrated/logo-small.png" />
				<h3 class="title">{{systemTitle.title}}-{{systemTitle.subTitle}}-统计分析</h3></router-link>
			<div class="bignav">
				<img src="@/assets/images/integrated/bigdata-header-nav-left.png" />
				<router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list" exact>
					{{navbar.name}}
				</router-link>
				<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
			</div>
		</div>
		<!-- 头部E -->

		<div class="bigdata-body">
			<!-- 第一纵向-->
			<div class="bigdata-list wid-li-1">
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>道路晾晒预警事件占比</span><!--道路晾晒预警事件占比--饼图-->
          </div>
          <chartPit_dlls ref="chartPit_dlls"></chartPit_dlls>
        </div>
				<div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>工程车预警事件占比</span><!--工程车预警事件占比--饼图-->
          </div>
          <chartPit_gcc ref="chartPit_gcc"></chartPit_gcc>
				</div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>倒车预警事件占比</span><!--倒车预警--饼图-->
          </div>
          <chartPit_dc ref="chartPit_dc"></chartPit_dc>
        </div>
			</div>
			<!-- 第二纵向-->
			<div class="bigdata-list wid-li-2 m-l-15">
				<div class="bigdata-map mg-b-20">
          <bigdataSupermap ref="bigdataSupermap" style="width: 100%;height: 59vh;" class="indexSupermapClass" :mapDiv="'bigdataMap'" dynamicPlotting="false"
                           :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"/>
				</div>
				<!--<tabbar></tabbar>-->
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>事件类型、分布统计</span><!--统计事件类型种类；统计每个种类占当前部门查看权限所有事件的百分比；事件总数；未处理；处理中--两个饼图三个数据信息-->
          </div>
          <div class="twins">
            <div class="count">
              <div class="count-z m-l-15">事件总数<span>{{total}}</span></div>
              <div class="count-z m-l-15">签收<span> {{signIn}}</span></div>
              <div class="count-z m-l-15">办结<span> {{conclude}}</span></div>
              <div class="count-z m-l-15">归档<span> {{file}}</span></div>
            </div>
            <chartEvent ref="chartEvent"></chartEvent>
          </div>
        </div>
			</div>
			<!-- 第三纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>超速预警事件占比</span><!--超速预警事件占比--饼图-->
					</div>
          <chartPit_cs ref="chartPit_cs"></chartPit_cs>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>抛瞄预警事件占比</span><!--抛瞄预警事件占比--饼图-->
					</div>
          <chartPit_pm ref="chartPit_pm"></chartPit_pm>
				</div>
        <div class="b-con">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>压线预警事件占比</span><!--压线预警事件占比--饼图-->
          </div>
          <chartPit_yx ref="chartPit_yx"></chartPit_yx>
        </div>
			</div>
			<!-- 第四纵向-->
			<div class="bigdata-list wid-li-1 m-l-15">
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>交通事故预警事件占比</span><!--交通事故预警事件占比--饼图-->
					</div>
          <chartPit_jtsg ref="chartPit_jtsg"></chartPit_jtsg>
				</div>
				<div class="b-con mg-b-20">
					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
						<span>路障预警事件占比</span><!--路障预警事件占比--饼图-->
					</div>
          <chartPit_lz ref="chartPit_lz"></chartPit_lz>
				</div>
        <div class="b-con">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>施工预警事件占比</span><!--施工预警事件占比--饼图-->
          </div>
          <chartPit_sg ref="chartPit_sg"></chartPit_sg>
        </div>
			</div>
		</div>
	</div>
</template>

<script>
	import fastMenu from './fastmenu.vue' //右侧菜单
	//echarts
	import chartEvent from './chart-event.vue' //事件
	import chartPit_dlls from './chart-pit-dlls.vue' //饼图
	import chartPit_gcc from './chart-pit-gcc.vue' //饼图
	import chartPit_dc from './chart-pit-dc.vue' //饼图
	import chartPit_cs from './chart-pit-cs.vue' //饼图
	import chartPit_pm from './chart-pit-pm.vue' //饼图
	import chartPit_yx from './chart-pit-yx.vue' //饼图
	import chartPit_jtsg from './chart-pit-jtsg.vue' //饼图
	import chartPit_lz from './chart-pit-lz.vue' //饼图
	import chartPit_sg from './chart-pit-sg.vue' //饼图
  import bigdataSupermap from '@/components/supermap' //超图

  import {initPieChartData,eventcatalogueBigData,deptBigData} from '@/api/bigdata/bigdata';
  import {
    fontConfig
  } from '@/api/login'

	export default {
		components: {
			fastMenu,
			chartEvent,
      chartPit_dlls,
      chartPit_gcc,
      chartPit_dc,
      chartPit_cs,
      chartPit_pm,
      chartPit_yx,
      chartPit_jtsg,
      chartPit_lz,
      chartPit_sg,
      bigdataSupermap,
		},
    created() {
      this.fontConfig()
      this.eventcatalogueBigData();
    },
    mounted() {
      setTimeout(() => {
        this.$refs.bigdataSupermap.loadHeatMap()//事件分布
      }, 1000)
    },
		data() {
			return {
        systemTitle:{
          title:'',  //标题
          subTitle:''  ,//副标题 数字交通
        },
				visited: '',
				navbar: [
				  {
						name: '交通云图',
						path: '/traffic',
					},
					{
						name: '交通人员',
						path: '/',
					},
					{
						name: '交通资源',
						path: '/',
					},
					{
						name: '统计分析',
						path: '/bigdata',
					},
				],
        total: 0, //事件总数
        file:0,// 事件-归档
        signIn:0,// 事件-签收
        conclude:0,// 事件-办结

        /** ------------------------------------图标参数开始 -----------------------------*/
        /** ------------------------------------图标参数结束 -----------------------------*/
			}
		},
    methods: {
      fontConfig(){
        fontConfig().then(res => {
          this.systemTitle.title = res.data.fontTitle;
          this.systemTitle.subTitle = res.data.subTitle;
        })
      },
      /**饼图 统计*/
      initPieChartData() {
        initPieChartData({}).then(res => {
          for (let i in res.data) {
            const seriesData = [];
            seriesData.push({value: this.total, name: '事件总量'});
            if (res.data[i].id == '80') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_dlls.myEcharts(seriesData);
            }else if (res.data[i].id == '82') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_gcc.myEcharts(seriesData);
            }else if (res.data[i].id == '83') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_dc.myEcharts(seriesData);
            }else if (res.data[i].id == '84') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_cs.myEcharts(seriesData);
            }else if (res.data[i].id == '85') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_pm.myEcharts(seriesData);
            }else if (res.data[i].id == '86') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_yx.myEcharts(seriesData);
            }else if (res.data[i].id == '87') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_jtsg.myEcharts(seriesData);
            }else if (res.data[i].id == '88') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_lz.myEcharts(seriesData);
            }else if (res.data[i].id == '89') {
              seriesData.push(res.data[i]);
              this.$refs.chartPit_sg.myEcharts(seriesData);
            }
          }
        })
      },
      /**事件类型、分布统计*/
      eventcatalogueBigData() {
        eventcatalogueBigData().then(res => {
          this.total = res.data.total;
          for (let index in res.data.list) {
            if(res.data.list[index].dictValue == 'forest_event_status_2'){
              this.signIn=res.data.list[index].value;
            }else if(res.data.list[index].dictValue == 'forest_event_status_5'){
              this.conclude=res.data.list[index].value;
            }else if(res.data.list[index].dictValue == 'forest_event_status_6'){
              this.file=res.data.list[index].value;
            }
          }
          this.$refs.chartEvent.myEcharts(res.data.list);
          this.initPieChartData();
        })
        deptBigData().then(res => {
          this.$refs.chartEvent.myEcharts2(res.data);
        })
      },
    },
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';


	.bigdata-con {
    width: -webkit-fit-content;
		height: 100%;
		background: #01020c;

		.el-loading-mask {
			background: none;
		}

		.header {
			height: 3rem;
			display: flex;
			align-items: center;

			.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;
				}
			}

			.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;

				.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-list {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;

			.twins-con {
				width: 100% !important;
			}

			.b-con {
				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;
				// 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);
					}
				}

				.twins {
					width: 100%;
					display: flex;
					position: relative;

					.count {
						width: 100%;
						color: #fff;
						font-size: 12px;
						position: absolute;
						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;
							}
						}


					}
				}

			}

			.tall {
				height: 59vh !important;
			}

			.taller {
				height: 89.5vh !important;
			}

			.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;

					span {
						font-size: 16px;
						color: #d50000;
					}
				}

			}

		}

		.wid-li-1 {
      width: 396px;
		}

		.wid-li-2 {
			width: 760px;
		}

		.wid-li-3 {
			width: 850px;
		}

		.wid-li-4 {
			width: 304px;
		}

		.mg-b-20 {
			margin-bottom: 2vh;
		}

		.m-l-15 {
			margin-left: .5%;
		}
	}
</style>