<template>
|
<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="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
|
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="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 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>
|
</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="">
|
|
</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
|
:data="value.data"
|
style="width: 100%">
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-form label-position="left" inline class="demo-table-expand">
|
<el-table
|
:data="props.row.childs"
|
style="width: 100%;"
|
class="l-m-2-m-tm-int"
|
>
|
<el-table-column
|
label="时间"
|
prop="time"
|
width="100px"
|
>
|
</el-table-column>
|
<el-table-column
|
label="事件"
|
prop="events">
|
</el-table-column>
|
<el-table-column
|
label="详情"
|
prop="open">
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</template>
|
</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="events">
|
</el-table-column>
|
<el-table-column
|
label="类型"
|
prop="type"
|
>
|
<template slot-scope="props">
|
<el-tag>{{ props.row.type }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div> -->
|
|
<!-- 时间轴历史记录 待选-->
|
|
<!-- <div class="l-m-2-m-not" v-show="!isRecord">
|
<img src="https://city.sensoro.com/assets/img/no-history.png" alt="">
|
<div>无事件记录</div>
|
</div>
|
<div class="l-m-2-m-dat" v-show="isRecord">
|
<div class="l-m-2-m-d-data">
|
<el-timeline style="position: relative;left: -20px;"
|
v-for="(value,index) in eventDetails"
|
:key = 'index'
|
>
|
<div>{{value.year}}</div>
|
<el-timeline-item
|
v-for="(val,keys,idx) in value"
|
:key = "idx"
|
v-show="keys != 'year'"
|
:timestamp="keys"
|
placement="top"
|
>
|
<el-tag class="l-m-2-m-d-data-crad"
|
style="position: absolute;top: -10px;left: 400px;"
|
>{{val.type}}</el-tag>
|
<el-collapse v-model="activeNames" @change="handleChange">
|
<el-collapse-item :title="`${val.time} : ${val.events}`" name="1"
|
v-show="val.showl"
|
>
|
<el-collapse v-model="activeNames" @change="handleChange"
|
v-for="(vals,idxs) in val.childs"
|
:key="idxs"
|
style="position: relative;left: 20px;"
|
>
|
<el-collapse-item :title="`${vals.time} : ${vals.events}`" name="1">
|
<div style="position: relative;left: 20px;">{{vals.open}}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-collapse-item>
|
</el-collapse>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<div class="l-m-2-m-d-bot">无更多记录</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.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"
|
v-model="detailsData.user"
|
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-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>
|
</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>
|
</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"
|
: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 { 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 {
|
// timeL: "",
|
a: "",
|
myDeviceNumber: "",
|
videoUrl: "",
|
//折线图
|
myChart: "",
|
numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
|
|
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",
|
},
|
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",
|
},
|
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();
|
},
|
startEcharts01() {
|
// let echarts = require('echarts');
|
// let myChart = echarts.init(document.getElementById('echart01'));
|
|
let option = {
|
title: {
|
text: "警情月分布",
|
textStyle: {
|
fontSize: 18,
|
fontStyle: "300",
|
fontFamily: "sans-serif",
|
},
|
},
|
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}`
|
);
|
},
|
},
|
legend: {
|
data: ["总预警次数"],
|
},
|
grid: {
|
left: "3%",
|
right: "4%",
|
bottom: "3%",
|
containLabel: true,
|
},
|
// 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']
|
},
|
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++;
|
}
|
}
|
// 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;
|
}
|
}
|
});
|
}
|
});
|
}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() {
|
// 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" >
|
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%;
|
// border: 1px solid rgb(236, 24, 24);
|
background-color: #fff;
|
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: center;
|
flex-direction: column;
|
font-family: PingFangSC-Regular;
|
.top-t,
|
.top-b {
|
width: 95%;
|
// padding-left: 50px;
|
}
|
.top-t {
|
display: flex;
|
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);
|
}
|
.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;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
.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;
|
align-items: center;
|
h2 {
|
font-weight: 300;
|
width: 30%;
|
}
|
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;
|
|
// 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%;
|
}
|
video::-webkit-media-controls-timeline {
|
display: none;
|
}
|
</style>
|
