优化哨兵界面布局与数据展示-事件中心

src/views/SenEventCenter.vue

@@ -25,64 +25,68 @@
           </p>
 				</div>
 			</div>
-			<div class="list_tit">事件列表</div>
-			<el-select v-model="eventType" placeholder="请选择" @change="getEventLeft(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">
-			</el-input>
-			<dl class="sp_list">
-				<dt><span class="dtc1">序号</span><span class="dtc2">设备名称</span><span class="dtc3">定位</span></dt>
-				<div class="hei_scroll hei30" >
-					<dd v-for="(item,index) in eventLeftList">
+      <div class="list_tit">事件分析</div>
+      <div class="sj_fx" ref="sjfx"></div>
+      <div class="list_tit">企业分析</div>
+      <div class="qy_fx" ref="qyfx"></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>
+      <el-select v-model="eventType" placeholder="请选择" @change="getEventLeft(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">
+      </el-input>
+      <dl class="sp_list">
+        <dt><span class="dtc1">序号</span><span class="dtc2">设备名称</span><span class="dtc3">定位</span></dt>
+        <div class="hei_scroll hei56" >
+          <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 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>
+      </dl>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        @prev-click="getEventLeft"
+        @next-click="getEventLeft"
+        @current-change="getEventLeft"
+        :total="leftTotal">
+      </el-pagination>
 		</div>
 	</div>
 </template>
@@ -127,6 +131,8 @@
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
+      this.sjfxChart();
+      this.qyfxChart();
 		},
 		data() {
 			return {
@@ -178,6 +184,186 @@
 			}
 		},
 		methods: {
+      //事件分析
+      sjfxChart() {
+        const chartDom = this.$refs.sjfx;
+        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: "80%",
+            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) {
+              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();
+        });
+
+      },
+      //企业分析
+      qyfxChart() {
+        const chartDom = this.$refs.qyfx;
+        const myChart = echarts.init(chartDom);
+        this.option =  {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['华生','港华', '奥德', '润发'],
+            textStyle: {
+              color: '#13e845'  // 图例文字颜色，设置为深灰色
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            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'],
+            axisLabel: {
+              color: '#13e845'  // X轴刻度颜色，这里设置为深灰色
+            }
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              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]
+            },
+          ]
+        };
+
+
+        myChart.setOption(this.option, true);
+        window.addEventListener("resize", function() {
+          myChart.resize();
+        });
+
+      },
       getStatisticByEventType(){
         getStatisticByEventType({createTimeRange:this.dataValue+","+this.dataValue}).then(req => {
           this.eventNumberList = req.data;
@@ -490,7 +676,15 @@
     top: 10px;
     left: 11px;
   }
-
+  //图表事件分析
+  .sj_fx {
+    width: 100%;
+    height: 20vh;
+  }
+  .qy_fx {
+    width: 100%;
+    height: 20vh;
+  }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';