jfpt-Vue.git - Gitblit

			@@ -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>
			&nbsp:&nbsp
			<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}&current=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&current=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>
			.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>