|
|
@@ -0,0 +1,806 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div style="">
|
|
|
+ <div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0;">
|
|
|
+ <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
|
|
|
+ <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
|
|
|
+ <span style="margin-left: 10px;">搜索条件</span>
|
|
|
+ </p>
|
|
|
+ <div style="padding-bottom: 0;margin-bottom: 20px;">
|
|
|
+ <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
|
|
|
+ <el-row>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="告警类别" prop="warnType">
|
|
|
+ <el-select v-model="queryParams.warnType" placeholder="请选择告警类别" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.gaojing_type"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="上报状态" prop="reportStatus">
|
|
|
+ <el-select v-model="queryParams.reportStatus" placeholder="请选择上报状态" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.shagnt"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="通道ID" prop="channelId">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.channelId"
|
|
|
+ placeholder="请输入通道ID"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="告警时间" prop="warnTime" style="width: 90%;">
|
|
|
+ <el-date-picker style="width: 100%;" clearable
|
|
|
+ v-model="queryParams.warnTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择告警时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item class="butt" style="border: 0;">
|
|
|
+ <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini" @click="handleQuery">查询 </el-button>
|
|
|
+ <el-button size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="casr">
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-hasPermi="['manage:warnManage:add']"
|
|
|
+ >添加</el-button>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ :disabled="singleg"
|
|
|
+ @click="handleUpdateg"
|
|
|
+ v-hasPermi="['manage:warnManage:edits']"
|
|
|
+ >修改</el-button>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ @click="handleDeleteg"
|
|
|
+ v-hasPermi="['manage:warnManage:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['manage:warnManage:export']"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ <div class=" infinite-list" :style="dynamicStyle">
|
|
|
+ <el-row :gutter="10" v-if="warnManageList.length !=0" style="width: 100%;margin-left: 0;">
|
|
|
+ <el-col :span="6" v-for="(item,index) in warnManageList" :key="index" style="cursor: pointer;">
|
|
|
+ <div v-if="isshoe" @click="isac(item)" :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;height: 370px;">
|
|
|
+ <div class="quning">
|
|
|
+ <div class="shipige">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img src="../../../assets/images/icon_gjgl_gx_normal.png" alt="" v-if="item.isnum == false">
|
|
|
+ <img src="../../../assets/images/icon_gjgl_gx_selected.png" alt="" v-if="item.isnum == true">
|
|
|
+ <p style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">告警任务{{index + 1}}</p>
|
|
|
+ </div>
|
|
|
+ <p style="font-size: 14px; color: #aaa;font-weight: 500;" @click="tiahzo(item)">详情→</p>
|
|
|
+ </div>
|
|
|
+ <image-preview :src="item.warnImage" :width="100 +'%'" :height="150" style=""/>
|
|
|
+ <!-- <video
|
|
|
+ :id="'myVideo' + (index+1)"
|
|
|
+ data-setup="{}"
|
|
|
+ loop="loop"
|
|
|
+ :autoplay="false"
|
|
|
+ muted
|
|
|
+ controls
|
|
|
+ @play="videoPlay(item)"
|
|
|
+ poster=""
|
|
|
+ style="width: 100%;height: 150px;"
|
|
|
+ >
|
|
|
+ <!-- + baseUrl -->
|
|
|
+ <!-- <source :src="defaultSettings.urls+ item.videoUrl " />
|
|
|
+ </video> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="goe">
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 8px;">
|
|
|
+ <p>视频通道：</p>
|
|
|
+ <p>{{item.channelId == null?'暂无数据' : item.channelId}}</p>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 8px;">
|
|
|
+ <p>告警日期：</p>
|
|
|
+ <p>{{item.warnTime == null?'暂无数据' : item.warnTime}}</p>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 8px;">
|
|
|
+ <p>上报地址：</p>
|
|
|
+ <p>{{item.reportAddress == null?'暂无数据' : item.reportAddress}}</p>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 8px;">
|
|
|
+ <p>上报状态：</p>
|
|
|
+ <div><dict-tag :options="dict.type.shagnt" :value="item.reportStatus"/></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 8px;">
|
|
|
+ <p>告警内容：</p>
|
|
|
+ <div><dict-tag :options="dict.type.gaojing_type" :value="item.warnType"/></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;"> -->
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="warnManageList.length ==0">
|
|
|
+ <img src="../../../assets/images/zwshjbig.png" alt="" style="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <paginations
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加或修改岗位对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="告警类别" prop="warnType">
|
|
|
+ <el-select style="width: 100%;" v-model="form.warnType" placeholder="请选择告警类别">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.gaojing_type"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12" >
|
|
|
+ <el-form-item label="告警标识" prop="warnSign">
|
|
|
+ <el-input v-model="form.warnSign" placeholder="请输入告警标识" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12" >
|
|
|
+ <el-form-item label="通道Id" prop="channelId">
|
|
|
+ <el-select style="width: 100%;" v-model="form.channelId" placeholder="请选择通道ID">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in channelNumberList "
|
|
|
+ :key="dict.channelId"
|
|
|
+ :label="dict.channelNum"
|
|
|
+ :value="dict.channelId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" >
|
|
|
+ <el-form-item label="视频地址" prop="videoAddress">
|
|
|
+ <el-input v-model="form.videoAddress" placeholder="请输入视频地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" >
|
|
|
+ <el-form-item label="上报地址" prop="reportAddress">
|
|
|
+ <el-input v-model="form.reportAddress" placeholder="请输入上报地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" >
|
|
|
+ <el-form-item label="上报状态" prop="reportStatus">
|
|
|
+ <el-select style="width: 100%;" v-model="form.reportStatus" placeholder="请选择上报状态">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.shagnt"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="告警时间" prop="warnTime">
|
|
|
+ <el-date-picker style="width: 100%;" clearable
|
|
|
+ v-model="form.warnTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择告警时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" placeholder="请输入内容" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="告警预览图片" prop="warnImage">
|
|
|
+ <image-upload v-model="form.warnImage"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer" v-if="isredw">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
|
|
|
+import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
|
|
|
+// import 'videojs-flash'
|
|
|
+import { listChannelNumber, getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
|
|
|
+const defaultSettings = require("@/settings.js");
|
|
|
+import mqttHandle from "../../../utils/mqttHandler.js"
|
|
|
+import mqtt from 'mqtt';
|
|
|
+import { MqttClient } from 'mqtt'
|
|
|
+// 状态变量
|
|
|
+ const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
|
|
|
+export default {
|
|
|
+ name: "WarnManage",
|
|
|
+ dicts: ['gaojing_type', 'source_type','alarm_task','shagnt'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mqttThemeName:{
|
|
|
+ url: 'ws://13.229.167.76:1884/mqtt',
|
|
|
+ topic: 'test/topic'
|
|
|
+ },
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ defaultSettings:defaultSettings,
|
|
|
+ baseUrl: process.env.VUE_APP_BASE_API,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 告警管理表格数据
|
|
|
+ warnManageList: [],
|
|
|
+ channelNumberList:[],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ warnType: null,
|
|
|
+ warnSign: null,
|
|
|
+ channelId: null,
|
|
|
+ videoAddress: null,
|
|
|
+ reportAddress: null,
|
|
|
+ reportStatus: null,
|
|
|
+ warnTime: null,
|
|
|
+ warnImage: null,
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ videoAddress: [
|
|
|
+ { required: true, message: "不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ warnTime: [
|
|
|
+ { required: true, message: "不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ warnImage: [
|
|
|
+ { required: true, message: "不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ activeName:'1',
|
|
|
+ videoState: false, // 视频播放状态
|
|
|
+ poster:true,
|
|
|
+ controls:true,
|
|
|
+ videoData:{},
|
|
|
+ player: null,
|
|
|
+ isshoe:true,
|
|
|
+ isredw:true,
|
|
|
+ singleg:true,
|
|
|
+ manid:0,
|
|
|
+ getreadList:[],
|
|
|
+ startTime: 0,
|
|
|
+ yutim:true,
|
|
|
+ staffTrainTimeList:[],
|
|
|
+ tableMaxHeight:'200',
|
|
|
+ receiveNews: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dynamicStyle() {
|
|
|
+ return {
|
|
|
+ overflowY:'auto',
|
|
|
+ height: this.tableMaxHeight+ 'px',
|
|
|
+ paddingTop:'10px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.startTime = Date.now()
|
|
|
+ this.getList();
|
|
|
+ this.getListt()
|
|
|
+ window.onresize = () => {
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ }
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.createMqtt() // 建立mqtt通信
|
|
|
+ window.onresize = () => {
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ }
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.player) {
|
|
|
+ this.player.dispose()
|
|
|
+ }
|
|
|
+ if (client) {
|
|
|
+ console.log(4)
|
|
|
+ client.end()
|
|
|
+ }
|
|
|
+ // this.disconnect()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ minToHm(min) {
|
|
|
+ let h = Math.floor(min / 60);
|
|
|
+ let m = min % 60;
|
|
|
+ let hDisplay = h ? `${h}小时` : '';
|
|
|
+ let mDisplay = m ? `${m}分钟` : '';
|
|
|
+ console.log(`${hDisplay}${mDisplay}`.trim())
|
|
|
+ return `${hDisplay}${mDisplay}`.trim();
|
|
|
+ },
|
|
|
+ /** 查询岗位列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ this.isshoe = false
|
|
|
+
|
|
|
+ listWarnManage(this.queryParams).then(response => {
|
|
|
+ this.warnManageList = response.rows;
|
|
|
+ this.warnManageList.filter(rou=>{
|
|
|
+ rou.isnum = false
|
|
|
+ })
|
|
|
+ this.isshoe = true
|
|
|
+
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 创mqtt最终版
|
|
|
+ mqttzz(){
|
|
|
+ // 创建一个连接到MQTT broker的客户端实例
|
|
|
+ // 连接成功后，订阅一个主题
|
|
|
+ client.on('connect', function () {
|
|
|
+ client.subscribe('test/topic', function (err) {
|
|
|
+ if (!err) {
|
|
|
+ console.log('成功订阅 test/topic 主题！')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // 监听订阅主题上的消息
|
|
|
+ client.on('message', function (topic, message) {
|
|
|
+ // 处理接收到的消息
|
|
|
+ console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
|
|
|
+ })
|
|
|
+ },
|
|
|
+ isac(val){
|
|
|
+ console.log(5,val)
|
|
|
+ val.isnum = !val.isnum
|
|
|
+ this.isshoe = false
|
|
|
+ this.isshoe = true
|
|
|
+ let nhde = []
|
|
|
+ let nsg = ''
|
|
|
+ this.warnManageList.filter(rou=>{
|
|
|
+ if(rou.isnum == true){
|
|
|
+ nhde.push(rou.manualId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(nhde.length == 1){
|
|
|
+ this.warnManageList.filter(rou=>{
|
|
|
+ if(rou.isnum == true){
|
|
|
+ console.log(rou.manualId)
|
|
|
+ this.manid = rou.manualId
|
|
|
+ console.log(this.manid)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.singleg = false
|
|
|
+ }else{
|
|
|
+ // this.manid = row.
|
|
|
+ this.singleg = true
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 查询通道管理列表 */
|
|
|
+ getListt() {
|
|
|
+ this.loading = true
|
|
|
+ let snge={
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 200,
|
|
|
+ }
|
|
|
+ listChannelNumber(snge).then(response => {
|
|
|
+ this.channelNumberList = response.rows
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getge(valy){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ for(var i =0; i < valy.length;i++){
|
|
|
+ let du = document.getElementById("myVideo" + (i+1)) //获取组件下的video
|
|
|
+ var hour = parseInt((du.duration) / 3600);
|
|
|
+ var minute = parseInt((du.duration % 3600) / 60);
|
|
|
+ var second = parseInt(du.duration % 60);
|
|
|
+ let result = ''
|
|
|
+ if (hour > 0) {
|
|
|
+ result = this.formatTimeStr(hour) + ':' + this.formatTimeStr(minute) + ':' + this
|
|
|
+ .formatTimeStr(second)
|
|
|
+ } else {
|
|
|
+ result = this.formatTimeStr(minute) + ':' +
|
|
|
+ this.formatTimeStr(second)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.isshoe = false
|
|
|
+ valy[i].result = result
|
|
|
+ this.isshoe = true
|
|
|
+ console.log(valy[i],result,du)
|
|
|
+ // return result //转化成分，秒
|
|
|
+ }
|
|
|
+ }, 1200)
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formatTimeStr(val) {
|
|
|
+ if (val > 9) {
|
|
|
+ return val
|
|
|
+ } else {
|
|
|
+ return '0' + val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 获取当前时间
|
|
|
+ gettime(){
|
|
|
+ let nowDate = new Date()
|
|
|
+ let date = {
|
|
|
+ year: nowDate.getFullYear(),
|
|
|
+ month: nowDate.getMonth() + 1,
|
|
|
+ date: nowDate.getDate()
|
|
|
+ }
|
|
|
+ // console.log(parseInt(date.date),date.month,4)
|
|
|
+ if (date.month < 10) {
|
|
|
+ date.month = '0' + date.month
|
|
|
+ }
|
|
|
+ if (parseInt(date.date) < 10) {
|
|
|
+ date.date = '0' + date.date
|
|
|
+ }
|
|
|
+ let nghe = date.year + '-' + date.month + '-' + date.date
|
|
|
+ return nghe
|
|
|
+
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ warnId: null,
|
|
|
+ warnType: null,
|
|
|
+ warnSign: null,
|
|
|
+ channelId: null,
|
|
|
+ videoAddress: null,
|
|
|
+ reportAddress: null,
|
|
|
+ reportStatus: null,
|
|
|
+ warnTime: this.gettime(),
|
|
|
+ warnImage: null,
|
|
|
+ delFlag: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ remark: null
|
|
|
+ }
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm")
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.warnId)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.reset()
|
|
|
+ this.open = true
|
|
|
+ this.title = "添加告警管理"
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset()
|
|
|
+ const warnId = row.warnId || this.ids
|
|
|
+ getWarnManage(warnId).then(response => {
|
|
|
+ this.form = response.data
|
|
|
+ this.open = true
|
|
|
+ this.title = "修改告警管理"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getImageSrc(val) {
|
|
|
+ // 创建一个临时元素，将HTML内容插入其中
|
|
|
+ const tempElement = document.createElement('div');
|
|
|
+ tempElement.innerHTML = val;
|
|
|
+ // 查找 <img> 标签并获取 src 属性值
|
|
|
+ const imgElement = tempElement.querySelector('img');
|
|
|
+ if (imgElement) {
|
|
|
+ const srcValue = imgElement.getAttribute('src');
|
|
|
+ // this.imagePath=srcValue
|
|
|
+ console.log('Image src:', srcValue+"照片路径");
|
|
|
+ } else {
|
|
|
+ console.log('No <img> element found.');
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.warnId != null) {
|
|
|
+ updateWarnManage(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("修改成功")
|
|
|
+ this.open = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addWarnManage(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("新增成功")
|
|
|
+ this.open = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDeleteg() {
|
|
|
+ let nhde = []
|
|
|
+ let nsg = ''
|
|
|
+ this.warnManageList.filter(rou=>{
|
|
|
+ if(rou.isnum == true){
|
|
|
+ nhde.push(rou.warnId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(nhde)
|
|
|
+ nsg = nhde.join(',')
|
|
|
+ // return
|
|
|
+ delWarnManage(nsg).then(response => {
|
|
|
+ this.$modal.msgSuccess("操作成功")
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ // delManual(nsg)
|
|
|
+ // this.$modal.confirm('是否确认删除数据项？').then(function() {
|
|
|
+ // return delManual(nsg);
|
|
|
+ // }).then(() => {
|
|
|
+ // this.getList();
|
|
|
+ // this.$modal.msgSuccess("删除成功");
|
|
|
+ // }).catch(() => {});
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const warnIds = row.warnId || this.ids
|
|
|
+ this.$modal.confirm('是否确认删除告警管理编号为"' + warnIds + '"的数据项？').then(function() {
|
|
|
+ return delWarnManage(warnIds)
|
|
|
+ }).then(() => {
|
|
|
+ this.getList()
|
|
|
+ this.$modal.msgSuccess("删除成功")
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.download('manage/warnManage/export', {
|
|
|
+ ...this.queryParams
|
|
|
+ }, `warnManage_${new Date().getTime()}.xlsx`)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 获取屏幕高度
|
|
|
+ showFilterForm () {
|
|
|
+ this.filterActive = !this.filterActive
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ },
|
|
|
+ changeTableMaxHeight () {
|
|
|
+ let height = document.body.offsetHeight // 网页可视区域高度
|
|
|
+ // if (this.filterActive) {
|
|
|
+ // this.tableMaxHeight = height - 320
|
|
|
+ // } else {
|
|
|
+ this.tableMaxHeight = height - 150
|
|
|
+ // }
|
|
|
+ console.log(height)
|
|
|
+ },
|
|
|
+ tiahzo(item){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/shebe',
|
|
|
+ query: {
|
|
|
+ 'id':item.channelId,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .ckilde{
|
|
|
+ // color: #03BF8A;
|
|
|
+ }
|
|
|
+ .quning{
|
|
|
+ .el-image{
|
|
|
+ box-shadow:0;
|
|
|
+ -webkit-box-shadow:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .qucheu{
|
|
|
+ .el-form-item--small.el-form-item{
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ border:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nghsey{
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 0;
|
|
|
+ background-color: #F2F3FD;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .butt{
|
|
|
+ .el-button--small{
|
|
|
+ padding: 9px 23px !important;
|
|
|
+ font-size: 14px;
|
|
|
+ border: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .casr{
|
|
|
+ .el-tabs__item.is-active{
|
|
|
+ color: #196CFF;
|
|
|
+ }
|
|
|
+ .el-tabs--card > .el-tabs__header .el-tabs__item{
|
|
|
+ padding: 0 30px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table .el-table__header-wrapper th{
|
|
|
+ background-color:#F5F6F8;
|
|
|
+ color:#343434;
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+ color:#343434;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .goe{
|
|
|
+ padding: 0 15px;
|
|
|
+ div{
|
|
|
+ // margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #AAAAAA;
|
|
|
+ // margin-top: 10px;
|
|
|
+ // margin-bottom: 3px;
|
|
|
+ // padding: 0 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
|
|
+ -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
|
+ -webkit-line-clamp:1; //显示的行
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ margin-top: 0;
|
|
|
+ font-weight: 400;
|
|
|
+ width: 70%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
|
|
+ -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
|
+ -webkit-line-clamp:1; //显示的行
|
|
|
+ // padding-bottom: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ingwe{
|
|
|
+ border: 2px solid #03BF8A;
|
|
|
+ }
|
|
|
+ .shipige{
|
|
|
+ padding: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+
|
|
|
+
|
wangmengwei