|
@@ -1,177 +1,364 @@
|
|
|
<template>
|
|
|
- <div class="app-container home" >
|
|
|
- <div id="main" >
|
|
|
+ <div class="app-container home">
|
|
|
+ <div id="main">
|
|
|
<el-row :gutter="4">
|
|
|
- <el-col :span="12" v-loading="loading1">
|
|
|
- <div class="card_left">
|
|
|
- <el-col :span="24">
|
|
|
+ <el-col :span="12" v-loading="loading1">
|
|
|
+ <div class="card_left">
|
|
|
+ <el-col :span="24">
|
|
|
<el-card class="box-card card1">
|
|
|
<span class="title">
|
|
|
- <el-image
|
|
|
- class="imgTitle"
|
|
|
- :src="img"
|
|
|
- ></el-image>
|
|
|
- <p>{{title}}</p>
|
|
|
+ <el-image class="imgTitle" :src="img"></el-image>
|
|
|
+ <p>{{ title }}</p>
|
|
|
</span>
|
|
|
<div class="contain">
|
|
|
+ <div>
|
|
|
+ <span>总数</span>
|
|
|
<div>
|
|
|
- <span>总数</span>
|
|
|
- <div>
|
|
|
- <p>{{index1Data.total}}</p>
|
|
|
- </div>
|
|
|
+ <p>{{ index1Data.total }}</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>已处理</span>
|
|
|
<div>
|
|
|
- <span>已处理</span>
|
|
|
- <div>
|
|
|
- <p>{{index1Data.checkCount}}</p>
|
|
|
- </div>
|
|
|
+ <p>{{ index1Data.checkCount }}</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>未处理</span>
|
|
|
<div>
|
|
|
- <span>未处理</span>
|
|
|
- <div>
|
|
|
- <p>{{index1Data.noCheckCount}}</p>
|
|
|
- </div>
|
|
|
+ <p>{{ index1Data.noCheckCount }}</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>处置率</span>
|
|
|
<div>
|
|
|
- <span>处置率</span>
|
|
|
- <div>
|
|
|
- <p v-loading="loading1">{{index1Data.checkRadio ? Number((index1Data.checkRadio)*100).toFixed(2) : '0'}}%</p>
|
|
|
- </div>
|
|
|
+ <p v-loading="loading1">
|
|
|
+ {{
|
|
|
+ index1Data.checkRadio
|
|
|
+ ? Number(index1Data.checkRadio * 100).toFixed(2)
|
|
|
+ : "0"
|
|
|
+ }}%
|
|
|
+ </p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="contain2">
|
|
|
<div class="wrap">
|
|
|
- <index1 :resData="index1Data.checkRadio"
|
|
|
+ <index1
|
|
|
+ :resData="index1Data.checkRadio"
|
|
|
:dataMap="index1Data.checkRadio"
|
|
|
color="#80FFA5"
|
|
|
:size="21"
|
|
|
:with="16"
|
|
|
- :tick="false" style="width:100%;" alt="饼图" />
|
|
|
+ :tick="false"
|
|
|
+ style="width: 100%"
|
|
|
+ alt="饼图"
|
|
|
+ />
|
|
|
<p>处置率</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
- </el-col>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="card_right">
|
|
|
- <el-card class="box-card card2" v-loading="loading2">
|
|
|
- <div class="contain">
|
|
|
- <index2
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="card_right">
|
|
|
+ <el-card class="box-card card2" v-loading="loading2">
|
|
|
+ <div class="contain">
|
|
|
+ <index2
|
|
|
:resData="index2Data"
|
|
|
- style="width:100%;height:40vh;" alt="折线图" />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" v-loading="loading3">
|
|
|
- <div class="card_bottom">
|
|
|
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
|
|
|
- <el-form-item label="单位名称:" prop="companyCode">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.companyCode"
|
|
|
- placeholder="请选择单位名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- style="width: 160px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in companyList"
|
|
|
- :key="dict.dictValue"
|
|
|
- :label="dict.dictLabel"
|
|
|
- :value="dict.dictValue"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="处理状态:" >
|
|
|
- <el-select v-model="queryParams.status" style="width: 160px" placeholder="请选择处理状态" clearable size="small">
|
|
|
- <el-option label="未处理" :value="0"/>
|
|
|
- <el-option label="已处理" :value="1"/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="时间:" label-width="50px">
|
|
|
- <el-date-picker style="vertical-align: middle;width:340px"
|
|
|
- v-model="dateRange"
|
|
|
- size="small"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- type="datetimerange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- ></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-top:4px">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ style="width: 100%; height: 40vh"
|
|
|
+ alt="折线图"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" v-loading="loading3">
|
|
|
+ <div class="card_bottom">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="90px"
|
|
|
+ >
|
|
|
+ <el-form-item label="单位名称:" prop="companyCode">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.companyCode"
|
|
|
+ placeholder="请选择单位名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 160px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in companyList"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="dict.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="处理状态:">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.status"
|
|
|
+ style="width: 160px"
|
|
|
+ placeholder="请选择处理状态"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <el-option label="未处理" :value="0" />
|
|
|
+ <el-option label="已处理" :value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间:" label-width="50px">
|
|
|
+ <el-date-picker
|
|
|
+ style="vertical-align: middle; width: 340px"
|
|
|
+ v-model="dateRange"
|
|
|
+ size="small"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ style="margin-top: 4px"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ :loading="exportLoading"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['system:admin:export']"
|
|
|
+ >导出</el-button
|
|
|
+ >
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="adminList"
|
|
|
+ height="calc(100vh - 67vh)"
|
|
|
+ :default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="工单序号"
|
|
|
+ align="center"
|
|
|
+ prop="id"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="单位名称"
|
|
|
+ align="center"
|
|
|
+ prop="companyName"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="报告时间"
|
|
|
+ align="center"
|
|
|
+ prop="alarmTime"
|
|
|
+ sortable
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="报告数据"
|
|
|
+ align="center"
|
|
|
+ prop="property"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="报告内容"
|
|
|
+ align="center"
|
|
|
+ prop="deviceName"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="处理状态"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ :class="
|
|
|
+ scope.row.alarmStatus == '0' ? 'color-red' : 'color-green'
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ scope.row.alarmStatus == "0"
|
|
|
+ ? "未处理"
|
|
|
+ : scope.row.alarmStatus == "1"
|
|
|
+ ? "已处理"
|
|
|
+ : "" }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="处理人"
|
|
|
+ align="center"
|
|
|
+ prop="updateBy"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="处理时间"
|
|
|
+ align="center"
|
|
|
+ prop="updateTime"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
<el-button
|
|
|
- type="warning"
|
|
|
- plain
|
|
|
- icon="el-icon-download"
|
|
|
size="mini"
|
|
|
- :loading="exportLoading"
|
|
|
- @click="handleExport"
|
|
|
- v-hasPermi="['system:admin:export']"
|
|
|
- >导出</el-button>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <el-table :data="adminList" height="calc(100vh - 67vh)" :default-sort = "{prop: 'alarmTime', order: 'descending'}">
|
|
|
- <el-table-column label="序号" align="center" prop="id" show-overflow-tooltip />
|
|
|
- <el-table-column label="单位名称" align="center" prop="companyName" show-overflow-tooltip />
|
|
|
- <el-table-column label="报告时间" align="center" prop="alarmTime" sortable show-overflow-tooltip />
|
|
|
- <el-table-column label="报告数据" align="center" prop="property" show-overflow-tooltip />
|
|
|
- <el-table-column label="报告内容" align="center" prop="deviceName" show-overflow-tooltip />
|
|
|
- <!-- <el-table-column label="处理状态" align="center" show-overflow-tooltip >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span :class="scope.row.alarmStatus == 0 ? 'color-red' : 'color-green'">{{ scope.row.alarmStatus == 0 ? '未处理':scope.row.alarmStatus ==1 ? '已处理':'' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
- <el-table-column label="处理人" align="center" prop="updateBy" show-overflow-tooltip />
|
|
|
- <el-table-column label="处理时间" align="center" prop="updateTime" show-overflow-tooltip />
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-s-promotion"
|
|
|
- @click="jump(scope.row)"
|
|
|
- v-hasPermi="['system:admin:edit']"
|
|
|
- >跳转至工单</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-view"
|
|
|
+ @click="getOne(scope.row)"
|
|
|
+ >查看详情</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.alarmStatus == '0'"
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-s-promotion"
|
|
|
+ @click="jump(scope.row)"
|
|
|
+ v-hasPermi="['system:admin:edit']"
|
|
|
+ >跳转至工单</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.alarmStatus == '1'"
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-s-promotion"
|
|
|
+ @click="jump(scope.row)"
|
|
|
+ disabled
|
|
|
+ v-hasPermi="['system:admin:edit']"
|
|
|
+ >跳转至工单</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
+ <!-- 详情对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="600px"
|
|
|
+ append-to-body
|
|
|
+ :before-close="cancel"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="form" label-width="auto">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="工单序号:" prop="id">
|
|
|
+ <span>{{form.id}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="单位名称:" prop="companyName">
|
|
|
+ <span>{{form.companyName}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="报告时间:" prop="alarmTime">
|
|
|
+ <span>{{form.alarmTime}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="报告数据:" prop="property">
|
|
|
+ <span>{{form.property}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="报告内容:" prop="deviceName">
|
|
|
+ <span>{{form.deviceName}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="处理状态:" prop="alarmStatus">
|
|
|
+ <span>{{form.alarmStatus}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="处理人:" prop="updateBy">
|
|
|
+ <span>{{form.updateBy}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="处理时间:" prop="updateTime">
|
|
|
+ <span>{{form.updateTime}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="处理内容:" prop="checkContent">
|
|
|
+ <span>{{form.checkContent}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="误报:" prop="isAlarm">
|
|
|
+ <span>{{form.isAlarm}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
<pagination
|
|
|
- v-show="total>0"
|
|
|
+ v-show="total > 0"
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.current"
|
|
|
:limit.sync="queryParams.size"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
<!-- 导出-->
|
|
|
- <a href="" download="" id="xz" style="position: absolute;z-index: -1;opacity: 0;"></a>
|
|
|
+ <a
|
|
|
+ href=""
|
|
|
+ download=""
|
|
|
+ id="xz"
|
|
|
+ style="position: absolute; z-index: -1; opacity: 0"
|
|
|
+ ></a>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getTbAlarmCollectIcoDetail, exportTbAlarm ,getTbAlarm, collectTbAlarm } from "@/api/business/OM/eventCenter";
|
|
|
+import {
|
|
|
+ getTbAlarmCollectIcoDetail,
|
|
|
+ exportTbAlarm,
|
|
|
+ getTbAlarm,
|
|
|
+ collectTbAlarm,
|
|
|
+} from "@/api/business/OM/eventCenter";
|
|
|
import { listChannel } from "@/api/system/product";
|
|
|
import index1 from "@/views/components/fireInternetInfo/index1";
|
|
|
import index2 from "@/views/components/fireInternetInfo/index2";
|
|
|
import { BASEPATH } from "@/assets/js/common.js";
|
|
|
-import { getThisDateBeforMonth, YearMonthDate } from "@/assets/js/dataFormate.js";
|
|
|
+import {
|
|
|
+ getThisDateBeforMonth,
|
|
|
+ YearMonthDate,
|
|
|
+} from "@/assets/js/dataFormate.js";
|
|
|
export default {
|
|
|
name: "index",
|
|
|
components: {
|
|
|
- index1,index2
|
|
|
+ index1,
|
|
|
+ index2,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- img:require('@/assets/images/1.gif'),
|
|
|
- title:"火警监控告警处理情况",
|
|
|
- index1Data:{},//饼图
|
|
|
- index2Data:[],//折线图
|
|
|
- index3Data:[],//table
|
|
|
+ img: require("@/assets/images/1.gif"),
|
|
|
+ title: "火警监控告警处理情况",
|
|
|
+ index1Data: {}, //饼图
|
|
|
+ index2Data: [], //折线图
|
|
|
+ index3Data: [], //table
|
|
|
// 遮罩层
|
|
|
loading1: true,
|
|
|
loading2: true,
|
|
@@ -183,104 +370,111 @@ export default {
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
open: false,
|
|
|
- t:null,
|
|
|
- timeList:[],
|
|
|
- queryParams:{
|
|
|
- bigDeviceType:1,
|
|
|
- current:1,
|
|
|
- size:10,
|
|
|
- companyCode:undefined,
|
|
|
- status:undefined,
|
|
|
+ t: null,
|
|
|
+ timeList: [],
|
|
|
+ queryParams: {
|
|
|
+ bigDeviceType: 1,
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ companyCode: undefined,
|
|
|
+ status: undefined,
|
|
|
},
|
|
|
- queryParams2:{
|
|
|
- type:2,
|
|
|
- bigDeviceType:1,
|
|
|
- current:1,
|
|
|
- size:10,
|
|
|
+ queryParams2: {
|
|
|
+ type: 2,
|
|
|
+ bigDeviceType: 1,
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
// startTime:"2022-01-18 00:00:00",
|
|
|
// endTime:"2022-04-18 00:00:00",
|
|
|
- startTime:getThisDateBeforMonth(),
|
|
|
- endTime:YearMonthDate(),
|
|
|
+ startTime: getThisDateBeforMonth(),
|
|
|
+ endTime: YearMonthDate(),
|
|
|
},
|
|
|
- dataZ:[],//折线图
|
|
|
+ dataZ: [], //折线图
|
|
|
// 公司列表
|
|
|
companyList: [],
|
|
|
// 日期范围
|
|
|
dateRange: [],
|
|
|
- adminList:[]
|
|
|
+ adminList: [],
|
|
|
+ form: {},
|
|
|
};
|
|
|
},
|
|
|
- created(){
|
|
|
- this.init()
|
|
|
- this.getList()
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ this.getList();
|
|
|
},
|
|
|
- /* type=2&bigDeviceType=1&isLine=1
|
|
|
+ /* type=2&bigDeviceType=1&isLine=1
|
|
|
type 1隐患2告警
|
|
|
bigDeviceType1火系统 2 水系统 3rtu 4电气火灾 5 视频监控
|
|
|
*/
|
|
|
methods: {
|
|
|
- init(){
|
|
|
- /* 饼图 */
|
|
|
- collectTbAlarm(this.queryParams).then(response =>{
|
|
|
- this.index1Data = response.data
|
|
|
- this.loading1 = false
|
|
|
- })
|
|
|
- /* 折线图 */
|
|
|
- getTbAlarmCollectIcoDetail(this.queryParams2).then(response =>{
|
|
|
- let data = response.data
|
|
|
- let lineData = []
|
|
|
- let total = []
|
|
|
- let checkCount = []
|
|
|
- total[0] = {data:[],name:undefined}
|
|
|
- checkCount[0] = {data:[],name:undefined}
|
|
|
- if(data){
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- lineData.push(data[i].time);
|
|
|
- total[0].data.push(data[i].list.checkCount + data[i].list.noCheckCount)
|
|
|
- checkCount[0].data.push(data[i].list.checkCount)
|
|
|
- }
|
|
|
- total[0].name = "告警总数"
|
|
|
- checkCount[0].name = "处理次数"
|
|
|
- this.index2Data.push(total[0],checkCount[0],lineData)
|
|
|
- this.index2Data.push({name:"火警监控告警处理情况跟踪",color:"#FF2416"})
|
|
|
- this.loading2 = false
|
|
|
- }
|
|
|
- })
|
|
|
- /* 公司列表 */
|
|
|
- listChannel(this.queryParams).then(response => {
|
|
|
- if(response.data.records.length>0){
|
|
|
- this.companyList = response.data.records.map(val =>{
|
|
|
- return {
|
|
|
- dictValue:val.ownerId,
|
|
|
- dictLabel:val.ownerName,
|
|
|
- address:val.ownerAddress,
|
|
|
- }
|
|
|
- })
|
|
|
+ init() {
|
|
|
+ /* 饼图 */
|
|
|
+ collectTbAlarm(this.queryParams).then((response) => {
|
|
|
+ this.index1Data = response.data;
|
|
|
+ this.loading1 = false;
|
|
|
+ });
|
|
|
+ /* 折线图 */
|
|
|
+ getTbAlarmCollectIcoDetail(this.queryParams2).then((response) => {
|
|
|
+ let data = response.data;
|
|
|
+ let lineData = [];
|
|
|
+ let total = [];
|
|
|
+ let checkCount = [];
|
|
|
+ total[0] = { data: [], name: undefined };
|
|
|
+ checkCount[0] = { data: [], name: undefined };
|
|
|
+ if (data) {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ lineData.push(data[i].time);
|
|
|
+ total[0].data.push(
|
|
|
+ data[i].list.checkCount + data[i].list.noCheckCount
|
|
|
+ );
|
|
|
+ checkCount[0].data.push(data[i].list.checkCount);
|
|
|
}
|
|
|
- });
|
|
|
+ total[0].name = "告警总数";
|
|
|
+ checkCount[0].name = "处理次数";
|
|
|
+ this.index2Data.push(total[0], checkCount[0], lineData);
|
|
|
+ this.index2Data.push({
|
|
|
+ name: "火警监控告警处理情况跟踪",
|
|
|
+ color: "#FF2416",
|
|
|
+ });
|
|
|
+ this.loading2 = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /* 公司列表 */
|
|
|
+ listChannel(this.queryParams).then((response) => {
|
|
|
+ if (response.data.records.length > 0) {
|
|
|
+ this.companyList = response.data.records.map((val) => {
|
|
|
+ return {
|
|
|
+ dictValue: val.ownerId,
|
|
|
+ dictLabel: val.ownerName,
|
|
|
+ address: val.ownerAddress,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
/** 初始化table */
|
|
|
- getList(){
|
|
|
- this.loading3 = true
|
|
|
- if(this.dateRange.length>0){
|
|
|
- this.queryParams.startTime = this.dateRange[0]
|
|
|
- this.queryParams.endTime = this.dateRange[1]
|
|
|
+ getList() {
|
|
|
+ this.loading3 = true;
|
|
|
+ if (this.dateRange.length > 0) {
|
|
|
+ this.queryParams.startTime = this.dateRange[0];
|
|
|
+ this.queryParams.endTime = this.dateRange[1];
|
|
|
}
|
|
|
- getTbAlarm(this.queryParams).then(response =>{
|
|
|
- this.adminList = response.data.records
|
|
|
+ getTbAlarm(this.queryParams).then((response) => {
|
|
|
+ console.log(response.data.records);
|
|
|
+ this.adminList = response.data.records;
|
|
|
this.total = response.data.total;
|
|
|
this.loading3 = false;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
/** 跳转至工单 */
|
|
|
- jump(row){
|
|
|
+ jump(row) {
|
|
|
this.$router.push({
|
|
|
- path: '/OM/business/OM/workMange',
|
|
|
+ path: "/OM/business/OM/workMange",
|
|
|
query: {
|
|
|
id: row.id,
|
|
|
- type:1
|
|
|
- }
|
|
|
- })
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
@@ -300,162 +494,176 @@ export default {
|
|
|
},
|
|
|
/** 导出按钮操作 */
|
|
|
handleExport() {
|
|
|
- let queryParams = {...this.queryParams};
|
|
|
- delete queryParams.current
|
|
|
- delete queryParams.size
|
|
|
+ let queryParams = { ...this.queryParams };
|
|
|
+ delete queryParams.current;
|
|
|
+ delete queryParams.size;
|
|
|
this.exportLoading = true;
|
|
|
- exportTbAlarm(queryParams).then(response =>{
|
|
|
+ exportTbAlarm(queryParams).then((response) => {
|
|
|
this.exportLoading = false;
|
|
|
- document.getElementById("xz").href = BASEPATH() + response.data
|
|
|
- document.getElementById("xz").download = response.data
|
|
|
- document.getElementById("xz").click()
|
|
|
- })
|
|
|
+ document.getElementById("xz").href = BASEPATH() + response.data;
|
|
|
+ document.getElementById("xz").download = response.data;
|
|
|
+ document.getElementById("xz").click();
|
|
|
+ });
|
|
|
},
|
|
|
+ //查看详情
|
|
|
+ getOne(row) {
|
|
|
+ this.title = "详情信息";
|
|
|
+ this.form = JSON.parse(JSON.stringify(row));
|
|
|
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
+ if (row.isAlarm === true) {
|
|
|
+ this.form.isAlarm = '是';
|
|
|
+ } else {
|
|
|
+ this.form.isAlarm = '否';
|
|
|
+ }
|
|
|
+ if (row.alarmStatus == '0') {
|
|
|
+ this.form.alarmStatus = '未处理';
|
|
|
+ } else {
|
|
|
+ this.form.alarmStatus = '已处理';
|
|
|
+ }
|
|
|
+ this.open = true;
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
- ::-webkit-scrollbar-track
|
|
|
- {
|
|
|
- background: #fff;
|
|
|
- border-radius: 0;
|
|
|
-
|
|
|
- }
|
|
|
+<style lang="scss">
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar
|
|
|
- {
|
|
|
- -webkit-appearance: none;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- }
|
|
|
+::-webkit-scrollbar {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar-thumb
|
|
|
- {
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 5px;
|
|
|
- background: rgba(0,0,0,.25);
|
|
|
- transition: color .2s ease;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .item {
|
|
|
- margin-bottom: 18px;
|
|
|
- }
|
|
|
- .clearfix:before,
|
|
|
- .clearfix:after {
|
|
|
- display: table;
|
|
|
- content: "";
|
|
|
- }
|
|
|
- .clearfix:after {
|
|
|
- clear: both
|
|
|
- }
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(0, 0, 0, 0.25);
|
|
|
+ transition: color 0.2s ease;
|
|
|
+}
|
|
|
+.text {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+.clearfix:before,
|
|
|
+.clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+}
|
|
|
+.clearfix:after {
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+.box-card {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+#main {
|
|
|
+ margin-top: -20px;
|
|
|
.box-card {
|
|
|
- margin-top:20px;
|
|
|
+ .h2 {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ font-size: 1.2em;
|
|
|
+ background-image: -webkit-linear-gradient(bottom, #00adce, #000);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
}
|
|
|
- #main{
|
|
|
- margin-top:-20px;
|
|
|
- .box-card{
|
|
|
- .h2{
|
|
|
- text-align: center;
|
|
|
- margin:0 auto;
|
|
|
+ .card_left {
|
|
|
+ .card1 {
|
|
|
+ height: 43vh;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
display: block;
|
|
|
- font-size: 1.2em;
|
|
|
- background-image: -webkit-linear-gradient(bottom, #00adce, #000);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
-
|
|
|
+ text-align: left !important;
|
|
|
+ .imgTitle {
|
|
|
+ width: 5%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 2%;
|
|
|
+ font-size: 1.4vw;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .card_left{
|
|
|
- .card1{
|
|
|
- height:43vh;
|
|
|
- .title{
|
|
|
- width:100%;
|
|
|
- display: block;
|
|
|
- text-align: left !important;
|
|
|
- .imgTitle{
|
|
|
- width:5%;
|
|
|
- display: inline-block;
|
|
|
+ .contain {
|
|
|
+ margin-top: 0.5vh;
|
|
|
+ width: 58%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ div {
|
|
|
+ height: 7.8vh;
|
|
|
+ span {
|
|
|
+ font-size: 1vw;
|
|
|
vertical-align: middle;
|
|
|
- }
|
|
|
- p{
|
|
|
+ width: 4vw;
|
|
|
+ text-align: left;
|
|
|
display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- margin-left:2%;
|
|
|
- font-size:1.4vw;
|
|
|
}
|
|
|
- }
|
|
|
- .contain{
|
|
|
- margin-top:0.5vh;
|
|
|
- width:58%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- div{
|
|
|
- height:7.8vh;
|
|
|
- span{
|
|
|
- font-size: 1vw;
|
|
|
- vertical-align: middle;
|
|
|
- width:4vw;
|
|
|
- text-align: left;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- div{
|
|
|
- width:212px;
|
|
|
- height:6vh;
|
|
|
- vertical-align: middle;
|
|
|
- background:url("../../../../../assets/images/operation_item.png") no-repeat right center;
|
|
|
- display: inline-block;
|
|
|
- p{
|
|
|
- font-size: 1.4vw;
|
|
|
- vertical-align: top;
|
|
|
- margin:1vh 0 0 3vh;
|
|
|
- }
|
|
|
+ div {
|
|
|
+ width: 212px;
|
|
|
+ height: 6vh;
|
|
|
+ vertical-align: middle;
|
|
|
+ background: url("../../../../../assets/images/operation_item.png")
|
|
|
+ no-repeat right center;
|
|
|
+ display: inline-block;
|
|
|
+ p {
|
|
|
+ font-size: 1.4vw;
|
|
|
+ vertical-align: top;
|
|
|
+ margin: 1vh 0 0 3vh;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .contain2{
|
|
|
- margin-top:-2.5rem;
|
|
|
- vertical-align: top;
|
|
|
- width:42%;
|
|
|
- display: inline-block;
|
|
|
- p{
|
|
|
- text-align: center;
|
|
|
- font-size: 1.4rem;
|
|
|
- margin:-2vh 0 0 0%;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- .card_right{
|
|
|
- .card2{
|
|
|
- height:43vh;
|
|
|
+ .contain2 {
|
|
|
+ margin-top: -2.5rem;
|
|
|
+ vertical-align: top;
|
|
|
+ width: 42%;
|
|
|
+ display: inline-block;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ margin: -2vh 0 0 0%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .card_bottom{
|
|
|
- padding-top:10px;
|
|
|
- margin-bottom:-10px
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
- /*width: 0;宽度为0隐藏*/
|
|
|
- width: 4px;
|
|
|
- }
|
|
|
- .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
- border-radius: 6px;
|
|
|
- height: 50px;
|
|
|
- background: rgba(40, 190, 252, .6);//滚动条颜色
|
|
|
- }
|
|
|
- .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 6px;
|
|
|
- background: #eee;//滚动条背景色
|
|
|
+ .card_right {
|
|
|
+ .card2 {
|
|
|
+ height: 43vh;
|
|
|
}
|
|
|
+ }
|
|
|
+ .card_bottom {
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-bottom: -10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+::v-deep {
|
|
|
+ .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ /*width: 0;宽度为0隐藏*/
|
|
|
+ width: 4px;
|
|
|
+ }
|
|
|
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 6px;
|
|
|
+ height: 50px;
|
|
|
+ background: rgba(40, 190, 252, 0.6); //滚动条颜色
|
|
|
+ }
|
|
|
+ .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #eee; //滚动条背景色
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|