From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改
---
src/views/dataL/dataL.vue | 2472 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 1,609 insertions(+), 863 deletions(-)
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index ab34d3e..7710cb1 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -1,79 +1,178 @@
<template>
- <div id="Lour">
- <div class="left">
- <div class="top">
- <div class="top-l">
- <div class="left-top" >
- <p style="font-size: 24px;font-weight: 100;">{{name}}</p>
- <p>{{state}}</p>
- <p>{{evaluate}}</p>
- </div>
- <div class="left-bot">
- <p>{{machineCode}}</p>
- <p>{{smoke}}</p>
- <p>{{proportion}}</p>
- </div>
- </div>
- <div class="top-r">
- <p>{{ReportTime}}</p>
- </div>
+ <div id="Lour" style="height: 100%">
+ <div class="left" style="height: 101%">
+ <div class="top">
+ <div class="top-t">
+ <div class="t-t-title">
+ <p style="font-size: 24px; font-weight: 100">
+ {{ name }}
+ </p>
+ </div>
+ <div class="t-t-title2">
+ <div class="t-t-state">
+ <span
+ :class="{
+ 'l-t-s-grey': state == dataState[0],
+ 'l-t-s-green': state == dataState[1],
+ 'l-t-s-yewllo': state == dataState[2],
+ 'l-t-s-red': state == dataState[3],
+ 'l-t-s-yuan': true,
+ }"
+ ></span>
+
+ <span>{{ " " + state }}</span>
</div>
- <div class="l-main">
- <div style="padding: 20px">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="预警历史" name="first">
- <!-- <el-tab-pane label="预警历史" name="second"> -->
- <div class="frist-left">
- <div id="echart01" style="width: 100%;height:260px;">
- </div>
-
- <div class="l-main-2">
- <div class="l-m-2-heard">
+ <div class="t-t-time">
+ <p>{{ ReportTime }}</p>
+ </div>
+ </div>
+ </div>
+ <div class="top-b">
+ {{ machineCode }}
+ </div>
+ </div>
+ <div class="l-main">
+ <div style="padding: 20px">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="预警历史" name="first">
+ <!-- <el-tab-pane label="预警历史" name="second"> -->
+ <div class="frist-left">
+ <div
+ id="echart01"
+ style="width: 100%; height: 260px"
+ ref="echart01"
+ ></div>
+
+ <div class="l-main-2" ref="aaa">
+ <div class="l-m-2-heard">
<span style="font-size: 14px">历史事件</span>
<span style="font-size: 12px">全部事件类型</span>
- <span style="padding-left: 1px;">
-
- <el-popover
+ <span style="padding-left: 1px">
+ <el-popover
placement="bottom"
width="160"
- v-model="screens">
- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
- <div style="margin: 15px 0;"></div>
- <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
- </el-checkbox-group>
- <div style="text-align: right; margin: 0; back">
- <el-button size="mini" type="text" @click="resetl">重置</el-button>
- <el-button type="primary" size="mini" @click="determine">确定</el-button>
- </div>
- <el-button
- slot="reference"
- style="border: transparent;background: transparent;width: 1px;position: relative;left: -60px;"
- >
- <svg
- class="icon-shaixuan"
- viewBox="0 0 1024 1024"
- width="100%"
- height="100%"
- fill ="#29c093"
- style="width: 13px;position: relative;top: 2px;"
- >
- <path
- d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z">
- </path>
- </svg>
- </el-button>
- </el-popover>
+ v-model="screens"
+ >
+ <el-checkbox
+ :indeterminate="isIndeterminate"
+ v-model="checkAll"
+ @change="handleCheckAllChange"
+ >全选</el-checkbox
+ >
+ <div style="margin: 15px 0"></div>
+ <el-checkbox-group
+ v-model="checkedCities"
+ @change="handleCheckedCitiesChange"
+ >
+ <el-checkbox
+ v-for="city in cities"
+ :label="city"
+ :key="city"
+ >{{ city }}</el-checkbox
+ >
+ </el-checkbox-group>
+ <div style="text-align: right; margin: 0; back">
+ <el-button size="mini" type="text" @click="resetl"
+ >重置</el-button
+ >
+ <el-button
+ type="primary"
+ size="mini"
+ @click="determine"
+ >确定</el-button
+ >
+ </div>
+ <el-button
+ slot="reference"
+ style="
+ border: transparent;
+ background: transparent;
+ width: 1px;
+ position: relative;
+ left: -60px;
+ "
+ >
+ <svg
+ class="icon-shaixuan"
+ viewBox="0 0 1024 1024"
+ width="100%"
+ height="100%"
+ fill="rgba(0,0,0,0.5)"
+ style="width: 13px; position: relative; top: 2px"
+ ref="svgBut"
+ >
+ <path
+ d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z"
+ ></path>
+ </svg>
+ </el-button>
+ </el-popover>
</span>
- </div>
- <div class="l-m-2-main">
+ </div>
+ <div class="l-m-2-main">
<div class="l-m-2-m-not" v-show="eventDetails.length == 0">
- <img src="https://city.sensoro.com/assets/img/no-history.png" alt="">
- <div>无事件记录</div>
+ <img
+ src="https://city.sensoro.com/assets/img/no-history.png"
+ alt=""
+ />
+ <div>无事件记录</div>
</div>
+ <!-- 普通表格
+ 舍弃eventDetaill的childs
+ -->
+ <div
+ v-for="(value, index) in eventDetails"
+ :key="index"
+ v-show="eventDetails.length != 0"
+ class="l-m-2-m-table"
+ >
+ <p
+ class="l-m-2-m-tableheard"
+ style="fontsize: 20px; font-weight: 100"
+ >
+ {{ value.year }}年
+ </p>
+ <div class="l-m-2-m-tablemain">
+ <el-table
+ :data="value.data"
+ style="width: 100%"
+ highlight-current-row
+ @current-change="handleCurrentChange"
+ ><!--highlight-current-row: 单选，current-change单选事件-->
+ <el-table-column type="index"> </el-table-column>
+ <el-table-column label="日期" prop="day">
+ </el-table-column>
+ <el-table-column label="时间" prop="time">
+ </el-table-column>
+ <el-table-column label="负责人" prop="oneContacts">
+ </el-table-column>
+ <el-table-column
+ label="负责人电话"
+ prop="onePhone"
+ min-width="100px"
+ >
+ </el-table-column>
+ <el-table-column label="类型" prop="events">
+ </el-table-column>
+ <el-table-column label="接警人" prop="alarmPeople">
+ </el-table-column>
+ <el-table-column label="报警人" prop="galarmPeople">
+ </el-table-column>
+ <el-table-column label="警情状态" prop="state">
+ <template slot-scope="props">
+ <el-tag>{{ props.row.state }}</el-tag>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column label="跳转实时" prop="">
- <div v-for="(value,index) in eventDetails" :key="index" v-show="eventDetails.length != 0" class="l-m-2-m-table">
+ </el-table-column> -->
+ </el-table>
+ </div>
+ </div>
+
+ <!-- 展开--待定 -->
+ <!-- <div v-for="(value,index) in eventDetails" :key="index" v-show="eventDetails.length != 0" class="l-m-2-m-table">
<p class="l-m-2-m-tableheard">{{value.year}}年</p>
<div class="l-m-2-m-tablemain">
<el-table
@@ -87,13 +186,6 @@
style="width: 100%;"
class="l-m-2-m-tm-int"
>
- <!-- <el-table-column type="expand">
- <template slot-scope="propss">
- <el-form label-position="top" inline class="demo-table-expand">
- {{propss.row.open}}
- </el-form>
- </template>
- </el-table-column> -->
<el-table-column
label="时间"
prop="time"
@@ -109,7 +201,7 @@
prop="open">
</el-table-column>
</el-table>
- </el-form>
+ </el-form>
</template>
</el-table-column>
<el-table-column
@@ -134,7 +226,7 @@
</el-table-column>
</el-table>
</div>
- </div>
+ </div> -->
<!-- 时间轴历史记录 待选-->
@@ -179,59 +271,81 @@
</div>
<div class="l-m-2-m-d-bot">无更多记录</div>
</div> -->
-
-
+ </div>
</div>
- </div>
-
- </div>
- </el-tab-pane>
- <!-- <el-tab-pane label="数据详情" name="first"> -->
- <el-tab-pane label="数据详情" name="second">
- <div class="l-main-3">
- <div class="l-m-3-heard">
- <h2>{{name}}</h2>
- <div>设备数据详情</div>
- </div>
- <el-divider content-position="left"><i class="el-icon-mobile-phone"></i></el-divider>
- <div class="l-m-3-main">
- <el-row>
- <el-form
- :model="detailsData"
- label-position="right"
- size="mini"
- class="l-m-3-m-form"
- label-width="100px"
- style="
- background: #fff;
- margin-top: 20px;
- margin-left: 10px;
- margin-right: 10px;
- height: calc(100% - 40px);
- width: calc(100% - 20px);
- ">
- <el-row>
- <el-col span="12">
- <el-form-item label="设备名称">
- <el-input
- disabled="true"
- v-model="detailsData.machineName"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="设备编号">
- <el-input
- disabled="true"
- v-model="detailsData.machineNumber"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
+ </div>
+ </el-tab-pane>
+ <!-- <el-tab-pane label="数据详情" name="first"> -->
+ <el-tab-pane label="设备详情" name="second">
+ <div class="l-main-3">
+ <div class="l-m-3-heard">
+ <!-- <h2>
+ {{ name.length > 16 ? name.substr(0, 16) + "···" : name }}
+ </h2> -->
+ <div>设备数据详情</div>
+ </div>
+ <el-divider content-position="left"
+ ><i class="el-icon-mobile-phone"></i
+ ></el-divider>
+ <div class="l-m-3-main">
+ <el-row>
+ <el-form
+ :model="detailsData"
+ label-position="right"
+ size="mini"
+ class="l-m-3-m-form"
+ label-width="100px"
+ style="
+ background: #fff;
+ margin-top: 20px;
+ margin-left: 10px;
+ margin-right: 10px;
+ height: calc(100% - 40px);
+ width: calc(100% - 20px);
+ "
+ >
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="设备名称">
+ <el-input
+ disabled="true"
+ v-model="detailsData.machineName"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="设备编号">
+ <el-input
+ disabled="true"
+ v-model="detailsData.machineNumber"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="主要负责人">
+ <el-input
+ disabled="true"
+ v-model="detailsData.person"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="负责人电话">
+ <el-input
+ disabled="true"
+ v-model="detailsData.call"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <!-- <el-col span="12">
<el-form-item label="使用方">
<el-input
disabled="true"
@@ -239,788 +353,1420 @@
autocomplete="off"
></el-input>
</el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="序列号">
- <el-input
- disabled="true"
- v-model="detailsData.serialNumber"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
- <el-form-item label="通道号">
- <el-input
- disabled="true"
- v-model="detailsData.channel"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="布撤防状态">
- <el-input
- disabled="true"
- v-model="detailsData.deployment"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
- <el-form-item label="设备类型">
- <el-input
- disabled="true"
- v-model="detailsData.machineType"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="省份">
- <div
- v-for="(val,index) in detailsData.province"
- :key="index"
- >
- <el-input
- disabled="true"
- class="l-m-3-m-f-pro"
- v-model="detailsData.province[index]"
- autocomplete="off"
- ></el-input>
- </div>
- </el-form-item>
- </el-col>
- <el-row>
- <el-col span="12">
- <el-form-item label="负责人">
- <el-input
- disabled="true"
- v-model="detailsData.person"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="街道">
- <el-input
- disabled="true"
- v-model="detailsData.street"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
- <el-form-item label="负责人电话">
- <el-input
- disabled="true"
- v-model="detailsData.call"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="到期时间">
- <el-input
- disabled="true"
- v-model="detailsData.dueDate"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
- <el-form-item label="缴费信息">
- <el-input
- disabled="true"
- v-model="detailsData.payment"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="安装时间">
- <el-input
- disabled="true"
- v-model="detailsData.installation"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
- <el-form-item label="心跳时间">
- <el-input
- disabled="true"
- v-model="detailsData.heartbeat"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-row>
- </el-form>
- </el-row>
-
- <!-- <div
- v-for="(value,keys,index) in detailsData"
- :key="index"
- :class="[{'l-m-3-m-ones': true}, (index % 2) == 1? 'l-m-3-m-o-r':'l-m-3-m-o-l']"
- >
- <div class="l-m-3-m-o-keys">{{keys}}</div>
-  : 
- <div class="l-m-3-m-o-value">{{value}}</div>
- </div>
- <div style="clear: float"></div> -->
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
+ </el-col> -->
+ <el-col span="12">
+ <el-form-item label="序列号">
+ <el-input
+ disabled="true"
+ v-model="detailsData.serialNumber"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="通道号">
+ <el-input
+ disabled="true"
+ v-model="detailsData.channel"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="设备类型">
+ <el-input
+ disabled="true"
+ v-model="detailsData.machineType"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="布撤防状态">
+ <el-input
+ disabled="true"
+ v-model="detailsData.deployment"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="省份" class="cityClassParams">
+ <avue-form
+ :option="itemOption"
+ v-model="form"
+ ></avue-form>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="地址">
+ <el-input
+ disabled="true"
+ v-model="detailsData.street"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="安装时间">
+ <el-input
+ disabled="true"
+ v-model="detailsData.installation"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="到期时间">
+ <el-input
+ disabled="true"
+ v-model="detailsData.dueDate"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="缴费信息">
+ <el-input
+ disabled="true"
+ v-model="detailsData.payment"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="心跳时间">
+ <el-input
+ disabled="true"
+ v-model="detailsData.heartbeat"
+ autocomplete="off"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-row>
+ </el-form>
+ </el-row>
</div>
- </div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="现场视频" name="third">
+ <div class="l-main-3">
+ <!-- <div class="l-m-3-heard">222</div> -->
+ <div class="l-m-3-heard">
+ <div>设备现场视频</div>
+ </div>
+ <!-- <el-divider content-position="left"></el-divider> -->
+ <el-divider content-position="left"
+ ><i class="el-icon-mobile-phone"></i
+ ></el-divider>
+ <div class="l-m-3-main">
+ <!-- {{ videoUrl }} -->
+ <div>
+ <video
+ style="height: 550px; width: 100%"
+ controls="controls"
+ id="real_video_conversationDataL"
+ src=""
+ ></video>
+ </div>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
</div>
- <div class="right">
- <div class="r-one">
- <div class="r-heard">
- <div class="r-heard-top">部署信息</div>
- <button @click="modifyl" class="r-but-top">修改</button>
- </div>
- <div class="r-body">
- <div class="r-b-top">
- <div class="r-b-t-main">
- <span class="r-b-t-left">传感器名称</span>
- <span class="r-b-t-right">{{name}}</span>
- </div>
- <div class="r-b-t-main">
- <span class="r-b-t-left">设备联系人</span>
- <span class="r-b-t-right">{{contacts}}: {{calls}}</span>
- </div>
- <div class="r-b-t-main">
+ </div>
+ </div>
+ <div class="right">
+ <div class="r-one">
+ <div class="r-heard">
+ <div class="r-heard-top">部署信息</div>
+ <!-- <button @click="modifyl" class="r-but-top">修改</button> -->
+ </div>
+ <div class="r-body">
+ <div class="r-b-top">
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">设备名称</span>
+ <span class="r-b-t-right">{{ name }}</span>
+ </div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">设备联系人</span>
+ <span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
+ </div>
+ <!-- 设备标签待定 -->
+ <!-- <div class="r-b-t-main">
<span class="r-b-t-left">设备标签</span>
<span class="r-b-t-right">
- <div
- class="r-b-t-r-label"
- v-for="(value,index) in labels"
- :key="index"
- >
- {{value}}
- </div>
- </span>
- </div>
- <div class="r-b-t-main">
- <span class="r-b-t-left" style="position:relative;top: -27px;">部署图片</span>
- <span class="r-b-t-right">
<div
- class="r-b-t-r-imgsl"
- v-for="(value,index) in imgsl"
+ class="r-b-t-r-label"
+ v-for="(value,index) in labels"
:key="index"
>
- <!-- <img :src="value" alt=""> -->
- <el-image
- style="width: 68px; height: 68px"
- :src="value"
- :preview-src-list="imgsl">
- </el-image>
+ {{value}}
</div>
</span>
- </div>
- <div class="r-b-t-main">
- <span class="r-b-t-left">部署时间</span>
- <span class="r-b-t-right">{{deploymentTime}}</span>
- </div>
- </div>
- <div class="r-b-map">
- <el-row>
- <iframe
- id="supervisoryMap"
- ref="supervisoryMap"
- :src="baseUrl"
- frameborder="0"
- width="100%"
- height="100%"
- ></iframe>
- </el-row>
- </div>
+ </div> -->
+ <!-- 图暂时没有 -->
+ <div class="r-b-t-main">
+ <span class="r-b-t-left" style="position: relative; top: -27px"
+ >部署图片</span
+ >
+ <span class="r-b-t-right">
+ <div
+ class="r-b-t-r-imgsl"
+ v-for="(value, index) in imgsl"
+ :key="index"
+ >
+ <el-image
+ style="width: 68px; height: 68px"
+ :src="value"
+ :preview-src-list="imgsl"
+ v-show="value != 'no'"
+ >
+ </el-image>
+ <div
+ v-show="value == 'no'"
+ style="
+ width: 68px;
+ height: 68px;
+ text-algin: center;
+ color: rgba(0, 0, 0, 0.5);
+ "
+ >
+ 无图片
+ </div>
</div>
+ </span>
</div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">部署时间</span>
+ <span class="r-b-t-right">{{ deploymentTime }}</span>
+ </div>
+ </div>
+ <div class="r-b-map">
+ <el-row>
+ <!-- <iframe
+ id="supervisoryMap"
+ ref="supervisoryMap"
+ :src="baseUrl"
+ frameborder="0"
+ width="100%"
+ height="100%"
+ ></iframe> -->
+ <!-- <button @click="re">刷新</button> -->
+ <iframe
+ id="detailMap"
+ ref="detailMap"
+ :src="baseUrl"
+ frameborder="0"
+ width="100%"
+ height="100%"
+ name="detailMap"
+ ></iframe>
+ </el-row>
+ </div>
</div>
+ </div>
</div>
+ </div>
</template>
<script>
-import axios from 'axios'
-import echarts from 'echarts'
-const cityOptions = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
+import { Loading } from "element-ui";
+import {
+ getdataL,
+ getGalarm,
+ getnum,
+ getImg,
+ getVideo,
+} from "../../api/dataL/axiosL";
+import axios from "axios";
+import Hls from "hls.js";
+import echarts from "echarts";
+import { Form } from "element-ui";
+const cityOptions = ["未处理", "处理中", "已处理"];
export default {
- data(){
- return{
- name: '婴滋诚红谷滩凤凰花园东区',
- state: '故障',
- evaluate: '优',
- machineCode: '03430017C76447DB',
- smoke: '烟雾(SM-5)',
- proportion: '100.0%',
- ReportTime: '最近上报: 2021-04-06 14:34:2',
- activeName: 'first',
- contacts: '陈小兵',
- calls: '18079118423',
- labels: ['店面','楼房'],
- imgsl: [
- 'https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57',
- 'https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE',
- 'https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433'
- ],
- deploymentTime: '2019-08-28 11:16:14',
- isRecord: true,
- screens: false,
- //复选框
- checkAll: false,
- checkedCities: [], //选择的
- cities: cityOptions,
- isIndeterminate: true,
+ data() {
+ return {
+ // timeL: "",
+ a: "",
+ myDeviceNumber: "",
+ videoUrl: "",
+ //折线图
+ myChart: "",
+ numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
- //列表数据：
- obj: [],//选中
- option2:{//抬头
- menuType:'text',
- page:false,
- align:'center',
- dateBtn:true,
- dateDefault:true,
- menuAlign:'center',
- column:[
- {
- label:'姓名',
- prop:'name'
- },
- {
- label:'性别',
- prop:'sex'
- },{
- label: "日期",
- prop: "date",
- type: "date",
- format: "yyyy-MM-dd hh:mm:ss",
- valueFormat: "yyyy-MM-dd hh:mm:ss",
- }
- ]
+ jingqingPdianji: null,
+
+ name: "",
+ state: "",
+ evaluate: "",
+ machineCode: "",
+ smoke: "",
+ proportion: "",
+ ReportTime: "",
+ contacts: "",
+ calls: "",
+ labels: ["店面", "楼房"],
+ imgsl: [
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+ // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
+ // "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
+ ],
+ deploymentTime: "2019-08-28 11:16:14",
+
+ activeName: "first",
+ // activeName: 'second',
+ // activeName: "third",
+ isRecord: true,
+ screens: false,
+ //复选框
+ dataState: ["掉线", "正常", "故障", "预警"],
+ // [grey,green,red][
+ // onlineStatus = 0,
+ // onlineStatus = 1,
+ // state!= "",
+ // jtype != 2
+ // ]
+ checkAll: false,
+ checkedCities: [], //选择的
+ cities: cityOptions,
+ isIndeterminate: true,
+
+ //列表数据：
+ obj: [], //选中
+ option2: {
+ //抬头
+ menuType: "text",
+ page: false,
+ align: "center",
+ dateBtn: true,
+ dateDefault: true,
+ menuAlign: "center",
+ column: {},
+ },
+
+ eventDetails: [], //真实数据
+ eventDetaill: [
+ //原始数据
+ // {
+ // year: '2020',
+ // data: [
+ // {
+ // day: '00月00日',
+ // time: '00:00:00:',
+ // events: '报警类型',
+ // galarmPeople: '报警人',
+ // state: '未处理',
+ // oneContacts: '主要负责人',
+ // alarmPeople: '接警人',
+ // onePhone: '负责人电话',
+ // childs: [
+ // {
+ // time: '07:30:46',
+ // events: '系统发送恢复短信至：刘仁花 ',
+ // open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
+ // },
+ // {
+ // time: '07:30:46',
+ // events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
+ // open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
+ // }
+ // ],
+ // },
+ // ]
+ // },
+ // {
+ // year: '2019',
+ // data: [
+ // {
+ // day: '06月3日',
+ // time: '02:22:06',
+ // events: '烟雾 监测到烟雾',
+ // type: '安全隐患',
+ // childs: [
+ // {
+ // time: '07:30:46',
+ // events: '系统发送恢复短信至：刘仁花 ',
+ // open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
+ // },
+ // {
+ // time: '07:30:46',
+ // events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
+ // open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
+ // }
+ // ],
+ // },
+ // ],
+ // }
+ ],
+
+ //详情数据
+ detailsData: {
+ machineName: "", // 设备名称
+ machineNumber: "", //
+ user: "", // 使用方
+ serialNumber: "", // 序列号
+ channel: "", // 通道号
+ deployment: "", // 布撤防状态:
+ machineType: "", // 设备类型
+ province: "", // 省份
+ street: "", // 街道
+ person: "", // 负责人
+ call: "", // 负责人电话
+ dueDate: "", // 到期时间
+ payment: "", // 缴费信息
+ installation: "", // 安装时间
+ heartbeat: "", // 心跳时间
+ },
+ // detailsData: {
+ // machineName: '测试设备8',// 设备名称
+ // machineNumber: '000000000008', //
+ // user: '南昌大学第一附属医院', // 使用方
+ // serialNumber: '001241945990', // 序列号
+ // channel : '1',// 通道号
+ // deployment : '布防', // 布撤防状态:
+ // machineType: '一键求助', // 设备类型
+ // province: ['江西省','南昌市','红谷滩区'], // 省份
+ // street: '请输入 街道',// 街道
+ // person : '金同涛', // 负责人
+ // call: '13237568082', // 负责人电话
+ // dueDate: '请选择 到期时间', // 到期时间
+ // payment: '请输入 缴费信息', // 缴费信息
+ // installation : '请选择 安装时间', // 安装时间
+ // heartbeat: '2021-04-07', // 心跳时间
+ // },
+ baseUrl: "", //mapurl\
+ mapStart: false,
+
+ //省份
+ form: {},
+ itemOption: {
+ menuBtn: false,
+ column: [
+ {
+ disabled: true,
+ row: false,
+ prop: "province",
+ type: "select",
+ placeholder: "省份",
+ props: {
+ label: "name",
+ value: "code",
},
- eventDetails: [],//真实数据
- eventDetaill: [//原始数据
- {
- year: '2020',
- data: [
- {
- day: '06月17日',
- time: '02:22:06',
- events: '烟雾 监测到烟雾',
- type: '测试/巡检',
- childs: [
- {
- time: '07:30:46',
- events: '系统发送恢复短信至：刘仁花 ',
- open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
- },
- {
- time: '07:30:46',
- events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
- open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
- }
- ],
- },
- ]
- },
- {
- year: '2019',
- data: [
- {
- day: '06月3日',
- time: '02:22:06',
- events: '烟雾 监测到烟雾',
- type: '安全隐患',
- childs: [
- {
- time: '07:30:46',
- events: '系统发送恢复短信至：刘仁花 ',
- open: '设备单独联系人 - 刘仁花 (13970929216) 于 2020-06-13 07:30:56 短信接收成功',
- },
- {
- time: '07:30:46',
- events: '5小时无人确认预警类型，系统自动确认本次预警类型为 测试/巡检 ',
- open: '预警结果：测试/巡检（相关人员主动测试发出的预警）备注说明：',
- }
- ],
- },
- ],
- }
- ],
-
-
- //详情数据
- detailsData: {
- machineName: '测试设备8',// 设备名称
- machineNumber: '000000000008', //
- user: '南昌大学第一附属医院', // 使用方
- serialNumber: '001241945990', // 序列号
- channel : '1',// 通道号
- deployment : '布防', // 布撤防状态:
- machineType: '一键求助', // 设备类型
- province: ['江西省','南昌市','红谷滩区'], // 省份
- street: '请输入 街道',// 街道
- person : '金同涛', // 负责人
- call: '13237568082', // 负责人电话
- dueDate: '请选择 到期时间', // 到期时间
- payment: '请输入 缴费信息', // 缴费信息
- installation : '请选择 安装时间', // 安装时间
- heartbeat: '2021-04-07', // 心跳时间
+ cascaderItem: ["city", "district"],
+ dicUrl: "/api/blade-system/region/select",
+ span: 1,
+ labelWidth: "0",
+ className: "cityClassSelect",
+ },
+ {
+ disabled: true,
+ row: false,
+ prop: "city",
+ type: "select",
+ placeholder: "地市",
+ props: {
+ label: "name",
+ value: "code",
},
- baseUrl: '',//mapurl
- }
+ dicUrl: "/api/blade-system/region/select?code={{key}}",
+ span: 1,
+ labelWidth: "0",
+ className: "cityClassSelect",
+ },
+ {
+ disabled: true,
+ row: false,
+ prop: "district",
+ type: "select",
+ placeholder: "区县",
+ props: {
+ label: "name",
+ value: "code",
+ },
+ dicUrl: "/api/blade-system/region/select?code={{key}}",
+ span: 1,
+ labelWidth: "0",
+ className: "cityClassSelect",
+ },
+ ],
+ },
+ };
+ },
+ methods: {
+ loginEcharts01() {
+ let echarts = require("echarts");
+ this.myChart = echarts.init(document.getElementById("echart01"));
+ this.myChart.showLoading();
},
- methods:{
- startEcharts01(){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('echart01'));
- let option = {
- title: {
- text: '时间分布'
- },
- tooltip: {
- trigger: 'axis',
- formatter: function(params,ticket,callback) {
- var res = params[0];
- // console.log(res)
- // console.log(params[0])
- return `${res.name}:00-${res.name}:59` + '<br />' + `${res.marker}总预警次数：${res.value}`;
- }
- },
- legend: {
- data: ['总预警次数']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- // toolbox: {
- // feature: {
- // saveAsImage: {}
- // }
- // },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['0', '1' ,'2', '3','4','5' ,'6','7', '8', '9','10', '11','12', '13','14','15' ,'16','17' ,'18','19' ,'20', '21','22','23']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '总预警次数',
- type: 'line',
- stack: '总量',
- data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
- },
- ]
- };
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
+ startEcharts01() {
+ // let echarts = require('echarts');
+ // let myChart = echarts.init(document.getElementById('echart01'));
+
+ let option = {
+ title: {
+ text: "警情月分布",
+ textStyle: {
+ fontSize: 18,
+ fontStyle: "300",
+ fontFamily: "sans-serif",
+ },
},
- modifyl(){//right 修改按钮
- console.log(`top --修改`)
+ tooltip: {
+ trigger: "axis",
+ formatter: function (params, ticket, callback) {
+ var res = params[0];
+ // console.log(res)
+ // console.log(params[0])
+ var Num = res.value == null ? "无" : res.value;
+ return (
+ `${res.name}月份` + "<br />" + `${res.marker}总预警次数：${Num}`
+ );
+ },
},
- handleCheckAllChange(val) {//事件类型全选
- this.checkedCities = val ? cityOptions : [];
- this.isIndeterminate = false;
+ legend: {
+ data: ["总预警次数"],
},
- handleCheckedCitiesChange(value) {//事件类型
- let checkedCount = value.length;
- this.checkAll = checkedCount === this.cities.length;
- this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
},
- resetl(){//事件类型重置
- this.screens = false;
- this.checkedCities = ['未确认', '真实火警', '非真实火警', '测试/巡检', '安全隐患'];
- // console.log(`按钮重置`);
- this.doEvents(this.checkedCities);
+ // toolbox: {
+ // feature: {
+ // saveAsImage: {}
+ // }
+ // },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: [
+ "1",
+ "2",
+ "3",
+ "4",
+ "5",
+ "6",
+ "7",
+ "8",
+ "9",
+ "10",
+ "11",
+ "12",
+ "",
+ ],
+ // , '13','14','15' ,'16','17' ,'18','19' ,'20', '21','22','23']
},
- determine(){//事件类型确定
- this.screens = false;
- console.log(this.checkedCities);
- if(this.checkedCities.length == 0){
- // console.log(`未选择`);
- this.eventDetails = [];
- }else{
- this.doEvents(this.checkedCities);//筛选数据
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ name: "总预警次数",
+ type: "line",
+ stack: "总量",
+ data: this.numdatalist,
+ // , 230, 210,120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
+ },
+ ],
+ };
+ this.myChart.setOption(option);
+ this.myChart.hideLoading();
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ // window.addEventListener("resize", function () {
+ // this.myChart.resize();
+ // });
+ },
+ modifyl() {
+ //right 修改按钮
+ console.log(`top --修改`);
+ },
+ handleCheckAllChange(val) {
+ //事件类型全选
+ this.checkedCities = val ? cityOptions : [];
+ this.isIndeterminate = false;
+ },
+ handleCheckedCitiesChange(value) {
+ //事件类型
+ let checkedCount = value.length;
+ this.checkAll = checkedCount === this.cities.length;
+ this.isIndeterminate =
+ checkedCount > 0 && checkedCount < this.cities.length;
+ },
+ resetl() {
+ //事件类型重置
+ this.screens = false;
+ this.checkedCities = ["未处理", "处理中", "已处理"];
+ // console.log(`按钮重置`);
+ this.doEvents(this.checkedCities);
+ this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
+ // this.eventDetails = this.eventDetaill;
+ },
+ determine() {
+ //事件类型确定
+ this.screens = false;
+ // console.log(this.checkedCities);
+ if (this.checkedCities.length == 0) {
+ // console.log(`未选择`);
+ this.eventDetails = [];
+ this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
+ } else {
+ this.doEvents(this.checkedCities); //筛选数据
+ if (this.checkedCities.length == 3) {
+ this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
+ } else {
+ this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
+ }
+ }
+ },
+ doEvents(ends) {
+ //事件类型数据、
+ var uA = this.eventDetaill; //输入数据
+ var useD = []; //创建缓存
+ for (var key in uA) {
+ //循环数据{year ， data}
+ var uB = uA[key].data,
+ udd = [];
+ // console.log(uB);
+ for (var val in uB) {
+ //循环data
+ var i = 0;
+ // console.log('uB--type:--' + uB[val].type,val);
+ for (var uE in ends) {
+ //循环选中
+ // console.log('uE' + ends[uE])
+ if (uB[val].state == ends[uE]) {
+ //判断数据是否选中
+ i++;
}
-
- },
- doEvents(ends){//事件类型数据、
- var uA = this.eventDetaill;//输入数据
- var useD = [];//创建缓存
- for(var key in uA){ //循环数据{year ， data}
- var uB = uA[key].data,
- udd = [];
- // console.log(uB);
- for(var val in uB){ //循环data
- var i = 0;
- // console.log('uB--type:--' + uB[val].type,val);
- for(var uE in ends){ //循环选中
- // console.log('uE' + ends[uE])
- if(uB[val].type == ends[uE]){ //判断数据是否选中
- i ++;
- }
- }
- // console.log(i);
- if(i == 1){ //选中推入
- udd.push(uB[val]);
- }
+ }
+ // console.log(i);
+ if (i == 1) {
+ //选中推入
+ udd.push(uB[val]);
+ }
+ }
+ // console.log(udd);
+ if (udd.length != 0) {
+ //若data中没有符合的选项，则整个过滤
+ useD.push({
+ year: uA[key].year,
+ data: udd,
+ });
+ }
+ }
+ // console.log(useD)
+ this.eventDetails = useD;
+ },
+ getdata() {
+ // const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}¤t=1&size=10&pid=`
+ // axios.get(url)
+ var that = this;
+ var data = {
+ deviceName: this.myDeviceNumber,
+ current: "1",
+ size: "10",
+ };
+ var imgdadta = {
+ deviceNumber: this.myDeviceNumber,
+ };
+ getdataL(data).then((res) => {
+ var data = res.data.data.records[0];
+ var setimgl = null;
+ //插入图片api获取图片
+ this.stetDetails(data);
+ getImg(imgdadta, "post").then((res) => {
+ // console.log(res.data.data.length != 0)
+ var imgdatas = [];
+ if (res.data.data.length != 0) {
+ imgdatas = res.data.data[0].paddress.split(",");
+ }
+ // console.log(imgdatas);
+ // imgdatas = [ //最多5张照片
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+
+ // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
+ // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG",
+ // ];
+ setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
+ this.stetDetails(data, setimgl);
+ });
+ });
+ },
+ stetDetails(c, imgdata) {
+ this.name = "无数据" && this.a.deviceName;
+ //设备状态
+ var states,
+ d = this.a.dtype;
+ if (d == 0) {
+ states = "掉线";
+ } else if (d == 1) {
+ states = "正常";
+ } else if (d == 3) {
+ states = "故障";
+ } else if (d == 2) {
+ states = "预警";
+ }
+ this.state = states;
+
+ this.evaluate = "空气质量";
+ this.machineCode = "无数据" && this.a.deviceNumber;
+ this.smoke = "烟雾";
+ this.proportion = "电量";
+ this.ReportTime = "最近上报：" + this.a.heartbeat;
+ this.contacts = "无数据" && this.a.oneContacts;
+ this.calls = "无数据" && this.a.onePhone;
+ this.labels = ["无数据"] && [this.a.deviceType];
+ this.imgsl = imgdata;
+ this.deploymentTime = "无数据" && this.a.stime;
+
+ this.detailsData = {
+ machineName: this.a.deviceName, // 设备名称
+ machineNumber: this.a.deviceNumber, //
+ user: this.a.ownership, // 使用方
+ serialNumber: this.a.serialNumber, // 序列号
+ channel: this.a.channelNumber, // 通道号
+ deployment: this.a.devicestate == 1 ? "布防" : "撤防", // 布撤防状态:
+ machineType: this.a.deviceType, // 设备类型
+ province: ["邮编：", this.a.district, ""], // 省份
+ street: this.a.street, // 街道
+ person: this.a.oneContacts, // 负责人
+ call: this.a.onePhone, // 负责人电话
+ dueDate: this.a.expireTime, // 到期时间
+ payment: this.a.pay, // 缴费信息
+ installation: this.a.stime, // 安装时间
+ heartbeat: this.a.heartbeat, // 心跳时间
+ };
+ this.form = c;
+ },
+ getdataG() {
+ var dataG = {
+ deviceNumber: this.myDeviceNumber,
+ // deviceNumber: '000000000008',
+ current: "1",
+ size: "100",
+ };
+ getGalarm(dataG).then((res) => {
+ var ds = res.data.data.records;
+ // console.log(ds)
+ this.setdataG(ds);
+ this.jingqingPdianji = ds;
+ });
+ },
+ setdataG(d) {
+ this.eventDetaill = [];
+ var Num = [];
+ var creates = function (yearnum, datas) {
+ Num.push({
+ year: yearnum,
+ data: datas,
+ });
+ };
+ //按年份划分；
+ for (var i = 2023; i > 2019; i--) {
+ //循环可能的年份
+ var tData = [],
+ useNum = {}; //判断年份是否存在
+
+ for (var key in d) {
+ // 循环原数据
+ var times = d[key].alarmTime, //写入时间
+ y = times.substr(0, 4),
+ da = `${times.substr(5, 2)}月${times.substr(8, 2)}日`,
+ hms = times.substr(11, 9);
+ if (y == i) {
+ useNum[i] = true;
+ tData.push({
+ day: da,
+ time: hms,
+ events: d[key].content,
+ state:
+ d[key].jtype == 0
+ ? "未处理"
+ : d[key].jtype == 1
+ ? "处理中"
+ : "已处理",
+ galarmPeople: d[key].galarmPeople,
+ oneContacts: d[key].oneContacts,
+ alarmPeople: d[key].alarmPeople,
+ onePhone: d[key].onePhone,
+ jjTime: d[key].jjTime,
+ childs: [],
+ });
+ }
+ }
+ if (useNum[i] == true) {
+ // console.log(tData);
+ tData.sort((a, b) => {
+ var aa = a.day.substr(0, 2) + a.day.substr(3, 2),
+ bb = b.day.substr(0, 2) + b.day.substr(3, 2);
+ if (+aa < +bb) {
+ return 1;
+ } else {
+ return -1;
+ }
+ });
+ creates(i, tData);
+ }
+ }
+ for (var k1 in Num) {
+ //添加序号
+ var n2 = Num[k1];
+ for (var k2 in n2) {
+ if (k2 == "year") {
+ continue;
+ }
+ // console.log(n2[k2])
+ var n3 = n2[k2];
+ for (var k3 in n3) {
+ // console.log(+k3 + 1);
+ n3[k3].i = +k3 + 1;
+ }
+ }
+ }
+ // console.log(Num);
+ this.eventDetaill = Num;
+ this.eventDetails = this.eventDetaill; //载入历史事件数据
+ },
+ getdataM() {
+ var dataM = {
+ deviceNumber: this.myDeviceNumber,
+ // deviceNumber: '000000000008',
+ };
+ getnum(dataM).then((res) => {
+ var nums = res.data;
+ this.setdataM(nums);
+ // console.log(nums)
+ });
+ },
+ setdataM(ns) {
+ var dataM = [];
+ for (var key in ns) {
+ dataM.push(ns[key].count);
+ }
+ // console.log(dataM);
+ this.numdatalist = dataM;
+ this.startEcharts01();
+ },
+ getMap() {
+ window.frames[1].init("DetailMap", {
+ x: this.a.jd,
+ y: this.a.wd,
+ });
+ },
+ re() {
+ // var _body = window.parent;
+ // var _iframe1=_body.document.getElementById('detailMap');
+ // window.onbeforeunload=function(){};
+ // _iframe1.contentWindow.location.reload(true);
+ location.reload();
+ },
+ handleCurrentChange(val) {
+ //行点击事件
+ var b = this.jingqingPdianji;
+ for (var key in b) {
+ if (b[key].jjTime == val.jjTime) {
+ // console.log(b[key]);
+ // this.$store.commit("SET_DATAL", this.a);
+ this.$router.push({ path: "/policeTracking/track", query: b[key] });
+ }
+ }
+ // console.log(this.$store.state)
+ },
+ //获取视频
+ openRealVideoBox(serialNumber, channelNumber,deviceNumber,manufacturer) {
+ var that = this;
+
+ if (manufacturer == "HK"){
+ axios
+ .get(
+ `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.data.url;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ // console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
}
- // console.log(udd);
- if(udd.length != 0){//若data中没有符合的选项，则整个过滤
- useD.push({
- year: uA[key].year,
- data: udd
- })
- }
+ });
}
- // console.log(useD)
- this.eventDetails = useD;
- },
- getdata(){
- const url = 'http://localhost:1888/api/blade-jfpts/equipment/equipment/pageDept?deviceName=000000000001¤t=1&size=10&pid='
- axios.get(url)
- .then((res)=>{
- var data = res.data.data.records[0];
- this.stetDetails(data);
- console.log(data);
- })
- },
- stetDetails(d){
- this.name = d.deviceName;
- this.machineCode = d.deviceNumber;
+ });
+ }else{
+ var res = that.a;
+ if (res.deviceName.indexOf("（象湖院区）") != -1 || res.deviceName.indexOf("（东湖院区）") != -1){
+ debugger
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ dom.src = res.netType;
+ dom.play();
+ return;
}
+
+ var newAxios = axios.create({
+ baseURL: "https://web.byisf.com:18000",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded",
+ },
+ });
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" }),
+ },
+ }
+ )
+ .then((res) => {
+ newAxios
+ .get(
+ `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.m3u8;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ // console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
+ }
+ });
+ }
+ });
+ });
+ }
},
- created() {
- this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
- this.getdata();
- },
- mounted(){
- this.startEcharts01();//载入折线图
- this.eventDetails = this.eventDetaill;//载入历史事件数据
- // this.doEvents();//cc
+ },
+ created() {
+ // let loadingInstance1 = Loading.service({ fullscreen: true });
+ // this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
+ // this.a = this.$route.query.deviceNumber == undefined? this.$store.state.dataL.dataLa : this.$route.query;
+ if(this.$route.query.deviceNumber == undefined){
+ this.a = this.$store.state.dataL.dataLa;
+ }else{
+ this.a = this.$route.query;
+ this.$store.commit("SET_DATAL", this.a);//每次都缓存在vuex中，如果没有从正确路径进来，则使用缓存
}
-}
+ // console.log(this.a);
+ this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
+ this.myDeviceNumber = this.a.deviceNumber;
+ // console.log(this.a);
+ // console.log(this.myDeviceNumber);
+ this.getdata();
+ this.getdataG();
+ this.getdataM();
+ },
+ mounted() {
+ this.loginEcharts01(); //载入折线图等待数据
+ // this.eventDetails = this.eventDetaill;//载入历史事件数据
+ // this.doEvents();
+ // var timel = setTimeout(() => {
+ this.$refs.detailMap.onload = () => {
+ // window.frames[1].init("DetailMap", {
+ // x: this.a.jd,
+ // y: this.a.wd,
+ // });
+ if (window.frames[1].init) {
+ this.getMap();
+ } else {
+ // this.re();
+ console.log(`没有找到到window.frames[1].init`);
+ }
+ };
+ },
+ watch: {
+ activeName() {
+ if (this.activeName == "third") {
+ this.i++;
+ this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber,this.a.deviceNumber,this.a.manufacturers);
+ } else {
+ var dom = document.getElementById("real_video_conversationDataL");
+ if (dom.getAttribute("src") != "") {
+ dom.pause();
+ dom.setAttribute("src", "");
+ this.hls.destroy();
+ }
+ }
+ },
+ },
+};
</script>
<style lang="scss" >
-#Lour{
- width: 100%;
+video::-webkit-media-controls-timeline {
+ display: none;
+ }
+#Lour {
+ width: 100%;
+ font-size: 14px;
+ height: 100%;
+ // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
+ // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
+ // font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ // border: 1px solid #000;
+ display: flex;
+ // align-items: center;
+ justify-content: space-around;
+ // position: relative;
+ font-size: 13px;
+ line-height: 20px;
+ font-weight: normal;
+ letter-spacing: 0.01em;
+ -webkit-font-smoothing: antialiased;
+ overflow: hidden;
+ .left {
+ width: 67%;
height: 100%;
- // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
- // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
- font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
- // border: 1px solid #000;
+ // border: 1px solid rgb(236, 24, 24);
+ background-color: #fff;
display: flex;
- // align-items: center;
- justify-content: space-around;
- .left{
- width: 67%;
- height: 100%;
- // border: 1px solid rgb(236, 24, 24);
- background-color: #fff;
+ justify-content: center;
+ flex-direction: column;
+ .top {
+ width: 98%;
+ height: 150px;
+ // border: 1px solid rgb(21, 18, 204);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font-family: PingFangSC-Regular;
+ .top-t,
+ .top-b {
+ width: 95%;
+ // padding-left: 50px;
+ }
+ .top-t {
display: flex;
- justify-content: center;
- flex-direction: column;
- .top{
- width:98%;
- height: 150px;
- // border: 1px solid rgb(21, 18, 204);
- display: flex;
- align-items: center;
- justify-content: space-between;
- .top-l{
- width:400px;
- // border: 1px solid rgb(24, 207, 48);
- div{
- display: flex;
- align-items: center;
- justify-content: space-around;
- font-size: 14px;
- // border: 1px solid rgb(24, 207, 48);
- }
- .left-top{
- padding-left: 15px;
- // border: 1px solid rgb(24, 207, 48);
- }
-
- }
- .left-bot,.top-r{
- font-weight: 900;
- color: rgba($color: #00000075, $alpha: 0.25);
- }
- .top-r{
- width:250px;
- // border: 1px solid rgb(24, 207, 48);
- }
- // border-bottom:1px solid #000;
+ align-items: center;
+ justify-content: space-between;
+ // border: 1px solid rgb(204, 161, 18);
+ .t-t-title {
+ font-size: 14px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ // border: 1px solid rgb(18, 204, 80);
}
- .l-main{
- width:98%;
- height: aotu;
- // border: 1px solid rgb(21, 18, 204);
-
+ .t-t-title2 {
+ position: relative;
+ top: 25px;
+ .t-t-state {
+ .l-t-s-yuan {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 5px;
+ border: 1px solid transparent;
+ }
+ .l-t-s-grey {
+ background-color: #cdcdcd;
+ }
+ .l-t-s-green {
+ background-color: #32c1a2;
+ }
+ .l-t-s-yewllo {
+ background-color: #f49966;
+ }
+ .l-t-s-red {
+ background-color: #f35b5b;
+ }
+ }
}
- .l-main-3{
- border: 1px solid rgba(14, 14, 14,0);
- width: 99%;
- height: 654px;
- padding: 2px;
- .l-m-3-heard{
- margin-left: 20px;
- padding: 10px;
- display: flex;
- align-items: center;
- h2{
- font-weight: 300;
- width: 30%;
- }
- div{
- font-size: 12px;
- color: rgba($color: #000000, $alpha: .6);
- width: 60%;
- position: relative;
- top: 8px;
- left: -20px;
- }
- }
- .l-m-3-main{
- margin: 30px;
- // border: 1px solid rgba(212, 25, 25, 0.829);
- .l-m-3-m-f-pro{
- float: left;
- width: 85px;
- margin-right: 10px;
- }
- // .l-m-3-m-ones{
- // display: flex;
- // align-items: center;
- // justify-content: center;
- // .l-m-3-m-o-keys{
- // width: 80px;
- // height: 25px;
- // }
- // .l-m-3-m-o-value{
- // font-size: 14px;
- // padding-left: 10px;
- // // background-color: rgba($color: #747474, $alpha: .1);
- // width: 300px;
- // height: 25px;
- // line-height: 25px;
- // border: 1px solid rgba(70, 63, 63, 0.829);
- // border-radius: 10px;
- // color: rgba($color: #7a7979, $alpha: .9);
- // }
- // }
- // .l-m-3-m-o-r{
- // float: right;
- // }
- // .l-m-3-m-o-l{
- // float: left;
- // }
- }
-
- }
- .l-main-2{
- width: 98%;
- height: 400px;
- // border: 1px solid rgb(21, 18, 204);
- .l-m-2-heard{
- width: 100%;
- height: 25px;
- // border: 1px solid rgb(24, 204, 18);
- display: flex;
- align-items: center;
- span{
- padding-left: 20px;
- // border: 1px solid rgb(23, 66, 209);
- }
- }
- .l-m-2-main{
- width: 100%;
- height: 370px;
- overflow: scroll;
- // border: 1px solid rg b(23, 66, 209);
- .l-m-2-m-not{
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- position: relative;
- top: 25px;
- img{
- width: 180px;
- height: 180px;
- }
- div{
- font-size: 12px;
- color: rgba($color: #000000, $alpha: .3);
- }
- }
- .l-m-2-m-table{
- .l-m-2-m-tablemain{
- .l-m-2-m-tm-int{
- position: relative;
- top: -10px;
- }
- }
- }
- .l-m-2-m-dat{
- width: 100%;
- height: 300px;
- overflow: scroll;
- // border: 1px solid rgb(23, 66, 209);
- .l-m-2-m-d-data{
- width: 100%;
-
-
- // position: absolute;
- }
- .l-m-2-m-d-bot{
- // border: 1px solid rgb(23, 66, 209);
- // width: 63%;
- height: 25px;
- text-align: center;
-
- // position: fixed;
- // bottom: 0;
- font-weight: 800;
- color: rgba($color: #000000, $alpha: .4);
- background-color: rgba($color: #ffffff, $alpha: 1.0);
- z-index: 100;
- }
- }
- }
- }
+ }
+ .top-b,
+ .t-t-time {
+ // width: 100%;
+ font-weight: 600;
+ color: rgba($color: #6b6b6b, $alpha: 0.5);
+ // border: 1px solid rgb(18, 204, 148);
+ }
+ // .top-l {
+ // position: relative;
+ // top: 40px;
+ // width: 500px;
+ // border: 1px solid rgb(24, 207, 48);
+ // div {
+ // display: flex;
+ // align-items: center;
+ // justify-content: space-around;
+ // font-size: 14px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // }
+ // .left-top {
+ // p {
+ // width: 356px;
+ // // border: 1px solid rgb(37, 37, 37);
+ // }
+ // padding-left: 15px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // .l-t-state {
+ // // border: 1px solid rgb(24, 207, 48);
+ // position: relative;
+ // top: 5px;
+ // left: 50px;
+ // width: 55px;
+ // .l-t-s-yuan {
+ // display: block;
+ // width: 10px;
+ // height: 10px;
+ // border-radius: 5px;
+ // border: 1px solid transparent;
+ // }
+ // .l-t-s-grey {
+ // background-color: #cdcdcd;
+ // }
+ // .l-t-s-green {
+ // background-color: #32c1a2;
+ // }
+ // .l-t-s-yewllo {
+ // background-color: #f49966;
+ // }
+ // .l-t-s-red {
+ // background-color: #f35b5b;
+ // }
+ // }
+ // }
+ // }
+ // .left-bot,
+ // .top-r {
+ // font-size: 14px;
+ // font-weight: 400;
+ // color: #c4c4c4;
+ // // border: 1px solid rgb(24, 207, 48);
+ // }
+ // .left-bot {
+ // position: relative;
+ // left: -68px;
+ // p {
+ // width: 295px;
+ // // border: 1px solid rgb(37, 37, 37);
+ // }
+ // }
+ // .top-r {
+ // width: 250px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // float: right;
+ // position: relative;
+ // top: -50px;
+ // }
+ // // border-bottom:1px solid #000;
}
- .right{
- width: 30%;
- height: 88.5%;
- // border: 1px solid rgb(23, 201, 62);
- background-color: #fff;
+ .l-main {
+ width: 98%;
+ height: aotu;
+ // border: 1px solid rgb(21, 18, 204);
+ }
+ .l-main-3 {
+ border: 1px solid rgba(14, 14, 14, 0);
+ width: 99%;
+ height: 654px;
+ padding: 2px;
+ .l-m-3-heard {
+ margin-left: 20px;
+ padding: 10px;
display: flex;
- // justify-content: center;
- flex-direction: column;
- // margin-top: -5px;
- padding: 20px;
- padding-top: 60px;
- .r-heard{
- font-size: 14px;
- height: 35px;
- border-bottom:1px solid rgba($color: #000000, $alpha: .3) ;
- display: flex;
- justify-content: space-between;
- .r-but-top{
- border: transparent;
- background: transparent;
- color: #29c093;
- position: relative;
- top: -7px;
- font-size: 14px;
- }
+ align-items: center;
+ h2 {
+ font-weight: 300;
+ width: 30%;
}
- .r-body{
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 700px;
- // border: 1px solid rgb(23, 201, 62);
- font-weight: normal;
- font-size: 14px;
- .r-b-top{
- height: 270px;
- display: flex;
- // border: 1px solid rgb(23, 201, 62);
- display: flex;
- flex-direction: column;
- .r-b-t-main{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 0 10px 0;
- }
- .r-b-t-left{
- display: block;
- width: 27%;
- // position:absolute;
- // top: -20px;
- // border: 1px solid rgb(148, 199, 159);
- }
- .r-b-t-right{
- display: block;
- width: 70%;
- // border: 1px solid rgb(49, 74, 184);
- .r-b-t-r-label{
- float: left;
- margin-right: 10px;
- padding: 0 10px 0 10px;
- border: 1px solid rgba($color: #000000, $alpha: .5);
- border-radius: 5px;
- }
- .r-b-t-r-imgsl{
- // width: 68px;
- // height: 68px;
- // border: 1px solid rgb(213, 37, 219);
- float: left;
- padding: 0 3px 0 3px;
-
- }
- }
- }
- .r-b-map{
- height: 400px;
- border: 1px solid rgba(109, 109, 109,0.2);
- #supervisoryMap{
- width: 100%;
- height: 400px;
- }
- }
+ div {
+ font-size: 12px;
+ color: rgba($color: #000000, $alpha: 0.6);
+ width: 60%;
+ position: relative;
+ top: 8px;
}
+ }
+ .l-m-3-main {
+ margin: 30px;
+ // border: 1px solid rgba(212, 25, 25, 0.829);
+ .l-m-3-m-f-pro {
+ float: left;
+ width: 85px;
+ margin-right: 10px;
+ }
+ // .l-m-3-m-ones{
+ // display: flex;
+ // align-items: center;
+ // justify-content: center;
+ // .l-m-3-m-o-keys{
+ // width: 80px;
+ // height: 25px;
+ // }
+ // .l-m-3-m-o-value{
+ // font-size: 14px;
+ // padding-left: 10px;
+ // // background-color: rgba($color: #747474, $alpha: .1);
+ // width: 300px;
+ // height: 25px;
+ // line-height: 25px;
+ // border: 1px solid rgba(70, 63, 63, 0.829);
+ // border-radius: 10px;
+ // color: rgba($color: #7a7979, $alpha: .9);
+ // }
+ // }
+ // .l-m-3-m-o-r{
+ // float: right;
+ // }
+ // .l-m-3-m-o-l{
+ // float: left;
+ // }
+ }
}
-}
+ .l-main-2 {
+ width: 98%;
+ height: 400px;
+ // border: 1px solid rgb(21, 18, 204);
+ .l-m-2-heard {
+ width: 100%;
+ height: 25px;
+ // border: 1px solid rgb(24, 204, 18);
+ display: flex;
+ align-items: center;
+ span {
+ padding-left: 20px;
+ // border: 1px solid rgb(23, 66, 209);
+ }
+ }
+ .l-m-2-main {
+ width: 100%;
+ height: 370px;
+ // overflow: scroll;
+ overflow-y: scroll; //滚动条
+ scrollbar-color: transparent transparent;
+ scrollbar-track-color: transparent;
+ -ms-scrollbar-track-color: transparent;
-.backc{
- background-color: #29c093;
-}
- .grid-content {
- border-radius: 4px;
- min-height: 36px;
+ // border: 1px solid rg b(23, 66, 209);
+ .l-m-2-m-not {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ top: 25px;
+ img {
+ width: 180px;
+ height: 180px;
+ }
+ div {
+ font-size: 12px;
+ color: rgba($color: #000000, $alpha: 0.3);
+ }
+ }
+ .l-m-2-m-table {
+ .l-m-2-m-tablemain {
+ .l-m-2-m-tm-int {
+ position: relative;
+ top: -10px;
+ }
+ }
+ }
+ .l-m-2-m-dat {
+ width: 100%;
+ height: 300px;
+ overflow: scroll;
+ // border: 1px solid rgb(23, 66, 209);
+ .l-m-2-m-d-data {
+ width: 100%;
+
+ // position: absolute;
+ }
+ .l-m-2-m-d-bot {
+ // border: 1px solid rgb(23, 66, 209);
+ // width: 63%;
+ height: 25px;
+ text-align: center;
+
+ // position: fixed;
+ // bottom: 0;
+ font-weight: 800;
+ color: rgba($color: #000000, $alpha: 0.4);
+ background-color: rgba($color: #ffffff, $alpha: 1);
+ z-index: 100;
+ }
+ }
+ }
+ }
}
+ .right {
+ width: 30%;
+ height: 95.5%;
+ // border: 1px solid rgb(23, 201, 62);
+ background-color: #fff;
+ display: flex;
+ // justify-content: center;
+ flex-direction: column;
+ // margin-top: -5px;
+ padding: 20px;
+ padding-top: 60px;
+ .r-heard {
+ font-size: 14px;
+ height: 35px;
+ border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
+ display: flex;
+ justify-content: space-between;
+ .r-but-top {
+ border: transparent;
+ background: transparent;
+ color: #29c093;
+ position: relative;
+ top: -7px;
+ font-size: 14px;
+ }
+ }
+ .r-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 700px;
+ // border: 1px solid rgb(23, 201, 62);
+ font-weight: normal;
+ font-size: 14px;
+ .r-b-top {
+ height: 380px;
+ display: flex;
+ // border: 1px solid rgb(23, 201, 62);
+ display: flex;
+ flex-direction: column;
+ .r-b-t-main {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ // border: 1px solid rgb(148, 199, 159);
+ padding: 10px 0 10px 0;
+ margin-bottom: 5px;
+ }
+ .r-b-t-left {
+ display: block;
+ width: 27%;
+ // position:absolute;
+ // top: -20px;
+ // border: 1px solid rgb(148, 199, 159);
+ }
+ .r-b-t-right {
+ display: block;
+ width: 70%;
+ color: #5d5d5d;
+ font-size: 12px;
+ // border: 1px solid rgb(49, 74, 184);
+ .r-b-t-r-label {
+ float: left;
+ margin-right: 10px;
+ padding: 0 10px 0 10px;
+ border: 1px solid rgba($color: #000000, $alpha: 0.5);
+ border-radius: 5px;
+ }
+ .r-b-t-r-imgsl {
+ // width: 68px;
+ // height: 68px;
+ // border: 1px solid rgb(213, 37, 219);
+ float: left;
+ padding: 0 3px 0 3px;
+ }
+ }
+ }
+ .r-b-map {
+ height: 350px;
+ // border: 1px solid rgba(109, 109, 109, 0.2);
+ #detailMap {
+ position: relative;
+ top: 25px;
+ width: 100%;
+ height: 350px;
+ }
+ }
+ }
+ }
+}
-
-
+.backc {
+ background-color: #29c093;
+}
+.grid-content {
+ border-radius: 4px;
+ min-height: 36px;
+}
//表格cc
- .demo-table-expand {
- font-size: 0;
- }
- .demo-table-expand label {
- width: 90px;
- color: #99a9bf;
- }
- .demo-table-expand .el-form-item {
- margin-right: 0;
- margin-bottom: 0;
- width: 50%;
- }
-</style>
\ No newline at end of file
+.demo-table-expand {
+ font-size: 0;
+}
+.demo-table-expand label {
+ width: 90px;
+ color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+ margin-right: 0;
+ margin-bottom: 0;
+ width: 50%;
+}
+video::-webkit-media-controls-timeline {
+ display: none;
+}
+</style>
--
Gitblit v1.9.3