|
@@ -13,12 +13,16 @@
|
|
|
<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_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>
|
|
@@ -97,7 +101,13 @@
|
|
|
<script>
|
|
|
import Cookies from 'js-cookie'
|
|
|
import {getUserProfile} from "@/api/system/user";
|
|
|
- import {eventTypesListAll, getEventList, getStatisticByEventType} from "@/api/event";
|
|
|
+ import {
|
|
|
+ countByDepartment,
|
|
|
+ eventTypesListAll,
|
|
|
+ getEventList,
|
|
|
+ getStatisticByBrand,
|
|
|
+ getStatisticByEventType
|
|
|
+ } from "@/api/event";
|
|
|
|
|
|
import '../assets/styles/sb_body.css';
|
|
|
|
|
@@ -123,19 +133,19 @@
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getEventLeft(1);
|
|
|
- this.getEventRight(1);
|
|
|
+ // this.getEventRight(1);
|
|
|
this.getSupermapEvent();
|
|
|
this.getStatisticByEventType();
|
|
|
this.eventTypesListAll();
|
|
|
+ this.getStatisticByBrand();
|
|
|
+ this.countByDepartment();
|
|
|
+ this.getEventLeft(1);
|
|
|
},
|
|
|
mounted() {
|
|
|
// 初始化地图数据
|
|
|
setTimeout(() => {
|
|
|
this.title = '四平市智慧哨兵监管平台'
|
|
|
}, 1000);
|
|
|
- this.eventAnalyzeChart();
|
|
|
- this.enterpriseAnalyzeChart();
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -188,7 +198,11 @@
|
|
|
},
|
|
|
methods: {
|
|
|
//事件分析
|
|
|
- eventAnalyzeChart() {
|
|
|
+ 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 = {
|
|
@@ -196,7 +210,6 @@
|
|
|
trigger: "item",
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
},
|
|
|
-
|
|
|
visualMap: {
|
|
|
show: false,
|
|
|
min: 500,
|
|
@@ -208,31 +221,11 @@
|
|
|
series: [{
|
|
|
name: "访问来源",
|
|
|
type: "pie",
|
|
|
- radius: "80%",
|
|
|
+ radius: "60%",
|
|
|
center: ["50%", "50%"],
|
|
|
color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#f17c7c","#1DB7E5"
|
|
|
], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
- data: [{
|
|
|
- value: 285,
|
|
|
- name: "伊通县",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 410,
|
|
|
- name: "梨树县",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 274,
|
|
|
- name: "铁东区",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 235,
|
|
|
- name: "铁西区",
|
|
|
- },,
|
|
|
- {
|
|
|
- value: 235,
|
|
|
- name: "双辽市",
|
|
|
- },
|
|
|
- ].sort(function(a, b) {
|
|
|
+ data: datas.sort(function(a, b) {
|
|
|
return a.value - b.value;
|
|
|
}),
|
|
|
roseType: "radius",
|
|
@@ -282,35 +275,39 @@
|
|
|
|
|
|
},
|
|
|
//企业分析
|
|
|
- enterpriseAnalyzeChart() {
|
|
|
+ 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'
|
|
|
},
|
|
|
- legend: {
|
|
|
- data: ['华生','港华', '奥德', '润发'],
|
|
|
- textStyle: {
|
|
|
- color: '#13e845' // 图例文字颜色,设置为深灰色
|
|
|
- }
|
|
|
- },
|
|
|
grid: {
|
|
|
- left: '3%',
|
|
|
+ top: '5%',
|
|
|
+ left: '12%',
|
|
|
right: '4%',
|
|
|
- bottom: '3%',
|
|
|
+ bottom: '2%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- saveAsImage: {}
|
|
|
- }
|
|
|
- },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: ['2025-09-17', '2025-09-18', '2025-09-19', '2025-09-20', '2025-09-21', '2025-09-22', '2025-09-23'],
|
|
|
+ data: data.categories,
|
|
|
axisLabel: {
|
|
|
+ rotate: 45, // 旋转角度范围-90到90
|
|
|
color: '#13e845' // X轴刻度颜色,这里设置为深灰色
|
|
|
}
|
|
|
},
|
|
@@ -320,44 +317,7 @@
|
|
|
color: '#eed113' // Y轴刻度颜色,这里设置为深灰色
|
|
|
}
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '华生',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- itemStyle: {
|
|
|
- color: '#5470c6' // 蓝色
|
|
|
- },
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '港华',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- itemStyle: {
|
|
|
- color: '#91cc75' // 绿色
|
|
|
- },
|
|
|
- data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '奥德',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- itemStyle: {
|
|
|
- color: '#fac858' // 黄色
|
|
|
- },
|
|
|
- data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '润发',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- itemStyle: {
|
|
|
- color: '#ee6666' // 红色
|
|
|
- },
|
|
|
- data: [320, 332, 301, 334, 390, 330, 320]
|
|
|
- },
|
|
|
- ]
|
|
|
+ series: series
|
|
|
};
|
|
|
|
|
|
|
|
@@ -379,6 +339,7 @@
|
|
|
eventTypesListAll(){
|
|
|
eventTypesListAll().then(req => {
|
|
|
this.eventTypes = req.data;
|
|
|
+ // this.eventType = req.data[0].eventTypeCode;
|
|
|
})
|
|
|
},
|
|
|
getCurrentDataStr(date) {
|
|
@@ -395,12 +356,30 @@
|
|
|
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,
|
|
|
+ eventTypeCode: this.eventType === '' ? 'all' : this.eventType,
|
|
|
eventTitle: this.searchLeft,
|
|
|
createTimeRange: this.dataValue+","+this.dataValue,
|
|
|
};
|
|
@@ -498,7 +477,7 @@
|
|
|
}
|
|
|
.yjzx_k2{
|
|
|
height: 211px;
|
|
|
- width: 260px;
|
|
|
+ //width: 100%;
|
|
|
p{
|
|
|
display: inline-block;
|
|
|
background: url("../assets/images/sentinel/sb_btnbg2.png") no-repeat center;
|
|
@@ -506,11 +485,11 @@
|
|
|
width: 88px;
|
|
|
height: 101px;
|
|
|
}
|
|
|
- :nth-child(1){
|
|
|
+ :nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5){
|
|
|
margin-right: 7px;
|
|
|
margin-bottom: 7px;
|
|
|
}
|
|
|
- :nth-child(3){
|
|
|
+ :nth-child(3),:nth-child(6){
|
|
|
margin-right: 7px;
|
|
|
}
|
|
|
span{
|