visu_lifeline/src/views/SenEventCenter.vue

<!--设备中心-->
<template>
	<div class="visual-con hz_body">
		<!--主体-->
		<div class="spsb_down">
			<el-date-picker
					v-model="dataValue"
					type="date"
          @change="updateDataValue"
					placeholder="选择日期">
			</el-date-picker>
		</div>
		<div class="con_left">
			<div class="list_tit">预警中心</div>
			<div class="yjzx_div">
<!--				<div class="yjzx_k1">-->
<!--					<img src="../assets/images/sentinel/sb_icon1.png"/>-->
<!--					<span>总计</span>-->
<!--					<b>{{eventTotal}}</b>-->
<!--				</div>-->
				<div class="yjzx_k2">
          <p>
            <span>总计</span>
            <b>{{eventTotal}}</b>
          </p>
					<p v-for="item in eventNumberList">
            <span>{{item.eventTypeName}}</span>
            <b>{{item.countSum}}</b>
          </p>
				</div>
			</div>
      <div class="list_tit">事件分析</div>
      <div class="event_analyze" ref="eventAnalyze"></div>
      <div class="list_tit">企业分析</div>
      <div class="enterprise_analyze" ref="enterpriseAnalyze"></div>
		</div>
		<div class="con_right">
<!--			<div class="list_tit list_tit2">应急中心<i>发起应急事件</i></div>-->
<!--			<el-input-->
<!--					placeholder="请输入事件名称"-->
<!--					suffix-icon="el-icon-search"-->
<!--          @change="getEventRight(1)"-->
<!--					v-model="searchRight">-->
<!--			</el-input>-->
<!--			<dl class="sp_list yjsj_list">-->
<!--				<dt><span class="dt1">序号</span><span class="dt2">应急事件名称</span><span class="dt3">发生时间</span></dt>-->
<!--				<div class="hei_scroll hei64">-->
<!--          <dd v-for="(item,index) in eventRightList">-->
<!--            <span class="dt1">{{index+1}}</span><span class="dt2">{{item.eventTitle.length>5?item.eventTitle.substring(0,5)+'...':item.eventTitle}}</span><span class="dt3">{{item.createTime}}</span>-->
<!--          </dd>-->
<!--				</div>-->
<!--			</dl>-->
<!--			<el-pagination-->
<!--					background-->
<!--					layout="prev, pager, next"-->
<!--          @prev-click="getEventRight"-->
<!--          @next-click="getEventRight"-->
<!--          @current-change="getEventRight"-->
<!--					:total="rightTotal">-->
<!--			</el-pagination>-->
      <div class="list_tit">事件列表</div>
      <div style="display: flex; gap: 10px;">
        <el-select v-model="eventType" placeholder="请选择" @change="getEventLeft(1)" style="flex: 1;">
          <el-option
            v-for="item in eventTypes"
            :key="item.eventTypeCode"
            :label="item.eventTypeName"
            :value="item.eventTypeCode">
          </el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          @change="getEventLeft(1)"
          v-model="searchLeft"
          style="flex: 1;">
        </el-input>
      </div>
      <dl class="sp_list">
        <dt><span class="dtc1">序号</span><span class="dtc2">设备名称</span><span class="dtc3">定位</span></dt>
        <div class="hei_scroll hei62" >
          <dd v-for="(item,index) in eventLeftList">
            <span class="dtc1">{{index+1}}</span>
            <span class="dtc2">{{item.eventTitle.length>15?item.eventTitle.substring(0,15)+'...':item.eventTitle}}</span>
            <span class="dtc3" @click="flyTo(item.longitude,item.latitude)"><img src="../assets/images/sentinel/hz_list_d.png"/></span>
          </dd>
        </div>
      </dl>
      <el-pagination
        background
        layout="prev, pager, next"
        @prev-click="getEventLeft"
        @next-click="getEventLeft"
        @current-change="getEventLeft"
        :total="leftTotal">
      </el-pagination>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import {getUserProfile} from "@/api/system/user";
  import {
    countByDepartment,
    eventTypesListAll,
    getEventList,
    getStatisticByBrand,
    getStatisticByEventType
  } from "@/api/event";

	import '../assets/styles/sb_body.css';

	import {
		selectConfigKey
	} from "@/api/system/config";
  import {param} from "@/utils";
	// import * as echarts from 'echarts'
	let echarts = require("echarts");
	export default {
		components: {
		},
		metaInfo () {
			return {
				title:'四平市智慧哨兵监管平台',
				meta:[{
					charset: "utf-8"
				},
					{
						name: "viewport",
						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
					}]
			}
		},
		created() {
      // this.getEventRight(1);
      this.getSupermapEvent();
      this.getStatisticByEventType();
      this.eventTypesListAll();
      this.getStatisticByBrand();
      this.countByDepartment();
      this.getEventLeft(1);
		},
		mounted() {
			// 初始化地图数据
			setTimeout(() => {
				this.title = '四平市智慧哨兵监管平台'
			}, 1000);
		},
		data() {
			return {
        dialogVisible: false,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
        dataValue: this.getCurrentDataStr(new Date()),

        eventNumberList:[],
        eventTotal:0,

				title:'四平市智慧哨兵监管平台',
        searchLeft: '',
        eventLeftList:[],
        leftTotal:0,
        leftCurrentPage:1,

        searchRight:'',
        eventRightList:[],
        rightTotal:0,
        rightCurrentPage:1,

        eventTypes: [],
        eventType: ''

			}
		},
		methods: {
      //事件分析
      eventAnalyzeChart(data) {
        let datas = [];
        for(let item of data){
          datas.push({name:item.departmentName,value:item.count})
        }
        const chartDom = this.$refs.eventAnalyze;
        const myChart = echarts.init(chartDom);
        this.option = {
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)",
          },
          visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
              //colorLightness: [0, 1]
            },
          },
          series: [{
            name: "访问来源",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#f17c7c","#1DB7E5"
            ], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: datas.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",

            label: {
              normal: {
                formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
                rich: {
                  c: {
                    color: "rgb(241,246,104)",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    color: "rgb(98,137,169)",
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgb(98,137,169)",
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50,
              },
            },
          }, ],
        };


        myChart.setOption(this.option, true);
        window.addEventListener("resize", function() {
          myChart.resize();
        });

      },
      //企业分析
      enterpriseAnalyzeChart(data) {
        let series =  [];
        let corors = ['#5470c6', '#91cc75', '#fac858', '#ee6666'];
        for (let i = 0; i < data.series.length; i++) {
          series.push({
            name: data.series[i].name,
            type: 'line',
            stack: 'Total',
            itemStyle: {
              color: corors[i] // 蓝色
            },
            data: data.series[i].data
          })
        }
        const chartDom = this.$refs.enterpriseAnalyze;
        const myChart = echarts.init(chartDom);
        this.option =  {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: '5%',
            left: '12%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.categories,
            axisLabel: {
              rotate: 45,  // 旋转角度范围-90到90
              color: '#13e845'  // X轴刻度颜色，这里设置为深灰色
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#eed113'  // Y轴刻度颜色，这里设置为深灰色
            }
          },
          series: series
        };


        myChart.setOption(this.option, true);
        window.addEventListener("resize", function() {
          myChart.resize();
        });

      },
      getStatisticByEventType(){
        getStatisticByEventType({createTimeRange:this.dataValue+","+this.dataValue}).then(req => {
          this.eventNumberList = req.data;
          this.eventTotal = 0;
          for(let item of req.data){
            this.eventTotal += item.countSum
          }
        })
      },
      eventTypesListAll(){
        eventTypesListAll().then(req => {
          this.eventTypes = req.data;
          // this.eventType = req.data[0].eventTypeCode;
        })
      },
      getCurrentDataStr(date) {
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y + '-' + m + '-' + d
      },
      updateDataValue(value){
        this.dataValue = this.getCurrentDataStr(value);
        this.getEventLeft(1);
        this.getEventRight(1);
        this.getStatisticByEventType();
        this.getSupermapEvent();
        this.getStatisticByBrand();
        this.countByDepartment();
      },
      getStatisticByBrand(){
        let data ={
          selectDay:this.dataValue
        }
        getStatisticByBrand(data).then(req => {
          this.enterpriseAnalyzeChart(req.data)
        })
      },
      countByDepartment(){
        let data ={
          selectDay:this.dataValue
        }
        countByDepartment(data).then(req => {
          this.eventAnalyzeChart(req.data)
        })
      },
      getEventLeft(pageNum){
        let param = {
          pageNum: pageNum,
          pageSize: 10,
          eventTypeCode: this.eventType === '' ? 'all' : this.eventType,
          eventTitle: this.searchLeft,
          createTimeRange: this.dataValue+","+this.dataValue,
        };
        getEventList(param).then(req => {
          this.eventLeftList = req.rows;
          this.leftTotal = req.total;
        })
      },
      flyTo(longitude,latitude){
        this.$parent.$refs.supermap.dropLocation(longitude * 1,latitude * 1);
      },
      getEventRight(pageNum){
        let param = {
          pageNum:pageNum,
          pageSize:10,
          eventTitle:this.searchRight,
          createTimeRange:this.dataValue+","+this.dataValue,
          eventTypeCode:'2'
        };
        getEventList(param).then(req => {
          this.eventRightList = req.rows;
          this.rightTotal = req.total;
        })
      },
      getSupermapEvent(){
        let that = this;
        let param = {
          createTimeRange:this.dataValue+","+this.dataValue,
          eventTypeCode:"all"
        };
        getEventList(param).then(res => {
          const markersList = []
          if (res.rows != null && res.rows.length > 0) {
            for (let i = 0; i < res.rows.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: 'openDetails',
                parameter: res.rows[i],
                keepBindPopup: false,
                isAggregation: false
              }
              markersMap.icon = "sj-icon-event";
              if(res.rows[i].eventTypeCode == '2'){//应急事件
                markersMap.icon = "sj-icon-event-yingji";
              }
              markersMap.lng = res.rows[i].longitude
              markersMap.lat = res.rows[i].latitude
              markersList.push(markersMap);
            }
            setTimeout(() => {
              that.$parent.$refs.supermap.clearM()
              that.$parent.$refs.supermap.setMarkers(markersList)
            }, 1000)
          } else {
            setTimeout(() => {
              that.$parent.$refs.supermap.clearM()
            }, 1000)
          }
        })
      },
    }
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	.spsb_down{
		position: absolute;
		top:52px;
		left: 30px;
		z-index: 999;
		.el-input__inner{
			background: linear-gradient(to right, rgb(37,50,54) 0%, rgb(43,140,152) 100%);
			border: 1px solid;
			border-image: linear-gradient(to top, #aafae0, #59f2cc, #4ab2ec) 1;

		}
	}
	.yjzx_div{
		display: flex;
		flex-direction: row;
		text-align: center;
		margin: 15px 0px!important;
		.yjzx_k1{
			background: url("../assets/images/sentinel/sb_btnbg.png") no-repeat center;
			background-size: 100% 100%;
			width: 127px;
			height: 211px;
			img{
				display: block;
				margin: 55px auto 20px auto;
			}

		}
		.yjzx_k2{
			height: 211px;
			//width: 100%;
			p{
				display: inline-block;
				background: url("../assets/images/sentinel/sb_btnbg2.png") no-repeat center;
				background-size: 100% 100%;
				width: 88px;
				height: 101px;
			}
			:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5){
				margin-right: 7px;
				margin-bottom: 7px;
			}
			:nth-child(3),:nth-child(6){
				margin-right: 7px;
			}
			span{
				padding-top: 20px;
			}
			b{
				padding-top: 10px;
			}
		}
		span{
			display: block;
			font-size: 16px;
			color: #ceebee;
			height: 30px;
			line-height: 30px;
		}
		b{
			display: block;
			font-size: 24px;
			font-family: ysbth;
			color: #fff;
		}
	}
    .qydw1{
        position: absolute;
        top: 63.5%;
        left: 38.2%;
        display: block;
        width:54px ;
        height: 77px;
    }
    .qydw2{
        position: absolute;
        top: 50%;
        left: 70%;
        display: block;
        width:54px ;
        height: 77px;
    }
    .qydw3{
        position: absolute;
        top: 40%;
        left: 80%;
        display: block;
        width:54px ;
        height: 77px;
    }
    .sjlc_con{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .sjlc_div{
            background: rgba(50, 161, 175, 0.2);
            border: 1px solid #1e6a78;
            width: 250px;
            height: 300px;
            padding: 25px 20px;
            i{
                display: block;
                width: 50px;
                height: 50px;
                background:linear-gradient(to bottom,rgba(51,140,161,1),rgba(42,104,135,0.7));
                border-radius: 50%;
                margin: 5px auto;
                text-align: center;
                img{
                    margin: 12px auto!important;
                    display: inline-block;
					width: 23px;
					height: 24px;
                }
            }
			h4{
				font-size: 18px;
				font-weight: 900;
				color: #fff;
				text-align: center;
				height: 40px;
				line-height: 40px;
			}
			p{
				font-size: 14px;
				color: #fff;
				line-height: 30px;
			}
        }
		.date_div{
			background: linear-gradient(to top,rgba(170, 250, 224, 0.7),rgba(89, 242, 204, 0.8),rgba(74, 178, 236, 0.7));
			border: 1px solid #26cda0;
			i{
				display: block;
				width: 60px;
				height: 60px;
				background:linear-gradient(to bottom,rgba(38,255,196,1),rgba(0,198,255,0.7));
				border-radius: 50%;
				margin: 5px auto;
				text-align: center;
				img{
					margin: 14px auto!important;
					width: 32px;
					height: 33px;
				}
			}
		}
        u{
            background: url("../assets/images/sentinel/sb_icon7.png") no-repeat center;
            display: block;
            width: 10px;
            height: 16px;
            margin: auto auto;
        }
		.date{
			background: url("../assets/images/sentinel/sb_icon8.png") no-repeat center;

		}
    }
	.sjcl_media_con{
		display: flex;
		flex-direction: row;
		margin-top: 20px!important;
		.sjcl_media{
			width: 839px;
			height: 512px;
			margin-right: 15px;
		}
		.sjcl_img{
			width: 527px;
			img{
				display: inline-block;
				width: 255px;
				height: 247px;
			}
			:nth-child(1){
				margin-right: 10px!important;
				margin-bottom: 15px!important;
			}
			:nth-child(2){
				margin-bottom: 15px!important;
			}
			:nth-child(3){
				margin-right: 10px!important;
			}
		}
	}
  .sp_list span.dtc1 {
    width: 60px;
    background: url("../assets/images/sentinel/hz_list_j.png") no-repeat left;
    padding-left: 15px;
  }

  .sp_list span.dtc2 {
    width: 192px;
    text-align: left;
  }

  .sp_list span.dtc3 {
    width: 35px;
    text-align: center;
    line-height: 38px;
    position: relative;
  }

  .sp_list span.dtc3 img {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 11px;
  }
  //图表事件分析
  .event_analyze {
    width: 100%;
    height: 20vh;
  }
  .enterprise_analyze {
    width: 100%;
    height: 20vh;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
</style>