<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>
|
<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">
|
<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 ="#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>
|
</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>
|
|
|
<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 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"
|
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}}</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.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-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="通道号">
|
<el-input
|
disabled="true"
|
v-model="detailsData.channel"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="布撤防状态">
|
<el-input
|
disabled="true"
|
v-model="detailsData.deployment"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="设备类型">
|
<el-input
|
disabled="true"
|
v-model="detailsData.machineType"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="省份">
|
<div
|
v-for="(val,index) in detailsData.province"
|
:key="index"
|
>
|
<el-input
|
disabled="true"
|
class="l-m-3-m-f-pro"
|
v-model="detailsData.province[index]"
|
autocomplete="off"
|
></el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="负责人">
|
<el-input
|
disabled="true"
|
v-model="detailsData.person"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="街道">
|
<el-input
|
disabled="true"
|
v-model="detailsData.street"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="负责人电话">
|
<el-input
|
disabled="true"
|
v-model="detailsData.call"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="到期时间">
|
<el-input
|
disabled="true"
|
v-model="detailsData.dueDate"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="缴费信息">
|
<el-input
|
disabled="true"
|
v-model="detailsData.payment"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="安装时间">
|
<el-input
|
disabled="true"
|
v-model="detailsData.installation"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="心跳时间">
|
<el-input
|
disabled="true"
|
v-model="detailsData.heartbeat"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-row>
|
</el-form>
|
</el-row>
|
|
<!-- <div
|
v-for="(value,keys,index) in detailsData"
|
:key="index"
|
:class="[{'l-m-3-m-ones': true}, (index % 2) == 1? 'l-m-3-m-o-r':'l-m-3-m-o-l']"
|
>
|
<div class="l-m-3-m-o-keys">{{keys}}</div>
|
 : 
|
<div class="l-m-3-m-o-value">{{value}}</div>
|
</div>
|
<div style="clear: float"></div> -->
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</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"
|
>
|
<!-- <img :src="value" alt=""> -->
|
<el-image
|
style="width: 68px; height: 68px"
|
:src="value"
|
:preview-src-list="imgsl">
|
</el-image>
|
</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>
|
</div>
|
</div>
|
</template>
|
<script>
|
import axios from 'axios'
|
import echarts from 'echarts'
|
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,
|
|
//列表数据：
|
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",
|
}
|
]
|
},
|
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', // 心跳时间
|
},
|
baseUrl: '',//mapurl
|
}
|
},
|
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()});
|
},
|
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);
|
},
|
determine(){//事件类型确定
|
this.screens = false;
|
console.log(this.checkedCities);
|
if(this.checkedCities.length == 0){
|
// console.log(`未选择`);
|
this.eventDetails = [];
|
}else{
|
this.doEvents(this.checkedCities);//筛选数据
|
}
|
|
},
|
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(udd);
|
if(udd.length != 0){//若data中没有符合的选项，则整个过滤
|
useD.push({
|
year: uA[key].year,
|
data: udd
|
})
|
}
|
}
|
// console.log(useD)
|
this.eventDetails = useD;
|
},
|
getdata(){
|
const url = 'http://localhost:1888/api/blade-jfpts/equipment/equipment/pageDept?deviceName=000000000001¤t=1&size=10&pid='
|
axios.get(url)
|
.then((res)=>{
|
var data = res.data.data.records[0];
|
this.stetDetails(data);
|
console.log(data);
|
})
|
},
|
stetDetails(d){
|
this.name = d.deviceName;
|
this.machineCode = d.deviceNumber;
|
}
|
},
|
created() {
|
this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
|
this.getdata();
|
},
|
mounted(){
|
this.startEcharts01();//载入折线图
|
this.eventDetails = this.eventDetaill;//载入历史事件数据
|
// this.doEvents();//cc
|
}
|
}
|
</script>
|
<style lang="scss" >
|
#Lour{
|
width: 100%;
|
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;
|
display: flex;
|
// align-items: center;
|
justify-content: space-around;
|
.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: 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;
|
}
|
.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: .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;
|
}
|
}
|
}
|
}
|
}
|
.right{
|
width: 30%;
|
height: 88.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: .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: 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;
|
}
|
}
|
}
|
}
|
}
|
|
.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>
|
