<template>
|
<v-scale-screen width="1920" height="960">
|
<div class="main_app">
|
<!-- <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" /> -->
|
<img src="@/assets/images/SecurityControl/bg@2x_2.png" class="main_bg" alt="" />
|
<div class="main_header">
|
<img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
|
<div class="title">安泰智慧物流园区-消防态势监控</div>
|
<div class="time_wrap">
|
<span class="date">{{ date }}</span>
|
<span class="week">{{ week }}</span>
|
<span class="time">{{ time }}</span>
|
</div>
|
</div>
|
<div class="main_content">
|
<div class="left_box">
|
<div class="left_box_one">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>今日各系统设备状态及告警数</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
<div class="list_wrap">
|
<div class="list">
|
<div class="header line">
|
<span class="item name">设备类型</span>
|
<span class="item">总数</span>
|
<span class="item">报警</span>
|
<span class="item">屏蔽</span>
|
<span class="item">故障</span>
|
<span class="item">正常</span>
|
</div>
|
<div class="one-swiper list_content">
|
<div class="swiper-wrapper">
|
<div class="line_wrap one-swiper-slide swiper-slide" v-for="(item, i) in dataList1">
|
<div class="line">
|
<span class="item name">{{ item.typeName }}</span>
|
<span class="item">{{ item.totalDeviceNum || 0 }}</span>
|
<span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span>
|
<span class="item">{{ item.shieldDeviceNum || 0 }}</span>
|
<span class="item">{{ item.errDeviceNum || 0 }}</span>
|
<span class="item">{{ item.offlineDeviceNum || 0 }}</span>
|
</div>
|
<div class="separate"></div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<div class="left_box_two">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>报警信息</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
<div class="police_wrap">
|
<div class="item" v-for="(item, i) in dataList2">
|
<div class="head">
|
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.num }}次</div>
|
</div>
|
<FirePercent :color="policeColors[i]" :rate="item.rate" />
|
</div>
|
|
</div>
|
</div>
|
<div class="left_box_three">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>告警处理分析</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
<div class="dispose_wrap">
|
<div class="echart2" id="echart2"></div>
|
</div>
|
</div>
|
</div>
|
<div class="center_box">
|
<div class="center_box_one">
|
<div class="static_wrap">
|
<div class="item">
|
<img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
|
<div class="content">
|
<div class="name">总数</div>
|
<div class="num">{{ dataList4.onlineDeviceNum }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
|
<div class="content">
|
<div class="name">报警</div>
|
<div class="num num2">{{ dataList4.alarmDeviceNum }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
|
<div class="content">
|
<div class="name">屏蔽</div>
|
<div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
|
<div class="content">
|
<div class="name">故障</div>
|
<div class="num num3">{{ dataList4.errDeviceNum }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt="">
|
<div class="content">
|
<div class="name">正常</div>
|
<div class="num num4">{{ dataList4.offlineDeviceNum }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="center_box_two">
|
<div class="content_wrap">
|
<div class="header">
|
<div class="left">
|
<img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
|
<span>温度/湿度传感器</span>
|
</div>
|
<div class="right">
|
<img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
|
alt="">
|
<div class="num">{{ dataIndex8 + 1 }}/{{ dataList8.length }}</div>
|
<img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
|
alt="">
|
</div>
|
</div>
|
<div class="list_wrap">
|
<div class="title">
|
<img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
|
<span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>
|
</div>
|
<div class="list" v-if="dataList8 && dataList8.length > 0">
|
<div class="item">
|
<img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
|
<div class="content">
|
<div class="num">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<span>°C</span></div>
|
<div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}～{{
|
dataList8[dataIndex8].temperatureData?.alarmHigh }}°C</div>
|
</div>
|
</div>
|
<div class="item">
|
<img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt="">
|
<div class="content">
|
<div class="num">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div>
|
<div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{
|
dataList8[dataIndex8].humidityData?.alarmHigh }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="content_wrap">
|
<div class="header">
|
<div class="left">
|
<img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
|
<span>实时传感器检测</span>
|
</div>
|
<div class="right">
|
<img @click="changeData9(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
|
alt="">
|
<div class="num">{{ dataIndex9 + 1 }}/{{ dataTotal9 }}</div>
|
<img @click="changeData9(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
|
alt="">
|
</div>
|
</div>
|
<div class="list_wrap2">
|
<div class="item" v-for="item, i in dataListTemp9">
|
<div class="title">
|
<img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
|
<span>{{ item.name }}</span>
|
</div>
|
<div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
|
<div class="watergage" :id="'watergage' + i"></div>
|
<div class="unit">{{ item.obj.value }}</div>
|
<div class="place">阈值 {{ item.level }}</div>
|
</div>
|
<div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
|
<div class="liquidlevel" :id="'liquidlevel' + i"></div>
|
<div class="liquidle_te">
|
<div class="unit">{{ item.obj.value }}</div>
|
<div class="placeT">阈值{{ item.level }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right_box">
|
<div class="right_box_one">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>本年消防设备/设施维保情况</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
<div class="content_wrap">
|
<div class="list">
|
<div class="item">
|
<div>已维保</div>
|
<div class="num active">{{ dataList5.protectNum }}</div>
|
</div>
|
<div class="separate"></div>
|
<div class="item">
|
<div>计划维保</div>
|
<div class="num acc">{{ dataList5.planProtectTotal }}</div>
|
</div>
|
<div class="separate"></div>
|
<div class="item">
|
<div>维保率</div>
|
<div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
|
((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
|
</div>
|
</div>
|
<div class="footer">
|
<img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
|
<div class="content">
|
<div>本月新增维保</div>
|
<div class="num">{{ dataList5.monthAddNum }} <span>个</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right_box_two">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>今日隐患/告警</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
<div class="su_title">
|
<img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
|
<div class="name">隐患随手拍</div>
|
</div>
|
<div class="static_wrap">
|
<div class="item">
|
<img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
|
<div class="content">
|
<div class="name">提报隐患数</div>
|
<div class="num"><span>{{ dataList4.dangerTotalNum }}</span>个</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="">
|
<div class="content">
|
<div class="name">处理隐患数</div>
|
<div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>个</div>
|
</div>
|
</div>
|
</div>
|
<div class="su_title">
|
<img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
|
<div class="name">告警信息</div>
|
</div>
|
<div class="list two-swiper">
|
<div class="swiper-wrapper">
|
<div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i">
|
<div class="icon">
|
<div class="circle"></div>
|
<div class="line"></div>
|
</div>
|
<div class="content">
|
<div class="header">
|
<div class="time">
|
<span>{{ item.alarmTime }}</span>
|
<span class="status" v-if="item.handleStatus == 1">已核实</span>
|
<span class="status" v-else-if="item.handleStatus == 2">未核实</span>
|
<span class="status" v-else-if="item.handleStatus == 3">核实中</span>
|
<span v-else class="status">未核实</span>
|
</div>
|
<div class="have_time">已经发生{{ item.haveTime }}</div>
|
</div>
|
<div class="wrap">
|
<div class="title">
|
<img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
|
<span>{{ item.alarmTypeName }}</span>
|
</div>
|
<div class="title">
|
<img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
|
<span>{{ item.regionName }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap">
|
<img src="@/assets/images/default_empty.png" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</v-scale-screen>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, nextTick } from 'vue'
|
import VScaleScreen from 'v-scale-screen'
|
import FirePercent from '@/components/FirePercent.vue'
|
import dayjs from 'dayjs'
|
import duration from 'dayjs/plugin/duration'
|
dayjs.extend(duration)
|
import * as echarts from 'echarts'
|
import 'swiper/css/swiper.min.css'
|
import Swiper from 'swiper'
|
import {
|
getFightingalarmData,
|
getFightingHandle,
|
getFightingcenterData,
|
getFightingDeAlarm,
|
getFightingDeviceY,
|
getFighalarmDataList,
|
getTemperatureHumidityData,
|
monitorDataListP
|
} from '@/api'
|
|
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
|
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
|
const date = ref(dayjs().format('YYYY.MM.DD'))
|
const week = ref(weekMap[new Date().getDay()])
|
const time = ref(dayjs().format('HH:mm:ss'))
|
setInterval(() => {
|
date.value = dayjs().format('YYYY-MM-DD')
|
week.value = weekMap[new Date().getDay()]
|
time.value = dayjs().format('HH:mm:ss')
|
|
}, 1000)
|
|
|
const initWatergage = (id, item) => {
|
const myChart = echarts.init(document.getElementById(id))
|
var data_value = item.obj.value.replaceAll('Mpa', '')
|
const startI = item.level.indexOf('-')
|
const endI = item.level.indexOf('Mpa')
|
let maxNum = item.level.slice(startI + 1, endI)
|
let minNum = item.level.slice(0, startI)
|
// let maxNum =
|
const option = {
|
barMaxWidth: 3,
|
polar: {
|
radius: '80%'
|
},
|
grid: {
|
top: '0%',
|
left: '0%',
|
right: '%',
|
bottom: '0%',
|
containLabel: true
|
},
|
angleAxis: {
|
show: false,
|
max: (360 * 100) / 270,
|
type: 'value',
|
startAngle: 225,
|
},
|
radiusAxis: {
|
show: false,
|
type: 'category',
|
z: 10
|
},
|
series: [
|
{
|
type: 'gauge',
|
min: minNum,
|
max: maxNum,
|
splitNumber: 5,
|
radius: '100%',
|
center: ['50%', '50%'],
|
data: [data_value],
|
detail: {
|
formatter: (v) => v + '%',
|
color: '#152435',
|
fontSize: 1,
|
|
},
|
itemStyle: {
|
color: '#3DE6FF'
|
},
|
pointer: {
|
width: 2,
|
length: '90%',
|
offsetCenter: [0, '3%'],
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
width: 0,
|
color: [
|
[0.05, '#1b6dff'],
|
[0.10, '#2084ff'],
|
[0.15, '#2596ff'],
|
[0.20, '#2db0ff'],
|
[0.25, '#31c0ff'],
|
[0.30, '#36d3ff'],
|
[0.35, '#4fe6ec'],
|
[0.40, '#6ae7d2'],
|
[0.45, '#84e8b9'],
|
[0.50, '#a5e999'],
|
[0.55, '#ccea75'],
|
[0.60, '#f8eb4a'],
|
[0.65, '#ffdd4f'],
|
[0.70, '#ffcb5a'],
|
[0.75, '#ffae6e'],
|
[0.80, '#ff9c7b'],
|
[0.85, '#ff8d87'],
|
[0.90, '#ff7d91'],
|
[0.95, '#ff6f9b'],
|
[1, '#ff5ca9']
|
]
|
|
}
|
},
|
axisTick: {
|
show: true,
|
length: 3,
|
splitNumber: 12,
|
lineStyle: {
|
width: 1,
|
color: 'auto',
|
},
|
},
|
axisLabel: {
|
distance: 12,
|
fontSize: 8,
|
color: 'auto',
|
},
|
splitLine: {
|
show: true,
|
length: -5,
|
lineStyle: {
|
width: 1,
|
color: 'auto',
|
}
|
},
|
z: 9,
|
},
|
{
|
type: 'bar',
|
barGap: '-100%',
|
coordinateSystem: 'polar',
|
roundCap: true,
|
data: [
|
{
|
value: 100,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
{ offset: 0, color: '#0A5EFF' },
|
{ offset: 0.45, color: '#20DDFF' },
|
{ offset: 1, color: '#FC10CB' }
|
])
|
}
|
}
|
],
|
z: 3,
|
},
|
{
|
type: 'pie',
|
radius: ['2%', '6%'],
|
center: ['50%', '50%'],
|
labelLine: {
|
show: false
|
},
|
data: [
|
{
|
value: 100,
|
itemStyle: {
|
color: '#3DE6FF',
|
opacity: 0.5
|
}
|
}
|
],
|
z: 2,
|
},
|
{
|
type: 'pie',
|
radius: 4,
|
labelLine: {
|
show: false
|
},
|
data: [
|
{
|
value: 20,
|
itemStyle: {
|
color: '#3DE6FF'
|
}
|
}
|
],
|
z: 1,
|
},
|
]
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
}
|
const initLiquidlevel = (id, item) => {
|
const myChart = echarts.init(document.getElementById(id))
|
const startI = item.level.indexOf('-')
|
const endI = item.level.indexOf('M')
|
let maxNum = item.level.slice(startI + 1, endI)
|
let minNum = item.level.slice(0, startI)
|
let conNum = maxNum - minNum
|
let acNum = item.obj.value.replaceAll('M', '')
|
var data = (((acNum - minNum) / conNum) * 100).toFixed(0)
|
console.log('data', data);
|
|
const option = {
|
tooltip: {
|
trigger: 'none',
|
},
|
xAxis: {
|
data: ['百分比'],
|
axisTick: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
axisLabel: {
|
show: false,
|
textStyle: {
|
color: '#e54035',
|
},
|
},
|
},
|
yAxis: {
|
splitLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
axisLabel: {
|
show: false,
|
},
|
},
|
series: [
|
{
|
name: '最上层立体圆',
|
type: 'pictorialBar',
|
symbolSize: [170, 40],
|
symbolOffset: [0, -20],
|
z: 12,
|
itemStyle: {
|
normal: {
|
color: 'rgba(8,44,110, 1)',
|
},
|
},
|
data: [
|
{
|
value: 100,
|
symbolPosition: 'end',
|
},
|
],
|
},
|
{
|
name: '中间立体圆',
|
type: 'pictorialBar',
|
symbolSize: [170, 40],
|
symbolOffset: [0, -20],
|
z: 12,
|
itemStyle: {
|
normal: {
|
color: () =>
|
new echarts.graphic.LinearGradient(1, 1, 0, 0, [
|
{
|
offset: 0,
|
color: '#03C7F9',
|
},
|
{
|
offset: 1,
|
// color: '#03C7F922',
|
color: 'rgb(8,44,110)',
|
},
|
]),
|
shadowColor: '#03C7F9',
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowOffsetY: 4,
|
},
|
},
|
data: [
|
{
|
value: data,
|
symbolPosition: 'end',
|
},
|
],
|
},
|
{
|
name: '最底部立体圆',
|
type: 'pictorialBar',
|
symbolSize: [170, 40],
|
symbolOffset: [0, 20],
|
z: 12,
|
itemStyle: {
|
normal: {
|
color: () =>
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
{
|
offset: 0,
|
color: '#03C7F9',
|
},
|
{
|
offset: 0.9,
|
// color: '#03C7F922',
|
color: 'rgba(8,44,110, 0.85)',
|
},
|
]),
|
// shadowColor: '#03C7F9',
|
// shadowBlur: 30,
|
// shadowOffsetX: 0,
|
// shadowOffsetY: -10,
|
},
|
},
|
data: [100 - data],
|
},
|
{
|
//底部立体柱
|
stack: '1',
|
type: 'bar',
|
itemStyle: {
|
normal: {
|
// color: 'rgba(8,44,110, 0.94)',
|
color: () =>
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
{
|
offset: 0,
|
color: 'rgba(18,85,213,0.77)',
|
},
|
{
|
offset: 1,
|
color: 'rgba(8,44,110, 0.77)',
|
},
|
]),
|
opacity: 0.77,
|
},
|
},
|
label: {
|
distance: 15,
|
show: true,
|
position: data > 52 ? 'inside' : 'top',
|
formatter: '{c}' + '%',
|
fontSize: 72,
|
color: '#1AFCFF',
|
textShadowColor: '#03C7F9',
|
textShadowBlur: 30,
|
textShadowOffsetX: 5,
|
textShadowOffsetY: 10,
|
},
|
|
silent: true,
|
barWidth: 250,
|
barGap: '-100%', // Make series be overlap
|
data: [data],
|
},
|
{
|
//上部立体柱
|
stack: '1',
|
type: 'bar',
|
itemStyle: {
|
normal: {
|
color: () =>
|
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
{
|
offset: 0,
|
color: '#47C8FF77',
|
},
|
{
|
offset: 0.05,
|
color: '#47C8FF44',
|
},
|
{
|
offset: 0.15,
|
color: '#47C8FF00',
|
},
|
{
|
offset: 0.85,
|
color: '#47C8FF00',
|
},
|
{
|
offset: 0.95,
|
color: '#47C8FF44',
|
},
|
{
|
offset: 1,
|
color: '#47C8FF77',
|
},
|
]),
|
},
|
},
|
silent: true,
|
barWidth: 300,
|
barGap: '-100%', // Make series be overlap
|
data: [100 - data],
|
},
|
],
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
}
|
|
const dataList1 = ref([])
|
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
|
const dataList2 = ref([])
|
const getData2 = () => {
|
// let temp = []
|
// temp.push({ name: '真实报警数', num: 10, rate: 20 })
|
// temp.push({ name: '误报警数', num: 30, rate: 60 })
|
// temp.push({ name: '已解除', num: 20, rate: 40 })
|
// temp.push({ name: '处理中', num: 8, rate: 16 })
|
// dataList2.value = temp
|
// return
|
getFightingalarmData().then(res => {
|
const result = res.data || {}
|
let temp = []
|
temp.push({ name: '真实报警数', num: result.realNum, rate: (result.realNum / result.totalNum) * 100 })
|
temp.push({ name: '误报警数', num: result.errNum, rate: (result.errNum / result.totalNum) * 100 })
|
temp.push({ name: '已解除', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
|
temp.push({ name: '处理中', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
|
dataList2.value = temp
|
})
|
}
|
|
const dataList3 = ref([])
|
const getData3 = () => {
|
getFightingHandle({ type: 0 }).then(res => {
|
dataList3.value = res.data || []
|
initEchart2()
|
})
|
}
|
const initEchart2 = () => {
|
var myChart = echarts.init(document.querySelector('.echart2'))
|
// 生成数据和日期
|
// 示例数据
|
const data1 = dataList3.value.map(i => i.realNum)
|
const data2 = dataList3.value.map(i => i.processingNum)
|
const data3 = dataList3.value.map(i => i.liftNum)
|
const data4 = dataList3.value.map(i => i.errNum)
|
const months = dataList3.value.map(i => {
|
return i.startDate.substring(5, 7) + '月'
|
})
|
|
|
const option = {
|
legend: {
|
x: "center",
|
textStyle: {
|
color: "#FFFFFF", // 图例文字设为白色
|
fontSize: 12
|
},
|
icon: 'circle',
|
top: '6%',
|
itemWidth: 8,
|
itemHeight: 8,
|
itemGap: 20,
|
data: ['告警数', '进行中', '已处理', '误报数'] // 更新图例名称
|
},
|
grid: {
|
left: '2%',
|
right: '0%',
|
top: '20%',
|
bottom: '10%',
|
containLabel: true,
|
},
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "shadow"
|
},
|
textStyle: {
|
color: "rgba(255, 255, 255, 1)"
|
},
|
backgroundColor: "rgba(0,0,0,0.8)",
|
borderColor: "rgba(219, 230, 255, 0.8)",
|
},
|
xAxis: {
|
data: months,
|
axisLabel: {
|
color: "#FFFFFF", // X 轴文字设为白色
|
fontSize: 13,
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#1E294C'
|
}
|
},
|
axisTick: {
|
show: false
|
}
|
},
|
yAxis: {
|
show: true,
|
axisLabel: {
|
color: "#FFFFFF", // Y 轴文字设为白色
|
fontSize: 12,
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#A9AEB2'
|
}
|
},
|
axisTick: {
|
lineStyle: {
|
color: '#A9AEB2'
|
}
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: ["#0f1d27"],
|
width: 1
|
},
|
},
|
},
|
series: [
|
{
|
name: "告警数",
|
type: "bar",
|
stack: "attendance",
|
data: data1,
|
itemStyle: {
|
color: '#FEAF01',
|
},
|
label: {
|
show: false,
|
color: "#FFFFFF",
|
},
|
emphasis: {
|
focus: "series",
|
},
|
barWidth: 6,
|
},
|
{
|
name: "进行中", // 迟到数据
|
type: "bar",
|
stack: "attendance",
|
data: data2,
|
itemStyle: {
|
color: '#28F0C4', // 迟到的颜色
|
},
|
label: {
|
show: false,
|
color: "#FFFFFF",
|
},
|
emphasis: {
|
focus: "series",
|
},
|
},
|
{
|
name: "已处理", // 请假数据
|
type: "bar",
|
stack: "attendance",
|
data: data3,
|
itemStyle: {
|
color: '#0193FE', // 请假的颜色
|
},
|
label: {
|
show: false,
|
color: "#FFFFFF",
|
},
|
emphasis: {
|
focus: "series",
|
},
|
},
|
{
|
name: "误报数", // 单独的加班柱子
|
type: "bar",
|
data: data4,
|
barWidth: 6,
|
itemStyle: {
|
color: '#FEED01', // 高亮的紫色
|
},
|
emphasis: {
|
focus: "series",
|
},
|
},
|
],
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
}
|
|
const dataList4 = ref({})
|
const getData4 = () => {
|
getFightingcenterData().then(res => {
|
dataList4.value = res.data || {}
|
dataList1.value = res.data.deviceTypeList
|
})
|
}
|
const dataList5 = ref({}) // 维保
|
const getData5 = () => {
|
getFightingDeviceY().then(res => {
|
dataList5.value = res.data || {}
|
})
|
}
|
const dataList6 = ref([])
|
const getData6 = () => {
|
getFightingHandle({ type: 1 }).then(res => {
|
dataList6.value = res.data
|
})
|
}
|
const dataList7 = ref([])
|
const getData7 = () => {
|
getFighalarmDataList().then(res => {
|
dataList7.value = res.data || []
|
dataList7.value = dataList7.value.map(item => {
|
item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.alarmTime).getTime()).format('H小时m分钟')
|
return item
|
})
|
})
|
}
|
|
const dataList8 = ref([])
|
const dataIndex8 = ref(0)
|
|
const dataList9 = ref([])
|
const dataListTemp9 = ref([])
|
const dataIndex9 = ref(0)
|
const dataTotal9 = ref(0)
|
|
const getData8 = () => {
|
getTemperatureHumidityData().then(res => {
|
dataList8.value = res.data || []
|
})
|
monitorDataListP().then(res => {
|
dataList9.value = res.data || []
|
dataList9.value.forEach(item => {
|
if (item.dataList && item.dataList.length > 0) {
|
item.obj = item.dataList[0]
|
}
|
})
|
if (dataList9.value.length > 0) {
|
dataTotal9.value = Math.ceil(dataList9.value.length / 2)
|
dataListTemp9.value = dataList9.value.slice(0, 2)
|
}
|
initEcharts9()
|
})
|
}
|
const changeData8 = (num) => {
|
if (dataIndex8.value == dataList8.value.length - 1 && num > 0) {
|
dataIndex8.value = 0
|
} else if (dataIndex8.value == 0 && num < 0) {
|
dataIndex8.value = dataList8.value.length - 1
|
} else {
|
dataIndex8.value = dataIndex8.value + num
|
}
|
}
|
const changeData9 = (num) => {
|
// return
|
if (dataIndex9.value == dataTotal9.value - 1 && num > 0) {
|
dataIndex9.value = 0
|
dataListTemp9.value = dataList9.value.slice(0, 2)
|
} else if (dataIndex9.value == 0 && num < 0) {
|
dataIndex9.value = dataTotal9.value - 1
|
dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 2, dataList9.value.length)
|
} else {
|
dataIndex9.value = dataIndex9.value + num
|
dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 2, (dataIndex9.value + 1) * 2)
|
}
|
initEcharts9()
|
}
|
const initEcharts9 = () => {
|
dataListTemp9.value.forEach((item, i) => {
|
|
if (item.obj && item.obj.typeCode == 253958) {
|
nextTick(() => {
|
initWatergage('watergage' + i, item)
|
})
|
}
|
if (item.obj && item.obj.typeCode == 254001) {
|
nextTick(() => {
|
initLiquidlevel('liquidlevel' + i, item)
|
})
|
}
|
})
|
}
|
|
|
const autoplayFlag = (list = [], leng = 4, time = 2000) => {
|
if (list.length > leng) {
|
return { delay: time, disableOnInteraction: false }
|
} else {
|
return false
|
}
|
}
|
const loopFn1 = () => {
|
var newSwiper1 = new Swiper('.one-swiper', {
|
initialSlide: 0,
|
direction: 'vertical', //竖直方向
|
slidesPerView: 5,
|
autoplay: autoplayFlag(dataList1.value, 5, 4000),
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
})
|
}
|
const loopFn2 = () => {
|
var newSwiper1 = new Swiper('.two-swiper', {
|
initialSlide: 0,
|
direction: 'vertical', //竖直方向
|
slidesPerView: 4,
|
autoplay: autoplayFlag(dataList7.value, 4, 4000),
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
})
|
}
|
|
onMounted(() => {
|
// getData1()
|
getData2()
|
getData3()
|
getData4()
|
getData5()
|
// getData6()
|
getData7()
|
getData8()
|
setInterval(() => {
|
getData2()
|
getData3()
|
getData4()
|
// getData6()
|
getData7()
|
}, 60 * 1000)
|
setInterval(() => {
|
|
getData5()
|
getData8()
|
|
}, 60 * 60 * 1000)
|
|
setTimeout(() => {
|
loopFn1()
|
loopFn2()
|
}, 12000)
|
|
})
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
div {
|
box-sizing: border-box;
|
}
|
|
.main_content {
|
display: flex;
|
padding: 20px 25px 0;
|
|
.left_box {
|
width: 450px;
|
|
.left_box_one {
|
width: 100%;
|
margin-bottom: 20px;
|
|
.list_wrap {
|
padding: 10px 0;
|
|
.list_content {
|
height: 170px;
|
overflow: hidden;
|
|
.line_wrap {
|
height: 34px !important;
|
}
|
}
|
|
.list {
|
.line {
|
display: flex;
|
height: 32px;
|
align-items: center;
|
font-size: 14px;
|
|
.item {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.name {
|
flex: 2;
|
}
|
|
.warnning {
|
color: #FEAF01;
|
}
|
}
|
|
.header {
|
background: rgba(134, 156, 201, 0.1);
|
font-weight: 500;
|
|
.item {
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|
&:nth-last-child(1) {
|
border: none;
|
}
|
}
|
}
|
|
.separate {
|
width: 100%;
|
height: 2px;
|
background-color: rgba(255, 255, 255, 0.2);
|
/* background-color: red; */
|
border-right: 4px solid #00F2F3;
|
border-left: 4px solid #00F2F3;
|
}
|
}
|
}
|
}
|
|
.left_box_two {
|
margin-bottom: 20px;
|
|
.police_wrap {
|
padding: 15px 20px 0;
|
height: 225px;
|
|
.item {
|
margin-bottom: 5px;
|
|
.head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 16px;
|
color: #FFFFFF;
|
margin-bottom: 8px;
|
}
|
}
|
}
|
}
|
|
.left_box_three {
|
.dispose_wrap {
|
height: 210px;
|
width: 100%;
|
|
.echart2 {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.center_box {
|
flex: 1;
|
padding: 16px 60px 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.center_box_one {
|
.static_wrap {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin: 30px 0 54px;
|
|
.item {
|
display: flex;
|
|
img {
|
width: 61px;
|
height: 63px;
|
margin-right: 15px;
|
}
|
|
.content {
|
font-size: 15px;
|
|
.num {
|
font-size: 12px;
|
color: #D2E0FF;
|
|
font-weight: bold;
|
font-size: 30px;
|
margin-right: 5px;
|
font-weight: 600;
|
background-image: -webkit-linear-gradient(top,
|
#01D9FE 0%,
|
#01D9FE 60%,
|
#fff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.num2 {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#dd4c26 50%,
|
#e43724 100%);
|
}
|
|
.num3 {
|
background-image: -webkit-linear-gradient(top,
|
#eb8131 0%,
|
#d0a72c 50%,
|
#e9bf43 100%);
|
}
|
|
.num4 {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#78db91 50%,
|
#6de8b0 100%);
|
}
|
|
.num5 {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#3a83f5 50%,
|
#3a83f5 100%);
|
}
|
}
|
}
|
}
|
}
|
|
.center_box_two {
|
width: 100%;
|
display: flex;
|
|
.content_wrap {
|
flex: 1;
|
flex-shrink: 0;
|
margin-right: 20px;
|
|
.title_wrap {
|
display: flex;
|
|
.title {
|
flex: 1;
|
}
|
}
|
|
&:nth-last-child(1) {
|
margin-right: 0;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-weight: bold;
|
font-size: 16px;
|
text-shadow: 0px 2px 8px #01ABFE;
|
margin-bottom: 20px;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 14px;
|
height: 28px;
|
margin-right: 10px;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.num {
|
margin: 0 40px;
|
}
|
|
.icon {
|
width: 30px;
|
cursor: pointer;
|
/* height: 16px; */
|
}
|
}
|
}
|
|
.list_wrap {
|
height: 206px;
|
background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
|
background-size: cover;
|
|
.title {
|
height: 46px;
|
display: flex;
|
align-items: center;
|
color: #D2E0FF;
|
padding-left: 20px;
|
|
.icon {
|
width: 16px;
|
margin-right: 8px;
|
}
|
}
|
|
.list {
|
height: 160px;
|
display: flex;
|
justify-content: space-evenly;
|
|
.item {
|
display: flex;
|
align-items: center;
|
position: relative;
|
|
.place {
|
position: absolute;
|
top: 120px;
|
right: 70px;
|
z-index: 999;
|
font-size: 13px;
|
color: #869CC9;
|
width: 120px;
|
text-align: center;
|
}
|
|
.icon {
|
width: 70px;
|
height: 70px;
|
margin-right: 10px;
|
}
|
|
.content {
|
.num {
|
font-size: 28px;
|
font-weight: 500;
|
|
span {
|
font-size: 14px;
|
font-weight: 400;
|
}
|
}
|
|
.la {
|
font-size: 13px;
|
color: #869CC9;
|
}
|
}
|
}
|
}
|
}
|
|
.list_wrap2 {
|
display: flex;
|
align-items: center;
|
height: 206px;
|
background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
|
background-size: cover;
|
|
.item {
|
width: 50%;
|
height: 100%;
|
|
.title {
|
height: 46px;
|
display: flex;
|
align-items: center;
|
color: #D2E0FF;
|
padding-left: 20px;
|
|
.icon {
|
width: 16px;
|
margin-right: 8px;
|
}
|
}
|
|
.watergage_wrap {
|
text-align: center;
|
position: relative;
|
left: 30px;
|
|
.watergage {
|
width: 130px;
|
height: 112px;
|
}
|
|
.unit {
|
font-weight: 500;
|
font-size: 18px;
|
position: relative;
|
bottom: 16px;
|
left: 4px;
|
width: 130px;
|
margin-bottom: 6px;
|
margin-top: 2px;
|
|
span {
|
font-size: 12px;
|
font-weight: 400;
|
}
|
}
|
|
.place {
|
position: relative;
|
bottom: 16px;
|
left: 4px;
|
width: 130px;
|
font-size: 13px;
|
color: #869CC9;
|
}
|
}
|
|
.liquidlevel_wrap {
|
position: relative;
|
|
/* border: 6px solid red; */
|
.liquidle_te {
|
font-weight: 500;
|
font-size: 18px;
|
position: absolute;
|
top: 99px;
|
left: 0;
|
width: 192px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.placeT {
|
font-size: 12px;
|
color: #869CC9;
|
margin-top: 6px;
|
}
|
}
|
|
/* .placeT {
|
position: relative;
|
bottom: 10px;
|
left: 4px;
|
font-size: 74px;
|
color: #869CC9;
|
opacity: 0;
|
} */
|
|
.liquidlevel {
|
width: 206px;
|
height: 400px;
|
transform: scale(0.27);
|
color: #fff;
|
text-align: center;
|
position: relative;
|
left: -8px;
|
top: -143px;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
}
|
|
.right_box {
|
width: 450px;
|
|
.right_box_one {
|
.content_wrap {
|
height: 176px;
|
|
.list {
|
display: flex;
|
align-items: center;
|
|
.item {
|
height: 116px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.num {
|
margin-top: 12px;
|
font-weight: bold;
|
font-size: 32px;
|
|
}
|
|
.acc {
|
background-image: -webkit-linear-gradient(top,
|
#ffffff 0%,
|
#c8ddff 66%,
|
#95eefc 72%,
|
#95eefc 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.active {
|
color: #00F2F3;
|
}
|
}
|
|
.separate {
|
width: 1px;
|
height: 50px;
|
background-color: rgba(255, 255, 255, 0.21);
|
}
|
}
|
|
.footer {
|
display: flex;
|
|
.icon {
|
width: 40px;
|
height: 41px;
|
margin-right: 2px;
|
}
|
|
.content {
|
flex: 1;
|
font-size: 16px;
|
height: 40px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
|
border: 1px solid;
|
border-image: linear-gradient(270deg, rgba(1, 217, 254, 0), rgba(1, 217, 254, 0.6)) 1 1;
|
|
.num {
|
font-size: 20px;
|
font-weight: bold;
|
|
span {
|
font-size: 13px;
|
color: #869CC9;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right_box_two {
|
.su_title {
|
display: flex;
|
align-items: center;
|
font-weight: 500;
|
font-size: 16px;
|
margin: 20px;
|
|
.icon {
|
width: 17px;
|
height: 17px;
|
margin-right: 7px;
|
}
|
}
|
|
.static_wrap {
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
height: 110px;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
img {
|
width: 80px;
|
height: 80px;
|
margin-right: 8px;
|
}
|
|
.content {
|
font-size: 14px;
|
|
.num {
|
font-size: 12px;
|
color: #D2E0FF;
|
margin-top: 8px;
|
|
span {
|
font-weight: bold;
|
font-size: 24px;
|
margin-right: 4px;
|
font-weight: 600;
|
background-image: -webkit-linear-gradient(top,
|
#01D9FE 0%,
|
#01D9FE 60%,
|
#fff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.today {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#FFB120 50%,
|
#FFB120 100%);
|
}
|
}
|
}
|
}
|
}
|
|
.list {
|
height: 320px;
|
overflow: hidden;
|
margin-top: 15px;
|
scrollbar-width: none;
|
|
.item {
|
display: flex;
|
font-size: 13px;
|
color: #D2E0FF;
|
height: 80px !important;
|
|
.icon {
|
width: 40px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding-top: 10px;
|
|
.circle {
|
width: 7px;
|
height: 7px;
|
border-radius: 50%;
|
background: #01D9FE;
|
box-shadow: 0px 0px 1px 4px #34788f;
|
/* opacity: 0.52; */
|
}
|
|
.line {
|
margin-top: 3px;
|
width: 1px;
|
flex: 1;
|
background-color: #153947;
|
}
|
}
|
|
.content {
|
flex: 1;
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.time {
|
display: flex;
|
align-items: center;
|
|
.status {
|
height: 18px;
|
line-height: 18px;
|
border-radius: 2px;
|
padding: 2px 4px;
|
border: 1px solid #869CC9;
|
font-size: 12px;
|
margin-left: 8px;
|
}
|
}
|
|
.have_time {
|
font-size: 12px;
|
color: #D2E0FF;
|
|
span {
|
color: #FEAF01;
|
}
|
}
|
}
|
|
.wrap {
|
height: 34px;
|
background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
|
border-radius: 2px 0px 0px 2px;
|
display: flex;
|
align-items: center;
|
border: 1px solid;
|
margin-bottom: 20px;
|
margin-top: 8px;
|
padding: 0 10px;
|
border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;
|
|
.title {
|
flex: 4;
|
font-weight: bold;
|
font-size: 15px;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
|
span {
|
margin-left: 4px;
|
}
|
|
.xf {
|
width: 14px;
|
height: 14px;
|
}
|
|
.addr {
|
width: 12px;
|
height: 12px;
|
}
|
}
|
|
.address {
|
flex: 6;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.main_header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 90px;
|
position: relative;
|
padding: 0px 40px 16px;
|
font-weight: 600;
|
font-size: 36px;
|
|
.title {
|
background-image: -webkit-linear-gradient(top,
|
#ffffff 0%,
|
#c8ddff 70%,
|
#85b4ff 80%,
|
#74a9ff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.time_wrap {
|
font-size: 26px;
|
font-weight: 600;
|
background-image: -webkit-linear-gradient(top,
|
#ffffff 0%,
|
#c8ddff 50%,
|
#85b4ff 80%,
|
#74a9ff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
display: flex;
|
align-items: center;
|
|
.time {
|
width: 130px;
|
display: flex;
|
justify-content: flex-end;
|
font-size: 30px;
|
}
|
|
.week {
|
margin-left: 20px;
|
}
|
}
|
|
.main_header_bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
}
|
|
.com_header {
|
height: 40px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 15px 0 13px;
|
position: relative;
|
|
.title {
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
font-size: 16px;
|
background-image: -webkit-linear-gradient(top,
|
#ffffff 0%,
|
#c8ddff 66%,
|
#85b4ff 72%,
|
#74a9ff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
|
.icon {
|
width: 16px;
|
height: 16px;
|
margin-right: 14px;
|
}
|
}
|
|
.tabs {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
color: #d2e0ff;
|
|
.separate {
|
width: 1px;
|
height: 14px;
|
background-color: #d2e0ff;
|
margin: 0 6px;
|
}
|
|
.active {
|
color: #0094eb;
|
}
|
}
|
}
|
|
.main_app {
|
width: 1920px;
|
height: 960px;
|
/* width: 100%;
|
height: 100vh; */
|
background: #0b2539;
|
color: #FFFFFF;
|
position: relative;
|
z-index: -2;
|
font-size: 14px;
|
|
.main_bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
}
|
|
.bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
</style>
|
